アクセシビリティって単語だけ聞くと、なんだか大掛かりな専門対応が必要そうに聞こえるんですが、実際は基本的な部分を押さえるだけでも結構底上げされます。完璧主義になって手が止まるくらいなら、できる範囲から始めた方がいいというのが自分の結論です。
コントラスト比は日差しの下で分かる
文字と背景の色差が甘いと、視力が弱い人だけじゃなく、外で日差しの下でスマホを見てる人にとっても読みにくくなります。自分もカフェの窓際で自分のサイトを開いて「あれ、これ意外と読みにくいな」と気づいたことがあり、それ以来WCAGの基準を目安に一応チェックするようになりました。
まさに、日中にプレイするホラーゲームのごとく、どこにどうやって進んでいるかすらわからない状態と似ています…。
キーボードだけで動くか
マウスやタッチ前提で作ってると忘れがちなんですが、たまにキーボードだけで自分のサイトを操作してみると、「あ、ここフォーカス飛ばないじゃん」みたいな抜けが普通に見つかります。フォーカスの位置が目で見て分かるようにしておくのも地味ですが大事です。
画像のalt属性やスクリーンリーダー向けのaria-labelも、後回しにするとほぼ100%やり忘れます。実装の最初の段階で書いておかないと、あとでまとめて直そうとして結構大変です…。
実体験です。
スクリーンリーダーで自分のサイトを開いてみる
実際にMacのVoiceOverやスマホの読み上げ機能で自分のサイトを一度巡回してみると、目で見てるだけでは気づけない問題がぼろぼろ出てきます。ボタンなのに「クリック可能な要素」としか読み上げられなかったり、装飾用の画像にまで律儀にファイル名が読み上げられたり。装飾目的の画像にはalt=""を明示して読み上げをスキップさせる、というのも実際に自分の耳で聞いて初めて必要性を実感した対応でした。
タブキーだけでページ内を移動したときに、フォーカスがどこにあるか見た目で分からない実装も地味に多い落とし穴です。ブラウザ標準のフォーカスリングをoutline: noneで消すデザインをよく見かけますが、消すなら代わりの見た目をちゃんと用意しないと、キーボード操作の人が迷子になります。
装飾を削ぎ落として「テキストだけ」で見てみる
スクリーンリーダー以外にも、画像やデザイン装飾をすべてオフにして「文字情報の骨組みだけ」でページを眺めてみるのも、情報が適切な順番で伝わるかをチェックするのにとても役立ちます。手軽に試せる方法がいくつかあります。
- テキストブラウザを使う：コマンドラインで動くLynxなどの専用ブラウザを使うと、画像やCSS装飾を一切読まず、純粋なテキストの並び順だけでページを確認できます。HTMLの構造（見出しやリストなど）が自然に並んでいるかが一目瞭然になります。
- ブラウザの拡張機能を使う：Google ChromeならText Modeなどの拡張機能を入れると、ワンクリックでページをテキストのみの表示に切り替えられます。普段使っているブラウザのままパッと確認したいときに手軽です。
- ブラウザの設定で画像をオフにする：拡張機能を入れなくても、Chromeの設定メニュー（設定 ＞ プライバシーとセキュリティ ＞ サイトの設定 ＞ 画像）から「サイトに画像表示を許可しない」を選ぶだけで、実質的にテキスト中心の表示を再現できます。画像が表示されない環境で、代わりに
altテキストが意味の通る形で表示されているかをチェックするのにも便利です。
画像や色に頼りすぎていないか、テキストだけでも内容がしっかり伝わるか。こういった方法でたまに覗いてみると、HTMLのマークアップを丁寧に書く大切さを改めて実感します。
完璧を目指すというより、「明らかに困る人を減らす」ぐらいの気持ちで、できるところからやる、というのが今のところの自分のスタンスです。それでも多々忘れちゃうんですけどね…。