Alt text definition
Alt text is a short written description of an image, stored in the alt attribute of an HTML img element. Screen readers read it aloud and browsers show it when the image fails to load. Good alt text says what the image means in that spot on the page.
The name is short for alternative text. It exists so that someone who can't see an image still gets whatever the image was there to communicate. WCAG puts it first: success criterion 1.1.1, Non-text Content, requires a text alternative for any image that conveys information.
What should alt text say?
Describe the job the image does on that page. The W3C's alt decision tree starts from that question, and the answer changes with context. A headshot next to a speaker bio may only need the person's name. The same photo in a news post about their appointment needs the name and the new role.
- Skip "image of" and "photo of". Screen readers already announce it as an image.
- If the image contains text, as banners and screenshots of quotes often do, put that text in the alt.
- For a linked image, describe the destination. A logo that links home can read "Company name, home page".
- Keep it to a sentence or so. A chart or diagram needs a longer description in the surrounding text.
When should alt text be empty?
Decorative images get an empty attribute, alt="", which tells assistive technology to skip them. Leaving the attribute off entirely is a different matter. Many screen readers then fall back to reading the file name, and nobody wants to hear "hero final v3 crop dot jpg" read out in the middle of a sentence.
Who writes the alt text?
On most sites, whoever uploads the image, which is why it's so often missing. A CMS can help by making alt text a required field with a separate decorative switch, so the editor has to choose one or the other. Webflow has that switch built in. On a Sanity build, alt text is a field on the image type, and a validation rule can stop a document from being published without it.
Related terms
- Web accessibilityWeb accessibility means building websites that people with disabilities can perceive and operate, whether they listen to the page through a screen reader or navigate it by keyboard alone. It is measured against the WCAG guidelines, usually at level AA.
- OG imageAn OG image is the preview picture shown when a link is shared on social media or in a messaging app. The page sets it with the Open Graph og:image meta tag, and the recommended size is 1200 × 630 pixels.
- Web Accessibility DirectiveThe Web Accessibility Directive, (EU) 2016/2102, is the EU law that requires public sector websites and mobile apps to be accessible. In practice that means meeting WCAG 2.1 level AA through the standard EN 301 549 and publishing an accessibility statement.