工具提示最佳實踐

本指南總結了可訪問工具提示的最佳實踐，從領先的可訪問性專家繪製。

理解工具提示

工具提示為UI元素提供了簡短的文本提示，並出現在懸停或焦點上。 簡潔的定義：一種非模式覆蓋層，提供有關UI控件的補充，描述性文本。 至關重要的是，可訪問的工具提示包含 描述性文本，而沒有交互式元素。 如果需要互動，請改用對話框。

>

>兩種工具提示

>工具提示可實現兩個主要目的：

1. >圖標標籤：用於簡短標籤（一個或兩個單詞），使用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中。

   <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即使使用
>；未來的支持可能會有所改善。
• role="tooltip">在鼠標上/焦點上打開，關閉鼠標out/blur。
>
• >在懸停在其內容上時的工具提示。
>
• >通過逃生鍵啟用鍵盤閉合（WCAG 1.4.13）。
>

>

> 使用

>屬性（它具有重大可訪問性問題）。 >

使用
• （工具提示是非相互作用的）。 title>將基本內容放入工具提示中；屏幕讀取器可能會忽略相關的ARIA屬性。
• aria-haspopup限制和替代方案role="tooltip" 由於缺乏懸停和焦點，
工具提示本質上無法接觸設備。 最好的解決方案通常是將標籤或描述直接集成到設計中。 對於廣泛的內容（包括交互式元素），請考慮使用toggletip或a
• 元素。 toggletips通常由“ I”圖標表示，使用
。

有關toggletips的更多信息，請參閱下面的資源。

>

進一步閱讀<dialog></dialog> role="status"

澄清彈出式和對話之間的關係（Zell Liew）

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

>工具提示和toggletips（包含組件）

WCAG 2.1時（Sarah Higley）

工具提示

關於Aria-Label，Aria-Labelledby和Aria描述的簡短說明（LéonieWatson）

> 與HTML對話框元素（Chris Coyier）

以上是工具提示最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！