Accessibility: Link Name Issues

Learn about this crucial aspect of web design that ensures optimal readability and accessibility for all users!

Why are link names important?

1. Screen Reader Navigation:
   Descriptive link names allow users utilizing screen readers to understand the purpose of the link and navigate through the content more effectively.
2. Clear and Concise Communication:
   Well-defined link names allow users, including those with disabilities, to quickly grasp the context and relevance of the linked content without ambiguity.
3. Enhanced User Experience:
   Meaningful link names improve the overall user experience for everyone, including individuals with visual or cognitive impairments. Users can better anticipate the content they will access, reducing frustration and confusion.
4. ADA Legal Requirements:
   Compliance with ADA standards requires providing accessible and understandable content. 

ADA WCAG (Web Content Accessibility Guidelines) Link Name standards list the following as things to avoid: 

1. Non-Descriptive Link Text (WCAG 2.4.4):
   Using link text that is not descriptive or does not convey the purpose of the link (e.g., "click here," "read more") is discouraged. Although it might appear intuitive to employ the phrases "click here" or “read more” to encourage users to interact with a link or button, doing so is detrimental to accessibility. Assistive technologies review webpage content and restructure it in a useful way for each type of Assistive Technology. Screen Readers collate a list of all links on one page and then read them out loud. The links on a page provide no context if they all say “read more” or “click here”. Screen readers will read out this list without the context of the additional words. 

   As an example if you had a page with the following content:

   Click here to view the Evacuation map.
   Click here to view the budget.
   Read more about why dogs are the best.

   A screen reader could read this list out as “Click here, Click here, or “Read more”.
   
   Streamline recommends using teasers to other pages or external links wherever possible on your website, rather than hyperlinking to other pages on your website. (For more information on teasers, check out this knowledge base article).

    

2. Ambiguous or Vague Link Text (WCAG 2.4.4):
   Link text that is too vague or ambiguous may not provide users with enough information about the destination. Clear and concise link names are essential for accessibility.
3. Link Text Dependent on Sensory Characteristics (WCAG 1.3.3):
   Using link text that relies solely on sensory characteristics (e.g., shape, size, location) without providing additional context can be problematic. Users with disabilities may not perceive these characteristics.
4. Linking Entire Sentences or Phrases (WCAG 2.4.4):
   Linking entire sentences or long phrases may create confusion, especially for screen reader users. Link text should be concise and focused on the specific content being linked.
5. Redundant or Repetitive Link Text (WCAG 2.4.4):
   Using redundant link text, such as repeating the same link name multiple times on a page, can be confusing. Each link should have a unique and meaningful name.
6. Missing or Insufficient Alternative Text (WCAG 1.1.1):
   For links represented by images, the alt attribute should contain descriptive alternative text. Missing or insufficient alternative text for images used as links can hinder accessibility.
7. Link Text as the Sole Method of Identification (WCAG 2.4.4):
   Relying solely on the link text to convey information without additional context may not be sufficient. Users should be able to understand the purpose and destination of the link independently of its surrounding content.

Common, Tricky Link Name Issues

1. Careful When Selecting Words to Hyperlink:
   When hyperlinking, it is important to be sure that there aren’t additional spaces or punctuation included in the link name, and be sure your hyperlink is continuous for the phrase you are linking (doesn’t break mid-phrase/isn’t two hyperlinks not spaced out). These can be tricky to locate on your site. For example:
   1. Instead of hyperlinking “WCAG Hyperlinking Guidelines can be found here”, you’ll want to be sure you put “WCAG Hyperlinking Guidelines can be found here”.
      
      Did you catch that difference? It’s slight, but the difference is that the space after Guidelines is also hyperlinked in the first example. 

Additionally, if you are hyperlinking “Why Dogs Make the Best Pets Article”, and accidentally only select “Article”, be sure to fix it by selecting “Why Dogs Make the Best Pets Article”, and not only the previously unlinked words. This can result in a hyperlink being broken midway through.

Broken: Why Dogs Make the Best Pets Article
Whole: Why Dogs Make the Best Pets Article

Both errors would flag scanners and screen readers and are hard to catch, but for a step-by-step example of how to find and fix issues like this, see below.

1. Orphan Link Titles:
   Orphan pages are website pages that are not linked to from any other page or section of your site. This means a user cannot access the page without knowing the direct URL. Additionally, these pages can't be followed from another page by search engine crawlers, which means they are rarely indexed by search engines. This is another reason we recommend using teasers instead of in text hyperlinks to pages on your site!
2. Duplicate Link Names:
   Make sure links each have a unique name, avoiding duplicate hyperlink names and “Click here” alone hyperlinked. The link should be descriptive, and clear, to make sure users know what to expect if they should they click the link. If you need to hyperlink to the same site or document multiple times on a page, we recommend instead referring to a related content teaser to that page rather than including the same hyperlink multiple times.