WCAG Principle: Perceivable
Guideline 1.1: Text Alternatives (Provide text alternative for any non-text content)
Conformance Level: A (Minimal Requirement)
What is 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.
This success criterion requires text alternatives for non-text content including all types of images, area maps, complex charts, graphs, CSS images, input image controls, CAPTCHA codes, and audio and video content.
How does it make your website accessible?
Text alternatives allow users to access your information in any sensory mode that suits their needs, for example, visual, auditory, or tactile. They also allow users agents to render information in a variety of ways.
A person cannot see images can listen to a synthesized voice read the text alternative. Also, people who cannot hear audio files can read a text alternative. In the future, text alternatives will also allow information to be translated into sign language or into a simpler version of the same language.
Who benefits from alternatives for non-text content?
- People with visual impairments
- People with hearing impairments or who have trouble understanding audio content.
- People who need to search for non-text content and to repurpose it for any reason.
How to Meet 1.1.1 Non-Text Content
How to add text alternatives to non-text content:
- Add a short text alternative that serves the same purpose and conveys the same information as the non-text content.
- For non-text content (e.g., a chart or diagram) that cannot be described in a short description, provide a short text alternative that briefly describes the non-text content.
- Use aria labels to provide labels for objects.
- Use aria labelled-by to provide text alternative for non-text content
- Provide a text alternative to one item within a group of images that describes all of the other items.
- Use alt attribute on <img> elements.
Helpful Tips For Developers
- Whenever possible, provide alternative CAPTCHA options such as audio or an OTP (one time password).
- Provide a summary or description of complex charts and graphs in addition to short alt text.
- Use alt attribute in image links to provide additional information.
How To Test If You’ve Met Compliance:
- Remove, mask, or hide non-text content and replace it with the text alternative.
- Be sure the text alternative achieves the goal of the non-text content.
- If the non-text content contains words that are important to understanding the content, ensure that the words are included in the text alternative
- If you can fully understand the non-text content just by reading the text alternative, you’ve met compliance with this success criterion.
Bad and Good Examples of Image Alt Text (Pictures and Developer Code)
EXAMPLE of a bad alt text Code Snippet
<img src="/joe-biden.jpg" alt="A Man"/>example of a good alt text Code Snippet
<img src="/joe-biden.jpg" alt="Joe Biden, President of America"/>Frequently Asked Questions
What is alternative text?
An alternative text (alt text) is a short description of the appearance or function of an image on a web page. It is read aloud by screen readers or displayed in place of an image that fails to load.
Search engine bots also index the alt text of image(s) to better understand your webpage’s contents. Alternative text is also known as “alt attribute,” or “alt description”.
When is alternative text most helpful?
An alternative text is most helpful when it accurately describes images to users who cannot see them. These include people who are blind or visually impaired and rely on screen readers. Alt texts are also helpful to sighted users in cases where:
- the image is missing/fails to load
- the user’s internet connection is too slow
- the user has disabled images, or
- the user agent (the browser) does not support images.
How can I write helpful alt text for people with accessibility concerns?
To write helpful alt text for people with accessibility concerns, follow these simple tips:
- Describe the image as precisely as possible, but keep it short.
- For complex images that require long descriptions, such as maps, charts, or diagrams, summarize the image from the accompanying text.
- Avoid using terms such as “image of,” or “picture of,” etc. in your alt text since it is already assumed that your alt text refers to an image.
- It is not necessary to include alt text for images that purely decorative (does not convey any meaning or value).
What is the difference between "alt" text and "title" text in HTML image element?
The difference between alt text and title text is that alt text is a textual description of your images to help screen readers and search engines understand what they are. The title ext, on the other hand, simply provides a name for the image but does not describe it.
How do I add alt text to an image in Ms Word?
To add alt text to an image in Ms Word, follow these steps:
- Right-click on the image and select ‘Edit Alt Text’.
- Select the image and then select its for format menu, e.g., ‘Picture Format’. Then select ‘Alt Text’.
- In the Alt Text pane, type 1 – 2 sentences in the text box that accurately describes the image and its context.
