Skip to content

1.1.1

Jump to bottom
Anika Henke edited this page Oct 16, 2024 · 18 revisions

1.1.1 Non-text Content

WCAG says:

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.

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 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.

When this is applicable

This applies if the page includes:

  • images or symbols in any form, including SVGs, background images or icon fonts
  • video, audio or multimedia objects
  • animation
  • CAPTCHAs

Check images

Use the browser's inspector or a screen reader to check all types of images.

Check:

  • images have alternative text - text that's either close to the image, or an accessible name (like text in the alt attribute or an aria-label) or other methods (like longdesc or a link to a description)
  • alternative text is appropriate - if an image is meaningful the alt text should describe its purpose, otherwise it should be marked up as decorative

<img> elements

To check alt text on img images, use the Web Developer extension and go to 'Images > Display Alt Attributes'. img elements must always have an alt attribute whether it is adding the alternative text or it is empty.

Background images

A background image is an image that is not in the content (HTML) but the CSS.

Font icons

Some fonts contain icons such as symbols and glyphs. These can be added directly into HTML or inserted using CSS. Some screen readers will ignore them and some will read them out as something unrelated. As such, check the character for the icon is hidden from screen readers.

Emojis and symbols

Emojis and symbols already have inherent alternative text. But that might not be what is the most appropriate.

<svg> elements

SVGs should either have:

  • alternative text in title or desc element or in aria-label - if the title element is used, the svg element has an aria-labelledby referencing the title
  • aria-hidden="true" if it's decorative

What the alternatives should be

Generally, if the image has meaning, describe its purpose. If it's not meaningful, make sure it's marked up as decorative.

For interactive images or images as controls:

  • alternative text of an image in a link should describe the target
  • alternative text of an image in a button should describe the action
  • alternative text of image maps should describe the target or action
  • if both the contents of the image and the target or action are equally important, the alternative text should describe both

For images containing text, check:

  • the alternative text includes the same text as the text on the image
  • symbols are not described but replaced with their meaning
  • CAPTCHAs describe the purpose and point to an alternative way to solve it using different senses

For decorative images:

  • img images must still have an alt attribute and it must be empty (alt="")
  • you can use aria-hidden="true" for any other type of image

You should also check objects that have been inserted or embedded on a page. This might include video-only or audio-only content, animations, graphs or diagrams. This type of content should have a fallback text that identifies what it is and describes it. That alternative text ultimately needs to be in text form. For example, when a video doesn't load, you could have a fallback image that has alternative text. Although diagrams and graphs are excluded from 1.4.5 Images of Text, they still need an alternative under 1.1.1.

If multiple images have been grouped to compose a larger image, it's fine to have just one alternative text describing the larger image and the other alt parameters can be empty.

Helpful resources

Exceptions

  • if non-text content is part of a test or exercise and alternative text would render the test irrelevant, unless it's a CAPTCHA
  • if words cannot describe a sensory experience, non-text content should be identified and have a brief description

Best practice

  • Alternative texts should be clear and short
  • If an image within a link or button is unclear to everyone, it's bad usability
  • If any alternative text is visible, there should be no hidden alternative text that duplicates it
  • If image and text are in the same link or button, do not duplicate the link or button text in the image alt text - use an empty alt (or equivalent) or describe the image if it's important
  • If image and text are adjacent but link to the same target (for example a thumbnail image and article title which both link to the same place), hide the image and its link for screen readers and remove the link from the tabbing order
  • Images in links or buttons should have descriptive text within the same link or button
  • If the alternative text is long, it shouldn't be added using attributes - for example, complex diagrams should not be described in the alt text but somewhere else on the page (the alt text should say what and where it is described, using words or programmatically)

Other ways to test

  • Check if there are any background images by changing colours in Firefox (background images will disappear)
  • Check alt text by looking at the HTML source code and searching for: <img, type="image", <area; look for background(-image), content within CSS
  • Use the Web Developer extension and go to 'Disable All Styles and Images > Hide Images' to reveal what other types of "images" there are - for example, it will leave background images or font icons or objects (be aware that results can be inconsistent as it also removes some background images)

Mobile app testing

Use a screen reader to check text alternatives for images and other non-text content.

Clone this wiki locally