The page must have a non-empty title
Rule document-title · Document, language & navigation · impact serious · Static + live
↩ Back to the rules index · WCAG cross-reference
Why it matters#
The
is the first thing a screen reader announces and the label users see in tabs, history, and bookmarks. A missing or empty title leaves the page unidentified.</p>
<h2 id="how-to-fix">How to fix<a class="heading-anchor" href="#how-to-fix" aria-hidden="true">#</a></h2>
<p>Add a <title> in <head> that names the page and ideally the site.</p>
<h2 id="example">Example<a class="heading-anchor" href="#example" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><head></head>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><head><title>Pricing — Acme</title></head>
</code></pre></figure>
<h2 id="example-1">Example<a class="heading-anchor" href="#example-1" aria-hidden="true">#</a></h2>
<figure class="example example-bad"><figcaption>✕ Fails</figcaption><pre><code class="language-html"><svg viewBox="0 0 16 16"><title>Search icon</title></svg>
</code></pre></figure>
<figure class="example example-good"><figcaption>✓ Passes</figcaption><pre><code class="language-html"><head><title>Search — Acme</title></head><body><svg viewBox="0 0 16 16"><title>Search icon</title></svg></body>
</code></pre></figure>
<h2 id="wcag-success-criteria">WCAG success criteria<a class="heading-anchor" href="#wcag-success-criteria" aria-hidden="true">#</a></h2>
<h3 id="2-4-2-page-titled-level-a">2.4.2 Page Titled — Level A<a class="heading-anchor" href="#2-4-2-page-titled-level-a" aria-hidden="true">#</a></h3>
<p>Each page needs a descriptive <title> that identifies its topic or purpose.</p>
<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html">Understanding 2.4.2</a></p>
<h2 id="standards">Standards<a class="heading-anchor" href="#standards" aria-hidden="true">#</a></h2>
<p>This rule contributes to the following standards:</p>
<p><span class="std-tag" data-std="wcag-A">WCAG A</span> <span class="std-tag" data-std="EN-301-549">EN 301 549</span> <span class="std-tag" data-std="TTv5">Trusted Tester</span> <span class="std-tag" data-std="ACT">ACT</span></p>
<div class="table-wrap"><table>
<thead>
<tr>
<th>Standard</th>
<th>Criteria</th>
</tr>
</thead>
<tbody><tr>
<td>EN 301 549</td>
<td>9.2.4.2</td>
</tr>
<tr>
<td>Trusted Tester v5</td>
<td>12.a</td>
</tr>
<tr>
<td>ACT (WCAG SC)</td>
<td>2.4.2</td>
</tr>
</tbody></table></div>
<h2 id="references">References<a class="heading-anchor" href="#references" aria-hidden="true">#</a></h2>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html">WCAG — Page Titled</a></li>
</ul>
</article>
<footer class="md-footer">
<span>Generated from <code>@app/a11y-engine</code> rule metadata.</span>
<a class="back-top" href="#main">Back to top ↑</a>
</footer>
</main>
<aside class="toc" aria-label="On this page"><div class="toc-title">On this page</div><a class="toc-link toc-h2" href="#why-it-matters" data-toc="why-it-matters">Why it matters</a><a class="toc-link toc-h2" href="#how-to-fix" data-toc="how-to-fix">How to fix</a><a class="toc-link toc-h2" href="#example" data-toc="example">Example</a><a class="toc-link toc-h2" href="#example-1" data-toc="example-1">Example</a><a class="toc-link toc-h2" href="#wcag-success-criteria" data-toc="wcag-success-criteria">WCAG success criteria</a><a class="toc-link toc-h3" href="#2-4-2-page-titled-level-a" data-toc="2-4-2-page-titled-level-a">2.4.2 Page Titled — Level A</a><a class="toc-link toc-h2" href="#standards" data-toc="standards">Standards</a><a class="toc-link toc-h2" href="#references" data-toc="references">References</a></aside>
</div>
<script src="/wiki/a11y-rules/assets/wiki.9c7b1306b8.js" defer></script>
</body></html>