I'm trying to make my site more accessible for disabled users, and I've been researching how to add alternative text to icons. I'm using Font Awesome icons and the icons are acting as a link, and the docs suggested I add a title link to the anchor tag around it like so:
<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
However, it doesn't seem to work with the Apple's VoiceOver. It's still just reading out "Visiting Link [?]". Does anyone have any experience with this?
Thanks!
You have to use the title
attribute conjointly with the aria-label
attribute.
The title
attribute is not always read by assisting technologies but the aria-label
should be.
Unfortunately using the aria-label
alone won't be of any help to people not using a screen reader and the title
attribute will give them a clue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With