マーケターのためのデジタルアクセシビリティパート2：ユーザーエクスペリエンスとウェブサイト

公開: 2022-06-16

デジタルアクセシビリティに関するこのシリーズの最初の投稿では、マーケターのアクセシビリティの「何と理由」に触れました。さあ、「方法」の時間です。

実装が非常に簡単で、マーケターに関連する要素に推奨を意図的に制限していることに注意してください。このシリーズは、アクセス可能なコンテンツに関して企業が知っておく必要のあるすべての標準の包括的なリストではありません。アクセシビリティガイドラインとWCAG基準の要点について知りたい場合は、TGPieラーニングプログラムを確認してください。これは、スキルを新鮮に保つため、またはアクセシビリティのテクニックとベストプラクティスを習得するために使用できる自分のペースで進められるオプションです。

推奨事項に移りましょう！

アクセシビリティとユーザーエクスペリエンス

スムーズで手間のかからないユーザーエクスペリエンスは、すべてのマーケティング担当者にとってノーススターです。個人が重要なタスクを簡単に完了できること、およびコンテンツが期待をどの程度満たしているかは、それに大きな影響を及ぼし、マーケティング活動を成功または失敗させます。

理にかなっていますよね？オンラインで何かを購入したいときにクレジットカード情報を入力しようとして問題が発生した場合、または必要なアイテムが在庫切れの場合、ユーザーエクスペリエンスの品質は急落します。第一に、あなたがやろうとしていたことを成し遂げることができなかったからであり、第二に、あなたがそれを成し遂げることができると期待していたからです。この二重の苦痛は、ほぼ確実に、その特定のWebサイトに戻らないことを保証します。

マーケティング担当者は、優れたユーザーエクスペリエンスの重要性に精通しています。あなたはそれをテストしているかもしれません（あなたにとって良いです！）またはそれを測定するための分析を実施しています。これらの対策は、マーケティングファネルを最適化するために重要です。ただし、実行していない可能性があるのは、ユーザーエクスペリエンスのアクセシビリティをテストすることです。（そうでない場合は、判断はできません！これが、この一連の投稿が変更することを意図していることです。）

ユーザージャーニー

ユーザージャーニー（ユーザーフローまたはユーザーパスとも呼ばれます）は、ユーザーがサイトで実行する一連のアクションです。 重要なユーザージャーニーは、購入の完了、フォームの送信、ビデオの視聴、投稿の閲覧など、サイトの主な目的と一致しています。

いくつかの理由から、重要なユーザージャーニーでは、常にアクセシビリティの改善を優先する必要があります。

まず、サイト全体にすばらしいコンテンツがあるかもしれませんが、ユーザーがWebサイトにアクセスするという主な目的を達成できない場合、それはあなたが永遠に失った顧客です。

第二に、障害を持つ多くの人々は、残念ながら、他の人々が当たり前と思っていることをするときに課題に直面することに慣れています。世界の多くは彼らの特定の障害を念頭に置いて作成されていないので、彼らは一般的に彼らを期待しています。

平均して、接線方向のコンテンツに関するマイナーなアクセシビリティの懸念は、法的措置を開始するまでそれらを苛立たせる可能性はありません。しかし、彼らがあなたのウェブサイトで達成するようになった1つのことを行うことができない場合、特にあなたが米国を拠点とするブランドである場合、あなたは法的リスクの大きな古い缶に自分自身を開放します。

重要なユーザーパスをテストする

では、重要なユーザーフローのアクセシビリティをどのようにテストしますか？手動ルートを選択した場合は、障害を持つ人々を対象にユーザーテストを実施するか、TPGiのARC Toolkit（これについては後で詳しく説明します）などのツールを使用して各ステップのコードを検査し、WCAGの障害を特定できます。

手動テストは最終的にはより包括的ですが、重要なユーザーパスのアクセシビリティエラーをすぐに特定したい場合は、ARCMonitoringのユーザーフロー機能を使用して各コンポーネントのアクセシビリティを自動的にスキャンできます。画像からダイアログボックスまで、スキャンのために、ユーザージャーニーのすべてのコンポーネントと動的な相互作用を含めることができます。また、時間の経過とともにエラーを追跡して、内部の修復プロセスを改善することができます。

ARCのユーザーフローモニタリングから取得した情報を、Googleアナリティクスの目標到達プロセスや目標などの他のアナリティクスツールと組み合わせて、ユーザーが目的のアクションを完了できないようにする障壁を特定できます。

アクセシブルなウェブサイト

ウェブサイトはあなたのビジネスのデジタルストアまたはオフィスです。それは潜在的な顧客があなたの会社に与える最初の（または唯一の）印象かもしれないので、あなたはそれをできるだけ魅力的にしたいと思うでしょう。たぶん、あなたは単調さを壊すためにいくつかのビデオ、またはたくさんの画像、または貴重なブログコンテンツのページのページを持っています。これらはすべて、マーケターが人々に製品を購入するように説得するために活用できる素晴らしい資産です。

このすべてのコンテンツにアクセスできるようにすることは困難に思えるかもしれませんが、アクセス可能なコンテンツのベストプラクティスの多くは、ベストマーケティングプラクティスと見分けがつきません。詳細については、以下をお読みください。

説明リンクテキスト

すべての優れたマーケティング担当者は、優れたコミュニケーションには明確さが不可欠であることを知っています。あなたが綿毛と重要な響きの（しかし最終的には無意味な）言葉であなたのコピーを飾ると、あなたのメッセージは失われます。同様に、説明に余裕がない場合、顧客はあなたが話していることを理解するのに十分な情報を持っていない可能性があります。

高品質のコンテンツは、これら2つの極端なバランスであり、当然のことながら、リンクまたはアンカーテキストはこれらの同じルールに従います。最適なリンクテキストは、ユーザーがクリックしたときに何を期待できるかをユーザーに示します。説明的なリンクテキストは、召喚状のコピーにとって特に重要です。「ここをクリック」または「ホワイトペーパーをダウンロード」をクリックしたときに遭遇するものについて、ユーザーがより適切に準備できるものは何ですか。明らかに、後者！（前者を選択した場合は、新しいキャリアパスを検討することをお勧めします。）

CTAを派手な言葉で祀る必要はありませんが（「ハリー・フーディーニの魔法に関する世界最高のホワイトペーパーをダウンロードしてください！」）、人々が何に取り組んでいるのかを知るように設定することが重要です。

リンクテキストがアクセシビリティにとって非常に重要なのはなぜですか？まず、目の不自由な人や視力の弱い人がページのコンテンツをスキミングするのに大いに役立ちます。（これは、完璧な視力を持つ人々にも当てはまります。）視覚障害を持つユーザーは、視力の弱い人向けの画面拡大ツールや目の不自由な人向けのスクリーンリーダーなど、さまざまな支援技術を使用してデジタルコンテンツにアクセスします。その名前が示すように、スクリーンリーダーは文字通り画面に表示されているものを読み上げます。

ただし、JAWSのようなスクリーンリーダーを使用すると、ユーザーはすべてのHTMLを上から下に移動する代わりに、画面全体を飛び回ってさまざまなコンポーネントを読み上げることができます。ユーザーがコンポーネント間を移動するとき、スクリーンリーダーはリンクのアンカーテキストのみを読み取り、周囲のコピーは読み取りません。つまり、すべてのリンクが同じ「ここをクリック」コピーである場合、スクリーンリーダーのユーザーは、そのリンクをたどるとどうなるかわかりません。彼らは、そのリンクが何に関連しているかを理解するために、周囲のコンテンツを探索することを余儀なくされています。

さらに、スクリーンリーダーを使用すると、ユーザーは「リンクリスト」を開くことができ、Webページ上のすべてのリンクにすばやくアクセスできます。これは、リンクテキストが周囲のコンテキストから読み取られ、「ここをクリック」などが実際に問題になる一般的なシナリオです。

画像の代替テキスト

代替テキストまたは「代替テキスト」は、Webサイトの画像を説明するため、スクリーンリーダーのユーザーは各Webページのコンテンツについてより包括的なアイデアを得ることができます。視覚的な説明として機能する画像を選択した場合、代替テキストを忘れると、それらを見ることができない人々は途方に暮れます。

ただし、純粋に美的な理由で画像を含め（おそらく、コンピューターにぶら下がっている人々の写真が本当に好きな場合）、それらのいくつかがある場合は、それらすべてに代替テキストを追加したくない場合があります。スクリーンリーダーは、すべての画像のすべての代替テキストを読み上げます。これは、テキストがエクスペリエンスに積極的に価値を付加しない場合、煩わしいものになる可能性があります。画像が装飾的であると見なすことができ、ページコンテンツの追加の意味/理解を追加しない場合は、空のalt属性を提供することにより、支援技術に対して非表示にする必要があります。

よく構成されたウェブサイト

視覚障害のある読者と障害のない読者の両方がページをざっと読み、コンテンツの基本を理解して簡単にナビゲートできるように、見出しタグを適切に利用してください。各ページをページのコンテンツを説明するH1で開始し、次にH2とH3を小見出しとして使用するなど、ヘッダーのベストプラクティスに従います。見出しタグは意図的に使用してください。構造を考えずにランダムにずらさないでください。

CSSスタイルを使用して視覚的な手段で見出しを区別することはできますが、スクリーンリーダーのユーザーにはこれらの区別を確認する余裕がありません。視力に問題のあるユーザーがコンテンツを簡単に利用できるように、適切にフォーマットされたページレイアウトを利用することが特に重要です。

密集した段落を最小限に抑え、可能な場合は短い文を使用し、専門用語やスラングの使用は避けてください。より明確で簡潔なコピーは、認知障害のあるユーザーがコンテンツをよりよく理解するのに役立ち、すべての読者の混乱を最小限に抑えるのにも役立ちます。

おそらく、人々の注意力が金魚よりも短くなっていると聞いたことがあるでしょうか。疑わしい場合は、分解してください。できるだけシンプルにします。

色のコントラスト比

補色に赤と緑を使用してもユーザーにメリットがないため、組織のスタイルガイドがサンタクロースによって設計されていないことを期待しましょう。色のコントラストは、アクセシブルなデザインの重要な要素です。視力の弱い人は、類似しすぎる色を区別するのが難しいと感じるかもしれません。また、色覚異常のユーザーにとって、多くの色は区別できません。

TGPiの無料のカラーコントラストアナライザーツールを試してみると、十分な色の比率を決定する際の当て推量がなくなります。カラーピッカーを使用して前景色と背景色を選択すると、CCAがコントラストが適切かどうかを通知します。

アクセシブルなフォーム

事実上すべてのサイトは、ユーザーがタスクを完了できるようにするためにフォームを使用しています。あなたのビジネスがeコマース、サービスベース、あるいは単なるオンラインショーケースであるかどうかにかかわらず、フォームが含まれている可能性があります。ただし、障害を持つ人々にとってフォームは扱いにくい場合があります。いくつかの技術的な考慮事項（開発者が実装するものを読んでください）と非技術的な考慮事項があり、コーディングの知識がないマーケターは簡単に従うことができます。非技術的なベストプラクティスは次のとおりです。

フォームを短くシンプルに保つ–顧客の連絡先情報を取得し、関係を構築して顧客と関わり、より多くの追加知識を引き出します
明確な指示と目に見えるラベルを提供する–紛らわしいフォームが好きな人はいません
入力の検証（変更の取り消し/確認） –問題とその修正方法をユーザーに通知します
ユーザー通知（成功/失敗） –フォームの送信が成功したかどうかをユーザーに通知します
マルチページまたはプログレッシブを採用する–より複雑なフォームが必要な場合は、ユーザーを圧倒しないマルチページまたはプログレッシブフォームを目指してください
時間制限を削除するか、オプションを提供する–時間制限は、買い物客に購入を強制するのに便利な場合がありますが、深刻な不安障害を持つ個人に過度のストレスを追加します

パン粉

ブレッドクラムは、現在閲覧しているページが全体像にどのように収まるかを確認できる、サイト上のナビゲーションの形式です。これらは通常、上位レベルのページにつながるリンクです。

衣料品を販売するeコマースサイトのパンくずリストの例は次のとおりです。

女性>ジャケット>ウール>ピーコート。

ブレッドクラムは経路探索に役立ち、ユーザーが最初から旅を始めることなく、より高いレベルのページに簡単に戻ることができます。

それらはいくつかの理由で障害を持つ人々にとって特に重要です。一つには、認知障害のあるユーザーは、曖昧さを最小限に抑えるユーザーフレンドリーな体験から常に恩恵を受けるでしょう。ブレッドクラムは、サイトが広大で複雑な場合に特に重要です。ブレッドクラムはまた、スクリーンリーダーのユーザーを即座に方向付け、サイトナビゲーションの負担を軽減します。

ブレッドクラムは、多くのアクセシビリティのベストプラクティスと同様に、障害を持つユーザーにとって明らかに役立ちますが、すべてのユーザーのエクスペリエンスを向上させます。

チャットボットとサードパーティの統合

多くのWebサイトは、チャットボット、ポップアップモーダル、動的ランディングページなど、Webサイトにサードパーティの統合を活用しています。残念ながら、サードパーティのソフトウェアにはほとんどアクセスできないことが多く、企業がそれを修正できないことが状況を悪化させています。

組織がサードパーティのアプリケーションをWebサイトに統合することを選択した場合は、追加する前に必ず専門家に評価を依頼してください。アクセシビリティの失敗の多くを調整することはできないかもしれませんが、少なくともあなたがとっているリスクのレベルを理解するでしょう。契約に組み込むために、ベンダーにアクセシビリティステートメントまたは保証を要求することもできます（ただし、実装する前に製品をテストしてその正確性を検証する必要があります）。

補足として、常にベンダーに製品のアクセシビリティについて尋ねてください。アクセシブルな製品を要求する顧客が増えるほど、ベンダーが耳を傾け、アクセシビリティ機能を製品ビルドに組み込み始める可能性が高くなります。