All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.
Accessibility Requirements For 1.1.1 Non-Text Content (A)
- Images (like logos and icons) that communicate information have short text descriptions;
- Editorial images that support the text around them have short descriptions;
- Images (like infographics, charts and diagrams) that communicate complex information also have longer text descriptions within the same page;
- Decorative images have empty text descriptions.
- In situation of capcha present in the form of image (non-text content), Alternative text should be provided for assistive technology users that clearly informs about the presence of capcha and alternative and accessible way should be provided to solve capcha.
Common mistakes for 1.1.1 Non-Text Content (A)
- The image communicates information but does not have a text description;
- The text description does not communicate the same information as the image;
- The image has a text description but, like a placeholder or file name, it does not communicate the information in the image;
- The image has a text description that is an exact duplication of content elsewhere on the page.
- Images that contains capcha should have the alternative text such as “capcha” or similar alternative text. Also, other way of solving capcha should be provided for assistive technology users.
Benefitted disability types of success criteria 1.1.1 (Non-text content)
Following are the types of specially challenged people who are using their assistive technology, benefitted through this success criteria.
- Visually challenged person, who is using screen reader as an assistive technology.
- A defblind person, who is able to read screen reader’s output through a special device called braille display.
- A cognetive challenged user, who is unable to understand complex images.
Techniques for 1.1.1 Non-Text Content (A)
Your site doesn’t include support for the Accordion Item block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.
Common Failures for 1.1.1 Non-Text Content (A)
The following are common mistakes that are considered failures of Success Criterion 1.1.1 by the WCAG Working Group.
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
- F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
- F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them
- F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type “image”
- F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
- F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative
- F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative
FAQS about Non-text Content
Why should you add alternative text to your image?
Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. Alt text will be displayed in place of an image if an image file cannot be loaded.
How descriptive should alt text be?
While ALT tags need to be descriptive, they also need to be brief. They should not be full sentences or paragraphs. With a limit of about 125 characters, an ALT tag should provide enough detail for users and search engines to relate the image to the context of the page.
When should you not use alt text?
Including alt text for decorative images or items. Decorative items such as dividers or design items that don’t provide additional context or content don’t need alt text. They don’t add to the information a user needs and they make little sense, or are unnecessary, when read with a screen reader.
Is information conveyed through sensory characteristics also supported in text?
Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents.
Should all images have alt text?
Each image should have an alt text. Not just for SEO purposes, but also for accessibility. Because people with a visual impairment will otherwise not know what the image is about.