我遇到了按钮元素的辅助功能问题。我想知道这是否是做到这一点的好方法。我有一个按钮,唯一的内容是Font-Awesome(字体图标)。我想知道在我的按钮上添加title
属性是否足以让它可以访问?
像这样:
<button class="prev" title="My accessible title">
<i class="fa fa-chevron-circle-left"></i>
</button>
答案 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}}而不是其中的图标。
查看更多:
答案 1 :(得分:1)
您必须同时使用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>
答案 2 :(得分:0)
title
属性是辅助技术最广泛支持的属性。这包括Dragon(which heavily relies on the title attribute for targeting elements)以及实现ARIA accessible name computation algorithm和许多旧版屏幕阅读器的所有现代屏幕阅读器。
从该算法的步骤D中可以看出,评估的最终元素是title属性。