我想了解在使用Twitter Bootstrap框架和FontAwesome图标字体时,屏幕阅读器的可访问性。
我正在考虑两种不同的图标情况:
1)图标带有屏幕阅读器会识别的辅助文本:
<a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a>
2) 一个独立的图标,没有任何帮助文本:
<a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a>
理想情况下,在这两种情况下,屏幕阅读器会宣布该元素是“编辑”按钮。
根据FontAwesome的网站:
我没有看到与FontAwesome或Bootstrap相关的speech css标签,也不清楚屏幕阅读器将如何对每种情况做出反应。与其他图标字体不同,Font Awesome不会使屏幕阅读器出错。
我还了解到
aria-hidden
和Bootstrap的.sr-only
,必须有一种理想的方法来处理这两种情况。编辑:在示例2中添加了
title="Edit"
。使用
aria-label="Edit"
相比标准的title="Edit"
有什么优势?编辑2:我遇到了this article这篇文章,解释了不同用法实现的利弊。