1.1.1: Non-text Content

What it means

Anything that is not text — photos, icons, charts, buttons made of images, audio — needs a text version that does the same job. Screen readers and other tools read that text aloud or show it in braille.

Decorative images should be marked so assistive technology can skip them.

How to fix it

• Add meaningful alt text (or equivalent) for images that carry information.
• Use empty alt (alt="") for pure decoration.
• Name icon-only buttons and controls in an accessible way (visible text, aria-label, or similar).
• For complex charts, give a short alt plus a longer text description nearby or linked.

Quick examples

• Good: A product photo of a blue mug uses alt text “Blue ceramic mug with white handle”.
• Bad: The same photo uses alt text “image” or a file name like “IMG_4021.jpg”.
• Good: A decorative divider line uses alt="" so screen readers ignore it.
• Bad: Every spacer GIF is announced as “spacer” or “line”.