Online shopping has evolved into a way of life rather than just a trend. It offers access to a global marketplace, unique products, reviews, price comparisons, and much more, all from the comfort of your home. However, the experience can be frustrating for newcomers due to the website being inaccessible. Navigating with assistive technologies like VoiceOver on MAC or iPhone, every item's color or shade is often announced as an 'unlabeled graphic' or 'image 1', or 'image 2', which hinders Sarah's ability to understand products effectively. Now, Sarah seeks a more accessible website or app that allows her to shop independently.
Ensuring websites include descriptive alt text for images is crucial in making the images accessible for everyone, including those using assistive technologies. Alt text provides essential information about images, helping users like Sarah understand products visually, without depending on sight alone. By prioritizing accessibility features like alt text, online platforms can truly empower all users to navigate and utilize their services seamlessly.
Picture Perfect – The importance of Alt text
Websites and applications are filled with colorful, insightful and catchy looking images.
These images are used for presentations as well as to convey important information.
For example, images or icons targeting social media handlers, logos, product images, and so on convey information and images or icons such as a lock icon beside a “Secure” text, a box icon beside a “Gift options” text and so on used purely for presentation purposes.
Images help in creating eye-catching websites and applications, and so does an alt text by grabbing the attention of users, including those with visual impairments along with certain scenarios where the images don’t load due to low bandwidth conditions.
An alt text helps in creating inclusive content. It plays an important role for users accessing the page using assistive technology. Users with visual impairment such as screen readers rely on alt text to perceive the same information visually conveyed using images.
Check out Image Description – An Integral part of Content Accessibility
Now let us amplify our understanding of the benefits of providing alt text to images! But before that let’s understand the category of images, the Do’s and Don’ts along with some coding breakdown for providing textual description for different implementation of images.
Understanding the Intent of Image Types
- Decorative images: Images presented only for visual decoration purposes should be skipped for assistive technology users. Providing empty alt text (alt=””) to these images will be the apt approach.
- Informative images: Images representing important information. These images should have alt text conveying the same information as presented via image. Informative images could be:
- Static images
- Functional Images such as Image buttons and image links.
- Complex Images – Graph, Charts, Diagram, Maps and so on.
- Images of Text
Top picks vs. Red flags
Let us now explore different examples and learn how images can be correctly coded to ensure accessibility.
The screenshot of the first example below displays three decorative images on a website.
- Do’s
- Alt with no value: <img src=“...” alt=“”>
- Don’ts
- Alt with empty space(s): <img src=“…” alt=“ ”>
- Alt with descriptive alt: <img src=“…” alt=“Group of people icon”>
- Alt with value as Image: <img src=“…” alt=“Image”>
The screenshot of the second example below features an informative logo image on a website.
- Do’s:
- Alt with descriptive value: <img src=“...” alt=“W3C logo”>
- Don’ts:
- Alt with empty space(s): <img src=“…” alt=“ ”>
- Alt with value as logo: <img src=“…” alt=“logo”>
- Alt with no value: <img src=“…” alt=“”>
Image Coding Breakdown
There are various methods to embed images and provide alt text for accessibility. Let us have a look at a few of the approaches:
- <img> Element: This is the most common way to embed images on a website.
To provide textual description to image coded using <img> element use the “alt” attribute.
<img src="image.jpg" alt="Description of the image">
Or via hidden text:
<img src="image.jpg" alt=”">
<span class=“sr-only”>Description of the image</span>
- <input type="image"> Element: This can be used for creating an image button. Use the “alt” attribute to provide a textual description.
<input type="image" src="button.png" alt="Purpose of the image button">
- <figure> Element: To provide a visual caption for the images a “figure” element or role “figure” is used.
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>Caption of the image</figcaption>
</figure>
OR via ARIA:
<div role="figure" aria-labelledby="captiontext">
<img src="image.png" alt="Description of the image" />
<span id="captiontext">Caption Text</span>
</div>
- <svg> Element: SVG elements provide superior quality images that are not pixilated when images are zoomed in. One of the ways to offer textual description is to use role=“img” and aria-label attribute.
<svg role=“img” width="100" height="100" aria-label=" Description of the image">
(…)
</svg>
- <canvas> Element: To display a static image or interactive image. Provide a textual description using the ARIA attribute or using a text.
<canvas><p>Description of the image</p></canvas>
OR via ARIA:
<canvas role=“img” aria-label="Description of the image "></canvas>
- Images with CSS: Images are often displayed before or after Pseudo class to improve webpage performance.
<button>
<span class="sr-only">Description of the image</span>
::before
</button>
OR via ARIA:
<button aria-label="Description of the image">
::before
</button>
In some cases, the textual descriptions are covered in the surrounding text. For example, step by step procedure to create an account is provided in text format along with an image showing the same steps. Here, the images should be considered decorative and skipped for screen reader users.
Benefits of transferring information from images into inclusive text
Uncovering User Experience
Alt text benefits several user groups such as:
Users with Visual impairments:
Alt text enables users with visual impairment who rely on screen readers like JAWS, VoiceOver, NVDA and so on to listen to the same information conveyed by images. The alternate text enhances their understanding of the page’s context.
Users with Cognitive impairments:
Alt text serves as a brief but detailed description, enhancing the accessibility of complex images for individuals with cognitive impairments, enabling them to understand the content more effectively.
Users with Mobility impairments:
Alt text assists users with mobility impairments in navigating and accessing functional images. When image buttons or links have textual descriptions that match their visual appearance, it allows them to easily use speech recognition software to access the functionality. This ensures a smoother and more intuitive user experience for individuals relying on such assistive technologies.
Slow internet connection:
This situational disability is something that most of us have experienced when internet speeds unexpectedly drop due to technical issues.
In such situations when images take longer to load or do not load due to a slow internet connection, alt text will appear on the screen and help users get the information and browse smoothly.
Alt text also helps users who prefer disabling images and mobile users with connectivity issues.
Legal Benefits
The alt text issue, often regarded as a low-hanging fruit, has been a significant factor contributing to legal actions. Ensuring effective alt text not only improves accessibility but also addresses legal compliance, highlighting its critical role in mitigating potential legal risks.
Helps in achieving the conformance and compliance of:
- Web Content Accessibility Guidelines (WCAG)
- Section 508 of the Rehabilitation Act
- Accessibility for Ontarians with Disabilities Act (AODA)
- Americans with Disability Act (ADA)
SEO – See Every Opportunity!
Alt text helps in popping up websites in search results. SEO relies on image alt text to understand the information conveyed via image. Correct keyword usage in the alt text will boost the image’s relevance for the potential audience.
Alt text Essentials
Descriptive and Succinct
Provide descriptive and succinct alt text for informative images that convey information to help users understand the context and not miss out on any relevant information. Avoid providing unnecessary details in the alternate text due to the alt text limit of 125 characters and also unnecessary details will lose user interest.
Keywords
Add only relevant keywords in the alt text to ensure it has meaning for the user listening to the alt text as well as help in SEO for the targeted audience.
Evaluate Accessibility
Accessibility of the image can be evaluated using a screen reader, code inspection, or other tools to ensure the alt text is sufficiently describing the image.
Closing Thoughts
Creating images accessible to all users promotes inclusion, and makes users feel welcome and valued. Save brand reputation and credibility, avoid legal risk. Gives an upper hand compared to other organizations in the same segment that do not focus on accessibility.
This article by Janaki Konar is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.
