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