アクセシビリティの最小チェック——コントラスト・キーボード・代替テキスト・見出し構造

アクセシビリティの確認は、コントラスト・キーボード操作・代替テキスト・見出し構造の4点を、公開前に30分だけ見るところから始めるのが現実的だと考えています。この4点で全部が分かるわけではありません。ただ、私がこれまで制作やレビューで見てきたサイトでは、引っかかる箇所の多くがこの4つのどれかでした。しかも、どれも特別なツールを買わずにブラウザだけで確かめられます。

基準にしているのはW3CのWCAG 2.2です。W3CもEasy Checks – A First Review of Web Accessibilityという簡易チェックの手引きを出していて、その中で「網羅的ではなく、手早く確認するためのもの」と断ったうえで、画像の代替テキスト・見出し・コントラスト・キーボードフォーカスなどを挙げています。この記事の4点も同じ位置づけで、「最初の一巡」として読んでください。

1. コントラスト：本文より「補助の文字」を測る

WCAG 2.2の達成基準1.4.3（レベルAA）では、通常の文字は背景に対して4.5:1以上、大きな文字は3:1以上のコントラスト比が求められています。数値の詳しい話は以前のダークUIの記事に書いたので、ここでは測る場所の話をします。

本文の色は、デザインの最初に決めるので大抵通っています。基準を下回りやすいのは次のような箇所です。

• 日付やキャプションなど、薄いグレーにした補助テキスト
• 入力欄のプレースホルダー
• 写真の上に重ねた白い見出し

私はブラウザの開発者ツールで文字を選び、表示されるコントラスト比を見ています。写真の上の文字は、写真のいちばん明るい部分に重なったときで確認します。

2. キーボード操作：マウスを置いてTabキーだけで一周する

達成基準2.1.1（レベルA）は、すべての機能をキーボードで操作できることを求めています。確認方法は単純で、マウスから手を離し、Tabキー（戻るときはShift+Tab）とEnterキーだけでページを一周します。見るのは次の4つです。

見ること	関係する達成基準
今どこにフォーカスがあるか、目で見て分かるか	2.4.7 フォーカスの可視化（AA）
固定ヘッダーやバナーの下にフォーカスが隠れないか	2.4.11 フォーカスが隠れない（最低限）（AA、2.2で追加）
移動する順番が見た目の順番と大きくずれないか	2.4.3 フォーカス順序（A）
モーダルやメニューに入ったあと、外に出られるか	2.1.2 キーボードトラップなし（A）

私の経験では、いちばん多いのは「デザインの都合でフォーカスの枠線を消している」ケースです。CSSで outline: none を指定したまま代わりのスタイルを用意していないと、キーボードで操作している人は自分がどこにいるか分からなくなります。消すなら、代わりの見え方をセットで用意する。カンプの段階でフォーカス時の見た目も1枚描いておくと、実装で抜けにくくなります。

3. 代替テキスト：「その画像がなくなったら何が欠けるか」で決める

達成基準1.1.1（レベルA）は、画像などに同じ目的を果たすテキストの代替を用意することを求めています。ここで迷いやすいのは「全部の画像に説明を書くべきか」という点です。

W3Cのalt Decision Treeでは、おおむね次のように整理されています。

• 装飾だけの画像、すぐ近くの本文と同じ内容の画像 → 空の alt=""
• リンクやボタンになっている画像 → 画像の見た目ではなく、行き先や動作を書く
• 文字を含む画像 → その文字を書く
• 意味を伝える写真や図 → 伝えたい内容を短く書く

私はクライアントに原稿をお願いするとき、「この画像がなくなったら、読む人は何を失いますか」と聞くようにしています。答えが「特に何も」なら空のalt、答えが出てきたらそれがaltの下書きです。リンクになったロゴなら「ロゴ」ではなく「トップページへ」と書きます。

4. 見出し構造：見出しだけ抜き出して目次として読めるか

達成基準1.3.1（レベルA）は、見た目で伝えている構造をプログラムでも読み取れるようにすることを求め、2.4.6（レベルAA）は見出しが内容を説明していることを求めています。

確認は、ページの見出し（h1〜h6）だけを抜き出して並べてみることです。ブラウザの拡張機能を使ってもいいですし、開発者ツールのコンソールで document.querySelectorAll('h1,h2,h3,h4,h5,h6') を実行しても一覧が取れます。見るのは次の点です。

• 見出しだけ読んで、ページの目次として意味が通るか
• 文字を大きくしたいだけの箇所に見出しタグを使っていないか
• 逆に、見た目は見出しなのに div で作られていないか
• 「詳しくはこちら」のように、そこだけ読んで内容が分からない見出しになっていないか

明日から試せる一手

いま担当しているサイトのトップページを1枚だけ開いて、マウスを使わずTabキーで最後まで移動してみてください。フォーカスが見えなくなる場所、隠れる場所、抜け出せない場所があれば、そこがいちばん先に直す箇所です。そのあと残りの3点（コントラスト・代替テキスト・見出し）を同じページで確かめ、気づいたことを箇条書きにしておく。それが、次のレビューで使えるチェックリストの原型になります。