Adding aria-hidden true for all images

Question

Is it true that if I add aria-hidden="true" for all the images on my website, I wouldn't have to add an alt text to those images because it would basically not be displayed for screen readers or how would validates handle this scenario? Is it recommended to do?

Answer 1

If you're using a CMS and the image is decorative you need to be able to output a blank alt attribute, e.g., <img src="<imagesource>" alt="" />.

If you're hand coding the page and can add the decorative images in through CSS that's another approach.

WCAG 1.1.1 says that non-text content must have a text alternative. That text alternative must have the equivalent purpose. One of the exceptions is for decorative images, images used for formatting, or that would be invisible to everyone (e.g., tracking gifs). These must be "implemented in a way that can be ignored by assistive technology". The accepted method is to have a nullalt attribute, as a missing alt attribute would be read out.

In theory aria-hidden=true would work, but that requires the technology to understand aria. Null (blank) alt attributes have been established a lot longer and will be accepted by more assistive technologies so it's the appropriate way of having an img element on the page that's not read out by screenreaders.

Answer 2

If you don't want to add an alternative text to images (because they are purely decorative and the content could be understood without them), you can leave the alt parameter empty.

There's no need to add aria-hidden attribute.

The best thing to do is to use CSS for decorative images.