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.

There is a test page in apps/test_site/ directory. You can use it to test the extension:

# Start the test site server
$ pnpm --filter=@a11y-visualizer/test-site dev

Then visit http://localhost:5173 to access various test pages 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.