ウェブアクセシビリティを向上させる15の方法

WHO の調査では、世界人口の推計16％が何らかの永久的な障害を抱えていると報告されています。また、運動を妨げる筋骨格系の損傷などの一時的な障害や、弱視などの加齢に伴う退行性の障害もあります。

インターネットを含む周囲の環境との関わり方は、障害により制限されることがあります。しかし、完全にアクセシブルなウェブサイトは、補助技術とともに障害のあるユーザーがインターネットに参加し、その恩恵を享受できるようにすることを可能にします。しかし、残念ながら多くのウェブサイトにはアクセシビリティの問題があり、障害者がコンテンツにアクセスすることができないというのが現状です。

ウェブサイトをアクセシブルにするための一歩を踏み出せば、競合他社よりも大きなアドバンテージを得ることができるでしょう。障害を持つ人々は、彼らにとって使いやすいウェブサイトの愛用者になる可能性が高く、このようなグループの間では、口コミマーケティングが重要な意味を持ちます。さらに、アクセシビリティを考慮した設計は、すべてのユーザーにとってより生産的なデジタル体験につながるイノベーションの刺激となることが多く、エンゲージメントの向上にもつながります。  

そこで、ウェブサイトのアクセシビリティを向上させるいくつかの理由と、そのための15の実践的なステップを見てみましょう。

ウェブアクセシビリティを改善する3つの意義

社会への影響

アクセシブルでないウェブサイトは、オンラインでできることを制限してしまいます。ウェブサイトをアクセシブルにすることは、社会的責任を果たすことであり、消費者の70%は、企業が社会問題に積極的に取り組むことを望んでいます。

経済的なチャンス

アクセシビリティの低いウェブサイトは、ビジネスに悪影響を及ぼす可能性があります。例えばイギリスのクリック・アウェイ・パウンド・レポートによると、90%以上の人がウェブサイトのアクセシビリティの問題について言わないにもかかわらず、障害を持つ個人の69%は使いにくいウェブサイトは離脱するという結果が出ています。

障害者の年間可処分所得が1兆2,000億ドルであることから、多くのお金が放置されていることになるのです。

コンプライアンス

ウェブサイトは、WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）、カリフォルニア州消費者プライバシー法、一般データ保護規則など、多くのアクセシビリティ規制の対象となる可能性があります。2024年4月、米国司法省（DOJ）は、米国障害者法（ADA）のタイトル II に基づき、州および地方政府が提供するウェブサイトおよびモバイルアプリケーションに WCAG 2.1 を満たすことを求める最終規定を発表しました。また、ADA は（まだ）企業が運営するウェブサイトには特に適用されませんが、これらの例が示すように、裁判所はウェブサイトのアクセシビリティに関する訴訟において以下の ADA の3つの要件を引用しています。

• 2017年6月、目の不自由な男性がアメリカのスーパーマーケットチェーン、ウィン・ディキシーを訴え、同チェーンが目の不自由なユーザーにとってアクセシブルなウェブサイトを作れなかったとして勝訴した。
• 2016年、アメリカの小売店であるターゲットは、商品画像に alt タグを含めなかったアクセシビリティの問題で、全米盲人連合に600万ドルの損害賠償を支払った。
• 2021年6月、判事はドミノ・ピザのウェブサイトが目の見えない原告にとってアクセスしにくいものであったため、ADA のタイトル III に違反したとの判決を下した。

これらはウェブアクセシビリティ問題に関わる法的ケースのほんの一部であり、デジタルアクセシビリティに関連するケースは2018年から2022年にかけて75％増加しています。

障害によって制限されるウェブサイトのやり取り

ウェブサイトのアクセシビリティを向上させる主な理由を説明したところで、特定の障害がウェブサイトとのインタラクションにどのような影響を与えるかを見てみましょう。

• 視覚障害： 弱視の人がウェブサイトのコンテンツを理解するには、支援読書技術が必要な場合があります。その他の視覚障害（色覚障害やコントラストの検出障害など）は、コンテンツを読んだり解釈したりする能力を妨げる可能性があります。
• 聴覚障害： 聴覚障害者は、音声を解釈する能力に支障をきたすため、音声ファイルに代わるテキストを利用できるようにする必要があります。
• 運動機能障害： 運動機能に障害のある人は、マウスを使ったり、「タイムアウト」する前に操作を完了したり、小さくて正確な場所をクリックしたりすることができない場合があります。
• 認知障害や神経障害： 認知障害や神経障害のある人は、ちらつきのあるコンテンツを見たり、大きなテキストブロックを読んだり、複雑なナビゲーションを理解したりすることが困難な場合があります。

ウェブアクセシビリティを向上させる15の実践的な方法

さまざまな障害がインターネット上のコンテンツへのアクセス、操作、理解する能力を妨げる可能性があることを理解していただけたと思いますので、ここからはアクセシブルなウェブサイトを構築または改善するための15の方法を紹介します。

1. キャプションと文字起こしを含む

ビデオに付随する音声のような音声ファイルは、別のフォーマットで提供される必要があります。クローズドキャプション、文字起こし、手話通訳は、聴覚に障害のあるユーザーが音声コンテンツを理解するための3つの方法です。また、読書を好む人や、音声を聞くことができない状況にいる人（カフェや図書館でウェブを利用する場合など）のために、文字起こしを含めることもよい方法です。

2. 適切なカラーコントラスト比を使用する

色のコントラストが悪いと、色覚障害のあるユーザーがテキストを読むのが難しくなります。WCAG 2.2では、背景色や画像の上に表示されるテキストの色のコントラスト比を4.5:1にすることを推奨しています。

もし身近にグラフィックデザイナーがいない場合、サイトが適切なコントラストを使用しているかどうかを確認する最も簡単な方法は、コントラストチェッカー（サイトのテキストの色と背景をスキャンするツール）を使用することです。

3. コンテンツのちらつきを取り除く

コンテンツが点滅することは、障がいのある人にとって発作を引き起こす可能性があるため、削除する必要があります。また、気が散って迷惑になると考えられているため、点滅するコンテンツを削除することで、ユーザーがコンテンツの目的に集中できるようになります。

4. 見出しを使用してコンテンツを構造化する

支援読書技術は、ウェブページの構造を解釈するために、見出しのコンテンツをスキャンします。見出しは、タイトルから始まり、H1、そしてすべての小見出しに H2の見出しをつけるなど、正しい階層に従っていることを確かめましょう。コンテンツの構造に合わせて、H2の下に H3や H4の見出しを入れることもできます。

5. ウェブサイトデザインの簡素化

複雑なウェブサイトデザインは、認知障害や神経障害を持つ人々にとって難しい場合があります。クリーンでシンプルなウェブサイトデザインは、あらゆる障害を持つユーザーがコンテンツを理解し、行動喚起やフォーム欄などの重要なページ要素を確認するのに役立ちます。また、シンプルなウェブサイトデザインは、直帰率を減らし、コンバージョンを向上させ、モバイル閲覧を容易にします。

6. 画像の alt テキストを追加する

スクリーンリーダーは、画像に alt テキストが添付されていない限り、画像を解釈することができません。この種のテキストは、検索エンジンのボットがページ上の画像を「見る」のを助け、含まれるキーワードのランキングを上げるのにも役立ちます。

7. フォームにラベルとタイトルを追加する

フォームのフィールドには、例えば、"姓"、"名"、"住所 "など、明確にラベルを付けましょう。また、フォームの次のフィールドにタブで移動できるように設定することも必要です。

8. さまざまな CAPTCHA オプションを提供する

CAPTCHA はスパムのフォーム入力を防ぐためによく使われますが、通常とは異なる視覚情報の解釈を伴う可能性があるため、実際には利用しやすいものではありません。より良い方法は、スパム URL を検出する PHP コードをフォームに設定することです。フォームの各フィールドを検証するように設定することもできるので、パラメータから逸脱した入力はスパムとして除外することができます。

9. キーボードフレンドリーなサイトにする

真にアクセシブルなコンテンツは、マウスを使わずに操作することができます。ウェブサイトは、ユーザーが「Tab」キーのみ、あるいはポインターのようなアクセシビリティツールを使って、異なるページ要素やページに移動できるように設定されるべき（実際にナビゲーションやページをタブで移動し、自分のサイトのキーボード操作のしやすさをテストすることも可能）です。

10. 入力のための時間を増やす

障害のあるユーザーは、決められた時間内にフォームを完了できない場合があります。フォームがタイムアウトになりそうな場合、ユーザーに通知し、最大2分まで時間を延長できるようにすることが理想的です。

11. コンテンツをレイアウトする際にテーブルを使用しない

コンテンツが表に含まれている場合、スクリーンリーダーが意図した順序でコンテンツを認識できない可能性があります。どうしても必要な場合を除き、表の使用は避けるべきでしょう。表が必要な場合は、すべての列と行に明確なラベルを付けるべきです。

12. 説明的なリンクテキストを使用する

スクリーンリーダーは、"詳細 "などの CTA ボタンの意図を伝えることができません。ウェブサイトのリンクには、スクリーンリーダーがその目的を伝えるのに十分なコンテキストが含まれているようにしましょう。

13. スキップリンクを設置する

スキップリンクは、ウェブページの見出しへのテキストリンクで、ユーザーが特定のセクションにスキップできるようにするものです。ページの冒頭に表示され、目次と同様の機能を果たします。キーボードのみのナビゲーションやスクリーンリーダーを使用している人は、興味のあるセクションに簡単にジャンプすることができます。

14. 複数の連絡先オプションを含める

ウェブサイトユーザーは、障害の有無にかかわらず、企業への連絡方法として好むものがそれぞれ異なります。例えば、電話、電子メール、テキスト、またはライブチャットなど、複数の連絡方法の選択肢をユーザーに与えるようにしましょう。

15. ウェブアクセシビリティのテストと改善

アクセシビリティの向上は、一度だけの作業ではありません。特に、アクセシビリティに関するガイドラインや規制は常に進化しています。ウェブサイトの管理者は、自動テストと手動テストを組み合わせて、アクセシビリティが遵守されているかどうかを定期的にテストする必要があります。

アクセシブルなウェブサイト構築は行うべきこと

アクセシブルなウェブサイトは、企業による多様性へのコミットメントを示し、新たなユーザーを獲得する機会を提供し、あらゆる能力を持つ人々のための体験を向上させます。また、少数の例外を除き、ウェブサイトをアクセシブルにするために完全に作り直す必要はありません。したがって、アクセシビリティへの取り組みを遅らせる理由はどこにもないのです。

Monsido のようなウェブ最適化およびアクセシビリティソリューションは、その手始めとして最適なものです。自動スキャンを利用することで、アクセシビリティを阻害する可能性のある問題を見つけ出す作業を省くことができ、また、ターゲットを絞った修正により、その問題に対処するための明確なガイダンスを提供することができます。また、ウェブサイトのインフラそのものにも目を向けてみてください。オープンソースの Drupal のような最新の CMS には、さまざまなユーザーグループを支援する高度な機能が含まれています。これらを組み合わせることで、アクセシブルでコンプライアンスに準拠したデジタル体験を構築、管理、提供するための完全なソリューションを手に入れることができます。

当社のプラットフォームについての詳しい情報はこちらをご覧いただき、ウェブサイトをアクセシブルにする準備ができましたら、お気軽にお問い合わせください。また、ウェブアクセシビリティについてより深く知りたい方は、「新しいウェブアクセシビリティプラットフォームのご紹介」ウェビナー（英語）をご覧ください。

注：このブログは2019年に掲載されたものであり、最新の情報に更新されています。