Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 4.1.2: Name, Role, Value (Sufficient).
For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.
In some situations, elements can be given the attribute
aria-label to provide an accessible name for situations when there is no visible label due to
a chosen design approach or layout but the context and visual appearance of the control
make its purpose clear.
In other situations, elements can be given the attribute
aria-label to provide an accessible name when the native HTML labeling element is not supported
by the control - for example, when a
div set to
contentEditable is used instead of native form elements such as input type="text" or
textarea in order to provide a richer text editing experience.
Example 2: A phone number with multiple fields
<div role="group" aria-labelledby="groupLabel"> <span id="groupLabel>Work Phone</span> +<input type="number" aria-label="country code"> <input type="number" aria-label="area code"> <input type="number" aria-label="subscriber number"> </div>
Resources are for information purposes only, no endorsement implied.
For elements that use
- Check that the value of the
aria-labelattribute properly describes the purpose of an element where user input is required
- #1 is true.