アクセシビリティを最初の一歩から始める

アクセシビリティと聞くと、「大企業のサイトが専門家を雇ってやること」という印象を持つかもしれません。しかし実際には、その多くは画面の見やすさ・操作のしやすさの基本であり、個人開発の小さなプロダクトでこそ、最初から組み込むほうが簡単です。

この記事では、W3CのWebアクセシビリティ入門とEasy Checks（最初の確認リスト）を土台に、個人開発者が今日から確認できる項目に絞って整理します。

なぜ個人開発でやるのか

W3Cのアクセシビリティ入門では、アクセシビリティは障害のある人が使えることを中心に、高齢の人、小さな画面の人、明るい屋外にいる人、一時的にマウスを使えない人など、幅広い状況の利用者に恩恵があると説明されています。

個人開発の観点で言い換えると、次のようになります。

完璧を目指す必要はありません。以下の基本を、新しい画面を作るたびに守るだけで大きな差になります。

W3CのEasy Checksから、個人開発の画面でまず効く項目を選びました。

ページタイトル：ページごとに内容が分かるタイトルを付ける。ブラウザのタブと検索結果に表示される、最初の案内です
画像の代替テキスト：意味のある画像にはaltで内容を書く。飾りの画像はaltを空にして無視できるようにする
見出しの構造：見た目で文字を大きくするのではなく、見出し要素を階層どおりに使う。読み上げ環境では見出しがページの目次になります
コントラスト：文字と背景の差を確保する（配色と文字の最小ルールで画面を整えるで決めた4.5対1以上のルールがそのまま使えます）
キーボードだけで操作：マウスを使わず、Tabキーで主要な一周を操作してみる。たどり着けない・今どこにいるか見えないボタンは、フォーカスの表示や実装を直す
フォームのラベル：入力欄には必ずラベルを付け、何を入れる欄かを placeholder だけに頼らない。エラーの伝え方は入力エラーを利用者が直せる文章にするで整えられます

このうち5番のキーボード確認は、道具もいらず数分で終わるのに、発見が最も多い確認です。まずここから始めてください。

確認とあわせて、作る段階の習慣で防げる問題があります。

ボタンには button 要素、リンクには a 要素と、役割どおりのHTML要素を使う。div のクリックで代用すると、キーボード操作もフォーカスも自前で作り直すことになります
色だけで意味を伝えない。「赤が必須項目」ではなく、文字でも示す
押せる領域は指で押せる大きさにする（スマホ対応をレスポンシブの基本から始めるのターゲットサイズと同じ基準です）
自動で動き続けるもの（カルーセルや点滅）を安易に足さない。必要なら止める手段を付ける

役割どおりの要素を使うことは、実装量を減らすことでもあります。アクセシビリティ対応の多くは「余計なことをしない」ことで達成できます。

アクセシビリティ確認は、専用の工程にするより、既存の確認に混ぜるほうが続きます。

自動チェックで見つかるのは問題の一部ですが、個人開発の最初の一歩としては十分な出発点です。