21–30 of 35 posts
Thank you, this looks great! Could you please run it inside iframes as well? Being able to use this in the Storybook/Playroom would be awesome. --- Firefox link: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...
I wonder if you're able to open the iframe in a new tab and then use the extension on it?
A very handy tool for spot checking, but also training. My benefit from this visualization will be demonstrating to non-technical how to people to think about accessibility (specifically screen readers). Half the challenge with WCAG is getting our stakeholders to think beyond ticking boxes for compliance.
Earlier quoted context omitted.
Is there a chance to get a link to the page? I'd love to try it out and fix.
I can't link the page, but this is a cleaned up DOM output (the extra spans/divs are components): ` IMDb 8.2 12+ 2007 Romance Comedy Cast: ABC DEF GHI ` `section ul { margin: 0; padding: 0; list-style: none; li { display: inline; &:not(:first-child)::before { content: ", " / ""; } } }`
Earlier quoted context omitted.
Is there a chance to get a link to the page? I'd love to try it out and fix.
I can't link the page, but this is a cleaned up DOM output (the extra spans/divs are components): ` IMDb 8.2 12+ 2007 Romance Comedy Cast: ABC DEF GHI ` `section ul { margin: 0; padding: 0; list-style: none; li { display: inline; &:not(:first-child)::before { content: ", " / ""; } } }`
Also, aria-label and aria-labelledby replace the contents of an element when the contents would otherwise be the name; if the elements where
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.
Earlier quoted context omitted.
I can't link the page, but this is a cleaned up DOM output (the extra spans/divs are components): ` IMDb 8.2 12+ 2007 Romance Comedy Cast: ABC DEF GHI ` `section ul { margin: 0; padding: 0; list-style: none; li { display: inline; &:not(:first-child)::before { content: ", " / ""; } } }`
Adding a name to an element without a role, like span or div, is technically invalid; in this example, only the 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 elements where instead (which has an implicit role), screen readers would only read "IMDb ra…
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"
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"`
Shameless plug: https://github.com/xi/aria-api