ウェブアクセシビリティとは?
ウェブアクセシビリティは、ウェブにおけるアクセシビリティのことです。
利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、到達度を意味します。
基準となる規格は、WCAG 2.0(国内規格であるJIS X8341-3:2016との一致規格)で、
官公庁など公的機関のWebサイトにおいては、「適合レベルAA」への準拠が求められています。
3段階レベルで分けられています。
この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。
レベルAA:諸外国でも公的機関に求められるレベル
この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。
レベルAAA:発展的なレベル
この基準を満たすと最も閲覧しやすいWebサイトと言えます。
ウェブアクセシビリティの確保
大きく分けて4つあります。
○キーボードだけで操作できること。
○一部の色が区別できなくても得られる情報が欠けないこと。
○音声コンテンツや動画コンテンツで、音声が聞こえなくても話している内容が分かること。
上記の項目を達成することであらゆる人々がウェブサイトにアクセスでき、平等に情報を持つことが可能になります。
また「人だけでなく検索エンジンのクローラーなどのプログラムがウェブサイトの内容を理解しやすくなる」というメリットも生まれます。
確保するためのデザイン
テキストサイズ、コントラスト比
視認性を高める。小さいテキストと大きいテキストで必要なコントラスト比が異なってきます。
基準では21px以下が小さいテキストに含まれます。
小さいテキスト → 4.5 : 1
大きなテキスト → 3 : 1
レベルAAA:
小さいテキスト → 7 : 1
大きなテキスト → 4.5 : 1
単語間でスペースや改行を使用しない
音声読み上げなどを使用した際に本来の意味とは異なった内容で伝わってしまうため
キーボードのみでの操作
マウスやパッドを使用できない場合、キーボードでの移動の場合はどこに位置しているか、フォーカスしている部分をわかりやすくする
画像へalt属性をつける
画像を直接見なくてもそこへ何が表示されているかわかるように設定
リンクの視認性
テキスト同様に視認性を高める、またリンクテキストだけで飛び先のページ内容がわかるようにする
ここでもコントラスト比を意識して作成するよう心がけると良いでしょう
強調テキストの色だけ変更
色だけの情報で区別せず、背景へ敷くなど、全て白黒でも他と差がついていることがわかるようにする
映像コンテンツには字幕や音声ガイドなどをつける
映像を使用している場合、どんな人にも等しく情報が伝わるよう、補足しておくことが必要です。
民間事業者の合理的配慮が義務化されます
令和3年(2021年)に、障害者差別解消法(障害を理由とする差別の解消の推進に関する法律)が改正され、国や地方公共団体などに義務付けられている合理的配慮の提供が、民間の事業者も義務化されることになり、令和6年(2024年)4月1日に施行されます。
障害のある人への合理的配慮とは、社会生活の中にあるバリア(障壁)を取り除くために何らかの対応を必要としている場合には、負担が重すぎない範囲で対応することです。例えば、日常生活であれば「駅員が車いすの乗客の手助けをする」「窓口で筆談、手話などを用いて意思疎通する」といったことです。また、その合理的配慮を的確に行うため、環境の整備が努力義務となっており、ウェブサイトの場合ではJIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。
https://www.gov-online.go.jp/useful/article/202310/2.html
今後のアクセシビリティ
コントラスト比とボタンについての面白い記事を見つけました
https://note.com/k_ym/n/n369a44a9480c
【WCAG21】
https://waic.jp/translations/WCAG21/Understanding/non-text-contrast.html
ざっと説明すると、白はコントラスト比数値的には0だが、実際は「色相や彩度のない純粋な輝度であり、コントラストの最も強い形」という見方ができる、「光の色として人間が知覚できる」ともされていて実際に様々なロービジョン(弱視)ユーザーに対してテストを行なっているため、かなり正確な情報が取れているという記事でした。
今後より良いユーザビリティのため、コントラスト比の判断の仕方が変わっていくかもしれませんね。
以上、WEBアクセシビリティの基本編でした。