ツールチップのアクセシビリティに関しての考察
ken7253基本的なツールチップ
とりあえずAPGのガイドを確認してみる。
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.
ツールチップは、要素がキーボードフォーカスを受けるか、マウスがその上に置かれたときに、要素に関連する情報を表示するポップアップです。通常、少し遅れて表示され、エスケープが押されるかマウスアウトすると消えます。
Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.
ツールチップ・ウィジェットはフォーカスを受けません。フォーカス可能な要素を含むホバーは、非モーダルダイアログを使用して作成できます。
ken7253Keyboard Interaction
Escape: Dismisses the Tooltip.
エスケープキーを押すとツールチップが非表示になる。
（キーボードフォーカスで表示されている場合？）
ken7253WAI-ARIA Roles, States, and Properties
The element that serves as the tooltip container has role tooltip.
The element that triggers the tooltip references the tooltip element with aria-describedby.
-
role='tooltip'を設定 -
aria-describedbyでツールチップのコンテンツが参照できるようにする
ken7253NOTE: This design pattern is work in progress; it does not yet have task force consensus. Progress and discussions are captured in issue 128.
今後推奨が変わることがありそう。
ken7253ツールチップ・ウィジェットはフォーカスを受けません。フォーカス可能な要素を含むホバーは、非モーダルダイアログを使用して作成できます。
インタラクティブなコンテンツを含む場合は、モードレスダイアログという扱いにしたほうがよさそう。
ken7253- hoverで表示したツールチップの文字がコピペできない
- モバイルデバイスの考慮漏れ
- hoverのみで表示されるように設定されているとタッチ操作ができない
ken7253WCAGの基準にも言及があった。