https://github.com/ymrl/a11y-visualizer
A Browser Extension for Enhanced Web Accessibility Checking
https://github.com/ymrl/a11y-visualizer
Last synced: 4 months ago
JSON representation
A Browser Extension for Enhanced Web Accessibility Checking
- Host: GitHub
- URL: https://github.com/ymrl/a11y-visualizer
- Owner: ymrl
- License: mit
- Created: 2024-04-07T04:52:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-05-19T13:14:31.000Z (9 months ago)
- Last Synced: 2024-05-19T15:29:17.656Z (9 months ago)
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/accessibility-visualizer/idcacekakoknnpbfjcdhnkffgfbddnhk?hl=ja
- Size: 1.95 MB
- Stars: 50
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Accessibility Visualizer Browser Extension
(This screenshot from [駒瑠市〜アクセシビリティ上の問題の体験サイト〜](https://a11yc.com/city-komaru/))
## Install
- [Chrome Web Store](https://chromewebstore.google.com/detail/accessibility-visualizer/idcacekakoknnpbfjcdhnkffgfbddnhk)
- [Firefox Add-ons](https://addons.mozilla.org/ja/firefox/addon/accessibility-visualizer/)
## Users' Guide
- [Accessibility Visualizer ユーザーズガイド (Japanese)](./docs/ja/UsersGuide.md)
- [Accessibility Visualizer User's Guide (English)](./docs/en/UsersGuide.md)
- [Accessibility Visualizer 사용자 가이드 (Korean)](./docs/ko/UsersGuide.md)
## How to develop
It is built with [CRXJS Vite Plugin](https://crxjs.dev/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
```