ウェブアクセシビリティを確保するために、押さえるべき10個の原則
「ウェブアクセシビリティ」はやさしさのかたまり
ウェブアクセシビリティとは、簡単に言うと「より多くの利用者が、より多くの場面で、より多くの使い方を選べるようにすること」です。すなわち、どんな利用者にとっても使いやすいサイトにする「やさしさ」のかたまりなのです。加齢などによって視力・聴力・操作力が低下している利用者、たまたまマウスの調子が悪い利用者、今日に限ってメガネを忘れてしまった利用者、などウェブサイト利用者の環境は様々です。そして、携帯・スマートフォン・タブレット・ゲーム機など閲覧デバイスの種類も多くなってきています。文字の大きさに配慮をしたり、マウスを使わなくてもキーボードだけで操作できるようにしたり、スクリーンリーダー（音声読み上げソフト）に対応するなど、様々な環境の利用者が情報を入手できるようにしてあげる、という「優しさ・配慮」がウェブアクセシビリティの根本です。
ではウェブサイトをアクセシブルにするには具体的にどうしたらよいのでしょうか。なんだか難しそう・・・特別なことするのでしょ？と躊躇してしまう方もいるかもしれません。しかし、アクセシビリティを確保するためにはウェブサイトの基本とも言えるたった10個の基本原則を押さえるだけで実現ができるのです。
アクセシビリティを実現するための基本10原則
1：バリデートエラーをなくす
開始タグ・終了タグが正しく記述されている、重複したID属性がないなど、バリデートエラーがないことを確認しましょう。
ツールを使うと簡単にチェックできます。
バリデートエラーがないことでスクリーンリーダー（音声読み上げソフト）が正しく解釈できるようになり、Googleのページランククローラーも正しくソースコードを解釈できるようになります。SEOの観点からも重要になってきます。
2：見出し要素（h1～h6）やリスト要素（ul,ol,dl）を意味に基づいて正しくマークアップする
コンテンツの意味や構造を、プログラム（障がい者支援ツール・Googleの検索クローラーなど）が解釈しやすくなります。
見出しにはh1～h6の要素を使って適切にマークアップしましょう。主題や目的を説明している内容であることが重要です。
文章が箇条書きであれば、プログラムも箇条書きであることを理解できるようにul、ol、dl要素を使って適切にマークアップしましょう。
3：テーブル要素は見出しをth要素にして正しくマークアップする
データテーブルを使用する際、表題はcaption要素、見出しはth要素など、正しくtable要素を用いるようにしましょう。スクリーンリーダー（音声読み上げソフト）が文書構造を解釈できるようになります。
また、レイアウトテーブル（見た目を整えるだけのテーブル）を用いる際は、データテーブルの要素・属性を使用すると、スクリーンリーダー（音声読み上げソフト）が誤った解釈してしまう恐れがあるため、table要素、tr要素、td要素だけでマークアップをして、caption要素、summary属性を使用しないようにしましょう。
4：ページタイトルは、ページの内容がわかるように記述
ページタイトル(head内のtitle要素)は前後の文脈がなくても、ページタイトルだけで意味が分かるように主題・目的を説明した内容にしましょう。利用者がいま、どのページにいるのか判断することにも役立ちます。またSEOの視点から考えると、検索してほしいキーワードを含めるとよりよいでしょう。
利用者がコンテンツを見つけやすく、現在位置を確認しやすくなります。
5：画像には代替テキストを提供
画像(img要素)にはalt属性で代替テキストを提供してあげましょう。盲目の利用者もスクリーンリーダー（音声読み上げソフト）で代替テキストの情報を入手できるようになります。
地図画像などalt属性の説明が難しい場合、画像の近くにテキストの説明を提供しましょう。また、装飾だけを目的にした画像はalt属性を空にして記述しないようにしましょう。
6：リンクテキストは、リンク先が分かるように記述
可能な限り、リンクテキストだけでリンク先が分かるように記述しましょう。利用者がリンク先を見ただけで何があるか判断することができます。また、SEOの観点からもリンクテキストだけでリンク先が分かるようにするとGoogleの検索クローラーがリンク先について解釈しやすくなります。
7：色のコントラストを確保して文字を見やすくする
色を認識しづらい利用者は、コントラストを確保できていないと文字が読めない場合があります。文字色と背景色のコントラストを確保することでより多くの利用者に対して文字を読みやすくすることができます。 コントラスト比が確保できているかどうかツールを使ってチェックすることができます。
8：label要素を用いて、フォームとラベルを関連づける
label要素を用いて、フォームとラベルを関連付けましょう。関連性がわかることでスクリーンリーダー（音声読み上げソフト）が解釈できるようになり、盲目の利用者はフォーム入力がしやすくなります。必須項目であること、入力例や入力方法も合わせて記述して、入力エラー時はダイアログで通知してあげるとより親切でしょう。
9：キーボードだけで操作できるようにする
マウスが使えずキーボードのみを使用して操作している利用者もいます。そのため、キーボードだけでマウスと同じように操作できるようにする必要があります。
なんだか難しいことをするように思うかもしれませんが、a要素、input要素、select要素、button要素などHTMLの標準要素を使用していれば問題ありません。イベントハンドラを使用する際はマウス向けとキーボード向けの両方を併用するようにしましょう。
10：予測不可能な動作を引き起こさない
ウェブサイトを開いたとたん、突然動画が再生される、突然ポップアップが開くなど、事前に予測出来ないような動作を引き起こさないようにしましょう。盲目の利用者は動画や音の止め方がわからず、突然予測できない動作が起きると混乱をする可能性があります。動画は利用者がクリックして初めて再生されること、または事前に説明テキストを記述して、状況が変化することを予測できるようにしましょう。
「なんだこんなことか」と思った方もいるかもしれません。ウェブサイトをアクセシブルにするための技術はWeb制作における基本中の基本となることがほとんどです。10の基本原則を実践することで最低限のアクセシビリティを確保できるでしょう。すぐに実践できることばかりなので是非試してみてください。
