Skip to main content

Icon-only links fail WCAG

Posted in Accessibility

I’ve written about how I wish the Web Content Accessibility Guidelines (WCAG) would prohibit icon-only buttons, but what about icon-only links?

You might think they’re governed by the same rules, but there’s a difference. You might think that links, like buttons, are governed by Headings and Labels, but links have their own dedicated Link Purpose (In Context) success criterion which says this:

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context

Unlike Headings and Labels, which uses the term ‘label’, Link Purpose (In Context) very specifically talks about “the link text”. This is an important distinction, as WCAG defines labels as:

text or other component with a text alternative that is presented to a user to identify a component

A label can be either text or an icon/image, which is the loophole that allows icon-only buttons. Links, on the other had, are defined much more clearly: it has to be text.

I see plenty of icon-only links in interfaces around the web:

  • ‘Back to top’ links that are arrows pointing upwards
  • Little cog illustrations that take the user to a settings page
  • Navigation that uses a house icon for the ‘home’ link

These are all failures of 2.4.4 Link Purpose (In Context) because there is no link text.

Subscribe

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Which images need descriptive text?

    Image alt text is extremely important to many users, but how do we know which images should be described, and which shouldn’t?

  2. Buttons with icons and text

    We can all agree that icon-only buttons are a bad idea, but how do we provide the most accessible experience when we pair an icon with visible text?