キーボードのみの支援技術ユーザー向けのUX最適化
公開: 2022-03-10（これは後援された記事です。）アクセシビリティの優れた点の1つは、通常の視覚的なマウスベースのユーザーエクスペリエンスを超えて、アプリケーションを見て考えなければならないことです。 キーボードのみ（KO）や支援技術（AT）を介してナビゲートするユーザーは、アプリケーションの情報アーキテクチャが思慮深いだけでなく、アプリケーションがすべてのタイプのユーザーのエクスペリエンスを可能な限り単純に保つためのアフォーダンスに大きく依存しています。
この記事では、他のユーザーのエクスペリエンスを実際に変更することなく、KO / ATユーザーエクスペリエンスを向上させることができるアフォーダンスのいくつかについて説明します。
アプリケーションのUXへの追加
これらは、KO / ATユーザーのUXを改善するためにアプリケーションに追加できる機能です。
リンクをスキップ
スキップリンクは、Webサイトまたはアプリケーションの上部に目に見えない形で配置されるナビゲーション機能です。 存在する場合、それは呼び出され、アプリケーションの最初のタブストップに表示されます。
スキップリンクを使用すると、ユーザーはアプリケーション内のさまざまな関心のあるセクションにタブサイクルすることなく「スキップ」できます。 アプリケーションに複数の関心領域がある場合、スキップリンクには複数のリンクを含めることができます。これは、ユーザーがアプリケーションのエントリポイントにすばやくアクセスできるようにする必要があると思われる場合です。
KO / ATユーザーにとって、これは、アプリをすばやくトラバースできるようにするだけでなく、アプリケーションの情報アーキテクチャにユーザーを向けるのに役立つ便利なツールです。 他のすべてのユーザーにとって、この機能が存在することすら知らない可能性があります。
スキップリンクの処理方法の例を次に示します。 リンクをクリックした後、 Tab⇥を押して左上隅を確認します。 スキップリンクには、メインコンテンツとコードサンプルの2つのリンクがあります。 Tab⇥を使用してそれらの間を移動し、 Enterキーを押してリンクに移動できます。
ショートカット/ホットキーメニュー
これは、ショートカットとホットキーという、誰もがよく知っている機能だと思います。 たまに使用したことがあると思いますが、アプリケーションのパワーユーザーの間で非常に人気があり、さまざまな形で登場します。
KO / ATユーザーにとって、ショートカット/ホットキーは非常に貴重です。 それらは、要素またはコンテンツに到達するためにアプリケーションを介して視覚的に何かまたはタブをターゲットにする必要なしに、意図したとおりにアプリケーションを使用することを可能にします。 ショートカット/ホットキーメニューに表示される場合、頻繁なアクションとコンテンツは常に評価されますが、UIに埋め込まれている可能性があるが、ユーザーが望んでいる、少し頻度の低いアクションも検討することをお勧めします。アクセスできるようになります。
これらの機能のショートカットを作成すると、KO / ATユーザーにとって非常に役立ちます。 （3）キーストロークを使用してコマンドを呼び出すなど、コマンドをもう少し複雑にして、使用頻度の低い機能であることを示すことができます。 ショートカット/ホットキーメニューがある場合は、アプリケーションでそれを宣伝する方法を見つけて、ユーザー、特にKO / ATユーザーがそれを見つけて効果的に使用できるようにしてください。
ユーザー教育
ユーザー教育とは、何をするか、どこに行くか、何を期待するかをユーザーに指示する機能の一部を指します。 ツールチップ、指摘、情報バブルなどはすべてユーザー教育の例です。
ユーザー教育用のコピーをデザイン、配置、および/または作成するときに自問する必要があることの1つは次のとおりです。
「これが見えなかったとしても、______を理解することは価値がありますか？」
多くの場合、それはそのレンズを通してユーザー教育の方向を変えるだけであり、それはすべての人にとってはるかに良い体験につながる可能性があります。 たとえば、「次へ、下のボタンをクリックしてください」と言うのではなく、「開始するには、[スタート]ボタンをクリックしてください」と書くことができます。 2番目の方法は、視覚的な向きを取り除き、代わりに、目の見えるユーザーとKO / ATユーザーの両方が自由に使える共通の情報に焦点を合わせます。
注：ポイントアウトなどのユーザー教育機能を使用して、アプリケーション上のものを視覚的に指摘することはまったく問題ありません。コンパニオンテキストによって、KO / ATユーザーが視覚的に参照されるものと同じものを理解できるようにしてください。
HarrisSchneidermanによるPenftpoデモを参照してください。
アプリケーションのUXの強化
KO / ATユーザーのUXを改善するために、一般的なコンポーネント/機能に変更または微調整を加えることができます。
モーダルフォーカシング
今、私たちは核心に迫っています。 アクセシビリティの優れた点の1つは、これまで考えたことのない問題を解決するための新しい方法への扉を開く方法です。 何かを完全にWCAG2.0 AAにアクセス可能にし、非常に異なるアプローチで問題を解決することができます。 モーダルの場合、Dequeは、ほとんどの視力のあるユーザーにはまったく見えないが、KO / ATユーザーにはほとんどすぐに気付く興味深いアプローチを考え出しました。
モーダルにアクセスできるようにするには、呼び出されたときにそれ自体をアナウンスする必要があります。 これを行う2つの一般的な方法は、モーダルが開いた後にモーダルのボディにフォーカスするか、モーダルが開いた後にモーダルのヘッダー（ある場合）にフォーカスすることです。 これを行うと、ユーザーのATは、「プロファイルの編集」や「新しいサブスクリプションの作成」などのモーダルの意図を読み取ることができます。
本文またはヘッダーにフォーカスを合わせた後、 Tab⇥を押すと、モーダル内の次のフォーカス可能な要素にフォーカスが送信されます。通常はフィールド、またはヘッダーにある場合は閉じるボタン（X）です。 タブを続行すると、モーダル内のすべてのフォーカス可能な要素を移動します。通常は、[保存]や[キャンセル]などのターミナルボタンで終了します。
ここで、興味深い部分に行き着きます。 モーダルの最後の要素にフォーカスした後、 Tab⇥をもう一度押すと、最初のタブストップに戻ります。モーダルの場合は、ここから開始したため、本文またはヘッダーのいずれかになります。 ただし、モーダルでは、最初のタブストップを「スキップ」して、2番目のストップに移動します（モーダルでは、上隅のクローズ（X）です。これは、モーダルがそれ自体をアナウンスし続ける必要がないためです。各サイクルで何度も繰り返します。最初の呼び出しでのみ実行する必要があり、その後のトリップでは実行する必要がないため、最初の後にスキップする特別なプログラムによる停止があります。
これは、KO / ATユーザー専用に考案した小さな（しかしありがたい）使いやすさの向上であり、他の人にはまったく知られていません。
HarrisSchneidermanによるペンモーダルデモを参照してください。
ナビゲーションメニュートラバースとフォーカス/選択された管理
ナビゲーションメニューには注意が必要です。 それらは、さまざまな方法で構造化され、階層化され、ネストされ、呼び出し、開示、およびトラバースの無数のメカニズムを備えています。 これにより、設計段階でKO / ATユーザーとどのようにやり取りし、表現するかを検討することが重要になります。 優れたメニューは「入力」および「終了」する必要があります。つまり、メニューにタブで移動して使用し、タブから外して終了します（使用しない場合）。
このアイデアは文字通りの例で最もよく示されているので、大釜からの2層の垂直ナビゲーションを見てみましょう。
- https://pattern-library.dequelabs.com/にアクセスします。
- タブ⇥を3回押します。 最初のタブストップはスキップリンク（前に説明しました）、2番目は「ホームに戻る」リンクとして機能するロゴ、3番目のタブはメニューに入ります。
- メニューが表示されたら、矢印キー（ →および↓ ）を使用してメニューのセクションを移動して開きます。
- いつでもタブ⇥を押すと、メニューが終了し、ページのコンテンツに移動します。
ナビゲーションメニューは、ショートカット/ホットキーメニューなどの以前のトピックのいくつかと連携して機能し、メニューの使用をさらに効率化することもできます。
論理フォーカス保持（つまり、行の削除、ページに戻る）
フォーカスの保持は非常に重要です。 ほとんどの人は、少なくとも概念的には、ページ上で論理的に意図された順序で要素に焦点を当てることに精通しています。 ただし、要素またはコンテンツが変更/表示/非表示になると、あいまいになる可能性があります。
- あなたがいるフィールドが削除されたとき、フォーカスはどこに行きますか？
- アプリケーションに新しいコンテキストがある別のタブに移動した場合はどうでしょうか。
- SAVEのようなターミナルアクションのためにモーダルが閉じられた後はどうですか？
目の見えるユーザーには、何が起こったのかを知らせる視覚的な手がかりがあります。
次に例を示します。ユーザーが材料を追加および削除できるレシピ編集モーダルがあります。 その下に「別の材料を追加」ボタンがある1つの材料フィールドがあります。 （はい、リンクとしてスタイル設定されていますが、それは別の日のトピックです。）あなたの焦点はボタンにあります。 ボタンをクリックすると、ボタンと最初のフィールドの間に新しいフィールドが表示されます。 焦点はどこに行くべきですか？ ほとんどの場合、ユーザーはそれに従事するために別の材料を追加したので、フォーカスはボタンから新しく追加されたフィールドに移動する必要があります。
HarrisSchneidermanによるペンフォーカスの保持を参照してください。
これらすべてからの大きなポイントは、具体的な例ではなく、それらをサポートする考え方です。KO/ ATユーザーと、視力のあるマウスのみのユーザーのレンズを通して、アプリケーションのUXを検討してください。 最高で最も賢いアイデアのいくつかは、最も興味深く重要な課題から生まれています。
機能にアクセスできることを確認するためのサポートが必要な場合は、上記のすべての例に加えて、Dequeの無料のWebアクセシビリティテストアプリケーションであるaxproを使用してさらに数え切れないほどの例をテストできます。 無料で、ここからサインアップできます。