A11Y Solutions
Provides auto-suggestions when entering text

    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.