Comment

Comment by afloatboat

That's some good feedback and I honestly think this should have been an definition list from the start.

I was interested about how it would change if I replaced those `span` with `p` and it still reads the entire block for me with VoiceOver.

- Parental guidance, group

- [arrow right]

- end of, Parental guidance, group

- [arrow right]

- 14+

- [arrow right]

- Production Year, group

- …

When I look at the Chrome Accessibility Tree it shows

heading "Tags"

  paragraph "Parental guidance"

    StaticText "14+"

  paragraph "Production year"

    StaticText "2016"

When I revert back to the span the `paragraph` is replaced by `generic`. I only have hands on experience with VO so I imagine that JAWS/NVDA might yield different results.

I do believe you're right that this shouldn't be a `aria-label` and I will replace it with `aria-description`, but I don't think that we can say that `aria-label` should only be used to fully replace the contents, as a landmark container would also be named by aria-label: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/...

Edit: I just tested this but `aria-description` is not read at all. And https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... seems to indicate that aria-label should still be ok, but the div does have a `role="application"`

parent afloatboat 2 years ago

Comment by afloatboat

Discussion