Disabilities Affected: Cognitive, Visual
Every web page must have a descriptive and informative title specified in the <title> element within the <head> section of the HTML.
Why It Matters
The page title is often the first piece of information announced by screen readers, helping users orient themselves and understand the page’s purpose immediately. It’s displayed in browser tabs, window titles, and bookmarks, aiding all users in identifying and distinguishing between different pages. Clear titles help users quickly find the information they need, especially when multiple tabs are open.
Fixing the Issue
Provide a concise, unique, and descriptive title for each page using the <title> element. The title should accurately reflect the page’s main content or purpose. For multi-step processes, include the current step in the title. Typically, include the site name as well, often towards the end of the title for consistency (e.g., “User Profile – Awesome Site”).
Good Code Example
A descriptive page title:
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us - Awesome Company Inc.</title>
</head>
<body>
<h1>Contact Information</h1>
</body>
</html>
Bad Code Example
Missing, vague, or unhelpful page titles:
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<h1>Product Details</h1> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page_v3_final.html</title>
</head>
<body>
<h1>About Our Services</h1>
</body>
</html>
