Summary
Include appropriate alt text, focus styles, and HTML and ARIA tags in links.
Impact
Inaccessible links generally result from one or more of the following factors.
- The link text or alternative text is insufficient for determining the purpose of the link or the resource to which it points.
- The purpose of the link is dependent on the context in which it appears but no programmatic association has been made.
- The link appears multiple times.
- The link or button is not a standard HTML element and requires the use of a mouse.
In addition, users of screen readers and text-only browsers must click through links and other pieces of content that are usually included at the top of webpages—such as a banner image, every menu and submenu item, and a search bar—before they get to the main content.
Dos and Don'ts
Follow Core Skills Link Dos and Don'ts
Do
Link text that is meaningful out of context, concise, and descriptive.
Don't
- Don't make users have to click a link just to find out where it goes.
- Avoid repetitious links.
Learn more about writing effective links.
Programmatically Associate a Link with Its Context
Links, buttons, and other controls that are not standard HTML elements and that require the use of a mouse will be inaccessible to users of screen readers, keyboard-only navigation, and speech recognition programs, because the links:
- Don't receive focus when using the tab key
- Cannot be activated from the keyboard
- Will not appear in the list of links generated by a screen reader
- May be difficult or impossible to target and activate
Do
Use the aria-describedby attribute to programmatically associate links and other controls with the context within which they appear.
Use link text that identifies the purpose of the link without relying on context whenever possible because older browser and screen reader versions may not support ARIA.
Don't
Don't depend on context to convey the purpose of a link without also programmatically associating the link with its context.
Don't use non-standard HTML in a link or button that requires the use of a mouse.
Change the Appearance of a Link When It Has Focus
Indicating when a link has focus may be an important usability and accessibility factor for users because it:
- Enables users of keyboard-only navigation to track progress.
- Provides feedback to users who have difficulty controlling a mouse when the mouse is on a link.
- Simplifies identification of an active link for users with low vision.
- Provides all users with feedback that a word, phrase, or block of text constitutes a link.
Do
Ensure visual link focus indication, regardless of the navigation technique being used, by including the following CSS pseudo-classes in the following order:
- Focus
- Hover
- Active
Don't
Don't disable the browser default indicator.
Don't specify only the CSS hover effect (it is mouse dependent).
Include Skip Links to the Main Content
When you add skip links to webpages, you’re providing an easy way for users to get to the content they want without out having to read or tab through repetitive content on a page.
Traditionally, skip links were only made available to screenreader users. However, the current standards state that these links must be available to all users, including users who use a visual display (like a monitor).
Do
Include at least one skip link on each webpage or web application screen that allows a user to skip over content that recurs on many pages of the site, such as the maroon header bar and the hero image or banner at the top of many University webpages.
Include a skip link that allows the user to skip over recurring navigation links.
Don't
Don't include skip links for users who don't need them, such as users who navigate pages using a mouse. Make skip links available only when the user tabs through the content with a keyboard.