tota11y は、Web ページ内のアクセシビリティ違反箇所を視覚的に特定するためのツールキットです。開発者およびデザイナーが WCAG 基準への準拠状況を直感的に確認し、修正を支援する目的で設計されています。

環境構築と基本的な導入

既存のプロジェクトに組み込む場合、パッケージマネージャを利用して依存関係を追加します。

npm i @khanacademy/tota11y

インストール完了後、HTML 文書の閉じ body タグ直前にて、ビルドされたスクリプトファイルを読み込みます。

<script src="./dist/tota11y.js"></script>

ローカル開発環境の準備

ソースコードを取得し、依存パッケージを解決してから開発用サーバーを起動します。再現性を高めるため、npm ci の使用を推奨します。

git clone https://github.com/Khan/tota11y.git
cd tota11y
npm ci
npm start

プラグイン構成と機能

本ツールはモジュール化されたアーキテクチャを採用しており、各検証機能は独立したプラグインとして実装されています。

• 主要プラグイン (plugins/)
  • alt-text: 画像要素の代替テキストの有無を検証
  • contrast: 前景色と背景色の色彩対比比率を分析
  • headings: 見出しタグの階層構造の適切性を評価
  • landmarks: ARIA ランドマークの定義状況を確認
• 共通ユーティリティ (plugins/shared/)
  • info-panel: 検証結果を表示する UI コンポーネント
  • annotate: 問題箇所を DOM 上で強調表示する機能

コントリビューションの流れ

コード貢献を行う際は、まず CLA（貢献者許可契約）への署名が必要です。その後は以下のワークフローに従って進行します。

1. 該当プラグインディレクトリにて新機能の実装
2. テストスイートの実行による品質確認 (npm test)
3. リンティングによるコードスタイルの担保 (npm run lint)
4. 本番用ビルド生成 (npm run build:prod)

技術スタックとリリース

実装には jQuery、Webpack、Babel、JSX などの技術が利用されています。バージョン管理は Semantic Versioning に準拠し、CHANGELOG の更新およびタグ作成、npm レジストリへの公開を通じて行われます。

ライセンスは MIT ライセンスの下で公開されており、条件付きで自由な使用、改変および再配布が許可されています。