The most accessible format for any content on the web is plain text. Plain text is incredibly malleable, it can be altered in ways to cater to almost any disability. For users with no visual difficulties, they can simply read the text. If a user has visual impairments, the text can be converted to speech. Even if a user has both visual and auditory difficulties, plain text can be converted to braille.
However, most websites are not made up of pure text. We have other types of content that is not so malleable, like images. To make these alternative forms of content more accessible, we need to provide a text alternative of them.
For images, this is typically provided using the alt attribute. As a blanket rule, all images should have an alt attribute . This, however, does not mean that actual alternative text needs to be provided for every image. There are three states we can have for the alt attribute -
Defined- Where actual descriptive text is provided in the attribute, e.g. alt="A dog" . In this case, a screen reader will read the text provided when the user comes across the image, and usually give the context that it is an image.
Null- Where the attribute is written but left empty, e.g. alt="" . In this case, a screen reader will skip over the image entirely as if it never existed.
Invalid( bad practice ) - Where the attribute is skipped entirely. In this case, a screenreader will read the value of the src attribute instead. Having this happen is never useful to the user, so it is advised that no images remain in this state.
In this article, we will go over when each of the first two states is suitable, and how different types of alternative text should be used.
Alternative Text for Different Image Types
Broadly, there are 7 types of images. The way we handle alternative text is different for each.
1. Images of Text
As a general rule, images of text should be avoided, the only exception to this being for logos. Due to the flexibility of CSS, we can now recreate pretty much any visual styling to plain text. So, using an image of text may only be needed in the rarest of circumstances.
In these rare cases, the best practice is to repeat the text of the image in the alt attribute. This will give screen reader users essentially the exact same experience as visual users.
[code][/code] 2. Informative Images
Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.
For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.
26 Eletu Ogabi...
Monday 12:00 - 22:00 ...
[/code] If the information that the image is conveying is more of an impression, then a physical description of the contents of the image may not be appropriate. Instead, we can provide the feeling that the image is trying to convey in the alternative text instead.
For example, on a website for dog sitters, the image below might be on the about page.