より多くの人のために。アクセシビリティを考慮したショートカットキーを設計しよう！ | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
Adobe XDにキーボード入力によるインタラクションのサポートが追加され、Webプロトタイプを操作する手段がひとつ増えました。一部の人、特に運動障害によりマウスやトラックパッドを使用できない人にとって、キーボードはWebインタフェースを操作する重要な手段です。単に「近道」として使う人もいるかもしれませんが、不可欠なツールとして使う人も存在します。
この記事では、4人のアクセシビリティーの専門家の視点からの、キーボード操作をUIに実装する際に役立ついくつかのヒントを紹介しましす。これらのアドバイスがあれば、より使いやすいキーボード体験を実現することができるでしょう。
アクセシビリティ標準に準拠する
キーボード操作を設計する際には、障害者のニーズを考慮することが重要です。
アドビのアクセシビリティエンジニアリングリードであるマイケル・ジョーダンは、W3CのWAI-ARIA 1.1 Authoring Practices、特にDeveloping a Keyboard Interfaceというセクションを参照することを提言します。アクセシビリティを念頭にキーボードインターフェイスを設計する際に考慮すべき点についての概要が説明されている箇所です。
マイケルによると、5.9.1.3 Choose Where to Add Shortcutsには優れたポイントが書かれています。
キーボードインターフェイス設計の最初の目標は、基本的なキーボードナビゲーションだけをサポートした、シンプルで効率的で直感的な操作の実現です。キーボードインターフェイスの基本操作が非効率な場合には、キーボードショートカットの実装により最適でないレイアウトやコマンドの構造といった設計上の問題を補正しようとしても、ユーザのフラストレーションを軽減することはできません。これが意味しているのは、よく設計されたほとんどのユーザインタフェースでは、最適なユーザビリティのためにキーボードショートカットを介してアクセスできる必要がある機能の割合がそれほど高くないということです。大抵の単純なユーザインタフェースには、キーボードショートカットはまったく不要でしょう。また、キーボードショートカットがあまりに多いユーザーインターフェイスは、認識負荷の発生により、便利なショートカットを覚えることが難しくなります。
The Paciello GroupのUXリサーチリードであるデビッド・スローンはこれに同意して、W3Cの文書にはキーボードの振る舞いに関する有用な定義が含まれていると述べています。彼はまた、Heydon PickeringのInclusive Componentsサイトを、さまざまなUIコンポーネントにキーボードサポートを提供する方法を理解するための優れた場所として勧めています。
Inclusive Componentsの記事は、一般的に使われるインターフェースのコンポーネントを取り上げ、より優れた、堅牢でアクセシブルなバージョンを紹介している
シンプルに保つ
マイケルは、要素間をナビゲートするのにTabキーとShift+Tabキー以上は不要なはずで、TableView、Grid、Listなどの複合コントロール内の操作には矢印キーや、場合によってはPageUp/PageDown/Home/Endを使うこともあるかもしれないとアドバイスします。
「Adobe Acrobatのように多くのパネルが配置される複雑なアプリケーションでは、パネル間の移動にF6キーを使用するといったこともあるかもしれません」と彼は説明します。「しかし、例えば、前のアイテムや次のアイテムに移動するためにJやKを使用するなど、アプリケーション固有のナビゲーションの利用は私は避けるようにしています。認識負荷が発生しますし、スクリーンリーダーが使用するナビゲーション用のキーと競合する場合もあります」
現在Sportのリンクにキーボードのフォーカスがあることを表示しているBBC Newsサイトのナビゲーション
ショートカットの存在をユーザーに認識させる
デザイナーや指導者として活躍し、責任あるイノベーションを提唱するパー・アクスボムは、ショートカットはサービスとのインタラクションを改善する、楽しくて包括的な方法になり得ると言います。しかし彼は、利用可能なショートカットの存在を人々に認識させることが最大の課題かもしれないと警告します。
「利用可能なショートカットを全部確認できるチートシートを、いつでも簡単に取り出せるようにしておきましょう。良く使われる方法は、”?” をそのためのショートカットにすることです。ログインしているユーザーには、ショートカットを変更できるようにすることも検討すべきです」
パーは、キーボードショートカットが提示されている間に簡単な使い方のガイドを表示することも検討するよう勧めています。その際に、キーボードショートカットを変更する手段をオプションとして提供するのも良い案だと言います。
「それから、メニューやツールチップにもショートカットを表示することを忘れないでください。知られていなければ使われることはありません」
Atlassianは、共有ワークスペースツールConfluenceに、簡単なショートカットの一覧を提供している
ブラウザやスクリーンリーダーとの競合を避ける
独自のキーボードショートカットを検討しているのであれば、デビッドが推奨する手順は、様々なスクリーンリーダーとブラウザの組み合わせでプロトタイプを検証し、ユーザーが期待しているるとおりに機能するかを確認することです。
「画面を読み上げてくれるソフトウェアには、ユーザーが依存している重要なキーボードコマンドが実装されています。つまり、アプリケーションはそれらと競合することなく、共存できなければなりません」
パーもこれに同意して、ブラウザや、同時にアクティブになっている他のすべてのツールとの競合を回避することの重要性を強調しています。
「私が提案したい方法は、修飾キーを使用しない1文字または2文字のショートカットキーです。2文字のショートカットの有利な点は、他と被らない可能性が高く、素早く入力でき、意味を伝えられることです。また、『移動する場合は “go to” の “g” を使う』のような規則を適用し、”ホームページ（Home）に移動” には “gh”、”連絡先ページ（Contact）に移動” には “gc” のようなショートカットを定めることもできます。オプションとして、homeやcontactの単語全体を入力するショートカットを組み合わせてもよいでしょう。『1つのアクションには1つのショートカットだけ』のような制限をする理由はありません」
フォームにテキストを入力する場面では、文字のショートカットは使えません。パーは、フォーム内では編集モードを簡単に終了する方法を提供するか、OptionやAltキーのような修飾キーを使う必要があることを忘れないようにと忠告しています。
フォーカスの管理
ビジュアルデザインをする場合は、コントロールにキーボードフォーカスがあたっている状態の外観をデザインすることを忘れないでください。
「キーボードフォーカスを視覚的に『明確に』示すことは、すべてのキーボードを使用するユーザー、特に視力の弱いユーザーにとって重要な操作性のガイドになります」とデイビッドは指摘します。「フォーカスのある位置を追跡するのにも役立ちますし、誤ってコントロールを操作する可能性を減らすことができます」
Shopifyで開発者支援リーダーを務めるティファニー・ツェも、キーボードフォーカスの扱いに対する考慮は不可欠であると強調します。誰かがタブキーを使ってWebページのコンテンツをナビゲートしているとき、フォーカス管理、すなわちその操作が持つ意味は全体として保持されるべきです。
キーボードトラッピング
ティファニーはWeb Content Accessibility Guidelines (WCAG)を参照して、キーボードトラッピングの回避について話しました。キーボードを使ってページ内のコンポーネントにフォーカスを移動したときは、キーボードを使用してフォーカスをコンポーネントの外に移動できるべきだと言います。
「必ずしもフォーカスをコンポーネント内に閉じ込めることが悪いという意味ではありません。」とティファニーは説明します。「フォーカスがそこから抜け出すための手段を忘れさえしなければ良いのです」
次の例では、「Add to Cart」ボタンにTabキーで移動してからReturnを押すと、マウスで「Add to cart」をクリックしたときと同じアクションが実行され、画面右にカートのパネルが表示されます。もう一度Tabキーを押すと、クローズボタンにフォーカスが設定されます。
「Add to Cart」 ボタンに移動して「Return」をクリックすると、パネルが開く
その後は、フォーカスがカートのパネル内に閉じ込められます。Tabキーを押すと、フォーカス可能な要素間を何度もループします。クローズボタンにフォーカスを移動すれば、パネルを閉じてフォーカストラッピングから抜け出すことができます。これはパネルを開いたときと同様のナビゲーション手段です。
フォーカスはカートパネルに閉じ込められ、フォーカス可能な要素間をループする
おわりに
キーボードのベストプラクティスの詳細について更に知りたい場合は、デイビッド・スローンとサラ・ホーテンによる2部構成の記事、およびニールセン・ノーマングループによるUI Copy: UX Guidelines for Command Names and Keyboard Shortcutsをご覧ください。忘れてならないのは、シンプルにすること、デザインをテストすること、ユーザーがコンテンツにどのようにアクセスしているかを考慮することです。一部の人のためではなく、より多くの人のためにデザインしましょう。
この記事はBest Practices for Prototyping Keyboard Accessibility（著者:Oliver Lindberg）の抄訳です