This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE) to help identify accessibility issues.
Error Types: Errors must be fixed. Alerts should be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content.
Best Practice: Using concise, descriptive, and meaningful link text enables people to understand the link’s destination or function.
Assistive technology: Assistive technology, such as screen readers, can list all the links on the web page, allowing people to read the link text out of context. Ambiguous and sometimes redundant link text hinders people from selecting the right link.
Concise, Descriptive, Meaningful Link Text
Ambiguous Link Text
Ambiguous link text doesn’t provide enough information to know the link’s destination or function. The surrounding text may provide clues. With a link list used in assistive technology, there isn’t enough context to know the link’s ambiguous destination or function.
Example:
Click here for Accessible Links: Best Practices for Hyperlink Accessibility.
Example link text:
- “button”,
- “click here”,
- “click”,
- “continue”,
- “continue reading”,
- “details”,
- “here”,
- “link”,
- “more”,
- “more…”,
- “more details”,
- “read more”, or
- “this page”
Error Type: Alert
Best Practice: Link text should be unique and descriptive. When taken out of context, people know where the link will take them.
Redundant Link Text
Redundant link text is the same link text with the same destination. Depending on context, it may be redundant to include both links. It will depend on the links’ placement within the web page whether they might be redundant or not.
Example: Three links (linked image, link in caption, and link in the paragraph) all going to the same destination.
Washington State University is a top research university dedicated to solving problems and improving lives.
Error Type: Alert
Best Practice: This is case by case. An accessibility checker may note redundant link text, but its proximity to each other may or may not warrant the redundant link indication.
Ambiguous Redundant Link Text
The same link text, but to a different destination, is ambiguous and redundant. People would expect the same link to take them to the same destination.
Example: The same text is going to two different locations, Washington State University and the Campuses web page.
Washington State University is a public research university dedicated to improving lives by serving the public good. Our six campuses at Washington State University provide outstanding learning opportunities—and each offers its own distinct student environment.
Error Type: Alert (although WAVE will not catch this one.)
Best Practice: Ensure that link text to different destinations is not the same link text.
URL Link Text
Example: This link text is the URL. Assistive technology would output, “H T T P slash slash you to be slash S F E U K I N 7 Q S I equals H B Y 4 Z J R D Y R V K 4 P K”
The assistive technology does not read the colon, period, underscore, dash, or question mark.
How to write better link text: https://youtu.be/_SfEUKlN-7Q?si=Hby4zjrdY-RVK4Pk
Error: Alert
Best Practices: Short URLs, like soemthing.wsu.edu or go.wsu.edu/something provide succinct information without the URL protocol (https://) to draw out assistive technology reading the link text.
Links to Documents
Including the electronic document type within the link text helps everyone know more about the link’s destination or function. The document type information within the link helps everyone know the document type and expected behavior of the link.
Example: You can not tell that the following link is to a PDF.
Error Type: Alert
Best Practice: Include the document type within the link text to let everyone know the document type. Use the WAVE Tool as a check that the icon matches the document type in the link text.
Document types to include within the link text includes:
Note: Be consistent with how you identify the document type.
- Word: (Word), (MS Word), (DOC), (.doc), (DOCX) (.docx)
- Excel: (Excel), (MS Excel), (XLS), (.xls), (XLSX), (.xlsx), (CSV), (.cvs)
- PowerPoint: (PowerPoint), (MS PowerPoint), (PPT), (.pptx), (PPTX), (.pptx)
- PDF: (PDF), (.pdf)
- Document: (.txt), (.rtf), (.wpd), (.ods), (.odt), (.odp), (.sxw), (.sxc), (.sxd), (.sxi), (.pages), (.key)
- Audio/Video: (.flv), (.mov), (.mp3), (.mp4), (.wav)
Broken links
Accessibility checkers can identify empty links and some broken links, but they may not detect bad links. Regularly check web pages for broken and bad links.
Example:
Skip Links (Broken) (Usually these are link that jump to the navigation or main content.)
broken same page link (jump links)
Error: Errors and Alerts
Best Practice: Check links frequently for broken and bad links.
Link Checkers
Check my Links: Available for Chrome and Edge
Broken Link Checker: Chrome, Edge, and FireFox
Opens in a New Tab
It is important to let people know the link will open into a new tab. Assistive technology will not indicate a link has opened in a new tab. For people using assistive technology, they must discover the link opened into a new tab, then take the extra steps to return to the previous web page. There are several options in CSS to indicate that a link opens in a new tab. But, including this text within the linked text provides the information to everyone and benefits everyone.
Resource: Open in New Tab (opens in new tab)
Error Type: Alert
Best Practice: Allow users to choose whether to open the link in a new tab or not. Or, let everyone know that the link opens in a new tab.
Underlined Text
There are requirements for how link text is visually distinguishable from other text. It is important to reserve underline for only linked text. When people see underlined text, it is implied that it is linked text. People are more likely to think the color or other styling for the link is missing than that the underlined text is not a link.
Example:
- Not a link
- Link Appearance: Underlining
Error: Alert
Best Practice: Do not underline text. Reserve the underline decoration for the link only.
ARIA and Link Text
ARIA is a way to supplement web applications to make them more accessible. Note, ARIA is not meant to replace or fix bad HTML elements.
There are several elements in the Web Design System that use ARIA to provide a more accessible experience.
ARIA Hidden
Oops — Ignore That Email Invitation To A Cookie Monster Cat Party, U.S. Embassy Says
This whole card is linked. With ARIA hidden, the link surrounding the image, the image, and the alt text are hidden from screen readers.
ARIA Label
The button in the banner has an ARIA label to supplement the ambiguous link text.
This button uses an ARIA label to fix the ambiguous link text.
Best Practice: Use descriptive link text rather than using the ARIA label.
Accessibility Checks
This list of accessibility checks for Core Concept Links includes whether it is an automatic check or manual check
- Link text is concise, meaningful, and describes the link destination. Links for the same link destination have the same link text. [automatic & manual]
- Links to different destinations use different link text. [automatic & manual]
- Linked image’s alternative text indicates the link destination and not a description of the image. [manual]
- Link indicates it opens into a new tab when it does (web pages only). [manual]
- Underline, when used, is used only for indicating text links. [automatic]
- Links are visually distinguishable from the rest of the text content. [manual]
- Links have a visible link focus indicator (web pages only). [manual]
Tools for Web Pages
- WAVE (website) and browser extensions: This is a full-page accessibility automatic check. In the Order tab is a list of links on the page.
- Wave: Link result documentation: These are the WAVE results associated with links.
Want to check non-web page-based digital content? See the Digital Accessibility Testing/Scanning Tools web page for additional resources.
Additional Support
Analyze Link Text
Looking at the list of links in the assistive devices or in WAVE’s Order tab:
- Do you understand the link’s destination or function?
- Is it meaningful?
- Is it descriptive?
- Is it concise?
- Is it the same as other link text?
- Do they have the same destination or function?
- If similar but not the same, should the link text change to a more accurate link text?
- Is the document type included within the link?
- Does the link open in a new tab?
- Does it indicate it opens in a new tab?
- Is it important for the link’s destination or function to open in a new tab?
- Can the link text be different instead of relying on an ARIA label?
Resources
-
Top 10 Common Accessibility Issues in Websites
Source: AFixt
But despite good intentions, many websites fall short of compliance with the Web Content Accessibility Guidelines (WCAG) and laws like Section 508.
Tags: Article