我得到了某种客户网站的可访问性测试(针对盲人,聋人用户等),也有如何提高可访问性的提示。
其中一个提示适用于图像按钮:
此外,按钮应得到简短而有意义的描述,例如使用不可见文本。不可见文本不应标记为属性display:none和visibility:hidden。相反,文本应移出视口:
<a href=”...”>[Font-Icon] <span class=“invisible“>Delete</span></a>
.invisible { position:absolute; left:-10000px; overflow:hidden;}
我想问一下,这是否仍然是推荐的解决方案。我觉得它似乎已经过时了。我应该使用某种aria
标记来代替不可见元素,还是建议的解决方案可以?
1条答案
按热度按时间uxhixvfz1#
对我来说似乎过时了。
你说得对,这不是解决办法。
当谈到辅助功能时,我们不必只关注使用屏幕阅读器的盲人,而是关注所有残疾人。将文本移出 windows 完全是无稽之谈。在不支持ARIA的情况下,这曾经是一个 (坏) 解决方案,适用于一小部分使用屏幕阅读器的人群,但这不再是一个真实的的解决方案。
最好的解决办法显然仍然是写出全文:
是的,很明显,但它值得说。
第二个解决方案是使用
title
属性。如果屏幕阅读器不支持它,为什么要使用它呢?因为99%的人不使用屏幕阅读器。而且“[Font-Icon]”应该有一个替代选项。(为了更好地支持辅助功能,这个title
属性应该有一种方法在键盘焦点上可见。)最后的解决方案是为屏幕阅读器用户添加
aria-label
,为其他用户保留title
属性。