視覚障がいに関するウェブアクセシビリティの12の問題
Collection :
ウェブアクセシビリティが基本的人権であることは、今や当たり前のこととして認知されています。10億人以上の障がい者を含むより多くの人々にウェブサイトを公開するだけでなく、アクセシビリティの成功事例は、SEO、ユーザビリティ、モバイルフレンドリーなデザインなど、その他のビジネス上の目標にも合致しています。ウェブアクセシビリティの基準は、ウェブコンテンツアクセシビリティガイドライン（WCAG）によって管理されています。
米国疾病管理センターによると、視覚障がいは18歳以上の成人の障がいトップ10のひとつであり、子供たちの間でも最も一般的な障がいのひとつとなっています。視覚障がいには、完全失明、色覚異常、屈折異常（近視、遠視、乱視）、緑内障、白内障、黄斑変性症などの加齢性疾患、弱視や斜視（目が外側や内側に向く）などの障がいなど、さまざまな障がいや病気が含まれます。
視覚障がい者のインターネットへのアクセス方法
ウェブは非常に視覚的なメディアであるため、視覚障がいによってアクセシビリティに大きな問題が生じる可能性があります。視覚障がい者は、スクリーンリーダー、画面拡大ツール、リフレッシュ可能な点字ディスプレイなどの支援技術を使用してインターネットにアクセスしています。
スクリーンリーダーは、OS と連動してアイコン、メニュー、ファイル、フォルダ、ダイアログボックスに関する情報を提供するソフトウェアの一種。スクリーンリーダーはマウスに依存しないため、通常、さまざまなキーボードコマンドに応答して動作します。たとえば、コマンドでウェブページをナビゲートしたり、文書の一部を読んだり、選択したりすることができます。現在では、すべての OS にスクリーンリーダーが搭載されています。また、人気のある JAWS（Job Access With Speech）ソフトウェアなど、市販のスクリーンリーダーもあります。スクリーンリーダーは、ページ上の目に見えるテキストの全部または一部を読み上げたり、目の見えるユーザーには見えない特定のテキスト（alt テキストなど）を読み上げたり、文書内のテキスト書式を検出したりすることができます。しかし、これらすべてのことを行うには、ウェブサイトがアクセシビリティに対応したコーディングになっていなければなりません。
リフレッシュ可能な点字ディスプレイは、視覚障がいのあるユーザーが、点字の組み合わせで平らな表面の穴に通したピンを上げ下げすることによって、スクリーン上に出力されたテキストを読むことを可能にします。点字ディスプレイは、ウェブページからコンテンツ情報を収集し、点字に変換して表示するスクリーンリーダーソフトウェアとともに使用されます。
キーボード操作可能で、支援技術をサポートするようにコーディングされていないウェブサイトに遭遇すると、視覚障がいを持つユーザーはウェブアクセシビリティの問題に直面することになります。スクリーンリーダー用のソフトウェアが適切に動作するためには、コードが十分に構造化されていることが非常に重要です。たとえば、スクリーンリーダーがページ上の情報を表すテーブルを検出すると、テーブルを水平方向や垂直方向に移動できるようにするコマンドなどがトリガーされる、などです。
視覚障がいを持つユーザーに共通する12のアクセシビリティ問題
ここでは、支援技術に対応するよう作られていない、またはコード化されていないウェブを使用する際に、視覚障がい者が遭遇する最も一般的なデジタル問題を紹介します。
1. HTML レイアウト
スクリーンリーダーによっては、ページの CSS を検出して読み取ることができるものもありますが、スタイル設定されていない HTML に依存するものもあります。スクリーンリーダーが最初にページの何を読むべきかを決定するときに、このことが問題になることがあります。この問題を避けるために、すべての HTML は左から右へ、上から下へ読んだときに意味が通るように、印刷された文書と同じ方法で構造化するべきでしょう。
2. テキストのコントラスト
アクセシビリティに関する最も一般的な懸念事項の一つは、テキストと背景の色のコントラストが低いことです。色のコントラストは、ページ上のコンテンツをユーザーが認識するのに役立つため、ウェブアクセシビリティにとって不可欠な要素です。WCAG 2によると、コントラストとは2つの色の明度の差のこと。高齢者や色覚異常などを持つ方は、コントラスト比の低い特定の色のテキストと背景を区別できないことがあるため、彼らにとってはよくあるアクセシビリティの問題です。
2021年2月、WebAIM が100万サイトのホームページのアクセシビリティ評価を実施したところ、86.4％のホームページでテキストのコントラストが低いことが判明。WCAG 2.1レベル AA によると、理想的な色のコントラスト比は、通常のテキストで7:1、大きなテキストで4.5:1とされています。
低いコントラストは、ウェブサイトのデザインやテーマをアクセシブルな色の組み合わせに合わせることで簡単に修正することができます。アクイアの Monsido のような無料のカラーコントラストチェッカーを使って、テキストと背景の間に十分なコントラストがあるかどうかをチェックしてみましょう。
3. 見出しの構造
視覚障がいのあるユーザーは、ウェブページ全体を読むことはほとんどありません。その代わり、ページをスキャンして、最も興味のある部分を探します。また、スクリーンリーダーを使って見出しをリストアップし、ウェブページをスキャンして適切な情報を探すこともできます。もし見出しが適切に（あるいはまったく）使われていなければ、そのユーザーはページ内で探しているものを見つけることができません。そのため、見出しは決して装飾的に使ってはならず、論理的かつ順番に配置する必要があります（H1、H2、H3など）。
4. キーボードアクセシビリティ
視覚障がいを持つ方にとって、マウスを使ってウェブサイトを操作することは困難であったり、不可能であったりする場合があります。そのため、キーボードコマンドやショートカットを使ってウェブサイトを移動するのです。ただしそのためには、適切な見出し構造を持ち、ハイパーリンク、リンク、フォーム、メディアコントロールなど、すべてのコンテンツや機能にキーボードでアクセスできるようにコーディングされた、構造化されたコンテンツでなければなりません。
キーボードユーザーは Tab キーを使ってページを移動しますが、その際、ページ内のどの要素にいるのかを示す、キーボードのフォーカスインジケータを目に見える形で表示する必要があります。これらのインジケータは、フォーカスされた要素の周囲に境界線またはハイライトとして表示され、弱視者がウェブページのどこにいるかを判断するのに役立ちます。フォーカスインジケータは論理的な読み取り順序に従う必要があるため、ウェブサイトがキーボードナビゲーションのためにコーディングされていることが重要です。
5. ナビゲーションリンク
ナビゲーションリンクもまた、アクセシビリティの問題点の一つです。うまくコーディングされていないと、スクリーンリーダーはナビゲーションを検出できません。また、ページにナビゲーションがあっても、スクリーンリーダーはそれをスキップすることができません。つまり、視覚障がいのあるユーザーは、新しいページを読み込むたびにナビゲーションを聞かなければならないのです。これを解決するには、ナビゲーションメニューに ARIA の役割を正確に割り当てて、その目的を示し、ナビゲートできるようにすること。また、スクリーンリーダーのユーザーがナビゲーションをスキップできるように、「メインコンテンツへスキップ」リンクが利用できるようにしておきましょう。
6. HTML 以外のコンテンツ
アクセシビリティの問題は、ウェブサイトでホストされている文書などのコンテンツにも及びます。PDF やパワーポイントのプレゼンテーション、ワード文書など、HTML 以外のコンテンツも可能な限りアクセシブルにする必要があります。こうした文書のいくつかをアクセシブルにする方法はいくつかあります。PDF にはスクリーンリーダーによるナビゲーションのためのタグを付けることができますし、パワーポイントやワードには、アクセシブルな文書を作成するためのアクセシビリティチェッカー機能があります。
7. Javascript レンダリング
JavaScript は、以前はスクリーンリーダーがアクセスできないものでしたが、今ではほとんどのスクリーンリーダーがアクセスできるようになっています。しかし、JavaScript を無効にしている人や、JavaScript がオフになっている環境（会社の職場など）にいる人もいます。また、JavaScript を扱えない古いバージョンのスクリーンリーダーを使っている場合もあります。このような理由から、あなたのウェブサイトが JavaScript なしでも動作するか確認しましょう。
8. 見つからない（または不正確な）alt テキスト
アクセシブルなウェブサイトを作るということは、画像を使わないということではありません。ただ、画像の alt タグの付け方について、ウェブサイトの編集者が注意する必要があるということです。画像の alt テキストには、その画像が伝える情報を明確に記述しましょう。スクリーンリーダーのユーザーは、コンテンツを素早くナビゲートする傾向があるため、説明は短く簡潔にします。また、スクリーンリーダーは、画像のキャプション（キャプションがある場合）を読む前に、alt テキストを最初に読みます。キャプションと alt テキストが同じであれば、ユーザーは同じ情報を二回聞くことになってしまうのです。これは技術的には準拠していても、ユーザー体験としては素晴らしいものではありません。
装飾的な画像の場合は、HTML コードに空（alt=「 」）または空白（alt=「 」）の alt テキストを含めます。これは、スクリーンリーダーに画像をスキップするように指示するものです。
alt テキストがないと、SEO を低下させるなど、他の点でもウェブサイトに悪影響を与えることがあるので注意しましょう。画像に alt テキストがないか、空/null 属性がない場合、スクリーンリーダーは何の説明もなしに画像を表示することになり、ユーザーを非常に混乱させる可能性があります。
9. リンクテキストの欠落
リンクはウェブの閲覧に欠かせないものですが、アクセシビリティ上の問題が付きまといます。視覚障がい者にとってリンクテキストの欠落はよくある壁で、リンクの説明や提示に使用されるテキストがない場合に発生します。たとえば、ボタン、ロゴ、アイコンなどの機能的な画像がリンクとして使用されている場合です。スクリーンリーダーは、これらの画像がリンクとして機能していることを読み取ることができないのです。
このような事態を避けるために、画像の alt テキストは単なる画像の説明ではなく、画像の目的とアクションを伝える必要があります。例えば、ホームページへの誘導を目的としたロゴの画像の場合、alt テキストは単なる「*ウェブサイト名*ロゴ」ではなく、「*ウェブサイト名*.com ホームページ」とすべきでしょう。
10. 曖昧なリンクテキスト
「ここをクリック」または「続きを見る」のような曖昧なリンクテキスト、あるいはリンクそのものを表示することは、ビジュアルコンテンツが文脈を説明できる目の見えるユーザーには意味があるかもしれませんが、スクリーンリーダーのユーザーにとっては、非常に悪いユーザー体験となってしまいます。このような曖昧なリンクの前にテキストがあっても、ユーザーに十分な情報を伝えることはできません。スクリーンリーダーユーザーは、リンクからリンクへ移動し、その間のテキストをスキップする機能を持っているため、リンクが何なのか、どこに移動するのかというコンテキストが提供されません。これは、リンクが何を意味しているのか、ある程度詳しく説明する情報テキストを使用することで簡単に解決することができます。
11. 構造化されていないフォーム
ほとんどのウェブサイトには、ユーザーが入力するためのフォームフィールドがあり（検索ボックスもそのひとつ）、このようなフォームフィールドは、視覚障がい者にとってアクセシビリティ上の問題となることがよくあります。最大の問題の一つは、スクリーンリーダーがそのフォームに関する情報を伝えるために必要な、正しいラベルや指示がないことです。各フィールドには、スクリーンリーダーが読み取れるようにラベルが必要であり、それによってユーザーは何を記入すればよいかがわかります。また、ユーザーがフォームに記入した後、何を選択すればよいかがわかるようにボタンにも明確なテキストが必要です。もし CAPTCHA を使用しているのであれば、視覚に障がいのあるユーザーのために、音声やその他のアクセシブルな代替手段を用意する必要があります。
また、フォームの入力に誤りがあった場合のことも考えてみましょう。一般的に、ウェブサイトは不正確なフィールドを赤色で表示してエラーを通知します。これは、赤いフィールドを見ることができない人にとっては、明らかにアクセシビリティの問題になるでしょう。代わりに、フォームのどの部分がエラーを返したのかを説明するテキストを読み上げるようにする必要があります。
12. フォームの期限切れとタイムアウト
多くのフォームには、一定の時間が経過するとページやフォームの有効期限が切れるセキュリティ機能があります。しかし、支援技術を使ってフォームに入力する人にとっては、処理に時間がかかるかもしれませんし、時間制限があることを知らないかもしれません。フォームのタイムアウトをなくすか、フォームに時間制限があるという十分な情報を与えるか、支援技術の利用者が制限時間を延長して処理を終了できるような機能を設けましょう。
このようなアクセシビリティの問題はよくあることではありますが、一度認識してしまえば、比較的簡単に修正し回避することができます。ウェブアクセシビリティの基本を学び、アクイアの Monsido のようなさまざまなウェブアクセシビリティ監査ソフトウェアを利用することで、見落としていた問題を見つけることができ、ユーザーが問題に気づく前に対処することができます。
ウェブアクセシビリティに対する総合的なソリューションをお考えなら、アクイアにお任せください。まずは無料のウェブアクセシビリティ診断で、どのようにアクセシブルなサイトを実現できるかをご覧ください。
Digital Marketing Manager
