仅限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上的mousenter/mouseleave - attr。我对JS解决方案不感兴趣。
• 无额外加价。该库旨在简化和简单。它使用:after，:before和content来避免需要额外的标记块。
• 双属性API 。该库只需要添加2个属性。

Answer 1

aria-label属性为元素指定标签，通常是输入元素的可访问名称，否则将缺少显式标签，因为用户需要从中推断其角色视觉背景。虽然它的描述引用了HTML title属性和工具提示，但它并不真正意味着用于CSS工具提示之类的东西。相反，它有助于标记元素而不是使用title属性，这在使用中有一些缺点。

然而，遗憾的是，没有更适合的ARIA属性。奇怪的不对称：ARIA有aria-label用于直接标记，aria-labelledby用于间接标记，即用于指定包含当前元素标签的元素，但是对于描述，只有间接aria-label。 3}}

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

P.S。属性data-tip-content在这里看起来很多，因为您可以在CSS和脚本中使用{{1}}属性来代替。