Success Criterion 2.4.2 - Page Titled
WCAG Principle: Operable
Guideline 2.4: Navigable (Provide ways to help users navigate, find content, and determine where they are)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.4.2?
Web pages have titles that describe topic or purpose.
The aim of this success criterion is to ensure that web pages have clear and descriptive titles so that all users can easily understand them. Typically, the page title is the first thing people notice when searching for your website. It appears as a blue hyperlinked text in Google and other search engines.
A good page title helps the users understand what the web page is about and what they can expect to find in it. JAWS screen reader offer a shortcut key insert + t for checking a page’s title. If a user has multiple open tabs, they can use the title to identify which page they are currently on and verify if it the one they actually want to access. Also, a unique page tile helps search engines to index the site properly.
How does it make your website accessible?
Web pages with clear and descriptive titles benefit everyone who uses the web. It helps people with disabilities especially to identify and differentiate between web pages. Unique page titles also allow all users easily navigate web content to find what they need.
Who benefits:
- All web users, since they can easily and quickly identify whether the information contained in the web page is relevant to their needs.
- People with visual disabilities, especially when browsing with multiple web pages open.
- People with cognitive disabilities, limited short-term memory, and reading disabilities.
- People with severe mobility impairments who navigate between web pages via audio.
How to Meet Success Criterion 2.4.2
Common mistakes:
- Missing or not properly defined <title> element
- Non-descriptive file names are used as page titles.
- Duplicate title names appear on multiple pages
How to fix mistakes:
Ensure each page of your website has a unique and descriptive meta title. Here’s how to do this:
- Use the title element in the head section of HTML and XHTML documents to explain the purpose of the document in simple, short sentences.
- For electronic documents such as PDF and Word files, provide a page title in the Title field within the document’s properties.
- In Office 365 (for Word docs), you can find document properties on the “File” menu on the “Info” page.
- To locate document properties in Adobe Acrobat (for PDFs), go to the “File” menu, select “Properties”, select the “Description” tab, and then enter the title in te ‘Title” field.
- Use the rel attribute of the link element in HTML to provide a ‘breadcrumb trail’. This helps helps the user to visualize how content has been structured and how to navigate back to previous Web pages.
Helpful tips for developers:
- Use consistent naming conventions across page titles. A useful format for writing page titles is: Page name – Page description – Website name (e.g. ARIA – Web Accessibility Audit Tool – Equally AI’).
- It is often a good idea to repeat the page title or something similar to the top heading (H1) on your page.
- Ensure web page titles are short and make sense when read out of context e.g. in a list of other search results or in a site map.
How to test if you've met compliance:
For HTML or XHTML documents:
- Examine the source code of the HTML or XHTML document and check that a title element with a descriptive page title appears in the head section.
- Check that the title element correctly describes the contents of the document.
For electronic documents:
- Open the document with a website screen reader and listen to hear that the document title is read correctly.
- Use a text editor or PDF editor to ensure the document title is specified. Verify that the title appears in the Initial View tab.
- Check that the Web page has a title.
- Check that the title is relevant to the content of the document and it can be identified using the title.
If all the checks above are true, then your website passes this success criterion.
Bad and Good Examples (Developer Code)
Bad Code Snippet
<!DOCTYPE html> <html>
<head></head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
In this example, the webpage does not have a title which means search engines will not be able to crawl and index it, and it will not show up in search results.
Good Code Snippet
<!DOCTYPE html> <html>
<head>
<title>Home Page | Equally AI</title> </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
In the other example, it is clear from the <title> tag that the webpage is Equally Ai’s Homepage. This is helpful to both users and search engines to identify what the page is about.
Frequently Asked Questions
What is a page title?
A page title is the text that appears at the top of a web page. It describes the contents of the page and is used by search engines and screen readers to quickly and easily identify web pages. A page title be concise, descriptive, and relevant to the content of the page.
What is the accessibility principle and intent of SC 2.4 2 page titled?
The accessibility principle and intent of SC 2.4.2 page titled is to provide clear and descriptive web page titles that are all users, including those with disabilities, can easily understand.
Which methods can be used to comply with SC 2.4 2 page titled?
Methods can be used to comply with SC 2.4 2 page titled include providing a title for each web page using the title element. For electronic documents (such as PDFs) the developer can set the document title in the metadata to display in the title bar.
Is the page title H1?
No, the page title is not an H1 tag. The page title is defined in the <head> section and displayed in the browser window and search results. On the other hand, the H1 tag is part of the <body> section and only displays on the page itself.
