How can you inform screen reader users that a form field is required? Here are two solutions.
Solution #1:
Include the word “required” in the form <label>.
<label for=”email”>Email (required)</label>
<input id=”email” name=”email” type=”text”>
According to the folks at Deque University:
“Sighted users see the word and screen reader users can hear the word when the label is read to them. Older screen readers that do not support HTML 5 or ARIA may not say ‘required’ if the word is not published in the <label>.”
Find out more about accessible required form fields at Deque University
Solution #2:
Create a CSS class that hides the screen reader message visually (off screen), then include it in a span where the message can be read out loud by the screen reader.
CSS
.screen-reader-only {
position: absolute;
left: -99999px;
height: 1px;
width: 1px;
overflow: hidden;
}
HTML Form Label
<label for=”email”>
Email <span class=”screen-reader-only”>Email address is required</span>
</label>
<input id=”email” name=”email” type=”text”>
===
WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:
WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints
Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos
===