Non-Text Content ensures that every piece of visual or audio content is accompanied by text that describes its purpose, so no one misses out.
Here’s a famous corporate clapback on social media. In May 2023, Prime Video UK & IE quote tweeted Netflix saying “Love is sharing a password.” from March 2017. Prime Video’s response to the quote is just an image. But they gave us some great alt text.
“The Prime Video profile selection loading screen with six different silhouette icons. The user interface asks “Who’s Watching?” and each of the profiles has been named so the sentence reads “Everyone Who Has Our Password””
Amazon ensured everyone could enjoy that comeuppance.
Who this impacts
- People with visual impairments: Users who rely on screen readers need text descriptions for images, videos, and icons to understand content and context.
- People with cognitive impairments: Clear, descriptive text alternatives help users interpret non-text elements without confusion.
- Everyone: Well-written text alternatives improve accessibility (and can make content more discoverable in search engines!)
How to meet Non-Text Content
- Provide alt text for each image: Add meaningful alt text that conveys the intent or function of the image, rather than just describing it literally.
- Use detailed descriptions for complex visuals: When content like graphs or infographics requires extra context, provide captions or accompanying text to explain them fully.
- Include transcripts and captions: Provide text transcripts for audio content and captions for videos, making content accessible to users who are deaf or hard of hearing. See WCAG 1.2: Time-based media for more details.
Practical examples
Description of a work of art:
Washington Crossing the Delaware by Emanuel Leutze, 1851
“An oil painting of General George Washington standing with one knee bent at the front of a ship, leading his troops to a surprise attack after crossing the mighty Delaware River while an American flag waves majestically over them. This painting is considered one of the most recognizable images in American art history.”
A social media post:
Many years ago, Silktide took a stand about the EU’s new privacy directive, typically referred to as “The Cookie Law.” You may have noticed how many cookie banners you see on websites today. Silktide made a website calling out the ICO in particular: “Dear ICO, please sue us!” And they clapped back:
We added the screenshot to the nocookielaw website, but the alt text was “ICO tweet.” We were all young once, right? Now we know better and we’d write the contents of the tweet, like this:
“ICO @ICOnews tweeted, @nocookielaw You know what cookies you’re using & you told people you’re using them. They’re the 1st steps on road to compliance. Well done”
Decorative images:
Sometimes images are not conveying important information, are ‘eye candy,’ or even are meant to be invisible (like tracking pixels that the cookie law was on about). These need blank alt text so that screenreaders know to skip over them. If you don’t make the alt text blank, strange things can happen, like the file name being read out.
Exceptions
Purely decorative elements, like background images, may not require text alternatives. However, meaningful content always needs a description to ensure accessibility.
Top tips
- Make alt text meaningful: Write descriptions that capture the purpose of the image, not just what’s visible, so users get the full context.
- Prioritize key information: For each image, consider what information is essential for users to understand its role on the page.
- Ensure consistency: Use consistent language for alt text across your site to provide a smooth experience for all users.
- Use context: If an image is linked or interactive, make sure the alt text reflects its function, such as “Link to checkout page.”