Text Alternatives

Text alternatives are among the hardest parts of accessibility to get right because they rely on context and interpretation.

The Problem

Improper, duplicative, or missing alternative text can prevent screen reader users from understanding important parts of a page.

The Solution

Keep the context of the image in mind while determining alt text, sometimes it's truly not necessary. Three examples below.

Related Articles

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

before

after

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/semantics/text-alternatives/before/index.html to /examples/semantics/text-alternatives/after/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Accessibility Solutions - Semantics - Text Alternatives</title>
<link rel="stylesheet" href="../../../presentation.css">
<link rel="stylesheet" href="text-alternatives.css">
</head>
<body>
<h1>Text Alternative examples</h1>

<h2>Informative Images</h2>
<p>The following SVG contains text that isn't covered in the surrounding context,
nso alternative text means some users missis added with that information.</p>
<img class="logo" src="/img/logo.svg" width="180"
alt="Accessibility Solutions">

<h2>Decorative Images</h2>
<p>The following SVG
has alternative text that duplicates plain text nearby, given the context it'd be best omitbrings no additional semantic meaning so it has an empty <code>alt</code> attributed.</p>
<span class="decorative">
<img src="/img/logo-small.svg" width="50" alt="
Accessibility Solutions"> Accessibility Solutions
</span>

<h2>Images with <code>&lt;figcaption&gt;</code></h2>
<p>The
<code>&lt;figcaption&gt;</code> tag is not a replacement for animage in the figure below has appropriate alternative text while the associated <code>alt&lt;figcaption&gt;</code> attribute on the associcontains additional related imagecontent.</p>
<figure>
<img class="logo" src="/img/logo.svg" width="180
" alt="Accessibility Solutions">
<figcaption>The Accessibility Solutions logo was created in SVG format.</figcaption>
</figure>

</body>
</html>