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 all 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 HTML `title` element that is a [descendant](https://www.w3.org/TR/dom41/#concept-tree-descendant) of the [document element](https://www.w3.org/TR/dom/#document-element) has [children](https://www.w3.org/TR/dom/#concept-tree-child) that are [text nodes](https://www.w3.org/TR/dom/#text) that are not only [whitespace](#whitespace).

This comment was marked as resolved.

Sign in to view

This comment was marked as resolved.

Sign in to view

This comment was marked as resolved.

Sign in to view


## 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