Question

我正在努力让我的网站更容易访问。我在如何正确地执行按钮或锚定按钮方面遇到了麻烦。在我的例子中，我将有一个锚，但按钮也会出现同样的问题。

这是我用glyphicon做锚的方法。 Title属性可帮助鼠标用户了解它的作用。

<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>

对于屏幕阅读器来说这是否足够？我是否还必须添加与sr-only相同的描述？

<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  <span class="sr-only">Delete lawn project</span>
</a>

或许还有一种我没有想过的更好的方法。

Answer 1

在互动元素上使用aria-label （使用title显示工具提示完全正常，但您也应该让键盘或触摸屏用户看到它）

无需在空aria-*元素上设置任何特殊属性（role或span）。

<a href="#" title="Delete lawn project" aria-label="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>
</a>

正如@steveax所说，你应该使用原生的button元素：

<button title="Delete lawn project" aria-label="Delete lawn project" class="btn btn-default btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>
</button>

Answer 2

此示例为better as a button，因为该功能是一个按钮（一个动作而不是导航）。如果您使用带有按钮角色的role=img链接，则需要使用按钮处理免费获得的所有键盘交互。除此之外，你看起来很不错。我会对图标添加<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger"> <span class="glyphicon glyphicon-trash" aria-role="img" aria-hidden="true"></span> <span class="sr-only">Delete lawn project</span> </button>进行小幅调整。

aria-label

取决于您需要支持的浏览器/屏幕阅读器，替代方法是使用<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger"> <span class="glyphicon glyphicon-trash" aria-role="img" aria-label="Delete lawn project"></span> </button>属性并省略额外的仅限sr内容：

\usepackage

一如既往，测试。

带有glyphicon的锚点（或按钮）的可访问性

2 个答案: