The modern web is rich with diverse multimedia content, whilst this is great, it's not always accessible. Images, video, and audio are very effective tools for communication but what happens if you can’t perceive all of this content?

This post will discuss the most common multimedia content: images, the follow-up post will look at video and audio. Both address the Perceivable principle of the WCAG 2.1 specification.

A picture is worth a thousand words

This is an old adage meaning that a single image can convey a message much more effectively than a written or verbal description. This is often why images are included in the content as well as an effective way to break up text-heavy pages. But what type of images do we use on the modern web,

According to the W3C there are 7 Types of images we use these are

• Informative Image
• Decorative images
• Images of text
• Complex images
• Groups of images
• Image Maps

How do we make images accessible?

The first thing we need to do is provide a means with which to make these convey their purpose when the content of the image cannot be seen, this is an ‘A’ level success criteria the lowest level achievable and is described as

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 (Level A)

Alternative Text

Alternative text also referred to as Alt Text but written as alt="" in the code is a hidden HTML attribute included as part of the image HTML tag this is then used by assistive technology to describe its purpose in context. It is required for all images with only two exceptions which we will cover later.

Long Description & Aria-labelledby

The long description is a secondary means by which to associate another element as the description of the image. This is commonly replaced now by the aria-labelledby feature which functions in the same way but has better support across browser and assertive technologies and can be assigned to more than just images. It works by informing the user the ID of another element on the page as the intended description.

One key difference is that a long description can reference a file outside of the current page via a URI where as aria-labelledby cannot and must use an element on the current page.

Captions

Image captions are often confused for a means to provide accessibility, Whilst they do provide context to an image they often end up a duplication of the alternative text or vice versa. Understanding the difference between alt text and captions and how they are used is important.

Alternative text is a hidden attribute not displayed but required. Captions are displayed and not required. Both are read and repeated to the user by the assistive technology which is why they should not be duplicates of each other as it is redundant and frustrating to users. Instead, the caption can be used to provide additional information not present within the image whereas the alt text is there to describe the content of the image itself.

By giving the caption an ID however it would make it available to use as a long description or aria-labelledby description.

Take the following Wikipedia image of the state funeral for Queen Elizabeth II as an example:

^{Sourced from Wikipedia}

Obviously, the caption is much more detailed but also provides much more information surrounding the event than the text description.

A quick guide to how best to make each type of image accessible

Informative images

This type covers what most people likely think of when you say images on a website, It's typically photos or icons we use on our page to punctuate the text.

The alt text for these images should be a description of the visual content of the image.

Decorative images

This type of image is decorative only and provides no relevant content to the user, this is one of the only times an empty alt attribute should be used.

Functional Images

Functional images are images that serve a purpose, common examples are graphical buttons such as print buttons. Functional images should describe the purpose/function the image is performing instead of describing the visual representation of the image.

Images of Text

^{Sourced from Wikipedia}

Sometimes images are used that are simply images of text, this is not recommended but sometimes unavailable such as logos or word marques, in this case, simply add a copy of the text in the image as the alternative text.

Complex Images

Complex images include images such as graphs or data visualisation, in these examples, a complete text description of the image should be provided this is a good example of when to use the long description or aria-labelledby attributes as described previously.

Groups of images

Groups of images fall into two categories, multiple images to convey a single piece of information or a collection of images.

An example of the first would be a 5-star rating system

Not that even though there are multiple images they are all indicating one piece of information, therefore only the first image has the alternative text, and the remainder are treated as decorative images.

Galleries

The second example of a collection of images or galleries. A series of different photos on a similar subject should all have their own alt text, if captions are used I would also consider if there should be linked as long descriptors for the image also.

Image maps

The Image should have its own alt text but also each hotspot in the image map should also include its own alt text indicating the contents of the hotspot. Image maps are often also complex images so a long description may also be required.

Conclusion

For an image to be accessible we need to provide it with at least an alternative text, even an empty one, and where appropriate a long description, however finding the right description for either is the key to accessible images. As an author, you need to understand how and why this is important and tailor descriptor content accordingly.

Avoid repetition in the case of multiple describers and give enough information to express the purpose of the image in the content even if the user isn't ultimately 'seeing' the image itself. Content flow is important and if the image is part of that flow then it's imperative to make sure that those who cannot see the image still have the same understanding of the content as those who do.

As with all things accessibility, the hardest part is to know why each solution is important and how to use it effectively.

SteemWOW

If you would like to show your appreciation please support the @steemwow team and vote for our steemwow witness, you can do this by heading over to the Steemit Wallet Witness list, and scroll to the form at the bottom of the page. Just type steemwow into the box and hit vote as illustrated below.