auditmysitev2.0.2

Missing explanation of abbreviations (AAA)

language/abbreviation-unexpanded

WCAG success criterion
3.1.4 (level AAA)
Outcome class
Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area
Accessibility, Language & Clarity
Default severity
low
axe-core rule
abbreviations

Why we flag this

Users do not understand the content if they do not know the abbreviation.

Missing abbr tag with title attribute.

What the rule checks

Scope. abbr and acronym elements.

Expectation. Asks for review at every abbr/acronym without a non-empty title: 3.1.4 can also be met by the expansion in the text or a glossary, so a missing title is not a proven failure. An empty title counts as missing; a non-empty title passes.

Source. WCAG 2.2 SC 3.1.4 Abbreviations (AAA, review); H28, G97, G55

Detection: shared; needs dom.

Failing example

The check flags this for review. Corpus case structure_language_parts, element abbr. The page may contain further findings for other rules.

structure_language_parts.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customer stories – Acme Hardware</title>
    <style>
        body { font: 16px/1.5 sans-serif; margin: 0 16px; }
        a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }
        input, button { min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <!-- An English page quoting German customers (#783). -->
    <a href="#main" class="skip-link">Skip to content</a>
    <header>
        <p>Acme Hardware</p>
    </header>
    <nav aria-label="Main">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/stories/">Stories</a></li>
        </ul>
    </nav>
    <main id="main">
        <h1>Customer stories</h1>
        <p>Our customers in Berlin wrote to us about their projects. We publish their
           words as they sent them.</p>
        <!-- German passage without lang: inherits "en" and is read with English
             pronunciation. -->
        <p id="unmarked-german">Die Werkbank ist das Herz der Werkstatt, und mit der neuen
           Platte von Acme ist sie auch nach zehn Jahren noch stabil. Das Holz wird nicht
           rissig, die Kanten sind sauber und die Montage war für uns kein Problem.</p>
        <!-- The same kind of passage, marked: fine. -->
        <p id="marked-german" lang="de">Die Lieferung kam pünktlich, und der Fahrer hat die
           schweren Kartons sogar in den Keller getragen. Das ist nicht selbstverständlich,
           und dafür sind wir sehr dankbar.</p>
        <!-- A quotation in German without lang: a quote is not exempt from 3.1.2. -->
        <blockquote>
            <p id="unmarked-quote">Wir sind mit der Beratung sehr zufrieden, weil die Mitarbeiter sich Zeit nehmen
               und auch bei kleinen Fragen geduldig sind. Das ist der Grund, warum wir immer
               wieder kommen.</p>
        </blockquote>
        <h2>Abbreviations</h2>
        <p>All prices include <abbr title="value-added tax">VAT</abbr>. Orders ship with
           <abbr>DHL</abbr> or <abbr title="">UPS</abbr>.</p>
        <div id="late-story"></div>
    </main>
    <footer>
        <p>Acme Hardware, Berlin</p>
    </footer>
    <script>
        // A story loaded after the page: German again, without lang.
        const p = document.createElement('p');
        p.id = 'loaded-german';
        p.textContent = 'Der Kundendienst hat uns die Ersatzteile für die alte Maschine ' +
            'besorgt, obwohl der Hersteller sie nicht mehr liefert. Das war eine große ' +
            'Hilfe, und die Maschine läuft wieder wie am ersten Tag.';
        document.getElementById('late-story').appendChild(p);
    </script>
</body>
</html>

Passing example

The check reports nothing here. Corpus case structure_outline_clean. The page may contain further findings for other rules.

structure_outline_clean.htmlHTML
<!DOCTYPE html>
<html lang="en" xml:lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening hours and contact – Acme Hardware Berlin</title>
    <style>
        body { font: 16px/1.5 sans-serif; margin: 0 16px; }
        a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }
        input, button { min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <!-- Conforming look-alike for the structure rules (#783): every
         structure the rules look at is present and correct. -->
    <a href="#main" class="skip-link">Skip to content</a>
    <header>
        <p>Acme Hardware</p>
    </header>
    <nav aria-label="Main">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/shop/">Shop</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>
    <main id="main">
        <h1>Opening hours and contact</h1>
        <p>Our store in Berlin is open six days a week. We are happy to help you
           find the right tool for your project, and you can always call us before
           you visit to check that an item is in stock.</p>
        <h2>Opening hours</h2>
        <dl>
            <div><dt>Monday to Friday</dt><dd>8:00 to 18:00</dd></div>
            <div><dt>Saturday</dt><dd>9:00 to 14:00</dd></div>
        </dl>
        <h2>Directions</h2>
        <!-- English text with German proper names: names are exempt from
             3.1.2, and only two German function words occur. -->
        <p id="directions">The store is a short walk from the Haus der Kunst gallery and the
           old bridge that locals call die Brücke. Take the tram to the main square, then
           follow the river for about five minutes until you see our green sign.</p>
        <article>
            <h3>Store news</h3>
            <p>We now stock garden tools from local makers.</p>
        </article>
        <section aria-labelledby="contact-heading">
            <h2 id="contact-heading">Contact</h2>
            <p>Call us or send a message. Prices include <abbr title="value-added tax">VAT</abbr>.</p>
            <form action="/contact" method="post">
                <label for="contact-email">E-mail</label>
                <input id="contact-email" name="email" type="email" autocomplete="email" aria-describedby="contact-hint">
                <p id="contact-hint">We reply within one working day.</p>
                <button type="submit">Send</button>
            </form>
        </section>
    </main>
    <footer>
        <p>Acme Hardware, Berlin</p>
    </footer>
    <!-- Hidden leftover outside every landmark: not rendered, not content. -->
    <div hidden>Summer sale banner</div>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.