Images
Public Article
Certified Article
The content of this article is certified for accuracy by the Digital Accessibility Centre.
Non text content
Images / Non-text content
- All images must have a valid alt attribute
- Spacer and decorative images have a null alt attribute <alt="">.
- Link images describe the destination page.
- Button images have an alt attribute that describes the function of the button.
- CAPTCHA (If used) should be made accessible for different types of sensory perception. Blind users may require and audio alternative.
- Embedded flash movies, objects, HTML5 canvas elements and all other non-text content should either have an alternative text version or text describing them if an alternative would not be appropriate.
- Avoid duplicating nearby text with image text. Use a null alt attribute where possible.
Non-HTML content
- Image content has a text equivalent that can be rendered by assistive technologies.
Full explanation
1.1 Text Alternatives
All non-text content must also be available in text.
1.1.1 Non-text Content (Level A)
All non-text information (e.g., photos, drawings, charts, graphs, icons, audio/video, Flash objects, form controls) must have an appropriate, accessible text equivalent.
Images
An image’s text equivalent does not necessarily describe the image but should serve as a textual replacement for it. What to look for in each case will depend on how the image has been added to the page. If the image was inserted using the img element, the img tag must have an alt attribute with a short text alternative. If the image was added using CSS, text that is located on the page but visually hidden might be acting as the image’s text alternative.
For more complex images, or things like Flash objects, where a short text alternative is insufficient to fully capture the meaning or purpose of the object, a longer text alternative is required. This longer text equivalent might exist as text elsewhere on the page or on another page in a way that the user can easily find. Note that in almost all cases, an MS Word or PDF document will not qualify as an accessible text alternative. If non-text content is primarily intended to create a specific sensory or emotional experience, e.g., a photo of a mountain range or drawing of a red rose, a simple text alternative at least identifies and describes the purpose of the non-text content.
Purely decorative or presentational images that have no functionality should ideally be added using CSS with no alternative text in the HTML content. But if they are added using the img element, they should have an empty or null alt attribute, i.e., alt="".
For detailed examples of the different ways a text alternative might be provided, see Requirements for providing text to act as an alternative for images.
Form controls
Form inputs and buttons must be accompanied by text that describes their purpose. For most form inputs, this text will be provided in an associated label element. For typical buttons, the text in the button itself should describe what the button does. Form image buttons also need text alternatives, which should be provided using the alt attribute (<input type="image" src="image.jpg" alt="Submit feedback">).
For the purposes of this guide, the requirement for form controls and inputs to have text alternatives is addressed by Success Criterion 4.1.2 Name, Role, Value (Level A)
Time-based media
Time-based media, e.g., audio and video, is made accessible by applying the requirements in Guideline 1.2 Time-based Media.
CAPTCHA
For an image-based CAPTCHA, a text alternative is required to describe the purpose of the CAPTCHA, but not its content. Additionally, at least one other form of CAPTCHA is provided that uses a different perceptual modality, e.g., an audio CAPTCHA.
Exceptions
The Web Accessibility Standard currently exempts complex visual maps that associate information with one or more points or shapes that cannot reasonably be represented by common identifiers such as postal addresses or the names of specific places or regions from the need to have a full-text alternative that serves the equivalent purpose. However, a simple text alternative at least identifies and describes the purpose of the complex visual map.
The rest of this premium article is available to ARK license holders.
Images was posted on 19/01/2023 @ 11:10