Links

Links

Links are commonly used to quickly navigate a site when someone is using Assistive Technology (AT). Often, screen reader users won't read through an entire page to find what they are looking for. They simply move from link to link.

Things become problematic when links only make sense with context. Links such as 'Click Here' or 'Read more' don't make sense without that visual context. It's important that we inspect our sites for these types of links. These links can be made accessible using title or ARIA attributes, but this isn't ideal. The ideal method for making these links accessible is just to write better link text.

The other issue screen reader and keyboard users come across is lengthy nav bars. These are usually made up of a list of links and with compound menus. They can be quite lengthy to tab through. To alleviate these pains, a skip navigation link should be provided. This is the first link on the page and jumps to an anchor with a tabindex='-1'.

Testing

Unique Links

1. Identify all links on the page.
2. Identify links with the same text.
3. If the link destinations are different, check for title or ARIA attributes that distinguish them.
4. Don't use "click here" as link text
   • When calling the user to action, use brief but meaningful link text that:
   • provides some information when read out of context
   • explains what the link offers
   • doesn't talk about mechanics
   • doesn't talk about mechanics
5. Check for the title or ARIA attributes to provide context or additional off-screen text.

Links that open in a New Window

1. Identify links that open in new windows.
2. Check that target='_blank'.
3. Verify that some indication is given programmatically.
   • <a href='#' target='_blank' aria-label='Opens in new window'>
   • <a href='#' target='_blank' title='Opens in new window'>
   • <a href='#' target='_blank'>Link<span class='sr-only'>Opens in new window</span></a>