Make sure each HTML document contains a non-empty <title> element
Every HTML document should include a <title> element with meaningful text to provide users with an overview of its content.
About This Rule
This rule ensures that HTML documents contain a <title> element with meaningful text, aiding navigation and providing an overview of the page's content. Adhering to this practice enhances accessibility for users, particularly those utilizing assistive technologies.
Why It Matters
The <title> element is crucial for accessibility and usability. Screen reader users rely on page titles to understand the content and purpose of a page upon arrival. Without a descriptive and unique title, users may struggle to navigate and differentiate between pages, leading to confusion and a diminished user experience.
How to Fix
Ensure that each HTML document includes a <title> element containing concise and descriptive text that summarizes the page's content. Follow these best practices:
- Replace placeholder titles like "untitled page" with appropriate phrases.
- Ensure each title is unique; avoid duplicating titles across different pages.
- Place unique information at the beginning of the title. If including the company's name or brand, position it after the unique content to prevent redundancy for screen reader users.
- Align the page title with the top heading (ideally labeled as
<h1>) on your page. While they don't need to be identical, similarity enhances clarity, as both elements serve to describe the page's content.
Example
Correct Implementation
<html>
<head>
<title>About Us - CompanyName</title>
</head>
<body>
<h1>About Us</h1>
<!-- Page content -->
</body>
</html>Incorrect Implementation
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<h1>About Us</h1>
<!-- Page content -->
</body>
</html>Other Rules
Interested in other web accessibility rules? Please see these other rules: