Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rule update: "HTML page has a title" #440

Merged
merged 11 commits into from
Apr 10, 2019
Merged

Rule update: "HTML page has a title" #440

Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e0dcf6e
Rule update: "HTML page has a title"
Mar 14, 2019
7bc0188
linking to definition of "root"
Mar 18, 2019
2392288
Removed Technique G88 (descriptive titles)
Mar 20, 2019
fbe4e5d
Non-letter/numbers characters is a Pass
Mar 21, 2019
7477ebd
[root] element --> [document element] + fix typos
Mar 22, 2019
075c398
Expectation updated to match Applicability
Mar 25, 2019
5c97c95
[text nodes] --> [child text content]
Apr 1, 2019
8942285
Added link to definition
Apr 1, 2019
97f2af5
[seperator characters] --> [whitespace]
Apr 4, 2019
d3f291c
Update SC2-4-2-page-has-title.md
Apr 4, 2019
2f5a9c8
Update SC2-4-2-page-has-title.md
Apr 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
60 changes: 39 additions & 21 deletions _rules/SC2-4-2-page-has-title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ authors:

### Applicability

The rule applies to any page where the root element is an `html` element, and which is not embedded in another page.
The rule applies to any page where the [document element](https://www.w3.org/TR/dom/#document-element) is an `html` element, and where the page is not embedded in another page.

**Note**: Pages may be embedded inside other pages through elements such as iframes and object elements.
**Note**: Pages may be embedded inside other pages through elements such as `iframe` and `object` elements.

### Expectation 1

The page contains at least one `title` element.
The [document element](https://www.w3.org/TR/dom/#document-element) has at least one [descendant](https://www.w3.org/TR/dom41/#concept-tree-descendant) that is an HTML `title` element.

**Note**: The `title` element exists in other namespaces such as SVG. These are not `title` elements for HTML document and should be ignored.
**Note**: The `title` element exists in other namespaces such as SVG. These are not HTML `title` elements and should be ignored for this rule.

### Expectation 2

The first `title` element contains [non-empty text](#non-empty).
The first `title` element contains [text nodes](https://www.w3.org/TR/dom/#text) that do not only consist of [Unicode separator characters](https://www.unicode.org/versions/Unicode11.0.0/ch04.pdf#G134153).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we simplify this a little by doing:

The first title element contains text that does not only consist of whitespace (specifically, Unicode separator characters).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WilcoFiers, we don't find your suggestion to be as unambiguous as we would like.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which part of it? Alternative proposal:

... contains text content that does not only consist of Unicode separator characters (i.e. space, line breaks and other whitespace characters)

Text content is what the HTML 5.2 spec says needs to be used to derive the document title from the title element, so it's the right technical term, and it reads better than "text nodes" IMO.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HTML defines "child text content" as a term (https://www.w3.org/TR/html/infrastructure.html#child-text-content), not "text content". In general, I don't really think it's appropriate to refer do DOM attributes in the manner proposed, e.g. use "text content" to mean node.textContent or "document title" to mean document.title. If referring to DOM attributes or properties, be explicit about it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point. But then shouldn't this simply be using document.title?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it should; that's an implementation detail and rules shouldn't dictate the "how" but rather the "what". The "what", in this case, is the concatenation of the data of the text nodes that are children of the <title> element, i.e. the "child text content". The "how" could be document.title.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't mean to say to literally access the document.title property. You're right, that's clearly implementation. I mean using "document title", linking to the algorithm for deriving it, the same way we talk about "accessible name" and referencing that algorithm.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes perfect sense and for that very same reason I'd also suggest using the term "child text content" similar to how we use the term "accessible name". We could even add "document title" to the glossary and define it as "the child text content of the first <title> element that is a descendant of the document".


## Assumptions

Expand All @@ -46,19 +46,17 @@ _There are no major accessibility support issues known for this rule._

## Background

- [https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
- [https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=242#qr-navigation-mechanisms-title](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=242#qr-navigation-mechanisms-title)
- [https://www.w3.org/TR/WCAG20-TECHS/G88.html](https://www.w3.org/TR/WCAG20-TECHS/G88.html)
- [https://www.w3.org/TR/WCAG20-TECHS/H25.html](https://www.w3.org/TR/WCAG20-TECHS/H25.html)
- The WCAG 2.0 Techniques already contain examples and code snippets to illustrate which content passes or fails the test. Whenever possible {{site.title}} refers to those. Another source for test cases is the W3C Before and After Demonstration.
- [Understanding Success Criterion 2.4.2: Page Titled](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)
- [WCAG 2.1 Technique H25: Providing a title using the title element](https://www.w3.org/WAI/WCAG21/Techniques/html/H25)


## Test Cases

### Passed

#### Passed example 1

This page has a `title`.
This page has a `title` with content.

```html
<html>
Expand All @@ -68,7 +66,7 @@ This page has a `title`.

#### Passed example 2

This page give a `title` to an iframe.
This page gives a `title` to an iframe.

```html
<html>
Expand All @@ -79,7 +77,7 @@ This page give a `title` to an iframe.

#### Passed example 3

This page has a `title`.
This page has two `title` elements.

```html
<html>
Expand All @@ -94,7 +92,7 @@ This page has a `title`.

#### Passed example 4

Valid `title` provided.
The `title` is in the `body`.

```html
<html>
Expand All @@ -106,7 +104,7 @@ Valid `title` provided.

#### Passed example 5

Valid `title` provided.
The first `title` element has content.

```html
<html>
Expand All @@ -119,21 +117,31 @@ Valid `title` provided.
</html>
```

#### Passed example 6

The `title` only contains characters that are not letters or numbers.

```html
<html>
<title>#$@&%*!</title>
</html>
```

### Failed

#### Failed example 1

This page has no `title`.
The page has no `title`.

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

#### Failed example 2

Empty `title`.
The `title` element is empty.

```html
<html>
Expand All @@ -143,7 +151,7 @@ Empty `title`.

#### Failed example 3

No `title` provided.
The page has no `title`.

```html
<html>
Expand All @@ -153,7 +161,7 @@ No `title` provided.

#### Failed example 4

Empty first `title`.
The first `title` element is empty.

```html
<html>
Expand All @@ -166,11 +174,21 @@ Empty first `title`.
</html>
```

#### Failed example 5

The `title` only contains a separator character.

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

### Inapplicable

#### Inapplicable example 1

Not applicable to `svg` element.
This rule is not applicable to `svg` elements.

```svg
<svg xmlns="http://www.w3.org/2000/svg">
Expand Down