https://github.com/dtinth/accessibility-tree-visualizer

Visualizes Google Chrome’s accessibility tree.
https://github.com/dtinth/accessibility-tree-visualizer

chrome-devtools-protocol puppeteer

Last synced: 2 months ago
JSON representation

Visualizes Google Chrome’s accessibility tree.

• Host: GitHub
• URL: https://github.com/dtinth/accessibility-tree-visualizer
• Owner: dtinth
• Created: 2019-12-28T18:22:13.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:49:21.000Z (about 2 years ago)
• Last Synced: 2024-05-02T06:06:43.271Z (9 months ago)
• Topics: chrome-devtools-protocol, puppeteer
• Language: TypeScript
• Homepage: https://codesandbox.io/embed/github/dtinth/accessibility-tree-visualizer/tree/master/?fontsize=14&hidenavigation=1&theme=dark&view=preview
• Size: 417 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Accessibility tree visualizer

A simple React application that reads Chrome’s Accessibility Tree and visualizes it as a web page.

It can serve as a quick way to preview how VoiceOver might read your website.

**Disclaimer:** This is just a proof-of-concept I did in a single night, so you will see very bad code inside.

Moreover, the resulting webpage is not accessible at all.

## How to use

1. Obtain the Accessibility Tree of a website using Puppeteer with this script.

   ```js

   // get-ax-tree.js

   const puppeteer = require('puppeteer')

   ;(async () => {

     const browser = await puppeteer.launch()

     const page = await browser.newPage()

     await page.goto(process.argv[2])

     const client =

       /** @type {import('puppeteer-core').CDPSession} */ (page._client)

     try {

       console.log(

         JSON.stringify(

           await client.send('Accessibility.getFullAXTree'),

           null,

           2,

         ),

       )

     } catch (e) {

       console.error(e)

       process.exitCode = 1

     } finally {

       browser.close()

     }

   })()

   ```

   Usage:

   ```

   node get-ax-tree https://github.com/ > tree.json

   ```

2. Drag the JSON file into the webpage at https://codesandbox.io/embed/github/dtinth/accessibility-tree-visualizer/tree/master/?fontsize=14&hidenavigation=1&theme=dark&view=preview.

   (Also: If you have your JSON tree copied into clipboard, you can paste it into the webpage and it will load the tree from the clipboard.)

## Development

I use CodeSandbox to develop this. Click this link to begin hacking: https://codesandbox.io/s/github/dtinth/accessibility-tree-visualizer