没有针对屏幕阅读器的自定义标记。嗯,有这样的事情,我会在下面告诉你。
基本上,当您尝试使您的网站更易于访问时(这是一件非常好的事情,顺便说一句!),您应该尽量减少对屏幕阅读器用户的影响。 “影响”是指您的目标应该是让您的盲人用户看到与有视力的用户一样的东西,但作为网站开发人员,您赋予他/她查看、导航、打开、点击等的能力等等。
不过,有一种方法可以自定义布局。它被称为WAI-ARIA。你可以用它做很多疯狂(和聪明)的事情,它很棒而且很强大,但是搏击俱乐部的第一条规则,我的意思是,WAI-ARIA 的做法是:
如果您可以使用已内置所需语义和行为的原生 HTML 元素或属性,而不是重新利用元素并添加 ARIA 角色、状态或属性
使其可访问,然后这样做。
— from here.
即:如果您可以不使用 ARIA,请不要使用它。
让我们以指向 Google 的链接为例:您希望您的盲人用户看到“Google”文本并理解它是一个链接,对吗?好吧,我会告诉你你应该做些什么来实现这一目标。你需要做...鼓滚...什么都没有! NVDA 或 JAWS(您绝对应该使用它进行测试,它是主要玩家!),或 Android 上的 TalkBack,或 Apple 设备上的 VoiceOver,会说:“链接 Google”或“Google 链接”(取决于屏幕阅读器和在特定用户的设置上)。就是这样。
当然你可能已经这样做了(但不要以任何方式这样做!):
<a href="https://google.com" aria-label="Link to Google"><span aria-hidden="true">Google</span></a>
看看它有多疯狂(和强大!)?因此,您告诉屏幕阅读器您需要阅读您的自定义文本并隐藏您的主链接文本(以防万一;我刚刚使用 JAWS 进行了测试,即使没有 aria-hidden 属性也一切正常,所以它仅用于一个例子)。
但是,如果您的链接是带有一些花哨样式的 span,ARIA 就是您的一切:您只需说出 <span role="link">,您的用户将获得愉快的体验,而不是试图找到要点击的词。
最后一个例子:在 Bootstrap 中有很多装饰,比如
<i class="fas fa-arrow-up"></i>
如果它们位于链接上(而且大多数情况下),某些屏幕阅读器(例如 JAWS)会报告两个链接,一个带有文本,一个为空,只是“链接”。在这些情况下,向屏幕阅读器隐藏这些内容真的很好:
<i class="fas fa-arrow-up" aria-hidden="true"></i>