Icon-only links fail WCAG

Posted 20th June 2022 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.

Accessibility in your inbox

I send an accessibility-centric 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. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.