-
Notifications
You must be signed in to change notification settings - Fork 3
Open
Labels
CDC COVID-19Issues logged for the CDC COVID-19 siteIssues logged for the CDC COVID-19 sitefeatureNew feature or requestNew feature or request
Description
Feature
Instead of using ARIA to associate text with a form element, use the label element so that it offers better accessibility for people with motor impairments, while still helping screen reader users.
Proposed
Users would be able to click on the label text to put their cursor in the Email Address box.
Reason
People with limited dexterity would have an easier time putting their cursor in the Email Address input box below the "Get email updates about COVID-19" text. People with motor impairments often struggle with putting their cursor in form elements. This would make it easier for people to click the text or the box to get their cursor in the box.
Suggested Code
Note the addition of the label elements with the for attribute associated with the input box's id attribute.
<p id="emailDescription"><label for"gov-d-email">Get email updates about COVID-19</label></p>
<input id="gov-d-email" title="Email Address" name="userID" type="email" class="form-control" placeholder="Email Address" required="required" aria-describedby="emailDescription" style="">
Additional References
- WCAG 2.1 technique: https://www.w3.org/WAI/WCAG21/Techniques/html/H44
Metadata
Metadata
Assignees
Labels
CDC COVID-19Issues logged for the CDC COVID-19 siteIssues logged for the CDC COVID-19 sitefeatureNew feature or requestNew feature or request