带有字体图标的按钮的辅助功能

Question

按钮元素存在可访问性问题。我想知道这是否是这样做的好方法。我有一个按钮，唯一的内容是其中的 Font-Awesome（字体图标）。我想知道向我的按钮添加 title 属性是否足以使其可访问？

像这样：

<button class="prev" title="My accessible title">
   <i class="fa fa-chevron-circle-left"></i>
</button>

Answer 1

在这种情况下正确的属性应该是 aria-label 或 aria-labeledby:

<button class="prev" aria-label="My accessible title">
   <i class="fa fa-chevron-circle-left"></i>
</button>

这样，屏幕 reader 将重现 My accessible title 而不是其中的图标。

查看更多：

Answer 2

您必须同时使用 title 和 aria-label 属性，因为某些屏幕阅读器不会读取 title 属性，而其他用户不会从 aria-label 中受益属性。

您必须记住，可访问性不仅针对屏幕阅读器用户，还针对其他所有人，因此 aria-label 是不够的。

另请注意，为了获得更好的可访问性，您可能需要添加一种方法来在您使用键盘聚焦按钮时显示说明。那将是个好主意。

话虽这么说，但我会愚蠢地建议您的按钮描述的某些部分可能始终可见，以便更好地访问。

例如，以下示例显示了如何将这两个属性与弹出式关闭按钮的简短可见提示结合使用：

<button aria-label="Back to the page" title="Close popup">
  <i class="fa fa-times"></i>
  Close
</button>

Answer 3

title 属性是辅助技术支持最广泛的属性。这包括 Dragon（which heavily relies on the title attribute for targeting elements) as well as all modern screen readers that implement the ARIA accessible name computation algorithm 和许多较旧的屏幕阅读器。

从该算法的步骤 D 中可以看出，评估的最后一个元素是 title 属性。

Accessibility for button with font icon in it