あなたがウェブサイトのアクセシビリティについて知る必要があるすべて

公開: 2022-02-15

Webサイトにアクセスするすべてのユーザーは、能力や能力の欠如に関係なく、わかりやすいユーザーエクスペリエンスを得る権利を持っている必要があります。 これは私たちの意見だけではありませんが、一部の国では法律です。 しかし、それだけがあなたのウェブサイトがアクセシビリティ基準を満たしていることを確認する理由ではありません。 障害に関する報告によると、 10億人が障害を持って生活しており、これは世界の人口の15％に相当します。 身体的、視覚的、認知的、神経学的、運動および聴覚障害を持つ人々があなたのウェブサイトを使用します。 数字を理由として使用するのは不快に感じますが、それは潜在的な訪問者のかなりの量です。 あなたのウェブサイトを誰もが使えるようにすることは努力する価値があります。

アクセス可能なウェブサイトと通常は予算内で発生しないウェブサイトとの間のギャップ。 あなたのウェブサイトを包括的にすることは単に開発の間により多くの努力を要し、より多くの努力はより多くのお金を意味します。 しかし、戦略的に実行され、DrupalのようなCMSを使用する場合、それは労力の大幅な増加である必要はありません。 Drupalコアは、WCAG2.0およびATAG2.0標準に準拠するWebサイトの設計と開発をサポートします。 実際、アクセシビリティ標準を改善し、最新の状態に保つことに専念しているコミュニティ全体（Drupal Accessibilityコミュニティ）があります。 アクセシビリティはDrupalのコアの強みであるとさえ言えます。

あなたがあなたのウェブサイトを再構築しようとしているならそれはすべて素晴らしいです、しかしあなたがあなたの既存のもので働いているならどうですか？ Webアクセシビリティと、Webサイトがアクセス可能かどうかを知る方法を掘り下げてみましょう。

ウェブサイトのアクセシビリティ

Webアクセシビリティとは何ですか？

Webアクセシビリティは、Web開発において非常に重要な側面です。 素人の言葉で言えば、Webアクセシビリティとは、障害に関係なく誰もがWebサイトにアクセスできるようにすることです。 多くの場合想定されていますが、アクセシビリティは障害を持つ人々だけのものではありません。 健常者として、状況的または一時的な状況に陥り、Webサイトへのアクセス方法に影響を与える可能性があります。

Webアクセシビリティが重要な理由

もう1つの誤解は、Webアクセシビリティは主にポジティブなブランドイメージを作成するために使用されるというものです。 しかし、アクセス可能なWebサイトを持つことには、多くの人が考えるよりもはるかに多くの具体的なメリットがあります。

  • 視聴者のリーチを拡大する
  • 法的な問題を回避する（彼女のウェブサイトがADA（Americans with Disabilities Act）に準拠していなかった2019年のビヨンセに対する訴訟を思い出してください）
  • アクセシビリティのユーザーエクスペリエンスを向上させることは、全体的なUXスコアを向上させることも意味します
  • 検索エンジンであなたのウェブサイトのランクを向上させる

とはいえ、目的主導型ブランドの最近の成長と人気は、包括的であることはブランドの重要な差別化要因になり得ることを示しています。

適合性とレベル

World Wide Webコンソーシアム（W3C）は、一連のガイドライン（Webアクセシビリティの標準を管理するWCAG（Webコンテンツアクセシビリティガイドライン））を開発およびリリースしました。 これらの標準（WCAG 2.0、WCAG 2.1、およびWCAG 2.2）の成功基準には、次の3つのレベルの適合性があります。

  • レベルA
  • レベルAA
  • レベルAAA

レベルA-これは、アクセシビリティ機能の最も基本的な要件をカバーするアクセシビリティの最小レベルです。

レベルAA-このレベルには、レベルAのすべてに加えて、いくつかの追加要件が必要です。 Webサイトがこのレベルに準拠している場合、最大のアクセシビリティの障壁の多くがクリアされるため、これは大きな問題です。

レベルAAA -AAAレベルには、レベルAとAAのすべてに加えて、いくつかの追加要件が必要です。 このレベルは、ほとんどのWebサイトで達成するのは困難であり、WCAG標準の下で最高レベルのアクセシビリティです。

あなたのウェブサイトがアクセス可能かどうかをどうやって知るのですか？

WCAGは、Webアクセシビリティに関する4つの原則と13のガイドラインを設定しています。 これらの4つの原則のいずれかに従わないと、障害を持つユーザーがWebサイトにアクセスできなくなります。 これらの原則は、POUR原則として知られています

  1. 知覚可能
  2. 操作可能
  3. 理解できる
  4. 屈強

知覚可能-知覚可能の下にグループ化されたすべてのガイドラインは、人々があなたのコンテンツを見つけられるようにすることを中心に展開しています。

操作可能-Webサイトが操作可能であることを確認する必要があります。 人々はあなたのウェブサイトを使用できなければなりません。

理解できる-人々はあなたのウェブサイトを理解できなければなりません。

堅牢-Webサイトは、すべてのブラウザ、オペレーティングシステム、およびデバイスと互換性がある必要があります。

アクセシビリティガイドライン

これで、各原則に独自のガイドラインがあり、ここで説明します。

知覚可能なガイドライン

1.1）代替テキスト-最初の知覚可能なガイドラインである知覚可能な1.1では、すべての非テキストコンテンツに代替テキストが必要です。 これは、画像に意味のある代替テキストが必要であることを意味します。 代替テキストは、画像で何が起こっているかを説明する必要があります。

1.2）時間ベースのメディア-Perceivable 1.2では、時間ベースのメディアに代替オプションがある必要があります。 聴覚障害者のために、ビデオにクローズドキャプションを追加します。 クローズドキャプションは、コンテキストを与えるのに役立ちます。

1.3）適応可能-知覚可能1.3では、コンテキストを失うことなく、コンテンツをさまざまな方法で提示できる必要があります。

1.4）識別可能-知覚可能の最後のガイドラインは知覚可能1.4であり、コンテンツを背景から視覚的に分離できる必要があります。 これは、テキストと背景色の間に十分なコントラストが必要であることを意味します。 テキストの最小コントラスト比は4.5である必要があります。

操作可能なガイドライン

2.1）キーボードアクセス可能-最初の操作可能なガイドライン2.1では、キーボードのみを使用してWebサイトのすべての部分にアクセスできる必要があります。

2.2）十分な時間-Operable 2.2では、Webサイトのコンテンツを使用するのに十分な時間が必要です。 急いでいることを感じずにタスクを完了する時間をユーザーに与える必要があります。 また、人によって能力が異なることを考慮する必要があります。また、物事を成し遂げるのに少し時間がかかる場合もあります。

2.3）発作と身体的反応-操作可能2.3では、発作を引き起こすような方法でコンテンツが設計されていないことが必要です。 アニメーションとビデオは、1秒間に3回以上点滅しないようにする必要があります。

2.4）ナビゲート可能-操作可能2.4では、ユーザーがWebサイトをナビゲートし、Webサイトのどこにいるかを理解できる必要があります。 ページ上のすべてのリンク、入力、およびボタンは、ユーザーがタブを使用してナビゲートしているときに人が画面上のどこにいるかを示すために、フォーカスされた状態にする必要があります。

2.5）入力モダリティ-Operableの最後のガイドラインはOperable 2.5であり、キーボード以外の他の入力デバイスを使用してWebサイトのすべての部分にアクセスできる必要があります。 基本的に、Webサイトがマウス、タッチスクリーンデバイス、音声認識で機能することを確認する必要があります。

理解できるガイドライン

3.1）読みやすい-理解できる3.1では、コンテンツが読みやすく、理解しやすいことが必要です。 簡単な言葉を使い、専門用語を避けてください。

3.2）予測可能-理解可能3.2では、Webページの表示と動作が予測可能である必要があります。 コンテンツはページごとに異なりますが、ページの主な構造は同じままである必要があります。 ナビゲーション、リンクの順序、検索は常にページの同じ場所に配置する必要があります。

3.3）入力支援-理解できる3.3は、人々が間違いを訂正して回避するのが簡単であることを要求します。

堅牢なガイドライン

4.1）互換性-堅牢なガイドラインは1つだけで、それは4.1です。 これには、Webサイトがすべてのブラウザ、オペレーティングシステム、およびデバイスと互換性がある必要があります。 これは、有効なセマンティックHTMLを作成することで実現できます。 何らかの理由でWebサイトにアクセシビリティのヘルプが必要な場合は、ARIA属性を追加してください。

アクセシビリティをテストする方法は？

最後に、アクセシビリティテストをWebサイト管理プロセスに組み込みたいと考えています。 たとえば、ページをタブで移動して、キーボードのアクセシビリティをテストできます。 幸いなことに、テストを自動化するためにインターネット上で利用できる多くのツールがあります。

  • 波
  • 灯台

参照サイト

標準とガイドラインについては、以下のW3Cサイトを参照してください。

  • https://www.w3.org/
  • https://www.w3.org/WAI/
  • https://www.w3.org/WAI/standards-guidelines/wcag/
  • https://www.w3.org/WAI/WCAG21/quickref/