Accessibility Visualizer Browser Extension

(This screenshot from 駒瑠市〜アクセシビリティ上の問題の体験サイト〜)

Install

• Chrome Web Store
• Firefox Add-ons

Users' Guide

• Accessibility Visualizer ユーザーズガイド (Japanese)
• Accessibility Visualizer User's Guide (English)
• Accessibility Visualizer 사용자 가이드 (Korean)

How to develop

It is built with WXT.

To develop extension, launch the dev server

# Install dependencies
$ pnpm install

# To develop for Chrome/Chromium browsers
$ pnpm --filter=@a11y-visualizer/browser-extension dev

# To develop for Firefox
$ pnpm --filter=@a11y-visualizer/browser-extension dev:firefox

WXT will automatically open your browser and load the extension in development mode.

You can test the extension using the test pages available on the website at /tests. The website serves as both promotional content and comprehensive test cases for accessibility features.

How to build

# Install dependencies
$ pnpm install

# Build browser extension for Chrome/Chromium
$ pnpm --filter=@a11y-visualizer/browser-extension build

# Build browser extension for Firefox
$ pnpm --filter=@a11y-visualizer/browser-extension build:firefox

# Create zip files for store distribution
$ pnpm --filter=@a11y-visualizer/browser-extension zip
$ pnpm --filter=@a11y-visualizer/browser-extension zip:firefox

The built extensions will be in apps/browser_extension/dist/ directory, and zip files will be created in the same location.