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.