Alternative text for images
Topic here is the mechanics of adding alternative text for images.
If images convey information to users, this must also be conveyed through text. How this achieved depends on how the image content is brought into the page. This covers mainly the mechanics of adding alternative text, but not the philosophy of what to add.
See below for some common approaches using the following elements
<img><picture><figure>and<figcaption><svg>role=img- CSS pseudo-element e.g.
::beforeand::after - Font icons / emojis e.g. FontAwesome
<i class="fa-circle"></i>
Methods: Web
The img element
Use the alt attribute on the <img> element e.g.
<img src="banner.png" alt="Lake surrounded by trees">The picture element
The <picture> element allows for multiple source elements (e.g. for different break points) and a single img element.
Use the standard alt attribute within contained <img> elements (the picture element is simply a container element) e.g.
<picture>
<source srcset="/img/logo-800px" media="(min-width: 800px)">
<img src="pic.png" alt="Acme Corporation">
</picture>Each <source> element is evaluated; if true then contents are displayed, if false then the next <source> element is evaluated, and so on. If all evalute to false, then the <img> element is displayed. In all cases, the <img alt attribute is used – this element and attribute are therefore mandatory.
The <figure> and <figcaption> elements
The <figure> element is block level, and can contain multiple inline elements (e.g. multiple <img>), each with it’s own alt attribute. The <figcaption> element is visible (unlike the alt attribute). Note that the <figure> element is not restricted to images; it can contain code snippets, or other textual data. In this context, however, we are concerned with the alternative text for images.
Consider the benefit of a visual caption over traditional alt text. Alt text is where the visual content of the image is self evident. A caption is where all users benefit from the description. An example would be a headshot of a person. If it’s important to know who the person is, use a caption so that is it visible for all users e.g.
<figure>
<img src="joe.png" alt="Joe is smiling, facing the camera outside on a sunny day">
<figcaption>Joe</figcaption>
</figure>Note that alt text can still be used to describe the self-evident aspects of the image, and then supported with the visual caption.
SVG images
SVG images have some built in elements for providing title and description. Reference these with aria-labelledby to cater for more browsers, and use role=img to prevent screen readers reading out the child nodes individually e.g.
<svg role="img" aria-labelledby="title description">
<title id="title">Telephone</title>
<desc id="description">Person speaking</desc>
...
</svg>Note that if this is a simple image with brief alt text and no description, then just the title can be used:
<svg>
<title>Title text</title>
</svg>role=img
Adding the img role to an element, allows it to act as a grouping element for multiple image components e.g.
- Ascii art
- Muliple
<img src - Emojis / icons
for example
<div role="img" aria-label="Smiley">
:-)
</div>or
<div role="img" aria-label="A rainbow">
<img src="redCrescent.jpg" alt="Red crescent">
<img src="greenCrescent.jpg" alt="Green crescent">
...
</div>Note that typically screenreaders will not read out the individual components within a role=img container – though of course alt text has value for other than screen readers e.g. users for whom the images do not load.
CSS pseudo-content
CSS ::before and ::after can be used to insert CSS content before, and/or, after an element. A common example is quotation marks (via MDN) e.g.
<p>To be, or not to be</q>`q::before {
content: "<<";
}
q::after {
content: ">>";
}This would render the CSS content visually on the page before, and after, the quote e.g.
<<To be, or not to be>>It is not advised to rely on CSS content being available for accessibility, as it has only partial support meaning in some cases the content will not be exposed via the accessiblity tree.
Fontawesome and font icons
These are icons rendered via CSS e.g. (Note that it is good practise to hide these elements from AT users via aria-hidden)
<i class="fa-circle" aria-hidden="true"></i>This would typically render a circle icon on screen. As these are not rendered via an img element, there is no concept of an alt attribute to use. Instead alternative text must be provided in a different way.
For non-interactive content, this can be done via a visually hidden span or similar e.g.
<p>
<i class="fa-telephone"></i>
<span class="sr-only">Telephone</span>
0181 811 8181
</p>For interactive content, either hidden text as above can be used, or the icon meaning can be incorporated into the accessible name of the interactive element e.g.
<a href="tel:01818118181" aria-label="Telephone 0181 811 8181">
<i class="fa-telephone"></i>
0181 811 8181
</p>