3 ms·
Just as important of a side note for supporting text-based browsers and screen readers: if the images are purely decorative, you should make it alt="". https://
by toastal 4y ago
Just as important of a side note for supporting text-based browsers and screen readers: if the images are purely decorative, you should make it alt="". https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/
Don't do: <h1><img src alt="ACME logo">ACME</h1>.
- ryanjamurphy 4y agoHuh, this is a good tip. I've always provided a rich description of decorative images, because I didn't want screen readers to "miss out," but apparently that was a bad idea!
- snowwrestler 4y agoWell the logo might not be a great example, as it is often clickable to the home page and should have alt text so people know what it is. A better example is when a site has little stock photo thumbnails with article titles on a navigational page. The screen reader can read the title text; knowing what’s in the thumbnail adds nothing. Images should only have alt text when they contain “real” content (for example if it is an original photo that is relevant to the associated story).
- toastal 4y agoA logo is a perfect example because so many sites are failing to do it correctly. When you do <h1><img src alt="ACME logo">ACME</h1> What gets rendered and read is what you would never want ACME logoACME If you don't have or use actual text nearby then you just do this: <h1><img src alt="ACME"></h1>
- snowwrestler 4y agoGot it, thanks for following up