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

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>

有了这个，例如，屏幕阅读器将重现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（严重依赖于目标元素的title属性）以及实现ARIA可访问名称计算算法和许多旧屏幕阅读器的所有现代屏幕阅读器。

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