Alt-Text: The Secret Sauce to Web Accessibility

As you've noticed, I've been focusing a lot on web accessibility lately, recognising the importance of inclusive development. The goal of this blog post is to share my insights on how to properly use alt-text for images, ensuring that everyone can perceive and understand visual content!

Understanding the Purpose of Alt-Text

Images and graphics make content more appealing and easier to understand for a lot of people. They can, however, cause real barriers for some people if not handled right. To address this, we must provide alternative text, known as alt-text, for every image displayed to the user.

What is Alt-Text?

Alt-text, also called alternative text, is a description of an image you post online. Alt-text can also be added to images embedded in digital documents (PDFs, Word documents, Google docs, presentations, etc). Its purpose is to allow people with visual impairments, cognitive disabilities, or low vision to access and understand visual content on the web.

People who are blind often use screen readers to interact with digital displays. These screen readers convert on-screen text into synthesized speech or braille output. An image, however, cannot be understood by screen readers. It is here that alt-text becomes helpful - it serves as a textual description of the image, allowing users to understand its meaning through screen readers.

Writing Alt-Text

To ensure a meaningful alternative text, it's useful to keep in mind that it should be a concise description of the purpose of the image, prioritising the most critical information at the beginning of it.

When crafting alt-text, it can be helpful to consider these questions inspired by Wikipedia's Style Guide:

• Why is this image included?

• What information does it convey?

• What purpose does it serve?

While alt-text allows for expressive descriptions, it's essential to remember its primary role as an accessibility practice. When writing alt-text, work in a way that prioritizes the experience of individuals who have limited or no access to the visual information in the image.

Also, sometimes we are tempted to include terms such as “image”, “icon”, “logo” or “picture” in the alt-text, which are generally unnecessary. Although it may be necessary to distinguish between paintings, photographs, or illustrations in some situations, it's preferable to avoid generic terms.

Some rules for alt-text to keep in mind from the web accessibility standards, are the following:

1. Instructions should not solely rely on sensory characteristics: Images providing instructions should not depend solely on sensory characteristics such as shape, colour, size, visual location, or orientation. We need to convey instructions in a way that is not dependent on these sensory aspects.

2. Ensure sufficient contrast ratio: Images containing graphics required to understand the content should have a contrast ratio of at least 3:1 against adjacent colours. This ensures individuals with visual impairments can perceive the information accurately unless a particular presentation of graphics is essential to the conveyed information.

3. Avoid images of text: Using images of text creates barriers for many users. Instead, we should use actual text styled with CSS, which provides more versatility and accessibility features.

How to contribute

You can contribute to web accessibility even if you don't use a screen reader or are a developer. You can add alt-text to an image during upload by using designated form fields. Making the internet a more inclusive place is as easy as adding alt-text to your images!

Almost all social media platforms offer the option to add alt-text to your posts. However, when this is not the case, a caption or adjacent text can be used to provide context for the image. It's important to remember that alt-text does not guarantee full web accessibility. It's just one of several factors!

However, it's still one step towards a more inclusive web and you can still advocate for accessibility practices by raising awareness about the importance of alt-text.

Best Practices

Let's explore some best practices for developers to keep in mind!

All <img> tags must have an alt-text

If an image does not have an alt attribute, a screen reader may announce the image’s src attribute instead, making things very confusing. So, all images must have an alt attribute. When an image does not have alt-text, provide a null alt attribute, like so:

1.      <img alt ... />
   

   or

    <img alt="" ... />
   

Other ways to provide alternative text

• Providing accessible names to images with the aria-label and aria-labelledby attributes. When these attributes are present, assistive technology will ignore the image’s alt-text and read the ARIA label instead.

• Associate text elsewhere on the page using the aria-describedby attribute.

• Use the <figure> and <figcaption> to associate visible text with an image. When using <figure> and <figcaption>, the alt attribute can be more minimal, and the <figcaption> can be more expressive. The <figure> and <figcaption> elements can be used for groups of images, as well.

Hiding decorative images from assistive technologies

Images that have no function or information content whatsoever are decorative images. These images can include stock photos included just for “eye candy.” Such images should be hidden from assistive technologies.

Decorative images can be hidden from screen readers in multiple ways:

• using a null alt attribute

• using ARIA role="presentation"

• using a CSS background image

When you use an empty text alternative (alt="") to conceal decorative images, ensure there is no space character between the quotes!

SVG Accessibility:

Implementing images as SVGs can solve accessibility challenges related to pixelated images and zooming. However, ensuring that SVG images are accessible requires some extra care.

SVG images that are implemented as <img> tags should also include the role="image" attribute.

<img src="example.svg" alt="An example SVG image" role="image">

SVG images implemented using the <svg> element should include the <title> and <desc>.

<svg width="100" height="100" aria-labelledby="title desc" role="img"> 
<title id="title">An example SVG image</title> 
<desc id="desc">This SVG image represents a simple shape.</desc> 
<!-- SVG content goes here -->
<rect width="100" height="100" style="fill:blue" /> 
</svg>

References for SVG accessibility:

• Using ARIA to enhance SVG accessibility (The Paciello Group)

• 7 solutions for creating more accessible SVGs (Simply Accessible)

• The <title> element (Mozilla)

• The <desc> element (Mozilla)

Providing a Unique Label for a Group of Images

Sometimes, a group of images may be used to convey a single piece of information. For instance, a series of star icons collectively depicting a rating for a specific product. In such cases, the single star is not meaningful by itself, Consequently, we have to provide a unique label for the entire group, which will be something like “Rating, 3 out of 5 stars”.

Speaking of the rating system, there is a better way to implement them and it's explained beautifully by GrahamTheDev in their blog post about an accessible rating system.

<p>Rating: 
    <img src="star1" alt="3 out of 5 stars" role="image"> 
    <img src="star1" alt="" role="presentation"> 
    <img src="star1" alt="" role="presentation"> 
    <img src="star2" alt="" role="presentation"> 
    <img src="star2" alt="" role="presentation"> 
</p>

Handling Complex Images

Complex graphs, charts, or diagrams often contain extensive information that cannot be summarized in a short phrase or sentence. In these cases, a two-part text alternative is necessary. The alt attribute value provides a brief description identifying the image, while a long description presents the essential information in text format. Consider providing alternative data tables for complex graphs to facilitate users' understanding of relationships between elements.

Enhancing Text Legibility Over Images

Researchers have found that people are drawn to information-rich photos when they relate to their current activity. Users can be motivated to take action by images that quickly evoke an emotional response.
As a result, many designers create highly visual interfaces with large background images or videos.
The problem arises when designers place text over an image without complying with accessibility requirements; standard text should have a contrast ratio of at least 4.5:1 (or 3:1 for large text, defined as 18- or 14-point fonts).
There are many solutions to deal with an image with overlying text., let's explore a few techniques:

• The designer and/or developer can add a layer of opacity between the image and text. For light-coloured text, adding a dark opacity layer is recommended, and vice versa for dark-coloured text. Alternatively, if opacity is visually overwhelming on the entire image, an opacity gradient can be applied instead. To ensure a compliant contrast ratio, the text needs to be positioned over the most solid colour area.

• Adding a solid border to the text, ensuring that the contrast ratio between the text and its border meets the WCAG requirements (at least 4.5:1, 3:1 for large text).

• The addition of a text-shadow can sometimes improve text legibility, however, only if the contrast ratio between the text and the background image is close to meeting WCAG standards.

• You might consider a different approach, like putting the information on one side and the text on the other side with a high-opacity background that obscures the background image, which isn't relevant for the information.

Want to know more?

• Brilliant blog post by Alex Chen about how to properly write alt-text

• WebAIM alt-text overview

• Alt-Text as Poetry Workbook by Shannon Finnegan and Bojana Coklyat

• More than Meets the Eye: What Blindness Brings to Art book By Georgina Kleege

• Museum Chicago description guidelines

⚠️ Copyright warning: The awesome horse GIFs belong to Pablo Stanley, check their interesting post on how to design for accessibility!