from Hacker News

Show HN: Visualization of website accessibility tree

by ziolko on 10/7/24, 10:38 AM with 32 comments

• by yreg on 10/7/24, 1:44 PM

  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...

• by notjustanymike on 10/7/24, 1:28 PM

  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.

• by kilian on 10/7/24, 6:42 PM

  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...

• by vladde on 10/7/24, 11:58 AM

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

• by afloatboat on 10/7/24, 2:57 PM

  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.

• by ChrisMarshallNY on 10/7/24, 11:17 AM

  Good stuff!

  I'm big on accessibility support.

  Web sites aren't really my deal, anymore, but I always used to make sure that my sites were very accessible, when it was my deal.

• by ximm on 10/8/24, 1:41 PM

  One thing we I wish we would do with these tools is separate all the aria logic from the UI. We should put all that complex aria stuff into a library and then build different UIs on top of a shared, well tested code base.

  Shameless plug: https://github.com/xi/aria-api

• by Someone on 10/7/24, 2:26 PM

  How does this compare to Chrome’s built-in tooling (https://developer.chrome.com/docs/devtools/accessibility/ref...)?

• by freetonik on 10/8/24, 6:28 AM

  Great idea and implementation, thank you, I’ll definitely use it for my side project. Coincidentally, I just watched a talk by Mandy Michael [1] about HTML performance and accessibility, and was wondering if there is a tool nicer than browser’s built in accessibility tree viewer.

  1. https://youtu.be/cghb0VpCJqM?si=5pWNrkPOyUsohyGJ

• by danng87 on 10/7/24, 3:25 PM

  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!

• by Evan-Purkhiser on 10/7/24, 6:55 PM

  I’ve been using this for years now thank you so much for building this!!

• by antriani_ on 10/7/24, 2:27 PM

  Does it offer any additional features compared to the accessibility view in Chrome DevTools?

• by Leimi on 10/7/24, 11:53 AM

  Super useful, great job.