Missing or insufficient page title

document/title-missing

WCAG success criterion: 2.4.2 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Navigation & Operation
Default severity: high
axe-core rule: document-title

Why we flag this

Screen reader users cannot identify the page.

Empty or generic <title> tag.

What the rule checks

Scope. Every top-level HTML document.

Expectation. Fails when the document has no HTML title element. An SVG <title> inside the body titles its graphic, not the document (SVG 2 §5.9, HTML §4.2.2 counts only the title element in the HTML namespace), so a page whose only title element is an SVG title has no title. The title of an embedded document does not title the host page. A title written by script before the audit reads the DOM counts. A present but empty title is document/title-empty. The finding concerns the whole document and carries no element.

Source. WCAG 2.2 SC 2.4.2 Page Titled; ACT 2779a5 (HTML page has non-empty title); HTML §4.2.2 the title element; SVG 2 §5.9 the title element

Detection: shared; needs dom.

Failing example

The check reports a violation here. Corpus case structure_aria_landmarks_svg_title. The page may contain further findings for other rules.

structure_aria_landmarks_svg_title.htmlHTML

<!DOCTYPE html>
<html lang="en-GB" xml:lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <!-- A legacy div layout (#783): the document has no <title> in its head;
         the only title element is the SVG logo's, which titles the graphic,
         not the document (HTML §4.2.2, SVG 2 §5.9). Landmarks and the main
         heading are expressed with ARIA roles instead of native elements.
         lang and xml:lang share the primary subtag "en". -->
    <a href="#content" class="skip-link">Skip to content</a>
    <div role="banner">
        <svg role="img" aria-labelledby="logo-title" width="120" height="40" viewBox="0 0 120 40">
            <title id="logo-title">Acme Hardware</title>
            <rect width="120" height="40" fill="#1a4d2e"></rect>
        </svg>
    </div>
    <div role="navigation" aria-label="Main">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/shop/">Shop</a></li>
        </ul>
    </div>
    <div role="main" id="content">
        <div role="heading" aria-level="1">Spring sale</div>
        <p>All garden tools are reduced until the end of the month.</p>
        <h2>Garden tools</h2>
        <p>Spades, rakes and hoes.</p>
        <h2>Power tools</h2>
        <p>Drills and saws.</p>
    </div>
    <div role="contentinfo">
        <p>Acme Hardware, Berlin</p>
    </div>
</body>
</html>

Passing example

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

structure_modal_dynamic.htmlHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body { font: 16px/1.5 sans-serif; margin: 0 16px; }
        button { min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <!-- A consent wall (#783): the application has not rendered yet, and a
         script sets the page language and the document title and opens a modal
         dialog after load.
         While the dialog is open, the page's headings and main landmark are
         missing for the moment of measurement, not necessarily for the page. -->
    <div id="app"></div>
    <dialog id="consent" aria-label="Cookie settings">
        <p>We use cookies to remember your shopping basket.</p>
        <form method="dialog">
            <button value="accept">Accept</button>
            <button value="reject">Reject</button>
        </form>
    </dialog>
    <script>
        document.documentElement.lang = 'en';
        document.title = 'Cookie settings – Acme Hardware';
        document.getElementById('consent').showModal();
    </script>
</body>
</html>

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