Accessible Document Titles
Rule ID: document-title
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
How to Fix the Problem
To ensure your document meets accessibility standards, you must add a meaningful and descriptive <title>
element within the <head>
of your HTML document. This element should contain a short, informative phrase that summarizes the content of the page. A well-crafted title helps screen reader users understand what the page is about as soon as it loads.
Correct Example:
Best Practices for Writing Accessible Titles:
-
Avoid placeholders: Replace generic titles like “Untitled Page” with specific content-related text.
-
Ensure uniqueness: Every page on your site should have a distinct title—even if the content is similar—to avoid confusion for users.
-
Front-load uniqueness: Begin the title with what differentiates the page. If you include branding or a company name, place it at the end. This way, screen reader users don’t have to hear the same brand name repeatedly when navigating between pages.
-
Align with headings: The page title should reflect or closely match the main heading (
<h1>
) on the page, as both convey the purpose and content of the page.
In addition to supporting screen reader users, meaningful titles also improve SEO by helping search engines categorize and rank your content more effectively.
Why it Matters
The <title>
element is the first piece of information a screen reader announces when a new web page loads. Without a clear and descriptive title:
-
Users who rely on screen readers are forced to explore the page content manually to understand its purpose.
-
Navigation becomes inefficient and frustrating, especially if users have multiple tabs or windows open.
-
Search engine visibility may suffer, as the title element plays a key role in indexing.
In short, a well-written title is both an accessibility requirement and an essential user experience and SEO feature.
Rule Description
An HTML document must contain a <title>
element, and it must not be empty. The content of this title should accurately reflect the page’s topic or purpose.
The Algorithm (in simple terms)
-
Check if the HTML document includes a
<title>
element inside the<head>
. -
Confirm that the
<title>
element contains non-empty, meaningful text. -
Validate that this title is unique across pages on the same site.