ツールチップベストプラクティス

このガイドは、アクセス可能なツールチップのベストプラクティスを要約しています。

ツールチップの理解

ツールチップは、HoverまたはFocusに表示されるUI要素の簡単なテキストヒントを提供します。 簡潔な定義：UIコントロールに関する補足的な記述テキストを提供する非モーダルオーバーレイ。 重要なことに、アクセス可能なツールチップには、

のみののみの説明的なテキストが含まれており、インタラクティブな要素が含まれていません。 インタラクティブが必要な場合は、代わりにダイアログを使用します。

2つのツールチップタイプ

ツールチップは、2つの主な目的を果たします

1. アイコンラベル：

   簡単なラベル（1つまたは2つの単語）の場合、 aria-labelledby

   <button aria-labelledby="notification-count notification-label">
       <span id="notification-count">3</span>
       <span id="notification-label">Notifications</span>
   </button>
   <div role="tooltip" id="tooltip-label">Notifications</div>

   コンテキスト説明：
長い説明の場合は、
2. を使用してください。 アイコン自体には、要素内の隠されたテキストとして理想的に含まれるアクセス可能な名前が必要です。

   aria-describedby本質的なdoとnots

   <button aria-describedby="tooltip-description">
       <span style="display:none;">Notifications</span>
       <span aria-hidden="true">?</span>
   </button>
   <div role="tooltip" id="tooltip-description">View and manage notification settings</div>

do：

またはを適切に使用します 現在の画面リーダーのサポートが制限されていても、

を使用します。将来のサポートは改善される可能性があります
• マウスオーバー/フォーカスで開いて、マウスアウト/ぼかしで閉じます。aria-labelledby aria-describedbyコンテンツをホバリングするときにツールチップの解雇を防止します
エスケープキーを介してキーボードの閉鎖を有効にします（WCAG 1.4.13）
• role="tooltip"
しないでください：

with

（ツールチップは非相互作用）を使用します ツールチップ内に必須コンテンツを配置します。スクリーンリーダーは、関連するARIA属性を無視する場合があります

制限と代替案

• ツールチップは、ホバーとフォーカスが不足しているため、デバイスをタッチするために本質的にアクセスできません。 最良の解決策は、多くの場合、ラベルまたは説明をデザインに直接統合することです。 広範なコンテンツ（インタラクティブな要素を含む）については、ToggletipまたはAtitle要素を検討してください。 しばしば「i」アイコンで示されているトググレットは、
。
• aria-haspopupToggletipsの詳細については、以下のリソースを参照してください role="tooltip"さらに読み取り
ポップオーバーとダイアログの関係を明確にする（Zell Liew）

ツールチップとTogGletips（包括的コンポーネント）

WCAG 2.1（Sarah Higley）の時代のツールチップ

<dialog></dialog> aria-label、aria-labelledby、およびaria-describedby（LéonieWatson）に関する短いメモrole="status" HTMLダイアログ要素（Chris Coyier）

を使用したいくつかのハンズオン

<button aria-controls="toggletip-content">
    <span aria-hidden="true">ⓘ</span>
</button>
<div id="toggletip-content" role="status" aria-live="assertive" style="display:none;">This clarifies whatever needs clarifying</div>

以上がツールチップベストプラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。