Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility tree visualizer: a DevTools proposal #1962

Open
spectranaut opened this issue Jun 29, 2023 · 7 comments
Open

Accessibility tree visualizer: a DevTools proposal #1962

spectranaut opened this issue Jun 29, 2023 · 7 comments
Labels
editorial a change to an example, note, spelling, grammar, or is related to publishing or the repo
Milestone

Comments

@spectranaut
Copy link
Contributor

In the ARIA face to face meeting in may 2023 we discussed the desire for a an accessibility tree "visualizer" to help developers understand the users experience mediated by the accessibility tree.

This could show things like:

  • landmarks
  • the accessible name of UI components
  • the order of interactive items
  • show the result of live region updates.

It seems like a utility like this should be build into browser devtools.

@spectranaut spectranaut added the editorial a change to an example, note, spelling, grammar, or is related to publishing or the repo label Jun 29, 2023
@spectranaut spectranaut changed the title Accessibility tree visualizer: a dev tool proposal Accessibility tree visualizer: a DevTools proposal Jun 29, 2023
@stes-acc
Copy link

stes-acc commented Jun 30, 2023

There are a number of MS Inspect clones out there that do that native for the platform Accessibility APIs. The feature set definition could also be interesting for those.

@pkra pkra added this to the ARIA 1.4 milestone Jun 30, 2023
@brennanyoung
Copy link
Contributor

brennanyoung commented Aug 10, 2023

Is the "Accessibility Tree View" in chromium dev tools lacking anything? I find it very useful.

(Attached image is a screenshot of the "Accessibility Tree View" in chromium dev, with an arrow pointing at the toggle that enables it)

image

@stevefaulkner
Copy link
Contributor

@brennanyoung all of the in browser acc tree tools lack some info for example, the associated headers for a data cell are not exposed, to find this information you will need to use an app such as inspect.exe or accprobe.exe

@spectranaut
Copy link
Contributor Author

spectranaut commented Aug 10, 2023

The actual goal of this was something slightly different -- by a "visualizer" we mean something that shows all the accessibility objects layout out somehow visually, in the order they would be encountered with a screen reader, with the accessible name prominent, regions prominent, boundaries etc. Also maybe a way to see live region updates. The idea is to make it quicker/easier to understand, for visual developers, the "layout" the accessibility tree, if that makes sense.

@brennanyoung
Copy link
Contributor

Interesting, useful idea, and not trivial! But I don't really see it as part of the ARIA effort.

@Malvoz
Copy link

Malvoz commented Aug 11, 2023

  • show the result of live region updates

FWIW there's a Chromium bug for that, although it was archived today: https://bugs.chromium.org/p/chromium/issues/detail?id=1260618

@spectranaut
Copy link
Contributor Author

Interesting, useful idea, and not trivial! But I don't really see it as part of the ARIA effort.

That might be true, maybe this issue is more about brainstormming who we might try to convince to do it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editorial a change to an example, note, spelling, grammar, or is related to publishing or the repo
Projects
None yet
Development

No branches or pull requests

6 participants