Understanding WCAG SC 1.1.1 Non-text Content
1.1.1 Non-Text Content
1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
- CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
Non-text Content Transcript
Hello everyone, today we’re going to talk about non-text content.All non-text content that is presented to the user must have a text alternative that serves the equivalent purpose, except in specific cases. These include purely decorative images used only for visual formatting, tests or exercises that would be invalid if presented in text, content primarily intended to create a specific sensory experience, time-based media, CAPTCHA verification to distinguish humans from bots, or if the non-text content is a control or requires user input.
Some requirements of non-text content are: images like logos and icons that communicate information should have short text alternatives that serve the same purpose as the image. Complex images like infographics, charts, and diagrams should have longer text descriptions within the same page. When the purpose of the image is to convey functionality, such as a magnifying glass icon, the text alternative should describe the action it performs. If the image conveys information, such as being part of a news article, the text alternative should convey the same information as the image. Each image should have a unique alternative to distinguish it from others, and phrasing should avoid redundancy. Images that are purely decorative and convey no information should be explicitly silenced in code so they are not read by screen readers.
Let’s understand why it is important to have non-text content. It ensures that the information conveyed by non-text content is accessible to people who cannot see it, such as screen reader users. Screen readers can only identify non-text content like images when they have alternative text attributes.
This benefits individuals with disabilities, including those who are visually impaired, deaf-blind, or cognitively challenged.
Now, let’s discuss some common mistakes. These include: when the text description does not communicate the same information as the image, when the image has a text description that duplicates content elsewhere on the page, when the image has no text description at all, when the image contains a CAPTCHA without alternative text, or when CSS is used to set background images without alternatives. An example of an alternative text on the web is ensuring decorative images are hidden from screen readers.
To summarize, one should provide an alternative text description for images and ensure that the description conveys the same message or functionality. Non-text content like images, charts, icons, and infographics must have appropriate text equivalents.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
This success criterion requires that any non-text content that includes active images (imagelinks), area maps, informative images, complex charts and graphs, CSS images, decorative images, input image controls, CAPTCHA and audio and video contents must have text alternatives. Out of these non-text elements, prerecorded audio and video, live audio and video are specifically handled in SC guideline 1.2.
What types of images are we talking about here?
We are talking about:
How are we to fix them?
WCAG’s sufficient techniques are not exhaustive as new ways would emerge. Yet, we suggest you have a look at them.
But here are a few of the for you:
Excellent Information Sathish.
Hello! Can i please clarify about animations on mobile app screens. Are they applicable to 1.1.1 if they are not instructions? If they are shown for example as a loading state and it takes about 7 seconds before screen moves to the next one. Should such animation be somehow announced by screen reader? Thanks! Kate.
Hello Kate,
Yes, in mobile applications we need to expose the loading indicator that appears. Screen reader should announce loading. This way user has understanding that focus moved to new screen.