最初からアクセシブルに：全ページで行う5つのチェック
コントラスト、フォーカス、見出し、代替テキスト、タップ領域。そしてそれが誰にとっても役立つ理由。
アクセシブルなWebサイトは、弱視、色覚特性、運動機能の障がいがある人や、スクリーンリーダーを使う人にも使えます。そしてほかのすべての人にとっても使いやすくなります：強い日差しの下にいる人、混んだ電車で片手で操作する人。公開前にすべてのページで行う5つのチェックをご紹介します。
ウェブアクセシビリティは長い技術標準のように聞こえますし、正式なものは実際にそうです。けれども実際のサイトで見つかる問題の多くは同じ5つに集約され、特別なツールなしで、誰でも半日で確認できます。
1. コントラスト
本文のテキストは背景に対して少なくとも4.5:1、大きな文字は少なくとも3:1のコントラスト比が必要です。白地に薄いグレーの文字は基準を満たさないことが多く、屋外では読みにくくなります。
確認するには、文字色と背景色を WebAIM のコントラストチェッカーに入力します。ボタン、フォームのプレースホルダー、写真の上の文字も確認しましょう。不合格になりやすいのはそこです。
2. フォーカス
クリックできるものはすべてキーボードでも操作でき、フォーカスされた要素にははっきり見える枠線が必要です。見た目のために枠線を消すと、キーボード利用者は迷ってしまいます。
3. 見出し
1ページに大見出しはひとつ、そのほかの見出しは順番どおりに。スクリーンリーダーの利用者は、目の見える訪問者が目で流し読みするように、見出しから見出しへ移動してページを把握します。
4. 代替テキスト
意味のある画像には、何が写っているかの短い説明を付けます。装飾的な画像は説明を空にし、スクリーンリーダーに読み飛ばさせます。
良い代替テキストは、そのページにとって写真の何が大切かを説明します。商品写真なら商品とその色、チーム写真なら写っている人です。「〜の画像」で始める必要はありません。スクリーンリーダーが画像であることをすでに読み上げます。
5. タップ領域
ボタンやリンクは、親指でタップできるだけの大きさと間隔が必要です。快適なサイズは約44×44ピクセルです。
アクセシビリティは追加機能ではありません。サイトが本来あるべき姿です。
5つのチェックの先にあるウェブアクセシビリティ
5つのチェックで、よくある問題はほぼ見つかります。それが整ったら、加えたい項目がいくつかあります：
- フォーム：プレースホルダーだけでなく、すべての欄に見えるラベルがあること。エラーは何が起きたか、どう直すかを伝えること。
- リンク：リンクの文言で行き先がわかること。「料金を見る」は単独でも伝わりますが、「こちらをクリック」は伝わりません。
- ズーム：文字を200%に拡大しても、内容が切れずにページが使えること。
- 動き：アニメーションは訪問者の端末の「視差効果を減らす」設定に従い、点滅するものは置かないこと。
- 動画：話している内容に字幕を付け、音を消しても内容がわかるようにすること。
正式な基準は Web Content Accessibility Guidelines（WCAG）2.2 です。企業サイトでは一般にレベル AA を目指します。上の5つの次には、W3C の簡易チェックがおすすめです。
ビジネスにとって良い理由
アクセシブルなサイトは、たいてい誰にとっても使いやすく、目的を果たして帰る人が増えます。わかりやすい見出し、行き先のわかるリンク、代替テキストなど、アクセシビリティの基本の多くは検索エンジンのベストプラクティスとも重なります。そして何より、玄関のドアが開くことを確かめるのと同じように、きちんと作ることの一部なのです。
よくある質問
インドネシアではウェブアクセシビリティは法律で義務付けられていますか？
インドネシアの法律は、情報へのアクセスを含め、障害のある人の権利を認めています。ただし民間のウェブサイトに対する具体的な技術要件は、一部の国ほど詳しくは定められていません。海外に販売するなら、その市場のルールを確認しましょう。いずれにしても、上のチェックは良い習慣です。
アクセシビリティのプラグインやオーバーレイで、すべて解決できますか？
いいえ。オーバーレイでは、デザインそのものにあるラベルの欠落、まずい構造、読めない色は直せません。アクセシビリティはデザインとコードに組み込む必要があります。
スクリーンリーダーではどうテストしますか？
どのスマホにも組み込まれています。iPhone なら VoiceOver、Android なら TalkBack です。オンにして目を閉じ、自社の連絡先を探してみてください。謙虚な気持ちになり、とても多くのことがわかります。
ウェブアクセシビリティは、私たちのウェブデザインサービスですべてのサイトをデザインし、作る工程の一部です。速度や書体とも関わります。スマホでサイトが遅く感じる理由と2つの言語のためのフォント選びもご覧ください。