店頭アクセシビリティ

Jan 12 2023
アクセシビリティのジレンマ WCAG 2.1 (Web コンテンツ アクセシビリティ ガイドライン) に基づく Web アクセシビリティの成功基準は、教科書的な観点からのみ見た場合、圧倒される可能性があります。
芸術的なイラストは、画像のコラージュを示しています。黄色のスカーフと、Web アクセシビリティの透かし入りロゴが入った黒いジャケットを着た女性。キーボードの背景の上に視覚障害のある男性ユーザー。包帯を巻いた手。ドル記号は 3 つのイメージすべてを結びます。

アクセシビリティのジレンマ

WCAG 2.1 (Web Content Accessibility Guidelines)の下での Web アクセシビリティの成功基準は、教科書的な観点からのみ見た場合、圧倒される可能性があります。私の経験では、開発者と管理者は Web アクセシビリティ プロジェクトに対してほぼ満場一致で不快な反応を示しています。たとえば、「すべて」を読まなければならないのか、それは単に「とてもつまらない」、「バリデーターを実行するだけ」などです。

Web アクセシビリティの開発者および学習者として、基準を読むという「耐え難い苦痛」を乗り越えれば、さまざまな角度からアプローチできることに気付きました。たとえば、ユーザーエクスペリエンスの角度から、またレイヤーごとに。ゆっくりと、しかし実際には、テストするだけです。開発者が常に行っていること。さて、通常は次の Q&A になります。

しかし、正確に「テスト」するには何が必要でしょうか?

私たちが無意識のうちに行っているのは、ユーザー ジャーニーです。

どうやってそれを行うのですか?

ユーザーが持っている可能性のある障害に意識的に共感することで、言い換えれば、シミュレートまたはエミュレートします。

バリデーターでサイトをテストするだけでは不十分ですか?

そうではありません。バリデーターは、大規模な Web サイトをいくつかの基準で分析する際に非常に役立ちます。それらの20%のように。しかし、バリデーターが飛行色のサイトを通り過ぎて、実際にはアクセスできないことに気付くのを見てきました。

具体的な類推をお願いします。

いくつかの基準に準拠しているという理由だけで、あなたのウェブサイトは特定のレベルまで「アクセス可能」になります。あなたのオフィスビルは、正面玄関にドアを自動的に開く非常に大きなボタンがあるため、「アクセシブル」であると考えているようなものです...しかし、それは砂利の駐車場を通過して階段を上った後でのみです. では、ユーザーはどのようにしてドアにたどり着くのでしょうか?

店頭アクセシビリティ

最近では、多くのセクターが Web アクセシビリティへの準拠の対象となっています。政府のように、義務付けられているものもあります。オンライン小売はますます多くの訴訟の対象となり、障害を持つユーザーも明確な期待を持っているため、ストアフロントのアクセシビリティに対するニーズが高まっています. 場合によっては、「リードから現金」へのアプローチと「訴訟へのリード」の結果に違いが生じます。

敷地内

プロセスを例で説明しましょうが、最初にいくつかの前提を確立します。

  1. ストアフロントの主な目的は、ユーザーが商品をチェックアウトできるようにすることです。
  2. インターフェイス上の要素は、障害を持つユーザーを含め、ユーザーがチェックアウトを完了するのを容易にする必要があります。
  3. 開発者や品質保証テスターは、ユーザーがインターフェイス上のポイント A から B または Z に問題なく移動できるふりをしてテストを行うことがよくあります。同じ人々が、障害を持つユーザーが同じポイントに到達できることもテストする必要があります。
  4. 障害を持つペルソナをエミュレートしながら、テストでポイント A から B または Z に正常に到達すると、多くのアクセシビリティ基準に正常に準拠することになります。

ペルソナとは何かを説明する前に、共感を明確にしましょう。簡単なことのように聞こえますが、「他人の立場になって考える」という言葉を何度も耳にします。まあ、人々はさまざまなレベルの共感を持っており、通常は自分の人生経験に影響されていることがわかっています.だから、それは簡単ではありません.

同情は共感ではない

また、共感が何を意味するかについてのさまざまな認識が物事を複雑にしています。私は多くの自発的な定義を聞いたことがあります。共感とは、大きな心を持っていること、何かについて感傷的であること、慈善家であること、または「行間」の感情を読み取ることです…はい、それだと思います会話の文脈によっては、それがすべてである可能性が非常に高いですが、それでも、前述のすべては共感よりも共感に近い. さて、 Web アクセシビリティについて話すとき、共感は幸運にも非常に現実的な問題です。たとえば、オンライン ストアフロントは、アクセスできるかできないかのどちらかです。言い換えれば、重要なジャーニーが成功しない場合、「半分アクセシブル」では意味がありません。実店舗の場合はそうではありません。障害のある買い物客は、買い物に行くことができるかできないかのどちらかです。

その事実をどのように「感じる」かに関係なく、店頭を使用できないユーザーのことを考えて、私たちの善意、考え、感情を注ぎ込んでも、店舗がよりアクセスしやすくなるわけではありません。それは同情です。いいね。モチベーションです。助けになる。それは意識を高めます。ただし、Web サイトにアクセスできるようにはなりません。

人々に共感を「誘導」するための私のいつもの話は次のとおりです。最初にリラックスした雰囲気を追加し、家族、友人、または時折の傍観者に囲まれたレストランやバーにいるふりをしましょう。通常、この話をするコンテキストです。

あなた(障害のないユーザー) がオンラインで簡単な製品を購入しているとします。たとえば、女性用の黄色のスカーフなどです。突然、コンピューターのマウスが機能しなくなり、バッテリーが切れて、チェックアウトを終了するためにマウスだけを使用する必要があります。キーボード。

共感への抵抗

もちろん、この共感の練習には常に抵抗があり、それは普通のことです。「マウスパッドが内蔵されたラップトップを使用している場合はどうなるか」というようなことを耳にしますが、それが問題ではないことに同意しましょう。ネズミを飼うような平凡なことに共感しなければならないのはナンセンスに聞こえるかもしれませんが、それはプロセス全体に関連しています。

私の話のこれらのカジュアルな聴衆の世代的要因を指摘しなければなりません。80 年代半ばにコンピューターを所有していたユーザーは、キーボードを使用して画面上を移動する方法を思い出すかもしれません。当時はボール マウスが導入され始めたばかりで、90 年代後半になるまで光学式マウスになりませんでした。市販されていますが、その数十年に生まれたユーザーは、キーボードのみのシナリオを想像して不意を突かれるかもしれません. おっしゃる通り、共感するのは簡単ではありません。

とにかく、例が同化され、人々が理論を投げかけ、キーボードのみを使用して画面上を移動する方法を覚えたり理解したりし始めると、チェックアウトを完了する方法についてのアイデア、計画、ロードマップ、つまり旅ができます。 .

さて、このキーボードの旅が理解できたら、複雑さを追加しましょう: このアイテムを何度も購入したとしましょう (全員に黄色のスカーフを用意します)。ねずみさん、「目を閉じたまま」でできるなんて…本当に?…それを試してみましょう:キーボード ナビゲーション + 目を閉じます。

障害を持つペルソナ

目を閉じる前に、ペルソナとは何かを定義しましょう。ユーザー エクスペリエンス (UX) デザインのコンテキストでは、「ペルソナ」は、より大きなユーザー グループのニーズと制限を表す目標と特性を持つ典型的なユーザーです。はい、ユーザーに顔を向けることは共感プロセスに役立ちます。「アクセシビリティのためのペルソナ」をグーグルで検索すると、すぐに利用できる多くのペルソナを見つけることができます。

とはいえ、バーでのカジュアルで単純化しすぎたストーリーテリングをフォローアップするために、この記事は長くなり始めているので (それほど多くを読む必要がないという点を見逃しています)、短いパラグラフでいくつかのペルソナを単純化しすぎてみましょう。障害のないユーザーが簡単にエミュレートできます。Janeと Johnは以前の記事から来ました。アクセシビリティの基盤の視点と期待を設定するときに、彼らは以前私を助けてくれました。

  • ジェーン:最近右手を骨折した右利きのユーザーは、キーボードのみのナビゲーションを使用する必要があり、自分が画面のどこにいるのかを知るために視覚に頼り、ユーザー インターフェイスの次の要素に移動します。
  • ジョン:目の不自由なユーザーで、キーボードのみのナビゲーションを使用し、スクリーン リーダーの発声を利用して自分の現在位置を把握し、ユーザー インターフェイスの次の要素に移動します。

ユーザーがストアフロントをナビゲートする方法はたくさんありますが、常により一般的なパスがあり、ストアフロントが実際に収益を上げているパスは、重要なユーザー ジャーニーです。キーボードのみのナビゲーションも例外ではないため、ストアフロントのアクセシビリティに関する記事の製品(女性用の黄色のスカーフ) に基づいて、平均的な非常にシンプルな旅に同意しましょう。

クリティカル ユーザー ジャーニー

テスト ユース ケース: ジェーンは自分用に黄色のスカーフを購入しようとしています。一方、ジョンはガールフレンドのために同じスカーフを買いたいと思っています。さらに明確にするために、ジェーンとジョンは関係がなく、お互いを知っているわけではありません。

Jane と Johnの両方にとって、女性用の黄色のスカーフを購入するための重要な旅は次のようになります。

タブで検索フィールドに移動 > 「黄色のスカーフの女性」と入力 > 最初の製品 (黄色のスカーフのふりをしています) に移動 > チェックアウト プロセスを開始します。

エミュレートまたはシミュレート?

ここまで読んでくれてありがとう。シミュレーションとエミュレーションの違いは微妙です。どちらにも「模倣」という言葉が含まれているので、その概念に固執しましょう。次の例では、エミュレーション ソフトウェアを使用するので、それをエミュレーションと呼びましょう。

さて、模倣は共感するための鍵であり、ジェーンとジョンが店先の黄色いスカーフに移動する方法にできるだけ近づける必要があります. どちらもキーボードのみのナビゲーションを使用することがわかっているため、チェックアウトを完了するには次のキーが必要です。

キーボード操作

  • タブ
  • Shift+Tab
  • スペース
  • 入力
  • 矢印キー。

わかりました、これは私があえてバーの聴衆とあなた、読者である場所です — 冗談です — ウェブ上にあるオンラインストアフロントのいずれか、またはいくつかを選択してください. しかし、最も重要なのは、女性用の黄色いスカーフを見つけて、ジェーンとジョンをエミュレートして、チェックアウトプロセスをできる限り進めようとするものです. とはいえ、「実際に」毎回スカーフを購入する必要はありません。

ジェーンをエミュレートする

Janeが使用するキーボード キーのみを使用して、重要なユーザー ジャーニーをたどります。

ジョンをエミュレートする

ChromeVox拡張機能を有効にすると、ついに!—目を閉じて、重要なユーザー ジャーニーをたどるには、発声が伝える内容に耳を傾け、Johnが使用するであろうキーボード キーのみを使用します。

一般的な問題

さまざまな種類のストアフロントのアクセシビリティでエミュレーション エクスペリエンスを比較すると、次のような問題に遭遇する可能性があります。 、色や価格など、製品の意味のある説明を聞くことができません。悲しいことに、これは非常に一般的であり、特定の Web サイトで Web アクセシビリティが欠如していることを示しています。

基準の遵守

用語の明確化: 基準は複数形です。基準は特異です。

ここで、Jane & Johnをエミュレートしてチェックアウト プロセスを正常に終了できた場合、そのストアフロントは次のWCAG 2.0基準に準拠しています。

Jane と John の成功したエミュレーションの 16 の基準を示す表 (キーボード、キーボード トラップなし、バイパス ブロック、フォーカス順序、一貫したナビゲーション、フォーカス表示、非テキスト コンテンツ、情報と関係、ページ タイトル、リンクの目的、ページの言語、フォーカス、エラー識別、解析、見出しとラベル、エラー防止)。最初の 6 つの条件はジェーンとジョン用で、残りの 10 個はジョン専用です。

ほとんどの基準がレベル A で、レベル AA が 2 つしかないことに注目してください。私の意見では、上記は「初心者向け」に準拠するための最も重要な基準です。それらの上に、より豊かなユーザー エクスペリエンスを構築するための基盤を設定します。たとえば、レベル AA の基準をさらに追加したり、点字ディスプレイなどの他の支援技術をプラグインしたりします。色、テキストサイズ、ビデオ、オーディオの使用に関するものなど、「より単純な」基準とは別に、それらを難しい部分と考えてみましょう。

さて、バーでの話はここまで。Jane & Johnとしてエミュレーションを終了できたかどうかのどちらかです。少し試しただけでも、乾杯に値します。もうお気づきかもしれませんが、目を閉じると、ストアフロントのアクセシビリティの問題がどこにあるかが「見え」始めました。それでは、乾杯!あなたが何を飲んでいても。

結論は

  1. 共感を持って「歩き回る」ことで、ストアフロントのアクセシビリティを検証できます。
  2. オンライン ストアフロントを計画、開発、およびテストする場合、上記の 16 の基準に関連するバグを除去するためのプロセスの努力は、障害のあるユーザーのチェックアウトを容易にします。
  3. Web 開発者は、QA テスターに​​引き渡す前に、アクセス可能な重要なユーザー ジャーニーが実際に機能することを確認する必要があります。
  4. 最良の検証ツールは共感です。
  5. 目を閉じることで、問題がどこにあるかを「見る」ことができる場合があります。
  6. 障碍のある買い物客は、実店舗と同じようにオンラインで購入できる必要があります。
  7. 生涯、最良のシナリオで障害を免れる人は誰もいません。
  8. Web アクセシビリティは、訴訟のシナリオになる前に、リードからキャッシュへの戦略におけるビジネス チャンスと見なされるべきです。