Please don't do that. Don't put an alt on ALL images. Screen readers will read all of them. Skin and flavour images don't deserve to be read outloud. Nobody wants to hear "bottom left corner of logo" or "rounded corner".
Please don't do that. Don't put an alt on ALL images. Screen readers will read all of them. Skin and flavour images don't deserve to be read outloud. Nobody wants to hear "bottom left corner of logo" or "rounded corner".
<img src=".." alt="">
Do you mean like that? Empty quotes and it would not be read?Let's see. If we use an image that doesn't add anything to the content, one would normally use background-attachment to add an image to say, the hero section.
(It seems you edited your comment?)
Good to know that the screen reader would try to read the file name if there isn't any alt text in it, I didn't know that. So, in the cases we do need to place an img in the document, then we simple place an empty alt text as in my above comment to tell the screen reader not to read the file name since it is only used for decorative purposes...?
Edit: I confused your comment with another one.
> give it an empty alt attribute to indicate to the screen reader that it shouldn’t try to read out the file name or something
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-diffe...
'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.
I would assume front-end guys care more about passing a Web Accessibility[0] audit than inconveniencing some users, thus good taste and wise discretion is spared for avoidance of litigation.
Imagine reading a printed text page about dogs and peppered throughout the text was mentions of 'bezel flare 2' or similar. If it doesn't make sense for that to be on the page as text alone then it shouldn't be on the page at all.
Actually the meta viewport "Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages." [1]
Every bit of code on a page is interpreted a certain way for a reason. HTML5 now has more semantic tags like header and nav that add an additional layer of certainty over context. I'll concede that most developers seem to not care about the reasons why so long as they can push code to production faster.
[1] https://developers.google.com/search/mobile-sites/mobile-seo...
Should you add an alt to a stock photo?
Should you disturb a user with a reading of "stock photo of a business man smiling" next to a sales paragraph? What about "sunset over a mountain" on a page for a SaaS website?
The goal is not so much to make the best experience for the assistive technology user but to provide as close to the same experience as possible, bullshit marketing crap and all.