CODEWITHSUNDEEP
htmlaccessibilityfont-awesome
Yann Chabot
Yann Chabot

Reputation: 4869

Accessibility for button with font icon in it

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>

Upvotes: 7

Views: 4344

Answers (3)

unobf
unobf

Reputation: 7244

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.

Upvotes: 0

Adam
Adam

Reputation: 18807

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>

Upvotes: 3

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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

Upvotes: 6

Related Questions