act-rules
Should img without role be failed for Element marked as decorative? [46ca7f]
I'm concerned about implementing failed example 2 in our implementation:
<img src="/test-assets/shared/w3c-logo.png" alt="" aria-labelledby="label" />
<span hidden id="label">W3C logo</span>
I can easily imagine component code that ends up looking like this. Take this react component for example:
const Image = ({ alt = '', ...props }) => (<img alt={alt} {...props} />)
export default () => (<figure>
<Image aria-labelledby="caption" src="my-image.png" />
<figcaption id="caption">My wonderful caption</figcaption>
</figure>
This is a perfectly reasonable way to write a component, which then ends up being failed by the Element marked as decorative rule. I think this rule previously only reported on the explicit use of role=none / presentation. I'd prefer to go back to that, and turn failed example 2 into a pass.
@WilcoFiers Looking back, it seems:
- The rule was targeting stuff "marked as decorative" since its first commit in the PR.
- We did had a very similar discussion at that time, with almost the same example 😄
- You were of the opinion that triggering presentational conflict resolution should be flagged as best practice
- In some WAI tools discussion we agreed on that (and we changed the rule from targeting images and mapping to 1.1.1 to targeting anything and being Best Practice).
Of course, we can revisit all these decisions.
My current opinion is:
- This is a Best Practice rule, even though people may build components that way (with empty
altand non-emptyaria-label), I do not feel this is a good idea and I am fine flagging it as Best Practice. - As a tool vendor, we had the rule running in Alfa for more than a year and I have received no complain on this topic. So my data points to this not being a problem (or people ignoring it since it's a Best Practice).
So, I do not feel that the data we've gathered in the past two years requires us to revisit these decisions, and I'm still happy with how the rule is currently.
Plot twist…
In ARIA 1.2, aria-label becomes prohibited on role of presentation.
So, the first thing is that <img alt="" aria-label="foo" /> is not valid anymore.
The second thing is that I understand that prohibited attributes should not trigger the presentational role conflict resolution, and this example is therefore having a role of presentation and not failing the rule…
presentational role conflict resolution:
If an element has global WAI-ARIA states or properties, user agents MUST ignore the presentation role and expose the element with its implicit role.
But global properties:
The following global states and properties are supported by all roles and by all base markup elements unless otherwise prohibited.
(emphasises mine) I understand that prohibited properties should not be considered as global, and not trigger the conflict. We may want to run some tests to be sure.
I suggest this is taken by the ARIA 1.2 committee since it relates to it.
Wouldn't have guessed this from the text, but you seem to be correct. At least as far as Chrome / Edge are concerned, aria-label and aria-labelledby no longer trigger conflict resolution for role=none / role=presentation. I.e. If you put aria-label on an h4 with role=none, Chrome no does not include that heading in the accessibility tree. Firefox and Safari still do though.
Might be worth reaching out to ARIA group for clarification and whether prohibited attributes are supposed to trigger the conflict before we make changes 🤔
Related ARIA issue on this topic: https://github.com/w3c/aria/issues/1824
Here are test results for alt="" with aria-label https://www.powermapper.com/tests/screen-readers/labelling/img-null-alt-aria-label/
