Skip to main content
Web Accessibility

How-Do-I

Create Accessible Hypertext Links

Introduction

Accessible hypertext links are one of the most important aspects for accessible web pages and documents. Fortunately, by following a few guidelines, it is relatively easy to make links accessible and that can be easily navigated by all users including those using assistive technologies such as screen readers.

Overall Guidelines

  1. Use concise and meaningful text for links
  2. Do not capitalize all letters in links
  3. Avoid using URLs for link text
  4. Do not use the word "link" as part of the link text
  5. Do not use tooltips/screentips to add additional information

Step 1: Use concise and meaningful text for links

Using concise and meaningful text for links benefits all users by making it easier to more quickly navigate documents. The text for links should be descriptive for where the link will go and it should make sense if read out of context from the rest of the text on the page. This is important because screen reader users can have the software read just the links on a web page. For this reason, do not use the following phrases as link text as they are ambiguous and make no sense out of context: 

  • click here
  • more
  • read more
  • find out more
  • click for details

While we want links that are fully descriptive of their destination, we still want to be sure they are as concise as possible. Screen reading programs have functions to skip text or paragraphs on web pages, but this cannot be done with links. The screen reader will read the entire link! Therefore, a good starting point is to keep links under a maximum of about 100 characters.

Step 2: Do not capitalize all letters in links

Link text in all capitalized letters is more difficult to read for all users, but particularly difficult for users with reading disabilities. In addition, screen readers may read all capitalized links letter by letter which can be very difficult to comprehend.

Step 3: Avoid using URLs for link text

Hypertext URLs (such as https://www.engageny.org/resource/guidance-on-new-york-s-annual-professional-performance-review-law-and-regulations) should be avoided. Screen readers will read the URL letter by letter which would be very difficult to interpret for a user. Short URLs may be used occasionally if the point is to convey what the URL is to the user, such as for website homepages such as http://www.nysed.gov or https://portal.nysed.gov. However, if this is not necessary, then it's better to display links as readable text such as the New York State Education Department website.

Step 4: Do not use the word "link" as part of the link text

All users are generally provided with information that text is hyperlinked and adding "link" to the link text is redundant. When screen readers encounter links they add "link" at the start of hyperlinked text. For example, the New York State Education Department would be read by most screen readers as "Link New York State Education Department."

Step 5: Do not use tooltips/screentips to add additional information

It is preferable not to use tooltips (a pop-up window that users see when mousing over links) to convey additional information about links to users. Any information that you want the user to know should be in the text of the links as described in step 1 above and for this reason tooltips are not necessary. In addition, tooltips can be problematic because they are inaccessible to many users. For example, tooltips have the following accessibility issues:

  1. Individuals using screen readers often turn off titles to reduce the amount of auditory information through which to navigate;
  2. Individuals using only the keyboard do not have access to the link titles;
  3. Individuals needing larger text cannot resize the tooltip text within the browser alone;
  4. Phones and tablets don’t support title attributes.

(Source for 1-3: Blog Accessibility)

Tooltips are added on web pages by adding text to the title attribute (Advisory Title in WYSIWYG link editor) when adding links or in Word documents by adding a Screentip. In both cases, this should not be done and these fields should be left empty.

 

Examples of Accessible vs. Inaccessible Links

Accessible Hypertext Link:

For additional information about Education Law §3012-c, visit Guidance on APPR Law and Regulations.

Inaccessible Hypertext Links:

Avoid: For additional information about Education Law §3012-c click here. 

Avoid: For additional information about Education Law §3012-c, please see https://www.engageny.org/resource/guidance-on-new-york-s-annual-professional-performance-review-law-and-regulations.

 

Links for Printed Documents

If you have a document that you know will likely be printed by users then the URL can be provided in parentheses after the accessible hypertext link, however, be sure that the URL text is not a link or the screen reader will read it letter by letter! 

Below is a sample of text with an accessible link (the hypertext linked words) with an unlinked URL provided immediately after in parentheses so that the URL will be displayed for printing purposes.

Example: