3 ms·
Seconding this. It very much depends on the purpose of the image. If an image or any other tag is extraneous in a screen reader context use the `aria-hidden`[1]
by leepowers 9y ago
Seconding this. It very much depends on the purpose of the image. If an image or any other tag is extraneous in a screen reader context use the `aria-hidden`[1] attribute to exclude it.
A good example is an image used as an icon next to a text label. Imagine a link/button that contains the words "Save" and a floppy disk icon. There's no need to have an alt of "Save" on the icon as the text "Save" is already present. So it would look something like this:
<a href="#"><img src="save-icon.png" aria-hidden="true">Save</a>
Though in this case you'd probably be using an icon font like FontAwesome.
[1] https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes https://stackoverflow.com/questions/31107040/whats-the-diffe...
- extra88 9y agoThe first rule of ARIA is don't use it if you don't have to. An img element with an empty alt attribute will tell the screen reader not to read it and is more widely supported than the aria-hidden attribute. 'aria-hidden' is for HTML elements that don't have their own way of hiding themselves from assistive technologies and for cases where you'll use JavaScript to change the element's hidden state. I can't think of a situation where you'd want to conditionally show and hide only an image only from screen readers but if you had that situation, toggling aria-hidden would be better than adding and removing the alt attribute's value.