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

时间:2016-03-17 14:52:37

标签: html accessibility font-awesome

我遇到了按钮元素的辅助功能问题。我想知道这是否是做到这一点的好方法。我有一个按钮,唯一的内容是Font-Awesome(字体图标)。我想知道在我的按钮上添加title属性是否足以让它可以访问?

像这样:

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

3 个答案:

答案 0 :(得分:5)

在这种情况下,正确的属性应为aria-labeledby<button class="prev" aria-label="My accessible title"> <i class="fa fa-chevron-circle-left"></i> </button>

My accessible title

有了这个,例如,屏幕阅读器将重现{{1}}而不是其中的图标。

查看更多:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

答案 1 :(得分:1)

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

您必须记住,辅助功能不仅针对屏幕阅读器用户,也针对其他所有人,因此aria-label是不够的。

另请注意,为了更好地访问,您可能希望在使用键盘对焦按钮时添加一种显示说明的方法。那将是一个好主意。

话虽这么说,我会愚蠢地建议你的按钮描述的某些部分可能总是可见,以便更好地访问。

例如,以下示例显示了两个属性如何与弹出关闭按钮的短可见提示一起使用:

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

答案 2 :(得分:0)

title属性是辅助技术最广泛支持的属性。这包括Dragon(which heavily relies on the title attribute for targeting elements)以及实现ARIA accessible name computation algorithm和许多旧版屏幕阅读器的所有现代屏幕阅读器。

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