WCAG 2.4.2 Page Titled: How to Write Accessible Web Page Titles
WCAG 2.4.2 requires web pages to have programmatically available, descriptive titles. This article gives clear rules, good and bad examples, SPA implementation steps, testing tips and a concise checklist to meet the success criterion.
What WCAG 2.4.2 requires
WCAG 2.4.2 requires web pages to have titles that describe the page topic or purpose. The title must be programmatically available so assistive technologies can read it. A clear title helps everyone find, return to, and share pages.
Scope and when the rule applies
The rule applies to any web page a user can navigate to. That includes HTML pages, single page app views, and documents served on the web such as PDFs. If a view lacks a descriptive title, the page can fail this success criterion.
Why descriptive page titles matter
Titles appear in browser tabs, bookmarks, search results, and screen reader lists. A good title saves time. It reduces confusion for keyboard and screen reader users. It also improves findability in search engines and internal site search.
How to write accessible web page titles
Keep it short and specific
Aim for 50 to 70 characters so titles are readable in tabs and search results. Name the main topic first. Use plain language. Avoid starting with the site name unless the brand is the main topic.
Put the most important words first
Many interfaces truncate long titles. Put the primary content near the start so users see the page purpose at a glance.
Brand placement: a simple decision framework
Decide where to place the brand using this rule. If the page is about the brand itself, put the brand first. If the page is content-focused, place the brand at the end separated by a vertical bar or dash. This keeps topic words visible in narrow UI spaces.
Avoid junk and defaults
Do not use placeholders such as “Untitled”, “New Page”, or the site URL. Avoid repeating the same generic title across many pages. Each page needs a unique title that matches its content.
Good and bad examples
| Example title | Why it works or fails |
|---|---|
| Apply for a Standard Driving Licence | TransportCity | Good. States the task first and includes the brand at the end. |
| Contact | Poor. Too vague when many contact pages exist. Use “Contact customer support” instead. |
| product-12345 | Poor. Technical identifier is not descriptive of content. |
| COVID-19 guidance for schools | Good. Clear topic and audience shown up front. |
Implementing titles in HTML and JavaScript
Static pages
Put a human readable title inside the document head using the <title> element. Make sure server-side templates inject a unique, descriptive title for each page before it is delivered to the browser.
Single-page apps and dynamic views
Single-page apps must update the document title when the view changes. Follow this step-by-step check:
- On every view change update document.title to a descriptive string.
- Also update the browser history with history.pushState or replaceState so each URL maps to a title.
- Ensure server-side rendering or a fallback renders the same title for the same URL when crawled or bookmarked.
- Test keyboard navigation and screen readers to confirm the title matches the visible view.
Documents served on the web
For PDFs and other downloadable documents include a descriptive title in the document metadata. Many authoring tools let you set the document title field. That metadata is what assistive tech and some browsers read.
Testing and verification
Manual checks
- Open each page, read the browser tab or window title. Ask: does it describe the page?
- Save the page as a bookmark. Check the saved title.
- Use a screen reader to list open pages. Confirm the title is meaningful.
Automated tools
Use accessibility test tools that check for a present title and flag duplicate or empty titles. Also use site crawlers to find pages that share the same generic title across many URLs.
What to check for in audits
Look for missing titles, titles that are identical across pages, and titles that are misleading. For SPAs, check that titles update on navigation and that direct links load with the correct title.
Common mistakes to avoid
- Leaving the default CMS title like “Home” or “New Post”.
- Relying on headings alone. The title must be in the document head.
- Putting only a brand name in the title for content pages.
- Not updating titles for dynamically rendered views.
Quick WCAG 2.4.2 checklist
- Every page has a <title> that describes topic or purpose.
- Titles are unique and concise, 50 to 70 characters where possible.
- SPAs update document.title on view change and map titles to URLs.
- PDFs and documents include descriptive metadata titles.
- Test with a screen reader and a crawler to confirm titles match content.
Further reading
Refer to the official WCAG documentation for the full normative text of WCAG 2.4.2 Page Titled. Also review platform documentation for setting titles in your CMS, web framework, or document authoring tool.