带有字体图标的按钮的辅助功能

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 title and 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>

Answer 3

The title attribute is the most widely supported attribute for assistive technologies. This includes Dragon ( which heavily relies on the title attribute for targeting elements ) as well as all modern screen readers that implement the ARIA accessible name computation algorithm and many older screen readers.

As can be seen in step D of that algorithm, the final element that is evaluated is the title attribute.