ADAおよびWCAGコンプライアンス基準に従って、クリック後のエクスペリエンスを誰もが利用できるようにする方法

公開: 2020-03-30

クリック後のランディングページを作成するとき、何人の広告主がWebアクセシビリティについて考えますか?

これはあなたが、アクセシビリティを考えている最初の時間であれば、チャンスはあなたがすでに変換を失ってきています。 事実、5人に1人のオンラインユーザーがWebページを使用するには宿泊施設が必要です。 CDCとEpilepsyFoundationからのこれらの統計は、クリック後のランディングページに誰もがアクセスできるようにする必要性を強調しています。

ADAコンプライアンス障害統計

クリック後のページがADAおよびWCAGに準拠していることを確認することは、すべての人がアクセスできるようにする方法です。

今日の投稿では、ADAとWCAGのコンプライアンスに伴うものと、広告主がこれらのアクセシビリティ標準をページに実装することが重要である理由について説明します。

オンラインADAコンプライアンスには何が必要ですか?

障害を持つアメリカ人法(ADA)は、さまざまな能力に基づく差別をなくすために1990年に制定されました。 ADAはオンラインコンプライアンスに明示的に対応していないため、コンプライアンスを満たすための特定の要件は、少し曖昧で混乱を招く傾向があります。

ただし、ガイダンスとしてアクセス可能なWebサイトを構築および維持するための最も包括的なガイドラインであるW3Cによって発行されたWebコンテンツアクセシビリティガイドライン(WCAG)を参照できます。

WCAGとは何ですか?

WCAGは、さまざまな聴覚、動き、視覚、および認知能力を持つ人々がすべてのWebページにアクセスできるようにするためのガイドラインです。

Webアクセシビリティには、障害を持つ人々がそれらを使用できるようにWebサイト、ツール、およびテクノロジーを作成することが含まれます。 より具体的には、訪問者はページを認識、理解、ナビゲート、および操作し、ページに貢献することができます。

WCAGには3つのバージョンがあります。

  • WCAG1.0は1999年に起草されました
  • WCAG2.0は2008年に公開されました
  • WCAG2.1は2018年6月に作成されました

バージョン2.1には、17の新しい成功基準(詳細は以下)が含まれており、そのアクセシビリティの問題は、WCAGガイドラインの下で4つの異なるグループに分類されています。 これらの問題は、POURの頭字語で要約できます。

  • 知覚可能:すべてのユーザーがページのコンテンツを知覚できますか?
  • 操作可能:すべてのユーザーがページを操作できますか?
  • 理解できる:すべてのユーザーがページのコンテンツを理解できますか?
  • 堅牢:コンテンツは、スクリーンリーダーを含む、さまざまなプログラムやデバイスで解釈できますか?

WCAGガイドラインは、アクセシビリティの問題と推奨事項を3つのレベルに分類しています。

  • レベルA:これは最も緊急のレベルであり、障害のある訪問者がページをナビゲートまたは使用する能力を大幅に制限する可能性のある問題が含まれています。
  • レベルAA:このレベルは、ほとんどの商用Webサイトの標準と見なされています。 障害のあるユーザーにWebページの完全なエクスペリエンスを提供するために改善が必要な領域に対処します。
  • レベルAAA:これは最高水準であり、レベルAとAAAの両方が対処する問題の微調整が含まれます。 ただし、AAAコンプライアンスは、ほとんどのWebページの範囲を超えている可能性があります。

クリック後のランディングページにアクセスできるようにするにはどうすればよいですか

クリック後のページがアクセシビリティ基準を満たしていることを確認する9つの方法は次のとおりです。

1.ページをキーボードフレンドリーにする:訪問者は、マウスを持っていなくても、キーボードの「Tab」キーだけを使用して、クリック後のページをナビゲートできる必要があります。 これを行うと、支援技術を使用してページをナビゲートおよびスクロールし、CTAボタンをクリックするオーディエンスに役立ちます。

2.すべてのコンテンツにアクセスできるようにする:クリック後のページの多くは、動的コンテンツ(事前に定義されたタグに基づいて変更されるコンテンツ)を使用します。 多くのスクリーンリーダーは、最初に読み込まれたときに表示されるページコンテンツのみを「読み取る」ため、ページが支援ツールに変更を通知しない場合、これは問題になる可能性があります。 動的コンテンツを使用する場合は、必ず動的コンテンツをライブリージョンとしてタグ付けしてください。これにより、スクリーンリーダーや同様のデバイスがコンテンツの変更に応じてコンテンツを理解できるようになります。

3.すべての画像に代替テキストを含める:画像に代替テキストを追加すると、画像の読み込み、説明、コンテキストの提供に失敗した場合に、テキストが画像の代わりとして表示されることが保証されます。

4.ページにコントラストを追加する:これは、コピーとすべてのページ要素が背景から目立ち、視覚障害のあるユーザーに表示されるようにするために必要な手順です。 理想的には、明るい色に対して暗い色を設定し、それらが互いに融合しないようにする必要があります。

ADAコンプライアンスアクセシビリティカラーコントラスト

5.ヘッダーを使用してコンテンツを構造化します。H1、H2、およびH3は、コピーを構造化し、ユーザーが簡単に解釈できるようにします。

6.フォームフィールドにラベルを付けるページの各フォームフィールドに明確にラベルが付けられていることを確認します。これにより、スクリーンリーダーを使用するユーザーは、フォームに入力する方法を理解できます。 Amplitudeページには、ラベルの付いたフォームフィールドがあります。

ADAコンプライアンスアクセシビリティフォームフィールドラベル

7.レスポンシブページを作成する:レスポンシブページは、画面サイズに関係なく、任意のデバイスで再フォーマットおよび再構築されます。 ページは、携帯電話、タブレット、小型ノートパソコンの小さな画面から、標準のデスクトップ画面、さらに大きなワイドスクリーンモニターまで、すべてのデバイスのユーザーに柔軟性と優れた使いやすさを提供しながら拡張できます。

8.メディアとスライダーの自動再生を避ける:ビデオの自動再生は、スクリーンリーダーを使用するユーザーを、ミュートまたは一時停止するのが難しいため、イライラさせる可能性があります。 同様に、スライダーやカルーセルは、ユーザーに理解の問題を引き起こす可能性があります。

9.アクセシブルなコピーを作成する:頭字語や専門用語を避けて、すべてのユーザーがあなたが提供しているものを理解できるようにします。

ページがADAおよびWCAGに準拠しているかどうかを確認するにはどうすればよいですか

多くのオンラインリソースでは、ページが準拠しているかどうかを確認できます。 必要なのは、URLとメールアドレスを入力することだけです。

インターネットアクセシビリティ局

BOIAを使用すると、広告主は自分のページがアクセシビリティ標準に準拠しているかどうかを確認できます。

ADAコンプライアンスBoIA

AudioEye

AudioEyeはページを無料でスキャンし、アクセシビリティの観点からどのように測定されるかを確認します。

ADA準拠AudioEye

Siteimprove

Siteimproveはページのアクセシビリティをチェックし、WCAG標準に準拠した自動テストを提供します。

ADAコンプライアンスサイト改善

次のChrome拡張機能をダウンロードして、ユーザー補助機能を確認することもできます。

波動評価ツール

Wave評価ツールは、アイコンとインジケーターをページに挿入することにより、Webコンテンツのアクセシビリティに関する視覚的なフィードバックを提供します。 人間による評価を容易にし、アクセシビリティの問題について教育します。 このツールは、いくつかの問題、構造要素、コントラストエラー、アラート、および代替テキストの詳細を提供します。

ADAコンプライアンスWave評価

UserWay

広告主は、UserWayウィジェットをダウンロードして、既存のコードをリファクタリングすることなくページのアクセシビリティソリューションを評価できます。これにより、ADA、セクション508、およびWCAG 2.1AAをカバーする包括的な法律および規制コンプライアンスフレームワークが保証されます。

ウィジェットは、すべての主要なCMSプラットフォームだけでなく、プレーンなHTML / CSS / JSサイトでも利用できます。 このツールは、重要なユーザー補助機能と、ユーザーが個々のユーザー補助のニーズを満たすために組み合わせることができる幅広い機能を提供します。

ADAコンプライアンスアクセシビリティUserWay

Round Table Pizzaは、アクセシビリティを確保するためのUserWayウィジェットを備えています。 まず、読書ガイドラインを使用して、次に画面の色を反転します。

ADA準拠ラウンドテーブル読書ガイド

ADA準拠の円卓会議の色のコントラスト

ChromeVox

ChromeVoxは、視覚障害のあるユーザーにChromebookの速度、シンプルさ、セキュリティを提供するスクリーンリーダーです。 ChromeVoxはChromebookにプリインストールされていますが、拡張機能としてダウンロードできます。

拡張機能は、各ページセクションを強調表示し、ユーザーに読み上げます。

ADA準拠のChromeVoxの例

コンプライアンスを満たすためにInstapageでできること

Instapageは、すべてのユーザーがWebサイトのアクセシビリティ基準を順守し、すべてのオーディエンスに合わせたページを作成することを推奨および促進します。 これも:

  • すべてのページ画像に画像代替テキストを追加する簡単な方法をユーザーに提供します
  • ページをキーボードでアクセス可能にする
  • スクリーンリーダーがすべてのフォーム入力と送信ボタンを認識できるようにする
  • 適切なHTMLタグを追加する
  • サポートチームにリクエストを送信して、ページに言語属性を追加する

lang属性を使用してページの言語を確立することはWCAGの要件であり、そうすることで2つの方法でユーザーに利益をもたらします。

  1. GoogleChromeなどの翻訳サービスが正しく機能できるようにします
  2. この属性は、スクリーンリーダーにページコンテンツを正しく発音する方法を指示します

クリック後のページに誰もがアクセスできるようにする

クリック後のページにアクセスするすべてのユーザーが平等にコンバージョンを達成できるようにするには、すべてのユーザーがページにアクセスできることが重要です。

アクセシブルでパーソナライズされたクリック後のランディングページを大規模に作成する方法の詳細については、今すぐInstapageEnterpriseデモをリクエストしてください。