Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

WCAG 2.1 - SC 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.

Official Requirements:

  • 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.

How to fix:

  • Provide a concise alternative to the image in its ALT attribute.
  • If an image cannot be described concisely, use the LONGDESC attribute to point to a longer summary.
  • Provide a link to a text description adjacent to an image or other non-text content.
  • If an image is decorative, use an empty ALT attribute in the img tag. This tells assistive technology to ignore the image. Consider using CSS to use a background image instead.
  • If the content is time-based media (ie, a video or audio clip), provide a short text explanation of the purpose of the clip. Even better would be to provide a link to a transcript.
  • If the content is a CAPTCHA, provide an explanation of the CAPTCHA, and provide a link to a different form of CAPTCHA
  • Use label elements to identify form controls.
  • If the element is not meant to be seen by the user (images for positioning or tracking) mark it up in such a way that assistive technology will ignore it (for example, an empty ALT attribute)
  • If the non-text content is meant to create a specific nonverbal experience, such as a clip of music or an image used as a work of art, provide text identifying it as such. Additional descriptive text is even more helpful.
  • When using an OBJECT, EMBED, FRAME or IFRAME element, include within the body of the element some text describing the content of the element. With FRAME and IFRAME elements, links to the src of the frame can be provided. Text saying you must have the element enabled are not helpful.

Not sure where to start?

Start with a free analysis of your website's accessibility.