悬停聚焦

有些内容是短暂的：它在页面顶部的图层中显示为弹出窗口。 当用户将鼠标悬停在触发器元素上或使用键盘聚焦触发器时，将显示弹出窗口。

通常，弹出内容充当自定义工具提示，解释图标的含义或扩展缩写。在其他情况下，弹出内容会提供附加信息，例如词汇表定义或链接的某种内容预览。

Content on hover or focus in action §

悬停聚焦内容的典型可用性问题 §

对于使用强缩放放大率（在浏览器中；通过操作系统的辅助功能设置；或使用 ZoomText 或 SuperNova 等专用放大软件）的视力不佳的人来说，悬停或聚焦时弹出的内容通常是个问题。

关闭弹出内容的问题 §

当用户放大时，只有一小部分屏幕作为放大部分仍然可见。当内容在这里弹出时，它通常会隐藏用户想要阅读或与之交互的内容。因此，能够关闭此弹出内容很重要。

当人们使用放大软件时，可见的放大部分通常位于键盘聚焦元素的鼠标光标正中的位置。如果内容弹出并且用户想要关闭它，他们可能看不到关闭控件 - 而且，通过移动焦点，他们会丢失他们正要阅读的内容。这就是为什么能够在不移动当前焦点的情况下关闭弹出内容很重要 - 例如，通过按退出键 (ESC)。

阅读不完全可见的弹出内容时出现问题 §

另一个经常出现的问题是弹出的内容往往比当前可见的放大部分要大。想要阅读弹出内容的用户必须能够将鼠标移到它上面而内容不会自动关闭。通常，用户会发现一旦他们将鼠标从触发器上移开，内容就会消失——因此他们无法阅读内容。

弹窗内容突然消失的问题 §

一些弹出内容会在一段时间后自动关闭。用户应该有足够的时间阅读弹出内容——它必须保持可见，直到它被用户故意关闭（或用户将键盘焦点移到别处）。不再有效的内容除外（例如，有关已过期的拍卖的信息）。

案例 §

• 行动不便：阅读悬停时可见的内容
• 低视力和放大镜：阅读悬停时可见的内容
• 认知：在悬停或聚焦时阅读内容并理解上下文

How should the dismissal of hover / focus content be implemented? §

The new WCAG 2.1 Success Criterion 1.4.13 Content on hover or focus is a very recent addition to the standard. There is some uncertainty what authors should do to make content on hover or focus dismissible.

If content is shown via CSS (via the a:hover and a:focus pseudo-classes), the ESC key may not work properly when the focus still hovers or rest on the trigger. It would work if the pointer is moved over the content, away from the trigger. Activation of the trigger to close the content is conceivable, but it would not be applicable to links, since the activation of the link would at the same time leave the context of use.

This needs experimentation - Sufficient Techniques for this Success Criterion are still in development. One consequence could be that content on hover or focus should be triggered via scripts rather than via CSS pseudo-classes to prevent a situation where the content pops up again straight after dismissal.

悬停聚焦内容的可用性功能提示 §

• 仅在悬停或焦点时出现的弹出内容不会在许多设备上显示。这包括带触摸屏的设备（手机、平板电脑）。不要只在悬停或焦点内容中显示关键信息。考虑显示有关激活而不是聚焦触发器的其他内容。
• 在使用指针悬停在触发器上时以及使用键盘聚焦触发器（使用 Tab 键）时显示弹出内容。为了使键盘用户可以访问内容，触发器应该是键盘可聚焦的元素（如按钮或链接）。
• 对作为工具提示弹出的内容使用 tooltip 角色。
• 对于提供图标名称的工具提示，请在触发器上使用 aria-labelledby 。一个例子是齿轮图标的名称“设置”。这将使屏幕阅读器在触发器接收到键盘焦点时阅读工具提示。 （请注意，在某些浏览器中， aria-labelledby 可能无法处理像 div 这样的元素，这些元素不是本机交互的，或者没有像 role="button" 那样分配给它的适当角色。）
• 如果工具提示包含其他文本，请为标签提供（隐藏）文本并通过 aria-describedby 连接内容——比较 Heydon Pickering 关于工具提示和切换提示的文章。
• 确保指针可以移到弹出内容上，远离触发器，而内容不会关闭。
• 以一种可以在不改变焦点的情况下将其关闭的方式在悬停和焦点上实现内容（例如，通过像 ESC 这样的键盘快捷键）。但请参阅上面关于取消悬停/焦点内容的说明。

延展阅读 §

• Tooltips & Toggletips (Heydon Pickering, Inclusive Components, July 2017)
• Building a fully-accessible help tooltip (Sara Soueidan, Personal blog, January 2017)
• Tooltip widget (work in progress - WAI-ARIA Authoring Practices 1.1)