Decorative Icon Fonts Accessibility

Question

For decorative icon fonts and other applicable components, is there a difference between using aria-hidden="true" and using role="img" alt=""

Answer 1

Yes there is a difference, but not a massive one.

aria-hidden="true" will completely remove it from the accessibility tree.

role="img" alt="" will still add it to the accessibility tree as a decorative image. (well an image with no alt description if we are being technical - it won't get read out and that is what we care about)

Now this doesn't cause issues for majority of screen reader users. But some screen reader users may use a screen reader with very high verbosity settings (how much detail gets read out).

In this case it can actually be possible that with role="img" that the image is read out as "image, no description".

It is an edge case, but one to consider.

As an additional thought - support for role="img" may not be so great (there isn't a lot of data on this)

I would encourage the use of aria-hidden="true" and perhaps add role="presentation" as support is good for that as a nice fall-back.