a11y web development tips and tricks

Marking image as decorative

Use an empty alt attribute:

<img src="foo.jpg" alt="">

In theory aria-hidden="true" should work, but it would require the consuming technology to understand aria. An empty alt attribute is the standard for assistive technologies (like screen readers) denoting that the image should be ignored.

If it’s an icon font or <svg> image, add role="img" and aria-hidden="true".

Links

• Info panel as a web permalink #3853