ACCESSIBLE FORMS: Required Fields and Screen Readers – Two Solutions

Cartoon Illustration of HTML Forms

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

===

ACCESSIBLE FORMS: A Select “Jump Menu” Tip

Illustration of HTML Select Menus

“Jump menus” are select drop down menus that automatically submit once an option is selected. This occurs due to use of the JavaScript onchange event handler.

Problem is these types of select lists cannot be operated from the keyboard if they have an onchange handler that performs navigation. Why? Because the handler fires as the user moves the selection up and down using the keyboard. Moving through list items using the arrow keys will jump to another page or website location unexpectedly. This does not comply with WCAG 2.1 Guideline 3.2.2 – On Input (Level A).

SOLUTION: To make the select menu keyboard accessible, allow the user to trigger the navigation via a Submit button. This way the user has access to all the options in the menu using the up/down arrow keys, and, when ready, can press the Go (Submit) button that will trigger a processing script for successful navigation.

Select Jump Menu with Go Button

===

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

===