Webアクセシビリティの対応を行うにあたって、よくある問題点の例をご説明いたします。
1. 代替テキストがない、もしくはテキストが重複している。
Webアクセシビリティ対応の中で一番多い問題です。
視覚障害者の方は、音声読み上げソフトを利用してホームページにある画像の内容を理解しています。そのため、画像には代替テキストを付与することが求められています。ただし、画像の代替テキストとは別に画像を説明するために代替テキストと同一のテキストを記載すると２度同じ内容が読上げられ、視覚障害者の方は混乱してしまいます。
そのため、画像の代替テキスト、もしくは画像を説明するテキストのどちらか１つだけにする必要があります。
2. 文字色と背景色のコントラスト比の不足
文字色と背景色のコントラスト比が不足すると、白内障や高齢の方が視覚認知能力の低下により、文字がぼやけるなど文字を読み取ることが出来ない、あるいは困難になる可能性があります。その問題を防ぐために、コントラスト比は4.5:1以上にする必要があります。
3. メニューをキーボード操作で開けない。
全盲の方や手指に麻痺のある方は、マウスを使わずキーボードだけで操作します。
しかしながら、Webアクセシビリティの対応ができていないWebページでは、メニューをマウスで選択できてもキーボードのTabキーで選択できず開くことができないものがあり、全盲の方や手指に麻痺のある方は困ってしまいます。この問題を防ぐためには、ホームページはキーボードで操作できるように作成されることが必要です。
4. 操作している箇所を見失う可能性がある
弱視や麻痺などによりマウス操作が難しくキーボードだけで操作される方の場合、キーボードのTabキーを押して、順次移動する枠線(フォーカス)を目で追い、クリックしたい箇所に来た時にエンターキーを押します。
tabキーでの移動は、ページの上から下へ、左から右への移動が基本ですので、移動を予測し視線を移動しますが、実際には予測できない場所に移動してしまうページがございます。そのようなページでは、障害をお持ちの方が枠線(フォーカス)を見失う恐れがあります。
この問題を防ぐためには、予測される順序で枠線（フォーカス）が移動するように修正する必要があります。
5. 広告などのスライダーの内容をしっかりと読むことができない
トップページにスライダーを設置して広告等が順番に次々と表示が変わっていくホームページがあります。
そのようなホームページでは、弱視や知的障害のある方は、弱視や知的障害のある方において、このスライダーを読み終える前に次のスライドに移動してしまう恐れがあります。
JIS X 8341-3:2016では、動きのあるコンテンツに対し、次のような要件を求めています。
- スライドは5秒以内に停止させる
- 一時停止、停止、停止個所からの再生などの制御機能を設ける
そのため、停止ボタン等を置いて、止めるようにすることが求められます。
6. 表示が視覚に障害のある方には伝わらない
全盲の方は音声読み上げソフトを用いて文章を音声に変えてウェブサイトを閲覧しています。
しかし、チャットポットなど特別な技術を用いて表示しているホームページでは、音声読み上げソフトで音声にする文章を見つけることができませんことがあります。そのため、何も読上げられず全盲の方は分からなくなります。
ウェブサイトの構成を変えるなどの修正を行って読み上げられるようにすることが必要です。
7. 新しく開いたブラウザから元に戻れない
全盲の方が音声読み上げソフトを利用している場合、別ウィンドウが開かれる場合は、別ウィンドウが開くことを読み上げて通知する必要があります。しかしながら、別ウィンドウが開くことを読上げないホームページでは、全盲の方は元のウィンドウに戻る事が難しくなります。
別ウィンドウが開く際は、「別ウィンドウで開きます」と通知するように修正します。
8. 見出しがないため、目的の箇所になかなか到達できない
雑誌に目次があるように、ウェブページにも似たような仕掛けがあり、これを見出しといいます。
見出しがついていると、音声読み上げソフトの利用者は、ページ全体の構成を把握するのも容易で、また移動も楽になります。しかしながら、ウェブアクセシビリティ対応がされていないウェブページでは、見出しだと思われる箇所に見出しの設定がないため、ウェブサイト利用者は探したい目的の箇所に移動するのに苦労することになります。
そのため、ウェブページを作成する時は見出しに配慮する必要があります。
9. 外国の方への配慮が欠けている
音声読み上げソフトがウェブページを読み上げるとき、日本語環境でお使いの場合は日本語が基準になります。例えば、その中に英文があると日本語読みになってしまい、おかしな読みになります。
日本語以外の言語の読みにするためには、言語を指定するhtml属性を追加する必要があります。