Frankensteinke

3 ways to write more inclusive links

1. Use self-descriptive labels

As sighted users, we have the benefit of seeing the text and imagery surrounding every link on the page. A link that says only "read more" makes sense to us, because we can see the text above it.

Users of assistive technology do not always browse this way. Screen reader users, for example, often traverse a page by viewing all of the links on each page. A list like the below can be confusing:

Non-descriptive link list

<a href="/us/news">Read more</a>

<a href="/us/news">Click here</a> to see a listing of all BBBs on our BBB Directory!
  • Read more
  • Click here

A very minor change can be made to make these links make a lot more sense.

Self-descriptive link list

<a href="/bbb-directory">Read more <span class="visually-hidden">news articles</span></a>

Visit our <a href="/bbb-directory">BBB Directory</a> to see a listing of all BBBs.
  • Read more news articles
  • BBB Directory

With these small updates, screen reader users will get a much better and clearer experience.

Further reading

2. Don't use the title attribute

For mouse users in most modern browsers, the content in the title attribute will surface as a faint yellow tooltip when hovering over a link.  Despite being supported in browsers for 20+ years, there is still not a way for keyboard users to access the information in this tooltip. In addition to keyboard users, the title attribute does not serve the following user groups well:

  • Mobile users
  • Screen magnifier users
  • Screen reader users
  • Users with fine motor skill impairments
  • Users with cognitive impairments

In almost every scenario, if additional text is necessary, it's preferable to use a more inclusive method of providing a tooltip (like Inclusive Design Tooltips & Toggletips), or provide the text on screen. Redundant title text (matching the link label identically) should be dropped altogether.

Further reading

3. Use an <a> tag, unless no navigation is performed

links should be used where navigation is elicited, and <button>s where a non-navigational action is being invoked. - BBC GEL Components

Style does not always match semantics, and just because an element looks like a link does not mean that we are tied to the <a> tag. A <button> tag styled with CSS to look like a link should be used for situations where we need to use something that looks like a link to perform button (i.e., non-navigational) functionality, like opening a dialog window. Influenced by the US Design System, I've called this an "unstyled button" in my work.

Conversely, when links look like buttons stylistically but still navigate the user to another page, we still want to use an <a> tag. Influenced by BBC GEL, I've called this a "call to action" in my work.

Further reading

Tags