Input (text fields)

Referred HTML Tags

<input type="text">, <input type="email">, <input type="tel">, <input type="password">, <textarea>

Accessible name

Any interactable HTML element requires an accessible name. This is the name that's announced or displayed by assistive technologies. Traditionally, input elements get their accessible name from a dedicated labeling element (e.g. <label>) that’s linked to the input element by its id name.

1<label for="f_name">First Name:</label>
2<input type="text" id="f_name" />

However, if you don’t want to use a visual label or are constrained from using the <label> element, input elements can get their accessible name from labeling attributes as well (e.g. aria-label). Note that you should not depend on a placeholder attribute as an accessible name since not all screen readers read it when the input field is not empty. learn more about accessible names here

Color contrast

The WCAG's AA conformance level requires that the color contrast ratio of texts and their backgrounds are at least 4.5:1 Where the font size is larger than 24 CSS pixels (e.g., font-size: 24px), or where the text is bold and larger than 18.5 CSS pixels, a contrast ratio of 3:1 is sufficient. Learn more about color contrast here, or test your contrast ratios using the WCAG Contrast Checker.

Visual focus indicator

Any interactable HTML element must have a discernible focus indication. People who use only the keyboard or other sequential navigation devices must get an indication of the currently active item. Unlike mouse users who point and click directly on elements, or screen reader users who receive a voice prompt about the active element, keyboard users depend on a visual indication that marks the active element. Most user agents have a default focus indicator. It is the author's responsibility to provide an alternative focus indication if the default one is overriding. Note that focus indication must not be uttered only by a change of color as visually impaired or color blind people may find it difficult to distinguish it. The visual focus indicator is particularly important for text inputs as it signals the user when he can type into the input field.

Required WAI-ARIA Attributes

When the input field is mandatory and you are not using the default HTML5 form validations (the required attribute), you must use an aria-required="true" attribute instead to indicate it to screen reader users.

Equivalent WAI-ARIA Role

role=”textbox”

Required properties/attributes/context

Ensure that the content of the element is editable (e.g. contenteditable=”true”) so it can actually receive and display the string input.
Ensure that the element has an accessible name
If the text field is mandatory, use the aria-required="true" attribute to indicate it to screen reader users (a simple required won’t work with a non-semantic input). Note that the aria-required attribute is meant only to inform the user that this field is mandatory; it will not enable the default HTML5 validations.
On a “disabeled” state:
- Ensure that the contenteditable is set to “false”
- Ensure that the element has an aria-disabeled=”true” attribute
If the text field should act as a <textarea> ensure to have an aria-multiline=”true” attribute to indicate it to screen reader users.

Semantics Enhancements

These are WAI-ARIA attributes and patterns that support common specific use cases of the element.

role=”searchbox”

The searchbox role is equivalent to <input type=”search” />. This role was meant to indicate to the user that the text field is meant to perform a search on the website. The searchbox role does not require any additional attributes besides the ones detailed regarding the textbox role.