Imagine if all those tabs just said “Untitled” or “New Page.” How would you keep track? Now, think about someone using a screen reader or other assistive technology—they rely on page titles to understand where they are and what to expect.
Page Titled is all about making sure every webpage has a clear, descriptive title. It’s like a label on a file folder: essential for organization, navigation, and understanding. A good title tells users exactly what to expect before they even start exploring the page.
Who this impacts
- People using screen readers: They hear the page title read aloud first to understand the context of the page.
- People with cognitive impairments: Clear titles help with orientation and understanding of content.
- People who navigate with keyboard shortcuts or voice commands: Descriptive titles make it easier to jump to the right tab or window.
- Everyone: We all appreciate knowing what a page is about before we dive in.
How to meet Page Titled
- Be descriptive: Titles should describe the main content or purpose of the page. For example, instead of a generic “Home” title, use something more specific like “Home – Accessible Web Design Resources.”
- Make it unique: Every page on your site should have a unique title. If you have multiple pages that are similar, distinguish them with more specific details, such as “Blog – 5 Tips for Accessibility” instead of just “Blog.”
- Put it in the right place: The title should be coded in the <title> tag in the HTML document’s <head> section. It’s what shows up on the browser tab and is often the first thing a screen reader announces when loading a new page.
Practical examples
- Homepage of a university website
Bad Title: “Welcome”
Good Title: “Welcome to XYZ University – Home of the Wildcats” - Blog post about baking tips
Bad Title: “Blog Post”
Good Title: “10 Essential Baking Tips for Perfect Cookies | Baker’s Blog”
Top tips
- Front-load the most important information: Put the key details at the beginning of the title. This helps with both SEO and accessibility.
- Include site or brand name: If it’s helpful for context, add your site or brand name at the end of the title (e.g., “About Us – XYZ Company”).
- Regularly check for duplicates: Perform an audit of your site’s titles to make sure there are no duplicate or non-descriptive titles.
- Use favicons: Okay so this isn’t a WCAG requirement, but seriously, it really matters.