UI・UX・アクセシビリティとは｜このカテゴリで分かること
誰でも迷わず使えるWebサイトにするための、実装上の要点をまとめたカテゴリです。キーボード操作のフォーカス表示、画像の代替テキスト、フォームのラベルとエラー表示、ARIA 属性、dialog 要素によるモーダル、タップ領域の大きさを扱います。
「Webアクセシビリティ」「WCAG」で調べる人は、基準の条文を読んでも実装に結びつかず困っていることが多いです。ここでは達成基準の考え方と、HTML と CSS で具体的にどう書くかを対応づけて案内します。配色や文字組みなどの見た目の基礎は Webデザイン基礎 にまとめています。
読む順番（おすすめの順路）
- alt属性の書き方｜画像の代替テキストの基準と例 … 最も身近な対応で、判断の考え方（何を書き、何を空にするか）を学べるため。
- :focus-visibleとは｜キーボード操作のフォーカス表示の作り方 … キーボード利用者に必須で、CSS だけで改善できる項目のため。
- フォームのlabelとエラー表示｜アクセシブルな入力欄の作り方 … 入力フォームは離脱が多く、ラベルとエラーの設計が影響するため。
- タップ領域のサイズ｜24px・44pxの基準と広げ方 … 押しやすさの基準で、モバイル利用が多い現在の必須項目のため。
- ARIA属性の使いどころ｜aria-expanded・aria-labelの基本 … HTML だけで足りない場面の補助手段として、使いどころを見極めるため。
- dialog要素でモーダルを作る｜showModalとアクセシビリティ … 複数の知識（フォーカス、ARIA、キーボード操作）が重なる応用例のため。
押さえておきたいポイント（リサーチ）
W3C の WCAG 2.2 の解説で確認できる内容です。新しい版が公開される可能性があるため、最新は公式で確認してください。
| 項目 | 確認できる内容 |
|---|---|
| フォーカスの可視化（2.4.7、AA） | キーボードで操作できる UI には、フォーカスの位置が見える操作モードが必要。:focus や :focus-visible による表示が実装方法として挙げられ、フォーカスを消すスクリプトやスタイルは失敗例とされる。 |
| コントラスト（1.4.3、AA） | 通常の文字は 4.5:1 以上、大きな文字は 3:1 以上。 |
| ターゲットサイズ（2.5.8、AA） | ポインタ操作の対象は 24×24 CSS ピクセル以上が原則。十分な間隔がある場合などは例外とされる。 |
なお、WCAG 2.2 の AA（2.5.8）が求めるのは 24×24 CSS ピクセルです。44×44 CSS ピクセルを求めるのは別の達成基準 2.5.5 ターゲットのサイズ（強化）で、こちらはレベル AAA です。Apple の Human Interface Guidelines が示す 44pt は OS の設計指針で、WCAG とは別物です。これらは混同せず、どの水準を目標にするかを対象サイトの方針で決めます。
よくある疑問
Q. alt 属性には何を書けばよいですか。
A. 画像の目的により異なります。装飾なら空にするなどの基準を alt属性の書き方｜画像の代替テキストの基準と例 で例つきに説明しています。
Q. outline を消してもよいですか。
A. 代わりの見える表示がない限り避けるべきです。:focus-visibleとは｜キーボード操作のフォーカス表示の作り方 で、見た目を損なわない書き方を紹介します。
Q. ARIA は付けたほうが良いのですか。
A. まず適切な HTML 要素を使い、足りない部分に補うのが基本です。ARIA属性の使いどころ｜aria-expanded・aria-labelの基本 を参照してください。
Q. モーダルを作るときの注意点は何ですか。
A. フォーカスの移動と閉じ方が要点です。実装は dialog要素でモーダルを作る｜showModalとアクセシビリティ で解説しています。
編集部の見解
アクセシビリティは、特別な機能を足す作業というより、HTML を意味どおりに書く延長にあると考えます。ラベルを正しく結び、標準のボタンやリンクを使い、フォーカスを消さないだけで、多くの問題は避けられます。ARIA は便利ですが、誤用すると標準要素より悪化することもあるため、最後の手段と位置づけるのが安全だと感じます。基準の数値を満たすことに加え、実際にキーボードだけで操作してみる習慣が、最も早く問題に気づける方法だと考えます。