Build Better Hyperlinks and Buttons

Accessibility Interactions

A popular method to skim webpages with a screen reader is to listen to just the hyperlinks on the page. In this use case, the screen reader will only announce the words included in the link. Screen reader users similarly rely on accurately described buttons and links that quickly explain what they will do when pressed. 
 

Best Practices

Tips for Better Links

  • Link wording should clearly explain its destination and/or intent.
    • Ambiguous phrasing can obscure a link's purpose.
  • Read links aloud out of context to ensure they can stand alone as a screen reader presents them in order.
  • Avoid introductory phrases such as "click here" in a link.
  • Don’t use "click here" as a link on its own.
  • Avoid raw web addresses in links — the screen reader will attempt to read the entire URL (Uniform Resource Locators) aloud word-by-word and letter-by-letter.
  • Buttons, especially those represented with icons or images, should be described in terms of their function rather than appearance.

Examples for Better Links

Friendly URLs

When creating web addresses for your own pages, use “friendly URLs” where possible. Friendly URLs are links that are human readable as opposed to server-oriented encoding. Here is an example from LibGuides:

  • Use: https://yourlibrary.libguides.com/friendly-libguide-url
  • Avoid: https://yourlibrary.libguides.com/c.php?g=22194&p=130597

Tips for creating friendly URLs:

  • Use lowercase and dashes between words, for instance, friendly-url-example
  • Always make your URLs descriptive of your page, this will make it easier for readers who may receive the link without context.
    • Use the title of the webpage when it’s short
    • When the title is longer, create a URL that’s easy to remember and spell.
  • Avoid changing links once they’re created to avoid broken links (also known as link rot).

  • In LibGuides you are able to create a friendly URL for your whole guide and for individual pages/tabs within the guide. Most content management systems allow you to create friendly URLs for each page.

QR Codes

QR (quick response) codes can help people quickly access resources by scanning a square computer-encoded graphic with their phone. These codes are useful for some people with disabilities, but can pose accessibility barriers for others. A QR code can significantly help people with reading or memory disabilities so they do not have to recall a long URL, and are useful for people with limited typing mobility. However, the codes can also be problematic for blind users or people who find it difficult to line up their phone camera with the code. Issues can be minimized with these tips:

  • Include information about what happens when the code is scanned
    • For instance, what site or document the QR code links to or what app could be downloaded with the code.
  • Provide alternatives to the code.
    • Include a short URL (such as a link generated on bit.ly) to the destination that could be entered manually.
    • Include instructions for how to accomplish the QR code’s task, such as a list of clear instructions for downloading an app.
  • Use a colored box or frame around the code to help users orient their cameras when possible.
  • Ensure instructions meet color contrast requirements, for example by providing black text on a white background.
  • Consider the distance the code will be scanned from and size your QR code accordingly.
    • The code dimension should be 1/10th the distance.
      • For example, if a person will likely scan the code from a meter away, then the code should be 10cm square.
    • Similarly, avoid placing codes in locations where they could not be readily scanned from a wheelchair.
    • The codes should be no smaller than 2 cm (0.8 in) square.

Testing

When reviewing WAVE's "Details" tab, look for alerts of "Suspicious Link Text" then click on the link alert icons to find the questionable links on your page. On this page WAVE identified the poorly written link examples above. The tool also identified redundant links!

Video tutorial

All about links: How they are used in navigation, labelling concerns, and distinguishing them from surrounding text. From the ADA National Network.

Learn More...