1.1.1 Non-text Content

This rule covers anything on your page that is not written text: images, icons, charts, graphs, illustrations, image-based buttons, and audio or video files. Each one needs a text alternative that carries the same information.

The alternative does not have to describe what the image looks like. It needs to explain what the image means or does in context. A photo of your CEO on an About page needs alt text naming the person. A graph showing sales figures needs a description of what the data shows, not a description of the colours.

Purely decorative images, such as background patterns or dividers, should be hidden from screen readers using an empty alt="" attribute. Adding descriptive alt text to decorative images creates noise for people using screen readers.

For informational images, write alt text that conveys the meaning rather than the appearance. alt="Bar chart showing UK website traffic up 42 per cent year on year" is useful. alt="chart.png" or alt="image" is not.

For functional images such as a search icon inside a button, describe the action: alt="Search" not alt="Magnifying glass icon".

For complex images like infographics or detailed diagrams, a short alt attribute is not enough on its own. Provide a full written description either in the surrounding content or linked nearby. The alt text can then reference it.

For decorative images, use alt="". Do not leave the alt attribute out entirely, as some assistive technologies will read the filename aloud instead.

For CAPTCHAs, always provide an audio alternative so that blind users can still complete the challenge.

• Images with no alt attribute at all
• Alt text that repeats the filename or says image or photo
• Decorative images with long descriptive alt text that gets read aloud unnecessarily
• Charts where the alt text only says graph without describing the data
• Icon buttons with no accessible name at all

When an image is used as a link, the alt text should describe where the link goes, not what the image shows. A logo linking to the homepage should have alt="Calling All Minds home page" rather than alt="Calling All Minds logo".

If an image is fully explained by adjacent text, it can be treated as decorative with alt="". Repeating the same information in both the surrounding text and the alt text means screen reader users hear it twice.