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.

Live Examples

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

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>