キーボードナビゲーションでツールチップを表示する正しい方法はありますか？
Gmailでは、キーボードナビゲーションに関するツールチップが表示されます。私の質問は、ツールチップをキーボードナビゲーションに表示できるかどうかです。
答えはyesです。ユーザーがサイトにどのようにアクセスしているかに関係なく、ユーザーにできるだけ類似したエクスペリエンスを提供する必要があります。以下は、特に アクセシビリティとホバー情報 に関するGoogleマテリアルの引用です。
キーボード/マウスインターフェイスには、すべてのタスクとすべてのホバー情報がキーボードのみでアクセスできる必要があります。
@SteveDがコメントで述べているように、「2.1キーボードアクセス可能なWCAG 2.0」の要件でもあります。
コンテンツのすべての機能をキーボードまたはキーボードインターフェースを介して操作できる場合、視覚のないユーザーも、音声入力ソフトウェアや画面上のキーボードエミュレータとして機能する代替キーボードや入力デバイスを使用する必要があるユーザーも操作できます。キーボード。
アクセシビリティのために、システム/製品は、マウスとキーボードの両方のユーザーにツールチップを表示できる必要があります。
howを機能させるために（ここではStack Overflowで実際に確認する必要があります）について質問している場合、CSSおよびJQueryの：focus疑似クラスが探しているものです。 。
キーボードのヘビーユーザーとして経験したツールチップに関する最も素晴らしい経験は、最近 ESTAアプリケーションプロセス を偶然見つけたときでした。
私はマウスを使いたくないので、ほとんどのコストでフォームを強制的にタブで移動します。しかし、各フォーム入力に添付されたツールチップボタンが tabindex property の増分をハイジャックしたことに気づいたとき、私はうれしい驚きをしました。
その結果、最初のタブプレスはツールチップに焦点を当てて開き、2番目のタブプレスは実際のフォーム入力に焦点を合わせました。これは、次のフォーム入力に進むために2回のタブプレスを効果的に使用したことを意味します。ボタン。
全体として、驚くほど素晴らしい（そしてアクセス可能な）実装（関連する WCAG 2.0ガイドライン に準拠しているという点で）。 特にESTAアプリケーションプロセスには、ユーザー（多くの場合、私のような外国人）がツールチップで説明を取得します。
（申し訳ありませんが、ジャガイモgif-スクリーンキャプチャは私の最大の資産ではありません）