Accessibility for button with font icon in it

Question

I'm having an accessibility problem with the button element. I'm wondering if this is the good way to do it. I have a button and the only content is a Font-Awesome (font-icon) in it. I was wondering if adding a title attribute to my button was enough to make it accessible ?

Like this:

<button class="prev" title="My accessible title">
   <i class="fa fa-chevron-circle-left"></i>
</button>

Answer 1

The correct property in this case should be aria-label or aria-labeledby:

<button class="prev" aria-label="My accessible title">
   <i class="fa fa-chevron-circle-left"></i>
</button>

With this, the screen reader for example will reproduce My accessible title instead the icon inside it.

See more:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

Answer 2

You have to use both titleand aria-label attributes as some screenreaders does not read the title attribute, while other users won't benefit of the aria-label attribute.

You have to remember that accessibility does not only target screenreaders users but also every other people, so aria-label won't be sufficient.

Also note that, for better accessibility, you might want to add a way to show the description when you focus the button with the keyboard. That would be a good idea.

That being said, I will be silly enough to suggest that some part of the description of your button might be always visible for better accessibility.

For instance, the following examples shows how the two attributes might be used conjointly with a short visible hint for a popup close button :

<button aria-label="Back to the page" title="Close popup">
  <i class="fa fa-times"></i>
  Close
</button>