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.

Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



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.


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

<!DOCTYPE html>
<html lang="en">
<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" />
<h1>Text Alternative examples</h1>

<h2>Informative Images</h2>
The following SVG contains text that isn't covered in the surrounding
nso alternative text means some users missis added with that information.

alt="Accessibility Solutions"

<h2>Decorative Images</h2>
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.
<span class="decorative">
<img src="/img/logo-small.svg" width="50" alt="
" /> Accessibility Solutions" />
Accessibility Solutions

<h2>Images with <code>&lt;figcaption&gt;</code></h2>
image in the figure below has appropriate alternative text while the
<code>&lt;figcaption&gt;</code> contag ins not aadditional replacement for anted
<code>alt</code> attribute on the associated imagentent.

alt="Accessibility Solutions"
The Accessibility Solutions logo was created in SVG format.