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.

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

Test is clipped: "link to full version" #2199

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 93 additions & 6 deletions _rules/presentational-children-no-focusable-content-307n5z.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ None of these `button` elements has [descendants][] that are included in [sequen

#### Passed Example 2

This element with `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].
This element with the `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].

```html
<p id="terms">
Expand All @@ -80,7 +80,7 @@ This element with `checkbox` role has no [descendants][] that are included in [s

#### Passed Example 3

This element with `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].
This element with the `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].

**Note**: The `input` checkbox has a `role` [attribute value][] of `none` to ensure it is ignored by browsers that do not support [presentational children][].

Expand All @@ -93,6 +93,15 @@ This element with `menuitemcheckbox` role has an `input` element as a descendant
</ul>
```

#### Passed Example 4

This `<button>` element has an `<a>` element as a [child][]. The `<a>` element has no `href` attribute, so it isn't included in [sequential focus navigation][]. So this `<button>` element passes the rule.

```html
<button><a>button/link</a></button>
```


### Failed

#### Failed Example 1
Expand All @@ -108,15 +117,15 @@ This `button` element has a [child][] `span` element. Because the `span` element

#### Failed Example 2

This element with `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].
This element with the `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].

```html
<p role="checkbox" aria-checked="false" tabindex="0">I agree to the <a href="/terms">terms of service</a></p>
```

#### Failed Example 3

This element with `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
This element with the `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].

```html
<ul role="menu">
Expand All @@ -127,16 +136,93 @@ This element with `menuitemcheckbox` role has a checkbox as a child. Because the
</ul>
```

#### Failed Example 4

This element with the `tab` role contains an `<a>` element. The `tab` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `tab` role fails the rule. (This tablist implementation is non-functional for users. It's not meant to function - it's only meant to show roles.)

```html
<ul role="tablist">
<li role="tab">
<a href="#">Tab 1</a>
</li>
</ul>
```

#### Failed Example 5

This element with the `img` role contains an `<a>` element. The `img` role has [presentational children][]. The `<a>` element is included in [sequential focus navigation][]. So the element with the `img` role fails the rule. (Interestingly, no similar failure is possible with a standard HTML `<img>` element, because according to the HTML specification, the `<img>` element has no closing tag. So it's impossible to put anything inside of an `<img>` element.)

```html
<span role="img" aria-label="some ASCII art">****** This ASCII art ******* <a href="#">contains a link.</a></span>
```

### Inapplicable

#### Inapplicable Example 1

This element has a `link` role which does not have [presentational children][].
None of the roles involved in this semantic table have [presentational children][]. (The roles are `table`, `row`, and `cell`, respectively, for the `<table>`, `<tr>`, and `<td>` elements.) So this rule does not apply.

```html
<a href="https://w3.org">W3C Website</a>
<table>
<thead>
<tr>
<th colspan="2">semantic table header</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>button in semantic table - no problem</button></td>
<td><a href="#">anchor in semantic table - no problem</a></td>
</tr>
</tbody>
</table>
```

#### Inapplicable Example 2

This `<a>` element has a `link` role, which does not have [presentational children][]. So this element - perhaps surprisingly - does not fail this rule, because it's inapplicable. This is the case even though it's invalid HTML. Any time there's a link as the <i>outer</i> element, that will be inapplicable under this rule. (If the elements were switched - that is, if the `<button>` element contained the `<a>` element - then that would fail this rule.)

```html
<a href="https://w3.org"><button>W3C Website</button></a>
```

#### Inapplicable Example 3

The applicability of this rule does not include elements with an <i>explicit</i> role of `presentation`. Only <i>implicit</i> (through roles with [presentational children][]). This example shows that.

```html
<ul>
<li role="presentation">
<a href="#">inapplicable</a>
</li>
</ul>
```

#### Inapplicable Example 4

The applicability of this rule does not include hidden elements. It only includes <i>presentational</i> elements (through roles with [presentational children][]). These two terms - "hidden" and "presentational" - are often confused. When an element is "hidden", that means that it is completely omitted from the accessibility tree. When an element is "presentational", that means that its semantic role is omitted from the accessibility tree, but its content remains.

The [ARIA 1.2 specification]https://www.w3.org/TR/wai-aria-1.2/#presentation) mentions this confusion:
<ul>
<li>
<q>Many individuals erroneously consider role="presentation" to be synonymous with aria-hidden="true"</q>
</li>
<li>
<q>... the presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree.</q>
</li>
</ul>

Adding to this confusion is a third term: "decorative". The words "decorative" and "presentational" are often used interchangeably, but that usage is inaccurate. The word "decorative" often appears in a sentence such as "marking an image as decorative" - that is, by adding `alt=""` to an `<img>` element. "Decorative" in that context <i>does</i> mean "hidden" - and "hidden", again, is different from "presentational" - so using "decorative" and "presentational" interchangeably is inaccurate. At the time of writing (August 2023), the ACT definition of "[marked as decorative][]" unfortunately encourages this inaccurate usage: it states that <q>An element is marked as decorative if ... it has an explicit role of none or presentation</q>.

At any rate: this example shows that this rule does not apply to hidden elements.

```html
<button aria-hidden="true">
<a href="#">inapplicable</a>
</button>
```


[accessible name]: #accessible-name 'Definition of Accessible name'
[attribute value]: #attribute-value 'Definition of Attribute value'
[semantic role]: #semantic-role 'Definition of Semantic role'
Expand All @@ -147,3 +233,4 @@ This element has a `link` role which does not have [presentational children][].
[sequential focus navigation]: https://html.spec.whatwg.org/#sequential-focus-navigation 'HTML sequential focus navigation, 2020/10/21'
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS Scoping definition of Flat tree, working draft'
[html or svg element]: #namespaced-element
[marked as decorative]: /glossary/#marked-as-decorative
4 changes: 2 additions & 2 deletions _rules/zoom-text-no-overflow-clipping-59br37.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ This [text node][] is fully [visible][] at a [viewport size][] of 640 by 512.

#### Passed Example 2

This [text node][] is [horizontally clipped][] using `text-overflow: ellipsis` at a [viewport size][] of 640 by 512. A link to a full version of the poem is also provided.
This [text node][] is [horizontally clipped][] using `text-overflow: ellipsis` at a [viewport size][] of 640 by 512. A link to a full version of the poem is also provided. Strictly speaking, the link to a full version is not necessary to pass the rule. This example passes the rule because its `white-space: nowrap` and `text-overflow: ellipsis` cause it to pass Expectation 1. The link to a full version _is_ necessary to pass the success criterion.

```html
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px;">
Expand All @@ -97,7 +97,7 @@ This [text node][] is [horizontally clipped][] using `text-overflow: ellipsis` a

#### Passed Example 3

This [text node][] is restricted to a single line, by setting a `line-height` that is the same as the `height`. A link to a full version of the poem is also provided.
This [text node][] is restricted to a single line, by setting a `line-height` that is the same as the `height`. A link to a full version of the poem is also provided. Similarly to Passed Example 2: strictly speaking, the link to a full version is not necessary to pass the rule. This example passes the rule because the way it uses `line-height` causes it to pass Expectation 2. The link to a full version _is_ necessary to pass the success criterion.

```html
<style>
Expand Down
Loading