Home

Awesome

Accessibility Visualizer Browser Extension

Screenshot of 駒瑠市. Showing annotations of accessibility properties (This screenshot from 駒瑠市〜アクセシビリティ上の問題の体験サイト〜)

Install

Users' Guide

How to develop

It is built with CRXJS Vite Plugin.

To develop extension, lauch the dev server

# Install dependencies
$ npm install

# To testing, load the ./dist directory on your browser
# Currently it doesn't work in Firefox
$ npm run dev

And in your browser, turn on Developer mode, and load the dist directory with "Load unpacked" button.

There is a test page in src/test/ directroy. You can use it to test the extension with http://localhost:5173/src/test/index.html .

How to build

# Install dependencies
$ npm install

# Build browser extensions to ./dist (for Chrome) and ./dist-firefox directory
# To testing, load the directories on your browser
$ npm run build

# Build zip files to upload to the stores
# The zip files are created as ./a11y-visualizer-chrome.zip and ./a11y-visualizer-firefox.zip
$ npm run package