デザインと操作性を両立するアクセシビリティの基盤
Webアクセシビリティ（a11y）は、特定の障がい者向け対応にとどまらず、キーボード操作ユーザーや一時的な怪我・片手操作のユーザーを含む、あらゆる人の体験を向上させる品質基準です。
誰もが直感的に操作できるコンポーネント設計の要点を整理します。
モーダルダイアログ設計における必須3要件
モーダルはアクセシビリティ違反が最も頻発するパーツです。以下の3要件を確実に満たす必要があります。
- フォーカストラップ（Focus Trap）: 開いている間、Tabキーでの移動をモーダル内部だけに閉じ込め、背面の要素へフォーカスが漏れるのを防ぐ。
- Escapeキー操作: ESCキー押下で即座に閉じ、閉じた後は「モーダルを開いた元のボタン」へフォーカスを復帰させる。
- 適切なWAI-ARIA属性:
role="dialog"およびaria-modal="true"の付与- タイトルを指す
aria-labelledbyの明示
見過ごされがちな3大アンチパターン
- アンチパターン1:
<div>や<span>にクリックイベントをつける- 問題: キーボード（Enter/Space）で操作できず、スクリーンリーダーにもボタンとして伝わらない。
- 解決: ネイティブの
<button>タグを使用し、スタイルはCSSで整える。
- アンチパターン2: プレースホルダーをラベル代わりにする
- 問題: 入力を始めると消えてしまい、視認性と認知負荷を損ねる。
- 解決: 常時表示された
<label>を用意し、htmlForで input の id と紐付ける。
- アンチパターン3: コントラスト比の不足
- 問題: 薄いグレー文字など、コントラスト比が4.5:1未満で視認困難。
- 解決: WCAG 2.1 AA基準をクリアするカラーパレットを固定する。
Headless UIライブラリによる工数削減
アクセシビリティをゼロから自前実装するのは極めて工数がかかります。Radix UIやReact Ariaなどの「スタイルを持たない高アクセシビリティなUIプリミティブ」を採用し、スタイリングのみをTailwind CSS等で当てる手法が現代のスタンダードです。