Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Visualization of website accessibility tree

chromewebstore.google.com

Post reply on HN
Print view View original

11–20 of 35 posts

Re: Show HN: Visualization of website accessibility tree

#11

Post by afloatboat »

Pretty clean, I like it.

I tested it out on a page I'm developing that has some meta data on a TV show. One of the elements is a set of divs each containing span with an `aria-label` describing the contents. With MacOs' VO this gets called out correctly, and Chrome's Accessibility Tree also picks this up, but this tool doesn't show the `aria-label`, it just shows the separate values as strings one after another.

It also picked up a `::before { content: ", " / ""; }` as `, value`, but that's not supported very well in general.

Re: Show HN: Visualization of website accessibility tree

#12

Post by danng87 »

Awesome tool!

I've been diving more into accessibility lately, especially trying to improve the experience for screen reader users. For those with more experience, has anyone tested this tool on more complex scenarios like extensive forms or dynamic tables? I'd love to hear how it compares to other accessibility tools in those cases.

Any tips or insights would be appreciated!

Re: Show HN: Visualization of website accessibility tree

#13

Post by ziolko »

afloatboat wrote: post #11

Pretty clean, I like it. I tested it out on a page I'm developing that has some meta data on a TV show. One of the elements is a set of divs each containing span with an `aria-label` describing the contents. With MacOs' VO this gets called out correctly, and Chrome's Accessibility Tree also picks this up, but this tool doesn't show the `aria-label`, it just shows the separate values as strings one after another. It a…

Is there a chance to get a link to the page? I'd love to try it out and fix.

Re: Show HN: Visualization of website accessibility tree

#14

Post by ziolko »

yreg wrote: post #7

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 am super glad you like it! The primary reason I haven't introduced support for iframes is that it requires much wider permissions (instead of just access to the current tab after clicking the "ARIA DevTools" icon you'd need to grant access to all data on every website you visit). I will research if things changed since I last checked, though.

Re: Show HN: Visualization of website accessibility tree

#15

Post by afloatboat »

ziolko wrote: post #13
afloatboat wrote: post #11

Pretty clean, I like it. I tested it out on a page I'm developing that has some meta data on a TV show. One of the elements is a set of divs each containing span with an `aria-label` describing the contents. With MacOs' VO this gets called out correctly, and Chrome's Accessibility Tree also picks this up, but this tool doesn't show the `aria-label`, it just shows the separate values as strings one after another. It a…

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.212+2007RomanceComedyCast:ABCDEFGHI`

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

Re: Show HN: Visualization of website accessibility tree

#16

Post by kilian »

Very cool. I recently implemented my own accessibility tree visualization [1] Yours is very interesting, getting away from the tree itself to a visualization more focused on grouping discrete units.

My thinking was to show the entire structure and through that help people focus on a logical flow through the page. Flipping that around and thinking of the tree as a set of discrete blocks, where the cohesion inside each block is more important, is very interesting.

Happy to chat if you want to compare notes!

[1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...

Re: Show HN: Visualization of website accessibility tree

#18

Post by Muromec »

notjustanymike wrote: post #6

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.

"but it's already a text, can't screenreader read the text?"

Re: Show HN: Visualization of website accessibility tree

#19

Post by InvisGhost »

yreg wrote: post #7

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?

Re: Show HN: Visualization of website accessibility tree

#20

Post by InvisGhost »

ziolko wrote: post #5
vladde wrote: post #4

Looks neat, and way more clean than https://wave.webaim.org/

Thank you! I really think there's a lot of potential in ARIA DevTools. It's quite popular (at least for my standards) but I never had any connection with people that live and breathe web accessibility. And the devil is in the details here so to be fully fair, WAVE is most probably more accurate.

Definitely more accurate however it's UX is awful and doesn't do a good job of prioritizing issues. It sucks that you basically have to install a screen reader app to get the most accurate idea of how screen readers see your site.
Post reply on HN