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

ツールチップの理解

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

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

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

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

1. アイコンラベル：

   簡(jiǎn)単なラベル（1つまたは2つの単語(yǔ)）の場(chǎng)合、 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>

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

   aria-describedby本質(zhì)的な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：

またはを適切に使用します 現(xiàn)在の畫(huà)面リーダーのサポートが制限されていても、

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

with

（ツールチップは非相互作用）を使用します ツールチップ內(nèi)に必須コンテンツを配置します。スクリーンリーダーは、関連するARIA屬性を無(wú)視する場(chǎng)合があります

制限と代替案

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

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

WCAG 2.1（Sarah Higley）の時(shí)代のツールチップ

<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>

以上がツールチップベストプラクティスの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。