Links and repetitive content
Links are commonly used to quickly navigate a site when someone is using assistive technology. Often, screen reader users won’t read through an entire page to find what they are looking for. They may simply move from link to link.
Things become problematic when links only make sense with additional 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 best method for making links accessible is 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 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 focusable element on the page and jumps to an anchor with a tabindex='-1'
.
Testing
Unique links
- Identify all links on the page.
- Identify links with the same text.
- If the link destinations are different, check for
title
orARIA
attributes that distinguish them.
- If the link destinations are different, check for
- Identify links with generic text (‘Click here’, ‘Read more’).
- Check for the
title
orARIA
attributes to provide context or additional off-screen text.
- Check for the
Links that open in a new window
- Identify links that open in new windows.
- Check for links with
target='_blank'
. - Verify that an indication is given accessibly. Some examples are:
<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>
Skip navigation
- First, compare the pages on the site for links that are repeated at the beginning of the tab order.
Skip Navigation
is not needed if repetitive nav links are not used.
- If the
Skip Navigation
link is not visible, ensure it becomes visible when it has focus. - Find the target of the skip navigation link.
- Verify the target is a valid
id
. - Verify the target is after the repetitive content and before meaningful content.
- Verify the target has a
tabindex='-1'
or is included in the tab order (such as a link or a button). - This ensures the element will receive focus when used.
- Activate the
Skip Navigation
link. - If visual focus is after the repetitive content, the test is complete.
- If there is no visual focus, tab again to verify focus is after the repetitive content.
Examples
Passes
Home Click Here
Keyboard Access Click Here
Home <a href='../' title='home'>Click Here</a>
Keyboard Access <a href='../keyboard/' aria-label="Keyboard Access">Click Here</a>
These links are not unique, but the
title
attribute in the first link gives a screen reader user context and thearia-label
provides the context in the second link.
Skip navigation
//This is the code used on this guide
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
...
<main id="main-content" tabindex="-1" ...>
.usa-skipnav {
font-family: Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
font-size: 1.08rem;
line-height: 1.6;
color: #005ea2;
text-decoration: underline;
background: transparent;
left: 0;
padding: 0.5rem 1rem;
position: absolute;
top: -3.8rem;
transition: 0.2s ease-in-out;
z-index: 100;
}
.usa-skipnav:focus {
z-index: 9999;
}
.usa-skipnav:focus, .usa-skipnav.usa-focus {
background: #fff;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-in-out;
}
.usa-skipnav:focus {
outline: 0.25rem solid #2491ff;
outline-offset: 0;
}
.usa-skipnav:active {
color: #11181d;
}
This is how the 'Skip Navigation' was achieved for the accessibility site. Feel free to use for your own site.