Labels
Accessible labels are necessary to make several other types of elements understandable, such as inputs, widgets, and ARIA landmark regions. Accessible labels that create a delightful experience are:
- Concise -- 1 to 3 simple words. Only occasionally as many as 5 words.
- Meaningful -- accurately convey the purpose of the element.
There are many ways to label an interactive element such as a button or an input field, which you will see below. You can check the results of adding the various label types by testing in your screen reader too!
Self-labeled​
Some elements, like links and buttons with display text, label themselves. In this case, screen reader users and all other users can perceive the label.
Using <label>​
If we put text on the screen near an input such as a text field, the screen reader cannot reliably pick up on that visual association. It needs to be told which nearby text is the associated label. One way to do this is with the label element.
Using 'aria-labelledby'​
The HTML label works only for HTML inputs. If we make a control out of other elements by using ARIA, we can instead use aria-labelledby.
Using 'aria-label'​
In rare cases, the purpose of the input is visually obvious in context, but it's not obvious to someone using a screen reader. We can provide contextual detail with aria-label.
Using 'aria-describedby'​
Occasionally, a label by itself is insufficient information. If help text is present in the UI, we can identify it as an accessible description by using aria-describedby.
Note: This date will be recorded.
Exercise: Inaccessible button​
Add an aria-label to the button below and label it 'search' to make it accessible.
Exercise: Inaccessible interactive elements​
Add an aria-labelledby to the input field below and point it to the id of the prompt span.
Also, add an aria-describedby to the input field and point it to the description below to
make it accessible.
Your credentials will not be stored.