[afloatboat]

I can't link the page, but this is a cleaned up DOM output (the extra spans/divs are components):

`<div><div><span aria-label="IMDb rating" title="IMDb rating">IMDb 8.2</span></div><div><span aria-label="Parental guidance" title="Parental guidance">12+</span></div><div><span aria-label="Production year" title="Production year">2007</span></div><ul aria-label="Genre"><li><div><span>Romance</span></div><li><div><span>Comedy</span></div></ul></div><section><div><h2 id=":r1j:-cast">Cast:</h2><ul aria-labelledby=":r1j:-cast"><li><span>ABC</span><li><span>DEF</span><li><span>GHI</span></ul></div></section>`

`section ul { margin: 0; padding: 0; list-style: none; li { display: inline; &:not(:first-child)::before { content: ", " / ""; } } }`

[extra88]

Adding a name to an element without a role, like span or div, is technically invalid; in this example, only the <ul> elements have valid names added to them, because they implicitly have the role of "list."

Also, aria-label and aria-labelledby replace the contents of an element when the contents would otherwise be the name; if the <span> elements where <p> instead (which has an implicit role), screen readers would only read "IMDb rating" and not "IMDb 8.2."

What might be happening is the aria-label attributes are ignored but the title attributes are used as a description after the contents. For some elements `title` can be used as an element description; I think descriptions are also invalid without a role but they may get used anyway.

I think it's best for a visualizing tool to not display attribute information that won't be used by screen readers.

[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"`

[ziolko]

That's super helpful. I will get this fixed soon :)