CDC COVID-19 - Feature: Use label element to associate text with form element

[AccessForAll]

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