スキル自身の言葉で
デザインやページを対象としたWCAG 2.1 AA監査の手順です。「audit accessibility」「check a11y」といったフレーズで起動し、Figma URL、URL、または説明を引数に取ります。
知覚可能、操作可能、理解可能、堅牢の4原則にまたがる11の達成基準を凝縮したクイックリファレンスを収録しています。通常のテキストで4.5:1、大きなテキストとUIコンポーネントで3:1のコントラスト比、キーボードアクセス、可視フォーカス、44x44 CSSピクセルのタッチターゲットを扱い、さらに8つのよくある問題と、問題の約30%を検出する自動スキャンから始まる5段階のテスト手順を備えています。検出結果は、重大度の集計、原則ごとの表、コントラスト、キーボード、スクリーンリーダーの各セクション、優先順位付きの修正を含む固定形式のMarkdownレポートにまとまります。
生成されるもの
- デザイン名またはページ名と WCAG 2.1 AA 標準を見出しにした Markdown のアクセシビリティ監査レポート。
- 検出事項のセクションは知覚可能、操作可能、理解可能、堅牢の表に分かれ、問題、達成基準、重大度、推奨事項を記載します。
- 色のコントラスト、キーボードナビゲーション、スクリーンリーダー専用の表を用意し、要素ごとに読み上げられる名前も記載します。
- 優先順位順の修正リストで、ユーザーをブロックする重大な修正と、あると望ましい軽微な改善を分けます。
仕組み
- 01監査対象を渡す
このコマンドはFigma URL、ページURL、または文章による説明を引数に取り、その対象を監査します。
- 0211のAA達成基準を確認する
クイックリファレンスでは、基準を知覚可能、操作可能、理解可能、堅牢の下に分類し、それぞれに達成基準番号としきい値を示します。
- 035つのテスト工程を実行する
自動スキャン、キーボードのみでのナビゲーション、スクリーンリーダーでのテスト、コントラストの検証、200%ズームの順に実行します。
- 04固定形式のレポートを作成する
重大度の要約、原則ごとの検出表、そしてコントラスト、キーボード、スクリーンリーダーの個別の表を含む1つのMarkdownレポートです。
- 05コネクターがある場合は活用する
デザインツールが接続されていればFigmaから色の値、フォントサイズ、タッチターゲットを読み取り、プロジェクトトラッカーが接続されていれば検出事項ごとにチケットを作成します。