What is an accessible way to mark up buttons whose only content is an icon?

Question

The design I am implementing has a generic "Account" button whose only content is a user icon (and a tiny dropdown icon).

Is it enough to add a title attribute to the button ("Your account"), or should I add text inside the button that I simply hide visually (while keeping accessible to screen readers), or both?

Answer 1

• If you are using an input image button, use its alt attribute:

  <input type="image" src="account-icon.png" alt="Your account">
  

• If you are using a button with img, use img’s alt attribute:

  <button type="button"><img src="account-icon.png" alt="Your account"></button>
  

• If you are using an a with img, use img’s alt attribute:

  <a href="/account.html"><img src="account-icon.png" alt="Your account"></a>
  

• If you are adding the icon via CSS (instead of HTML), you should include a text label in the HTML and visually hide it with CSS.

For usability, you might consider using both, an icon and text. But this might be discussed at User Experience SE. See, for example, the question "When to use icons vs. icons with text vs. just text links?".

For deciding which alt text to use, see my answer to the question "What should the ALT text be for an image that is also a link?". You should not use the title attribute for specifying the alternative text.

Answer 2

So if it's an icon button I have an example on CodePen: A super accessible button with tooltip

This is the markup I use:

<button type="button" class="button"> 
  <span class="button-icon" aria-hidden="true" data-icon="&#x78;"></span>
  <span class="button-text"><strong>Navigation menu</strong></span>
</button>

You can hide the text content with css and make it visible on hover/focus. See example for more deatail on CSS.

Here is a list of what this method accomplish accessibility wise:

• Is a native <button> and therefor inherits:
  • Mouse & keyboard (enter & space) clickability
  • Keyboard foucusability
  • Announciation as a button for screen readers
• CSS injects icon, for non-visual web browsers
• Hides icon for screen readers
• Uses hidden text, for screen readers
• Hides text by z-index -1 insead of off-screen to make it tapable with iOS using VoiceOver screen reader
• Shows text as tooltip on hover and focus
• Tooltip won't disappear on mouse over or slightly outside. This makes the text readable with full zoom.

Answer 3

You can either add a button text and hide id visually, or you can add an alt attribute to your icon (if it's an img). The latter is even better, on my opinion.

Answer 4

The following article provides information on using ARIA to enhance SVG accessibility: Using ARIA to enhance SVG accessibility. It's dated 2013 and contains several compatibility charts as well as the following code snippet, which had the best accessibility:

<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
  <title id="title">Circle</title>
  <desc id="desc">Large red circle with a black border</desc>
  <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>

Put that inside a button and you should enjoy wide support. Of course, now that SVG2.0 has landed the ARIA usage may change slightly.

If using CSS ::after to place your icon your button will probably look something like this:

<button></button>

In which case you could do this and skip ARIA entirely:

<button>the label</button>

Otherwise the following should do the trick:

<button aria-label="the label"></button>

And here's the SVG Accessibility API Mappings (draft as of Jan 2019) which maps how SVGs should work in conjunction with accessibility APIs if you want to get more technical.

Though if you just stick a title inside the SVG it will likely work now simply because it's obvious.

Answer 5

Use aria-label for this. Example:

<button aria-label="Close" onclick="myDialog.close()">X</button>

From MDN:

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.