What is an image ALT tag?
An ALT tag or ‘alternative text’ is the text description of an associated image. It provides a text alternative to visual content or ‘non-text content’ within digital applications and products.
Why are ALT tags required?
Every image element must contain the ALT attribute within a page’s HTML markup. It’s the first principle of the Web Content Accessibility Guidelines, without them a page is inaccessible.
ALT tags benefit all users, but they are especially critical to the visually impaired (blind and partially sighted). These users require assistive technologies such as screen readers, screen magnifiers or electronic braille to interact with digital products and services. Screen readers dictate and read aloud page content to the user. This technology enables users to navigate, interact and understand information on a page.
If an image fails to load on a page its description will be present in place of the image. A common example can be found within marketing emails. Typically, an email client blocks images for security purposes. Providing image alt text allows the content and context of the email to be read and understood before choosing to download its images.
How do I know what to write?
Context is everything when deciding on an appropriate image description. The alternative text for one image may be vastly different to another. Determine the purpose of the image before writing your description. For example:
|
Image purpose |
Image type |
Description type |
|
Decorative |
Background image |
background or ‘null’ (empty) value |
|
Content |
Illustration, graphical representation * |
Adds meaning/context to its surrounding content |
|
Functional |
Button/Clickable |
Lead with a verb e.g. ‘Buy now’ or ‘Book now’ |
*Provide ALT text that explains the overall outcome or result. Or offer a text alternative page or HTML section for screen readers.
So, in order to help other users please:
- DON’T leave an ALT tag blank unless the use of the image is purely decorative
- DON’T include text as part of an image. If this can’t be helped make sure image description replicates the text found within the image.
- DON’T use images to convey data information i.e. table data or graphs. Again, if this can’t be helped provide ALT text that explains the overall outcome or result. Better still offer a text alternative page or HTML section for screen readers to understand.
Remember, by providing alternative text to your images you are contributing towards an inclusive product experience.