Question

构建一个不错的可访问网页很难。目前，我试图使工具提示网络可访问，我需要帮助。你们有什么建议吗？像我应该使用的 aria 属性一样。或者你想要添加的其他重要事项！

此外，如果没有显示，我如何阻止屏幕阅读器阅读工具提示？我的方法是使用javascript，添加和删除aria-hidden属性，但我想尽可能避免使用JS。

Answer 1

您必须在可聚焦元素上显示工具提示（如果此元素不可聚焦，则应设置tabindex属性）

<input type="text" id="mytextbox" aria-describedby="mytooltip" />
<span id="mytooltip" role="tooltip" class="tooltip" aria-hidden="true">Tooltip for the textbox</span>

aria-describedby将设置您的可聚焦元素和工具提示之间的关系。 tooltip角色支持不是很重要，但您应该使用它，因为它是为此主题设计的。

完成此操作后，您只需在CSS中设置初始状态：

  .tooltip[aria-hidden='true'] {display: none}
  .tooltip[aria-hidden='false'] {display: block}

并使用您最喜爱的javascript代码在aria-hidden或focus个事件中将mouseover属性定义为true，在blur和mouseout个事件中将其定义为false。

Answer 2

上面的示例工作正常。我们可以使用下面的jQuery代码来达到相同的目的。

<script>
        $("#test").tooltip();
</script>

<a id="test" href="#" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>

但是另一个问题是屏幕阅读器在鼠标悬停时不会阅读工具提示。

通过使用jquery-ui版本1.12，屏幕阅读器可以在鼠标悬停时读取工具提示，但是问题是它无法识别工具提示容器元素的角色和名称。那么有什么方法可以实现该功能？

工具提示，可访问性

2 个答案: