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
habrings no additionalternative tex semantic meaning so it that duplicates plain text nearby,empty
given the context it'd be best omit<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
image in the figure below has appropriate alternative text while the
associated
<code>&lt;figcaption&gt;</code> contag ins not aadditional replacement for anted
<code>alt</code> attribute on the associated imagentent.
</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>