Html 带有字体图标的按钮的可访问性

Html 带有字体图标的按钮的可访问性,html,accessibility,font-awesome,Html,Accessibility,Font Awesome,我的按钮元素有一个可访问性问题。我想知道这是不是一个好办法。我有一个按钮,唯一的内容是一个可怕的字体(字体图标)在它。我想知道在我的按钮中添加一个标题属性是否足以使其可访问 像这样: <button class="prev" title="My accessible title"> <i class="fa fa-chevron-circle-left"></i> </button> 在这种情况下,正确的属性应该是aria label或ar

我的按钮元素有一个可访问性问题。我想知道这是不是一个好办法。我有一个按钮,唯一的内容是一个可怕的字体(字体图标)在它。我想知道在我的按钮中添加一个
标题
属性是否足以使其可访问

像这样:

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

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

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

例如,屏幕阅读器将复制
我的可访问标题
,而不是其中的图标

请参阅更多:


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

您必须记住,可访问性不仅针对ScreenReader用户,还针对其他人,因此,
aria label
是不够的

还请注意,为了更好地访问,您可能希望添加一种方式,以便在使用键盘聚焦按钮时显示描述。那是个好主意

话虽如此,我还是愚蠢地建议你的按钮的某些部分可能总是可见的,以便更好地访问

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

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

接近

标题
属性是辅助技术最广泛支持的属性。这包括Dragon()以及所有实现的现代屏幕阅读器和许多旧的屏幕阅读器


正如在该算法的步骤D中所看到的,最后计算的元素是title属性。

我应该将两者结合起来吗?或者aria标签就足够了?
aria标签
就像你想写的
标题
aria的标签是在元素之间建立关系。在本例中,我想只使用
aria-label
就可以了。好的,没有标题,只有一个aria标签(在本例中,因为它与任何其他html元素都没有关系)。就是这样吗?是的,你可以添加一个标题以获得更多的功能性(普通桌面用户),但是aria标签就足够了,不,它与任何html元素都没有关系。如果您需要建立关系,请使用
aria labeledby
(我附上两页,以便向您提供更多知识)。你能接受这个答案吗?我也对你的问题投赞成票,这是正确的方式:)很高兴帮助你不幸的是,所有现代屏幕阅读器都没有实现ARIA可访问的名称计算算法,而老年人没有……在带有图标(即facebook)的链接中,被
ARIA hidden=true
隐藏,我们是否应该同时添加
title
属性和
span
(仅使用
sr
)属性?屏幕阅读器重复这两个信息,不是吗?