Show HN: Visualization of website accessibility tree

#1

Post by ziolko » Mon, Oct 07, 2024, 10:38 AM UTC

When COVID-19 started I needed something to get busy to not go crazy. I happened to work on our app WCAG compliance for a few months at the time and was frustrated by the state of of accessibility-related tools for developers.

I've spend two months delivering a tool that is easy to understand and helps catching accessibility issues on my apps. A few years later it's pretty popular despite being mostly abandoned.

I will be happy to work on this further but honestly lost my enthusiasm some time ago. I'd love to get in touch with some company in the accessibility testing space and discuss how to improve it.

Show HN: Visualization of website accessibility tree
chromewebstore.google.com

Re: Show HN: Visualization of website accessibility tree

#2

Post by ChrisMarshallNY » Mon, Oct 07, 2024, 11:17 AM UTC

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.

Re: Show HN: Visualization of website accessibility tree

#3

Post by Leimi » Mon, Oct 07, 2024, 11:53 AM UTC

Super useful, great job.

Re: Show HN: Visualization of website accessibility tree

#4

Post by vladde » Mon, Oct 07, 2024, 11:58 AM UTC

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

Re: Show HN: Visualization of website accessibility tree

#5

Post by ziolko » Mon, Oct 07, 2024, 12:08 PM UTC

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.

Re: Show HN: Visualization of website accessibility tree

#6

Post by notjustanymike » Mon, Oct 07, 2024, 1:28 PM UTC

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.

Re: Show HN: Visualization of website accessibility tree

#7

Post by yreg » Mon, Oct 07, 2024, 1:44 PM UTC

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

Re: Show HN: Visualization of website accessibility tree

#8

Post by Someone » Mon, Oct 07, 2024, 2:26 PM UTC

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

Re: Show HN: Visualization of website accessibility tree

#9

Post by antriani_ » Mon, Oct 07, 2024, 2:27 PM UTC

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

Re: Show HN: Visualization of website accessibility tree

#10

Post by ziolko » Mon, Oct 07, 2024, 2:45 PM UTC

Someone wrote: post #8

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

When I designed the tool I've tried to mirror the experience of screen readers users instead of only displaying ARIA roles and properties.

For example you have to navigate the page with your keyboard only. If a dropdown isn't accessible - it's instantly clear for the user. Another example are tables. They present only one cell + their headers at the time. I think it's super close to the actual experience of screen reader users.