工具提示最佳实践

本指南总结了可访问工具提示的最佳实践，从领先的可访问性专家绘制。

理解工具提示

工具提示为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中文网其他相关文章！