WCAG SC 1.1.1 Non-text Content highlights the importance of providing text alternatives for all non-text content to ensure accessibility for users, with exceptions considered. This guideline aims to make digital content perceivable to everyone, particularly those relying on assistive technologies.
Ensure that all non-text content presented to users is accessible through text alternatives, covering controls, time-based media, tests, sensory experiences, CAPTCHAs, and decorative elements. The objective is to make content perceivable by users who rely on assistive technologies, individual style-sheets extensions, or have disabilities affecting their perception of visual content.
Alt Attribute: Use meaningful descriptions for images using the alt attribute.
Role="img" and aria-label: Apply these attributes for images within anchors, SVG, or CSS images to provide context.
Title Attribute: Utilize the title attribute for image links to offer additional information.
Role="presentation" or alt="": Use these attributes for decorative images which don’t convey essential information, to indicate they should be ignored by assistive technology.
Inputs of type image: Apply Alt Attribute to an input type="image" to ensure their functionality is accessible.
Hidden Text: Implement the use of hidden text for images with backgrounds applied through CSS. Conceal the text using CSS rules. This will ensure that users who utilize external style sheets can still perceive the information conveyed by non-text content.
Text Alternative for Grouped Images: Provide a single text alternative that describes the collective meaning or function of a group of images. Associate this text alternative with one representative image in the group, while marking the remaining images in a manner that can be ignored by assistive technologies. This approach reduces duplication and improves efficiency for users by conveying the purpose of the entire group succinctly.
Example 1: Using alt attributes on img elements
<p>You can adopt Garfield the cat!</p>
<img src="cat.jpg" alt="" />
Explanation:An empty alt attribute does not provide any meaningful description for users relying on screen readers, making it impossible for them to understand the content. An empty alt text should be used only when the non-text content does not convey any information, or purpose and should be deliberately avoided.
<p> You can adopt Garfield the cat!</p>
<img src="cat.jpg" alt="A cute cat playing with a ball of yarn" />
Explanation:The alt attribute provides a brief text description that conveys the same meaning as the image, ensuring that users with visual impairments can understand the content.
Example 2: Using a Single Text Alternative for Grouped Images.
A website showcases a diverse range of clothing items. To provide users with a comprehensive view of our product range, we present three images representing different categories. Each image contributes to forming a complete visual representation of our offerings.
<p>Explore our product range:</p>
<img src="product1.jpg" alt="" />
<img src="product2.jpg" alt="" />
<img src="product3.jpg" alt="" />
Explanation:In the incorrect implementation, each image lacks a meaningful alt attribute. Without descriptive text alternatives, users relying on assistive technologies are unable to comprehend the purpose or content of the grouped images. This diminishes the overall accessibility and usability of the web-page.
<p>Explore our product range:</p>
<img src="product1.jpg" alt="Variety of clothing items" />
<img src="product2.jpg" alt="" aria-hidden="true" />
<img src="product3.jpg" alt="" aria-hidden="true" />
Explanation:In the corrected version, the first image represents a part of a larger image formed by multiple components. The other images contribute to forming the complete visual representation, but they don't provide additional standalone information. Therefore, they're marked as decorative and hidden from screen readers with empty alt attributes. Using a single description for the main image helps people with disabilities understand the overall concept without repeating details. This improves accessibility and ensures a better user experience for all visitors.
Example 3: Concealing Text for Images with CSS Backgrounds
<style>
.image-with-background {
background-image: url('charlie-the-dog.jpg');
width: 300px;
height: 200px;
}
</style>
<p>Adopt a dog!</p>
<div role="img" aria-label="Charlie the dog" class="image-with-background"></div>
Explanation:In the incorrect implementation, an image of a dog is fetched via the stylesheet and attached to the element. The issue occurs when users disable the website's CSS and use their own stylesheets. At that point, the image disappears from the document.
<style>
.image-with-background {
background-image: url('background-image.jpg');
width: 300px;
height: 200px;
}
.hidden-text {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
<div class="image-with-background" role="img">
<span class="hidden-text" aria-hidden="false">Charlie the dog!</span>
</div>
Explanation:In the correct example, an off-screen element is nested within the image. If the CSS is turned off or overridden by an external stylesheet, the alternative text “Charlie the dog” will be presented in the element.