CSS专用工具提示的可访问性

Question

我为CSS专用工具提示- http://chantastic.github.io/tip.css/提供了辅助功能指南。

这就是你使用它的方式：

<span data-tip-content="this is a tip" data-has-tip>Hover here</span>

当前API

为了避免浏览器默认呈现title，我使用data-tip-content作为工具提示文本。通过这样做，我也失去了title (Related SO Question)的可访问性好处。

我现在的工作

我想添加aria-label作为内容源，如下所示：

<span aria-label="this is a tip" data-has-tip>Hover here</span>

我的问题

在这种情况下，aria-label有意义吗？是否有一个可访问性的兴趣，这将不涵盖？

我是非常新的无障碍，并将感谢经验为基础的反馈。谢谢。

如果您认为有更好的解决方案，请考虑以下限制：

• CSS只适用于。许多JS工具提示只是简单地删除和恢复title-attr on mousenter/mouseleave。我对JS解决方案不感兴趣。
• 没有附加标记。这个库的目的是最小化和简单。它使用:after、:before和content来避免对附加标记块的要求。
• 双属性API.这个库只需要添加两个属性。

Answer 1

aria-label属性指定元素的标签，通常是输入元素的可访问名称，否则会缺少显式标签，因为用户需要从可视上下文推断其角色。虽然它的描述引用了HTML属性和工具提示，但它实际上并不适用于像title工具提示这样的东西。相反，标记元素是有用的，而不是使用title属性，这在这种使用中有一些缺点。

然而，不幸的是，没有更合适的ARIA属性。存在着奇怪的不对称性: ARIA有直接标记的aria-label和间接标记的aria-labelledby，即指定包含当前元素标签的元素，但是对于描述，只有间接aria-describedby。

因此，考虑到您当前的方法和标记，这可以归结为使用aria-label。在另一种方法中，工具提示文本是元素内容而不是属性值，您可以使用aria-describedby。

在这里，属性data-has-tip看起来是多余的，因为您可以在CSS和脚本中只使用data-tip-content属性。