Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit document-title

Ensure each HTML document contains a non-empty <title> element

Impact:

Serious

WCAG-Konformität:

A
WCAG 2.4.2

Issue type:

failure

HTML page has non-empty title

This rule checks that a non-embedded HTML page has a non-empty title.

Applicability

This rule applies to the root element of the web page, if it is an html element.

Expectation 1

Each target element has at least one descendant that is a title element.

Expectation 2

For each target element, the first HTML title element that is a descendant of the document element has children that are text nodes that are not only whitespace.

Background

This rule is only applicable to non-embedded HTML pages. HTML pages embedded into other documents, such as through iframe or object elements are not applicable because they are not web pages according to the definition in WCAG.

Assumptions

This rule assumes that Success Criterion 2.4.2 Page Titled does not require that a document only has one title element, nor that it is a child of the head element of a document. While this is invalid in HTML, the HTML specification describes what should happen in case of multiple titles, and titles outside the head element. Because of this, neither of these validation issues causes a conformance problem for WCAG. Regardless of whether this is required by 2.4.2 Page Titled, failing this rule means the success criterion is not satisfied.

This rule assumes that the title of the page is not provided by a higher-level protocol. For example, the subject field of an email authored in HTML can provide a title without requiring a title element. In such a case, this rule will fail while Success Criterion 2.4.2 Page Titled may still be satisfied.

Accessibility Support

There are no accessibility support issues known.

Related rules

HTML page title is descriptive

Bibliography

Test Cases

Passed

Passed Example 1

This page has a title element with content.

<html>
	<title>This page has a title</title>
</html>

Passed Example 2

This page has a title element that serves as the title for the page. This rule doesn't take into account HTML pages embedded into the target document.

<html>
	<head>
		<title>This page gives a title to an iframe</title>
	</head>
	<body>
		<iframe src="/test-assets/sc2-4-2-title-page-without-title.html"></iframe>
	</body>
</html>

Passed Example 3

This page has two title elements with content.

<html>
	<head>
		<title>Title of the page.</title>
	</head>
	<body>
		<title>Title of the page.</title>
	</body>
</html>

Passed Example 4

This page has one title element with content, which is within the body element.

<html>
	<body>
		<title>Title of the page.</title>
	</body>
</html>

Passed Example 5

This page has two title elements and only the first has content.

<html>
	<head>
		<title>Title of the page.</title>
	</head>
	<body>
		<title></title>
	</body>
</html>

Failed

Failed Example 1

This page does not have a title element.

<html>
	<h1>this page has no title</h1>
</html>

Failed Example 2

This page has a title element that is empty.

<html>
	<title></title>
</html>

Failed Example 3

This page does not have a title element. The title element in the content of the iframe does not function as the title for the entire page.

<html>
	<iframe src="/test-assets/sc2-4-2-title-page-with-title.html"></iframe>
</html>

Failed Example 4

This page has two title elements and the first is empty.

<html>
	<head>
		<title></title>
	</head>
	<body>
		<title>Title of the page.</title>
	</body>
</html>

Failed Example 5

This page has a title element that only contains a separator character.

<html>
	<title> </title>
</html>

Failed Example 6

This page does not have a title because the shadow root is not a descendant of the document element.

<html>
	<body>
		<template id="shadow-element">
			<title>This is the page title</title>
		</template>
		<script>
			const host = document.querySelector('body')
			const shadow = host.attachShadow({ mode: 'open' })
			const template = document.getElementById('shadow-element')

			shadow.appendChild(template.content)
		</script>
	</body>
</html>

Inapplicable

Inapplicable Example 1

This title element is a child of an svg element.

<svg xmlns="http://www.w3.org/2000/svg">
  <title>This is an SVG</title>
</svg>

Autoren: Anne Thyme Nørregaard, Bryn Anderson, Jey Nandakumar, Stein Erik Skotkjerra, Wilco Fiers

Finanzierung: WAI-Tools