Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
-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.
For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “×” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”. +
+When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implicit or explicit role that supports naming.
The aria-label attribute can also be used to provide an accessible name for custom controls that are not labelable elements, and cannot therefore use a <label> element with the for attribute.
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.
For instance, aria-label or aria-labelledby are the most suitable way to provide an accessible name when a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea> in order to provide a richer text editing experience.
On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.
<div id="box">
- This is a pop-up box.
- <button aria-label="Close">X</button>
-</div>Working example: Close button example. -
- +On a page, a button displays a dialog (a <div> element) with additional information. The “close” element is implemented as a <button> containing merely the symbol “×”. The property aria-label="close" is used to provide an accessible name to the button.
<dialog id="dialog">
+ This is the content of the dialog.
+ <button aria-label="Close">×</button>
+</dialog>Working example: Close button example. +
+<div role="group" aria-labelledby="groupLabel">
+
+ A phone number with multiple fields
+
+ <div role="group" aria-labelledby="groupLabel">
<span id="groupLabel">Work Phone</span>
+<input autocomplete="tel-country-code" type="number" aria-label="country code">
<input autocomplete="tel-area-code" type="number" aria-label="area code">
<input autocomplete="tel-local" type="number" aria-label="subscriber number">
</div>
-
+
- For elements that use aria-label:
-
aria-label attribute properly describes the purpose of an element where user input is required
-For elements that use the aria-label attribute:
+
aria-label attribute properly describes the purpose of an element where user input is required
+