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

===