本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つAccessibility instructionsについてです。
Accessibility instructions
Accessibility instructionsはアクセシビリティ（A11y）に関するガイドラインを指示します。
CopilotがUIやWebコードを生成・編集する際に、アクセシビリティのベストプラクティスを徹底して守る動作になるよう調整します。
以下のページから.Accessibility instructionsのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してAccessibility instructionsをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
本インストラクションをインストールするとCopilotの振る舞いが以下の通り変わります。
WCAG 2.2 Level AA に準拠する
CopilotはUIやHTML/CSS/JSを生成する際にWCAG 2.2 Level AAに従うコードを生成するようになります。
最低限の準拠だけでなく、ユーザビリティの向上も優先します。
プロジェクトでUIライブラリがあるときは標準コンポーネントを優先する行動基準を必ず守るようになります。
既存のパターンを尊重する
既存のUIライブラリやパターンがある場合、それを再利用します。
再発明や非推奨手法を避け、一貫したアクセシビリティ標準を守るようになります。
インタラクティブ要素のキーボード操作対応
Copilotは生成するUIについて以下の対応を行います。
- すべてのインタラクティブ要素がキーボード操作可能
- Tabの移動順が予測可能かつ論理的
- フォーカスが常に視覚的に分かる
こういったキーボードアクセシビリティの要件を満たすようにコードを提案します。
ARIAの利用は必要な場合に限定する
CopilotはネイティブHTMLで表現できるものはARIAを使わずに記述するようになります。
必要な場合のみ正しいARIA属性を付与する判断でアクセシビリティ強化を行います。
障害を考えた UI 構造の作成
ページ構造は以下のような構造的アクセシビリティを守る提案をします。
- 適切なランドマーク（header, main, footer など）
- 見出しレベルは飛ばさず論理的に並べる
- ラベルは常に明示的につける
色・視認性・コントラスト対応
Copilot は生成 CSS について以下のような視覚アクセシビリティを満たすように提案します。
- WCAG コントラスト比基準（例：テキスト vs 背景で最低 4.5:1）
- フォーカスインジケータや UI の境界が視認しやすいこと
- 色だけで情報を伝えない
レスポンシブとリフロー
Copilotが作成するUIは以下のようなレスポンシブアクセシビリティの基準を満たすようになります。
- モバイルサイズ（320px 幅）でも横スクロール不要
- レイアウトを折り返して読みやすさを維持
フォーム・ラベル・エラー対応
フォームの提案では以下のような対応を含めた提案になります。
- エラー時は文言（例：改善方法付き）を明示
- フォーカス自動移動やアクセシビリティ属性
