近年Webサイト制作時に求められる『Webアクセシビリティ』。
正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。
自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。
一緒にWebアクセシビリティについて学んでいきましょう。
目次
そもそもWebアクセシビリティってなに？
『Accessibility』はweb関連で日本語で翻訳したときに「アクセス可能性」「アクセスのしやすさ」などの意味があります。Webアクセシビリティ対応は高齢者やハンディキャップのある方などに向けた部分も大きいですが、ネットに接続する条件は人それぞれなため、例えばマウスが使えない・ネットワーク環境が遅いなど、様々な状況に置かれている人を想定する必要もあります。
また、Webアクセシビリティは多くの国や地域で法的に義務付けられていたりします。
例えば、アメリカ合衆国では、公共機関や民間企業はWebサイトをアクセシビリティ対応する必要があります。
日本では法的な義務まではありません。
ただ、2024年4月1日の『障害者差別解消法』の改正により、以前よりも対応が強く求められるようになりました。
そのため、例えば自治体のサイトなど色々な方が訪れる可能性のあるサイトは対応しておくのが無難です。
また、Webユーザビリティとも混同されがちですが、ものすごく簡単に言うと
- Webアクセシビリティは様々な人が根本的に情報自体にアクセスできるようにすること
- Webユーザビリティはサイトの特定のターゲット層が目標を達成できて、満足度が高くなるようにすること となります。
それでは基本的な対応内容について簡単に紹介していきます。
基本的な対応内容
色のコントラストをはっきりさせよう
基本ではありますが、色のコントラストははっきりさせましょう。デザインの作成時は以下のようなサイトでチェックの必要があります。
自分ではコントラストをはっきりさせていると思っても、チェックをしてみると意外とクリアできていなかったりします。
見栄えの問題などもありますが、Webアクセシビリティ対応が必要な場合はこのあたりをきちんとクリアしていきましょう。
文字サイズを変更できるようにしよう
PC表示の時はユーザーが見やすい文字サイズで閲覧できるように、サイト上に文字サイズを変更できるボタンを設置しましょう。個人的にここ最近参考になった方法はこちら
cookieまではいかなくてもセッションで保存できる方法なので使い勝手がいいなと思います。
文字を大きくした際に思ったよりも崩れた…ということもあるので、コーディングの際には気を付けて作業を進めていきましょう。
できるだけテキストベースを心がける
先ほどの文字サイズ変更に関連して、例えば普段だったら画像で作りそうな箇所も、対応できる範囲であればHTMLのテキストベースで作成しましょう。音声読み上げにも対応しやすくなります。
さすがにテキストの装飾を凝っているものは難しいですが、簡易な画像+テキスト程度は対応してみましょう。
画像にはaltを心がけよう
こちらもHTMLの基本にはなりますが、画像にはaltを心がけましょう。音声読み上げで大事な要素となります。
altの内容についてはタイトルや、画像の詳細を表すテキストを入れていきましょう。
iframeにtitleを付けよう
画像と違って忘れがちですが、iframeにもtitleをtつけるようにしましょう。例えばyoutubeの動画であれば動画名、Googleマップであればマップのどの位置のマップか、などを記載しましょう。
なるべくリンクには下線を付けよう
リンク部分にはなるべく下線を付けるようにしましょう。クリックできるかどうか、ユーザーにすぐにわかってもらえるようにするためです。
もしデザイン的に厳しい場合、テキストの色を変えたり、アイコンを付けたり工夫をしましょう。
キーボードのみで操作できるようにしよう
キーボードのTabキーを押下した時に、リンクやinputなどのフォーム入力要素にフォーカスがあたるようにしましょう。Enterキーを押下するとトリガーになって、リンク先に飛ぶことができるなどの確認も必要です。
リセット系のcssでtab操作の際のアウトラインの表示がなくなっていることもあるので、念のため確認しておきましょう。
まだまだ細かい部分はありますが、まずは基本となりそうなアクセシビリティ対応をご紹介しました。
コーディング時に心がけていればクリアできる部分も多いので、念頭に置いて作業を進めると効率的です。
