Understanding WCAG SC 2.4.2 Page Titled
Web pages have titles that describe topic or purpose. (Level A)
The intent of this success criteria is to provide clear & descriptive titles to the web pages so that they are understood easily by all users. This success criteria is helpful for visually challenged users, cognitive users, motor disable users & users with short-term memory. Titles of the pages will give a clear & concise picture to the user what the web page is about & what to expect on the web page. While 2.4.4 link purpose talks about the purpose of the link, it is a best practice to link to web pages using their respective page titles.
Page Titled Transcript
Hello everyone, today we’re diving deep into an often overlooked yet crucial web accessibility standard: WCAG Success Criterion 2.4.2, also known as Page Titled. We’re also going to talk about its importance, benefits, some examples, common mistakes, and how we can pass the criteria. Have you ever stumbled upon a web page with a vague or generic title, leaving you confused about its content? Well, this criterion aims to prevent exactly that. Let’s explore why this criterion is crucial for creating an inclusive online experience.Why is it important? Well, clear and descriptive page titles aren’t just nice to have; they’re essential for user experience and accessibility. Think of it this way: the page title is the first impression your website makes. It helps users quickly understand a page’s purpose and decide if it’s relevant to their needs. This saves time and frustration, especially for users with limited attention spans.
Now let’s explore who benefits from this criterion. Page titles benefit everyone, whether you’re visually impaired, have cognitive disabilities, limited short-term memory, or reading disabilities. A well-crafted page title is your guide through the digital realm. Clear titles are vital for assistive technologies like screen readers, which announce them when navigating websites. They provide context and orientation, particularly for users with cognitive or visual impairments. It’s a game-changer for those with mobility impairments who rely on audio when navigating between web pages.
Let’s illustrate with some examples. A good example: Home – Learn Web Design – Awesome Tutorials. Now let’s look at a bad example: Untitled or index.html. Can you imagine how frustrating it would be to have dozens of untitled tabs open? Here’s another scenario: a news article has a generic title like News. This doesn’t tell the reader what specific news it covers, and a screen reader user wouldn’t have a clue until they listened to the entire article.
Now let’s explore some common mistakes. The page title must be unique within the website or app. It should clearly indicate its topic or purpose. If your page is a part of a service, make it known. Most importantly, keep the title updated when the content changes, especially in single-page apps. Avoid these pitfalls for a seamless user experience.
But how can you ensure your pages pass the Page Titled criteria? Unique and descriptive: Each page should have a unique title that reflects its content. Avoid generic titles like Home or About Us. Concise and informative: Keep it short and sweet, ideally between 50 to 75 characters. Keywords matter: Include relevant keywords that accurately describe the page—this helps search engines index your website better. H1 consistency: Make sure the page title matches the H1 heading on the page; this reinforces clarity for both users and search engines. Use a format like Page Name – Page Description – Website Name. If your pages are part of a process, like a checkout, use the title to inform the user of their stage. Provide titles for each web page you design. Align the page title with the page’s main heading. For dynamic results, include the search query in the title.
There you have it—the importance of Page Title under WCAG Success Criterion 2.4.2. By ensuring clear and descriptive titles, we can make the web a welcoming place for everyone. Head over to your website right now and check your page titles. Can you improve any of them? Share your before and after titles in the comments below.
This is the end of the video. Thank you for joining.
By reading the title of the page, user must understand the purpose of the page. Sccreen readers such as JAWS & NVDA provide a shortcut key insert+t to check the title of the page. If there is more than one tab opened, then user can just look at the title & identify which page he/she is working on. In addition to that, a unique title would also help the users to ensure whether they are on the right page/step. Moreover, providing unique title would help index the site properly by search engines.
Code Example
<!DOCTYPE HTML>
lt;html lang="en-us">
<head>
<header>
<title>ACCESSIBLE CAROUSEL EXAMPLE USING ARIA</title>
</header>
</head>
In the above example we can easily see that <title> is being used to provide the title for the web page. This is the attribute that provides title even when we are running websites on CMS platforms like WordPress or Drupal.
Hi Raghavendra,
Can we raise a bug under 2.4.2 if the page title is not marked as heading level 1?
Please advise.
Thanks,
Roopseh
Hi Roopesh,
The heading level H1 can be anything that conveys information on the page & provides hierarchical structure. If page title is not provided as H1 then it is not a failure. There can be an alternative heading level H1 on the page that is relevant to overall content. Hope this clarifies it.
Hi Raghavendra,
How would the success criteria be applied to hybrid mobile applications?
Hello Kalpesh,
The page title does not apply to mobile applications.