The basics
-
What it is: Text that is added to images and other non-text web content so it can be perceived and understood by people who may not be able to see or otherwise grasp the meaning of it. The description should reflect the purpose of the image and the context in which it is being used.
-
Who it’s for: Everyone. This includes people using screen readers, people with a slow internet connection – even search engines.
-
Why use it: Use alt text to make your content available to the biggest audience possible.
-
Where/when to use it: Use it for any image or non-text component that adds meaning to your content. All non-text content presented to your users should have a text alternative that serves the equivalent purpose.
-
How to do it: Context is key. Think about the meaning of the image and what you want people to understand. Conveying the purpose of an image is as important, or more important, that describing what’s in it.
General tips 💡
- Avoid redundancies like ‘image of’ or ‘picture of’.
- Keep your alt text to fewer than 125 characters where possible.
- If an image or other non-text content links to something, use alt text that describes where it goes and what it does. For example if there is an image of a telephone, using alt text of, ‘Contact us’ is more meaningful than just ‘telephone’.
- Correct spelling matters. If your spelling is incorrect, your alt text will be mispronounced by a screen reader or might be excluded from search engine results.
- If the image is purely decorative, use ‘empty’ or ‘null’ alt text. This lets a screen reader bypass images that don’t convey information.
Writing good alt text is a skill that needs practice so, if it doesn’t come naturally to you, take heart. Bad alt text is still better than none at all! Keep practising!
Further reading: