Question

我正在开发Web应用程序，我们的团队希望使它更易于访问。特别是，我们希望为看不见的人（使用屏幕阅读器）提供更好的支持。

NVDA是最受欢迎的解决方案之一。看完文档here后，还不清楚-他们是否支持自定义降价促销？

我可以使用某些属性/标签/元数据来使NVDA读取内容有所不同吗？例如： Google将被读取为“ Google”。我可以用某种方式装饰它，以便将其读作“链接到Google”吗？

谢谢。

Answer 1

没有诸如针对屏幕阅读器的自定义标记之类的东西。好吧，有类似的事情，我会在下面告诉你。
基本上，当您尝试使您的网站更易于访问时（顺便说一句，很好！），您应该最大程度地减少对屏幕阅读器用户的影响。所谓“影响”，是指您的目标应该是使盲人用户与视觉用户看到的东西相同，但是作为网站开发人员，您赋予他/她这种查看，导航，打开，单击等的能力。等等。

不过，有一种方法可以自定义布局。它称为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">，您的用户就会获得愉悦的体验，而不必试图找到要单击的单词。 br /> 最后一个例子：Bootstrap中有很多装饰，例如

<i class="fas fa-arrow-up"></i>

如果它们在链接上（大多数情况下在链接上），则某些屏幕阅读器（例如JAWS）会报告两个链接，一个带有文本，另一个是空的，只是“链接”。在这种情况下，最好将这些内容隐藏在屏幕阅读器中：

        <i class="fas fa-arrow-up" aria-hidden="true"></i>

Answer 2

NVDA与JAWS，VoiceOver，Talkback和其他几个类似，都是screen reader。屏幕阅读器是低视力或无视力用户将用来访问其计算机的软件。如果您编写语义正确的html，则您的应用将自动与屏幕阅读器一起使用。

要创建在语义上正确的html，W3C已创建了一组准则，称为Web Content Accessibility Guidelines（WCAG），概述了您可以做的事情，以改进您的Web应用程序以使其可用于最多的人。

它包括诸如为图像使用替换文本，为表单元素添加标签，为链接使用措辞良好的文本以及为语义元素使用适当的html标签之类的内容，例如，<h1>为标题，{{1 }}用于列表，<ul>用于数据表，等等。

无论出于何种原因都无法使用native html语义元素时，可以使用ARIA attributes和roles为屏幕阅读软件提供有关什么的线索您要传达的对象类型。

因此，NVDA或任何其他屏幕阅读器没有减价。您只需要在使用html时一定要精明。

用于NVDA或类似屏幕阅读器的Markdown

2 个答案: