2.1 Button and link labels are meaningful and concise
Just like sighted users may scan the page quickly for interactive elements, screen reader users do the same. This can be done by either tabbing through the page or by bringing up a list of all links/buttons. Because of this it should be clear what each does without extra investigation. This also helps our users with cognitive issues.
We also want to make sure that it's very clear to the user what they are choosing. A sighted user can quickly get visual cues from physically adjacent content but this is more time consuming for screen reader users. Especially when making decisions that progress a user through the path it should be clear what decision they are making.
WCAG 2.4.4: Link Purpose (In Context) Opens in a new window
WCAG 2.5.3: Label in Name Opens in a new window
Details
- The user should be able to tell the purpose of each link and button using only the label and any text in the same paragraph.
- Every link and button on the same page should have a unique accessible label, unless they do the same thing.
- The accessible label should include any visible label text.
- Do not use large pieces of information, for example entire listings, as link text.
- Do not use action words like "click" in the label.
- Do not use content-free labels such as "here" or "more".
Examples
Concise link text
With large listings where the entire thing is visually a link, it can be confusing to a screen reader user if it is all audibly a link as well. If it is all a link it will be both unclear what the link does, as well as it limits the users ability to read through the content. Instead the link should come at the end of the listing, with simple link text, and CSS should be used to visually wrap it.
Test Hotel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lobortis leo.
$350
Search Result Listings
When we have search result listings with buttons to select, we need to make sure that the buttons are specific to which result they are selecting. The exact differentiating text is up to UX though we would like to stay as consistant as possible between POSa. We recommend including the name of the listing as well as the price as those are two key peices of information.
Hotel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lobortis leo.
$350
Hotel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lobortis leo.
$450
Click
Users know how to trigger interactive elements using their specific tool, which may not be a mouse. Mentioning a specific mechanic in a label can be annoying for users who may not be using that specific tool, as well as isn't needed.
Tips
- Remove everything but the buttons and links from your page. Can you distinguish between them? Can you predict the result of triggering them? If not, change them.
- Unique text can be created using visually hidden text or by using ARIA attributes such as aria-labelledby.