Documents must have <title> element to aid in navigation

Rule ID: document-title
Ruleset: axe-core 4.7
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), Trusted Tester

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Learn More about Deque University

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • Trusted Tester

WCAG Success Criteria [WCAG 2.1 (A)]

  • 2.4.2: MUST: Page Titled

WCAG Success Criteria [WCAG 2.0 (A)]

  • 2.4.2: MUST: Page Titled

Trusted Tester Guidelines

  • 12.A: MUST: A <title> element is defined for the web page.

How to Fix the Problem

Add an informative title to the document using the title element with meaningful text.

Ensure that the document's title contains short, descriptive text summarizing the page's contents.

Add a title to the document using the title tag. You can do this as follows: 


	<html>
		<title> A brief, clear, informative, and unique title</title>
		<!-- the rest of the page content --> 
	</html>

A good title is brief, clear, informative, and unique. Ensure that the document's title contains short, descriptive text summarizing the page's contents. To pass this rule, it’s not sufficient to simply have a title element; the element must also contain meaningful text.

Be sure to follow these best practices when writing a title:

  • Replace placeholder titles such as “untitled page” with a more appropriate phrase
  • Make each title unique - don’t duplicate titles across pages, even if they are similar.
  • Put all unique information first. If you want to include the company’s name or brand in the title, this information should go after the unique content. Otherwise, users of screen readers will have to listen to this information over and over as they search for the page that interests them.
  • Make the page title match the top heading (ideally labelled as h1) on your page. These don’t need to be identical, but it often makes sense to make them very similar, since the title and h1 elements serve essentially the same purpose.

In addition to making the page more accessible, titles have other benefits, since search engines use titles when filtering, ordering, and displaying results. Improving the accessibility of your site can also have the effect of making your page more findable.

Why it Matters

Screen reader users use page titles to get an overview of the contents of the page. Navigating through pages can quickly become difficult and confusing for screen reader users if the pages are not marked with a title. The page title element is the first thing screen reader users hear when first loading a web page.

The title is the first thing that screen reader users hear when they arrive at a page. If there is no title or if the title is not descriptive and unique, screen reader users must read through the page to determine its contents and purpose.

Rule Description

The HTML document must have a title element to provide users with an overview of its content, and when present, it must not be empty.

The Algorithm (in simple terms)

Ensures that each HTML document contains a title.

Resources

Deque University Course Pages (subscription required)

  • Page Title

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

  • H25: Providing a title using the title element

Refer to the complete list of axe 4.7 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted:

'; document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; if (!!window.MSInputMethodContext && !!document.documentMode ) document.getElementById("form_message").innerHTML = checkMark + msg + "
"; else document.getElementById("form_message").innerHTML = checkMarkAnimation + msg + "
"; } if(type === "warning" ) { document.getElementById("form_message").style.color = "#916216"; document.getElementById("form_message").innerHTML = warningIcon + msg + "
"; } if(type === "error" ) { document.getElementById("form_message").style.color = "#b40909"; document.getElementById("form_message").innerHTML = errorIcon + msg + "
"; } document.getElementById("form_message").tabIndex = -1; document.getElementById("form_message").focus(); } function clearMessage() { document.getElementById("form_message").innerHTML = ""; } function showFeedbackForm() { document.getElementById("feedback-form").className = ""; document.getElementById("feedback-info").className = "deque-hidden"; document.getElementById("yesButton").focus(); setTimeout((function (){ document.getElementById("yesButton").focus(); }), 5000); } function hideFeedbackForm() { if( feedbackData ) { document.getElementById("feedback-info").className = ""; showMessage("You have cancelled editing your earlier feedback.", "warning"); } document.getElementById("feedback-form").className = "deque-hidden"; document.getElementById("yesButton").style.display = ""; document.getElementById("noButton").style.display = ""; document.getElementById("noFeedback").className = "deque-hidden"; setTimeout((function() { clearMessage(); }), 4000); }