Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding alternative text to an icon

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!

like image 337
user3781239 Avatar asked Oct 17 '25 12:10

user3781239


1 Answers

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.

like image 134
Adam Avatar answered Oct 19 '25 02:10

Adam



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!