"Element with presentational children has no focusable content" (rule 307n5z) - adding examples #2099
Conversation
dan-tripp-siteimprove
added
the
Editorial
dan-tripp-siteimprove
changed the title
| </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>. |
There was a problem hiding this comment.
That's why we use "marked as decorative", and not "decorative" 😄
Being "marked as decorative" is showing author intention to somehow remove the content. It doesn't necessarily means that the content will effectively be removed/hidden/… (because the presentational role conflict resolution can trigger).
I also consider "decorative" as being a semantic property of the page. "presentational" (or role of presentation (post-conflict resolution)) is more of a functional/effective property of the page. The same way that "being a label (WCAG sense of the term)" is a semantic property while using a label element is the functional property (and the way to convey that semantics programmatically). That is, an image is "decorative" not because it has alt="" but because it is "serving only an aesthetic purpose, providing no information, and having no functionality" (WCAG's "pure decoration"). Adding alt="" is a way to convey programmatically the fact that the image is decorative, so that ATs can treat it differently from a non-decorative image.
In that spirit, "marked as decorative" is "the author tried to convey programmatically the semantic information that something is decorative". This may work as intended (and the stuff will be either presentational or hidden), but this may also fail (and the stuff will be exposed as normal).
There was a problem hiding this comment.
Okay, so decorative != marked as decorative. Even if that's okay (which is unclear to me), I still think we have a problem.
I would draw a venn diagram here if I could, but I can't, so here is a tree which represents a venn diagram of the situation you described. (In this venn diagram tree, all child sets totally consume the parent set. eg. Set B minus Set C minus Set D = an empty set.)
- Set A: marked as decorative
- Set B: "marked as decorative" worked
- Set C: presentational
- Set D: hidden
- Set E: "marked as decorative" did not work (==> still has semantics)
- Set B: "marked as decorative" worked
That presents two problems:
- Sets C and D are so different, I think it's confusing for us to include them both under "Set B: "marked as decorative" worked".
- I think that "Set D: hidden" corresponds to what most people think when they hear "marked as decorative". Also, I suspect that it overlaps precisely with their ideas of "decorative" and WCAG's "pure decoration" - and that's a good thing. If we go with the the above venn diagram, someone might say that ACT is out of touch, and they would be right.
There was a problem hiding this comment.
While I think this feedback about how some definitions can be perceived is important, I don't think this is a good place to discuss it. I would suggest @dan-tripp-siteimprove opens an issue to discuss these points, and rewrite the example description is a less verbose manner.
I can do that. How about I move Inapplicable Examples 3 and 4 to the Background section? |
| </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>. |
There was a problem hiding this comment.
While I think this feedback about how some definitions can be perceived is important, I don't think this is a good place to discuss it. I would suggest @dan-tripp-siteimprove opens an issue to discuss these points, and rewrite the example description is a less verbose manner.
Co-authored-by: Carlos Duarte <[email protected]>
Co-authored-by: Carlos Duarte <[email protected]>
Co-authored-by: Carlos Duarte <[email protected]>
- reducing verbosity. - removing most commentary on "hidden" vs. "presentational". - removing all commentary on "marked as decorative".
|
dan-tripp-siteimprove
requested review from
Jym77 and
carlosapaduarte
and removed request for
Jym77 and
carlosapaduarte
|
@dan-tripp-siteimprove I think what's here is fine. Is it worth mentioning for Inapplicable 4 that that issue is covered by another rule (https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/)? |
I think yes, and I just did it in commit d7ea3d3. Thank you. |
| ### 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`, `cell`, `button`, and `link`, for the `<table>`, `<tr>`, `<td>`, `<button>`, and `<a>` elements, respectively.) So this rule does not apply. |
There was a problem hiding this comment.
Wouldn't the rule apply to the button? (and pass because it has no focusable child).
There was a problem hiding this comment.
Yes. I muddled this example. I was trying to get across the idea that the <table>, <tr>, and <td> elements (only) are inapplicable. I just pushed a commit (9dd1ac6) that tries to make it more clear.
…ackground" section. in response to act-rules#2099 (comment)
| ### Inapplicable | ||
|
|
||
| #### Inapplicable Example 1 | ||
|
|
||
| This element has a `link` role which does not have [presentational children][]. | ||
| The roles that build this semantic table structure (`table` for `<table>`, `row` for `<tr>`, and `cell` for `<td>`) do not have [presentational children][]. So this rule does not apply to them. (This rule does apply to the `<button>` element within the table. The `<button>` element passes the rule.) |
There was a problem hiding this comment.
I still believe the button should go away…
From an implementer point of view, tools will report "Passed" rather than "Inapplicable" on that example. This is not a huge deal as it they are equivalent for consistency, but it still creates some weirdness.
We could have this example as a Passed Example. It would still fulfil the same goal (show that table role and its friends are not applicable) (because tools that apply the rule to them would report a Failed outcome). OTOH, I am not sure that the button is adding much value to the example (the link is already a focusable element inside the table, we can have two links and the example is still working as intended).
There was a problem hiding this comment.
Fair points, I'll discuss one-on-one some time.
There was a problem hiding this comment.
I agree with @Jym77
If we want this as an inapplicable example then we should not ask implementations to output "Passed". I agree with either solution proposed: make this a passed example or remove the button element.
There was a problem hiding this comment.
I fixed this a minute ago by removing the button element.
…ent-307n5z---examples-aug-2023
| ### Inapplicable | ||
|
|
||
| #### Inapplicable Example 1 | ||
|
|
||
| This element has a `link` role which does not have [presentational children][]. | ||
| The roles that build this semantic table structure (`table` for `<table>`, `row` for `<tr>`, and `cell` for `<td>`) do not have [presentational children][]. So this rule does not apply to them. (This rule does apply to the `<button>` element within the table. The `<button>` element passes the rule.) |
There was a problem hiding this comment.
I agree with @Jym77
If we want this as an inapplicable example then we should not ask implementations to output "Passed". I agree with either solution proposed: make this a passed example or remove the button element.
Co-authored-by: Jean-Yves Moyen <[email protected]>
Co-authored-by: Jean-Yves Moyen <[email protected]>
Co-authored-by: Jean-Yves Moyen <[email protected]>
Co-authored-by: Jean-Yves Moyen <[email protected]>
Co-authored-by: Jean-Yves Moyen <[email protected]>
Co-authored-by: Jean-Yves Moyen <[email protected]>
Adding examples to rule presentational-children-no-focusable-content-307n5z. Mostly uncontroversial, I think, except for Inapplicable Example 4 ("At the time of writing..."), which I expect will ruffle some feathers.
Closes issue(s): none
Need for Call for Review:
This will not require a Call for Review : editorial changes (including to the applicability, expectation or examples section)
Pull Request Etiquette
When creating PR:
developbranch (left side).After creating PR:
Rule,DefinitionorChore.When merging a PR:
How to Review And Approve