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


  • 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".


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.

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.


Hotel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lobortis leo.



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.

Click for map Incorrect example
View map Correct example


  • 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.

Tools & Resources