Hacker News Reader

Comment by toastal | Hacker News Reader

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/

Don't do: <h1><img src alt="ACME logo">ACME</h1>.

View on HN

Well 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).

A 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>

Got it, thanks for following up

Huh, 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!

Reply on news.ycombinator.com