"Element with presentational children has no focusable content" (rule 307n5z) - adding examples (#2099)

dan-tripp-siteimprove · Jym77 · carlosapaduarte · web-flow · commit 32fe6afb0b35 · 2025-06-12T15:27:09.000+01:00
* invalid-form-field-value-36b590: updating failed example 2. * Adding examples to rule presentational-children-no-focusable-content-307n5z * Update _rules/presentational-children-no-focusable-content-307n5z.md * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Inapplicable Example 4: - reducing verbosity. - removing most commentary on "hidden" vs. "presentational". - removing all commentary on "marked as decorative". * Updating Inapplicable Example 4 and references to rule 6cfa84. * Updating Inapplicable Example 1 because of #2099 (comment) * updating Inapplicable Example 2 based on #2099 (comment) * removing Inapplicable Example 3 and replacing it w/ wording in the "background" section. in response to #2099 (comment) * updating Background in response to #2099 (comment) * Updating "Inapplicable Example 1" as per https://github.com/act-rules/act-rules.github.io/pull/2099/files#r1426483648 * Inapplicable Example 1: fixing whitespace. * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/presentational-children-no-focusable-content-307n5z.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> --------- Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com>
diff --git a/_rules/presentational-children-no-focusable-content-307n5z.md b/_rules/presentational-children-no-focusable-content-307n5z.md
@@ -43,16 +43,17 @@ This rule assumes that elements that are part of [sequential focus navigation][]
 
 Several major browsers ignore the WAI-ARIA requirements on [presentational children][] for most or sometimes all roles, or in presence of focusable content. Since some browsers implement presentational children while others do not, pages failing this rule may only be problematic with some browsers.
 
+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
 
@@ -68,7 +69,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">
@@ -81,7 +82,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][].
 
@@ -94,6 +95,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
@@ -109,15 +119,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">
@@ -128,14 +138,53 @@ 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.
+
+```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 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
+<table>
+	<thead>
+		<tr>
+			<th><a href="#">link in table header cell - no problem</a></th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><a href="#">link in table data cell - 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 `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
-<a href="https://w3.org">W3C Website</a>
+<a href="https://w3.org"><span tabindex="0">W3C Website</span></a>
 ```
 
 [accessible name]: #accessible-name 'Definition of Accessible name'
