search

w3c / wai-website

This repository hosts the WAI Website.
https://www.w3.org/WAI/
Other
54 stars 230 forks source link

Image Headings #632

Open datahound2u opened 4 years ago

datahound2u commented 4 years ago

If this was previously discussed, please point me to it. I reviewed other issues and did not see anything about this.

We use images to convey section headings on our websites. For example, we have an image that had "Review" written on it. I include alt text to show what the image says, but I don't know how to make it a heading element available to screen readers when looking at page structure.

The ideal solution would be to replace the images with actual text headings, but I have not been able to win that battle.

Can anyone advise me on this? Review

JAWS-test commented 4 years ago

Since role=heading (https://www.w3.org/TR/wai-aria-1.2/#heading) is not allowed on the img element (see https://w3c.github.io/html-aria/#el-img - so <img src=... aria-label=review role=heading aria-level=1> works with NVDA but not with JAWS), the graphic must be a layout graphic (e.g. with alt="" or role=presentation or aria-hidden=true). The headline should then be located before or after the graphic and positioned outside the visible area using CSS (see https://webaim.org/techniques/css/invisiblecontent/).

Note, however, that text graphics are not WCAG compliant:

yatil commented 4 years ago

You could also use the image in a heading with alternative text:

<h3><img src="…" alt="Review"></h3>

But as was mentioned with the ubiquitous support for CSS fonts, that would not be AA compliant.