Page Comparison

How do I create an accessible hypertext link?

Introduction:

Making hypertext links accessible is crucial for creating web pages and documents that are accessible to everyone, including users with disabilities who rely on assistive technologies like screen readers. Thankfully, there are some simple guidelines that can be followed to ensure that links are accessible and easy to navigate for all users.

Overall Guidelines:

1. Use meaningful text for links

2. No capitalized letters

3. Do not use URLs for link text

4. Avoid using the word “link” as part of the link text

5. Do not use tooltips or screen tips to add more information

Instructions:

A step-by-step guide to creating accessible hypertext links

1. Use meaningful text for links

The use of meaningful text for links is beneficial to all users by making the ability to quickly navigate documents even easier. The text in a link should be describing where the link will go and should make sense if read out of context from the remain text. This is important because people who use screen readers can have the software reading only links on webpages. With that in mind, do not use the following phrases as link text due to them not making sense without context:

• click here

• more

• read more

• find out more

• click for details

The screen reader will always read the whole link. A good rule of thumb, is to keep links under 100 characters.

2. No Capitalized Letters

A kink text with capital letters is harder for users to read, but people with reading disabilities struggle even more. Additionally, screen readers may read the capitalized letters one by one instead of part of the word, which will be difficult to understand.

3. Do not use URLs for link text

Hypertext URLs (like https://www.fredonia.edu/about/offices/information-technology-services) should not be used. Screen readers will only read the URL as individual letters and would be very difficult to understand as well as time consuming. Short URLs can be used but only if the point is to saw what the URL is, like for a website homepage (like www.fredonia.edu). However, this sort of link is unnecessary and is better to have more readable link text like https://www.fredonia.edu/ website.

4. Avoid using the word “link” as part of the link text

Users are usually given information that text has been hyperlinked, so it is counterintuitive to add the word “link” to the start or end of the hypertext link. For example, thehttps://www.fredonia.edu/ would be read by most screen readers as “Link Homepage State University of New York at Fredonia (SUNY Fredonia).

5. Do not use tooltips or screen tips to add more information

To convey additional information about links to users, it is not recommended to use tooltips, which are pop-up windows that appear when users hover over links. It is best to include all relevant information within the text of the links themselves, as explained in step 1.

Tooltips are unnecessary and may create problems, especially for users with accessibility needs. For instance, people who use screen readers may disable tooltips to limit auditory information, while those who use only the keyboard cannot access tooltip content. Additionally, users who require larger text may not be able to adjust the tooltip size within their browser. Furthermore, title attributes may not be supported on mobile devices such as phones and tablets.

Examples of Accessible vs Inaccessible Links

Accessible Hypertext Link:

For more information about WCAG 2.1 Web Accessibility Guidelines visit https://www.w3.org/TR/WCAG21/

Inaccessible Hypertext Links:

For more information about WCAG 2.1 Web Accessibility Guidelines visit https://www.w3.org/TR/WCAG21/

For more information about WCAG 2.1 Web Accessibility Guidelines visit click here

Links for Printed Documents

If you have a document that you know will be likely printed by users then you can use URLs but only in parenthesis and they cannot be a link. If this is not done, then screen readers will read it letter by letter.

Example:

For more information about WCAG 2.1 Web Accessibility Guidelines visit https://www.w3.org/TR/WCAG21/ (https://www.w3.org/TR/WCAG21/)

\uD83D\uDCCB Related articles