diff --git a/_rules/presentational-children-no-focusable-content-307n5z.md b/_rules/presentational-children-no-focusable-content-307n5z.md index a5e541cbbd..31ab4c32c7 100755 --- a/_rules/presentational-children-no-focusable-content-307n5z.md +++ b/_rules/presentational-children-no-focusable-content-307n5z.md @@ -42,16 +42,17 @@ This rule applies to elements with a [semantic role][] that defines its [childre Elements with a [semantic role][] that has [presentational children][] will not have any descendants in the accessibility tree. If any of those descendants are included in [sequential focus navigation][], this causes the focus to land on an element that has no corresponding node in the [accessibility tree][]. The result is that there is no programmatic name or role available for assistive technologies. There are other problems that can come from [presentational children][] too. These must be tested separately. +This rule is often misunderstood as applying to elements with an _explicit_ role of `presentation`. In fact, this rule only applies to elements which have been given an _implicit_ role of `presentation` through the [presentational children][] mechanism. Similarly, this rule does not apply to elements with `aria-hidden="true"`. + ### Related rules -- [Element with aria-hidden has no focusable content](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/) +- [Element with aria-hidden has no content in sequential focus navigation](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/) ### Bibliography - [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships) - [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) - [WAI-ARIA 1.2 Presentational Children][presentational children] -- [Element with aria-hidden has no focusable content](aria-hidden-no-focusable-content-6cfa84.md) ## Test Cases @@ -67,7 +68,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

@@ -80,7 +81,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][]. @@ -93,6 +94,15 @@ This element with `menuitemcheckbox` role has an `input` element as a descendant ``` +#### Passed Example 4 + +This ` +``` + + ### Failed #### Failed Example 1 @@ -108,7 +118,7 @@ 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

I agree to the terms of service

@@ -116,7 +126,7 @@ This element with `checkbox` role has an `a` element as a [child][]. Because the #### 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 ``` +#### 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 + +``` + +#### 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. + +```html +****** This ASCII art ******* contains a link. +``` + ### Inapplicable #### Inapplicable Example 1 -This element has a `link` role which does not have [presentational children][]. +None of the roles that build this semantic table structure (`table` for `table`, `row` for `tr`, `columnheader` for `th`, and `cell` for `td`) have [presentational children][]. So this rule does not apply to them. + +```html + + + + + + + + + + + +
link in table header cell - no problem
link in table data cell - no problem
+``` + +#### Inapplicable Example 2 + +This `a` element has a `link` role, which does not have [presentational children][]. So this `a` element does not fail this rule, because it's inapplicable. To have a "focusable element within a focusable element" like this is a bad practice, but this rule doesn't directly check for it. ```html -W3C Website +W3C Website ``` [accessible name]: #accessible-name 'Definition of Accessible name'