NVDA 或类似屏幕阅读器的 Markdown
Markdown for NVDA or similar screen readers
我正在开发 Web 应用程序,我们的团队希望使其更易于访问。特别是,我们希望为看不见(使用屏幕阅读器)的人提供更好的支持。
一种流行的解决方案是 NVDA。阅读他们的文档 here 后,不清楚 - 他们是否支持自定义降价?
我可以使用一些 attributes/tags/metadata 以便 NVDA 以不同的方式读取内容吗?例如:
Google 将被读作 'Google'。我可以用某种方式装饰它,以便它被读作 'Link to Google'?
谢谢。
屏幕 reader 没有自定义标记之类的东西。嗯,有这么回事,下面给大家说说。
基本上,当您尝试使您的网站更易于访问时(这是一件非常好的事情,顺便说一句!),您应该尽量减少对屏幕 reader 用户的影响。 "impact" 我的意思是您的目标应该是您的盲人用户会看到与有视力的用户一样的东西,但是作为网站开发人员,您赋予 him/her 这种查看、导航、打开的能力、点击等等等等。
不过,有一种方法可以自定义布局。它被称为WAI-ARIA。你可以用它做很多疯狂(和聪明)的事情,它伟大而强大,但搏击俱乐部的第一条规则,我的意思是,WAI-ARIA 实践是:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property
to make it accessible, then do so.
— from here.
即:如果可以不使用 ARIA,就不要使用它。
让我们以 link 到 Google 为例:您希望盲人用户看到 "Google" 文本并理解它是 link,对吗?好吧,我会告诉你应该怎么做才能实现这一目标。而你需要做的是……击鼓……什么都不做! NVDA 或 JAWS(您绝对应该测试它,它是主要参与者!),或 Android 上的 TalkBack,或 Apple 设备上的 VoiceOver,会说:"Link Google",或 "Google link"(取决于屏幕 reader 和特定用户的设置)。就这些了。
当然你可能已经这样做了(但不要以任何方式这样做!):
<a href="https://google.com" aria-label="Link to Google"><span aria-hidden="true">Google</span></a>
看到它有多疯狂(和强大!)了吗?因此,您告诉屏幕 reader 您需要读取自定义文本并隐藏主要 link 文本(以防万一;我刚刚使用 JAWS 进行了测试,即使没有 aria-hidden
属性,所以这只是一个例子)。
但是,如果您的 link 是带有一些花哨样式的 span
,ARIA 就是您的一切:您只需说 <span role="link">
,您的用户将获得愉快的体验,而不是试图找到哪个词点击。
最后一个例子:在 Bootstrap 中有很多像
这样的装饰品
<i class="fas fa-arrow-up"></i>
如果它们在 link 上(大多数情况下它们是),一些屏幕 readers 例如 JAWS 会报告两个 links,一个有文本,一个是空的, 只是 "link"。在那些情况下,从屏幕上隐藏这些东西真的很好 readers:
<i class="fas fa-arrow-up" aria-hidden="true"></i>
NVDA, like JAWS, VoiceOver, Talkback, and several others, is a screen reader。屏幕 reader 是 low-vision 或 no-vision 用户用来访问其计算机的软件。如果您编写的语义正确 html,那么您的应用程序将自动在屏幕 reader.
上运行
为了创建语义正确的 html,W3C 制定了一套指南,称为 Web Content Accessibility Guidelines (WCAG),它概述了您可以做些什么来改进您的 Web 应用程序,使其可用于人数最多。
它包括图像的替代文本、表单元素的标签、链接使用 well-worded 文本以及语义元素使用正确的 html 标签,例如 <h1>
用于标题,<ul>
用于列表,<table>
用于数据表等。
当 native html semantic elements can't be used, for whatever reason, then there are ARIA attributes and roles 可用于为屏幕阅读软件提供有关您要传达的object 类型的线索时。
因此,NVDA 或任何其他屏幕都没有降价 reader。你只需要聪明地使用 html.
我正在开发 Web 应用程序,我们的团队希望使其更易于访问。特别是,我们希望为看不见(使用屏幕阅读器)的人提供更好的支持。
一种流行的解决方案是 NVDA。阅读他们的文档 here 后,不清楚 - 他们是否支持自定义降价?
我可以使用一些 attributes/tags/metadata 以便 NVDA 以不同的方式读取内容吗?例如: Google 将被读作 'Google'。我可以用某种方式装饰它,以便它被读作 'Link to Google'?
谢谢。
屏幕 reader 没有自定义标记之类的东西。嗯,有这么回事,下面给大家说说。
基本上,当您尝试使您的网站更易于访问时(这是一件非常好的事情,顺便说一句!),您应该尽量减少对屏幕 reader 用户的影响。 "impact" 我的意思是您的目标应该是您的盲人用户会看到与有视力的用户一样的东西,但是作为网站开发人员,您赋予 him/her 这种查看、导航、打开的能力、点击等等等等。
不过,有一种方法可以自定义布局。它被称为WAI-ARIA。你可以用它做很多疯狂(和聪明)的事情,它伟大而强大,但搏击俱乐部的第一条规则,我的意思是,WAI-ARIA 实践是:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. — from here.
即:如果可以不使用 ARIA,就不要使用它。
让我们以 link 到 Google 为例:您希望盲人用户看到 "Google" 文本并理解它是 link,对吗?好吧,我会告诉你应该怎么做才能实现这一目标。而你需要做的是……击鼓……什么都不做! NVDA 或 JAWS(您绝对应该测试它,它是主要参与者!),或 Android 上的 TalkBack,或 Apple 设备上的 VoiceOver,会说:"Link Google",或 "Google link"(取决于屏幕 reader 和特定用户的设置)。就这些了。
当然你可能已经这样做了(但不要以任何方式这样做!):
<a href="https://google.com" aria-label="Link to Google"><span aria-hidden="true">Google</span></a>
看到它有多疯狂(和强大!)了吗?因此,您告诉屏幕 reader 您需要读取自定义文本并隐藏主要 link 文本(以防万一;我刚刚使用 JAWS 进行了测试,即使没有 aria-hidden
属性,所以这只是一个例子)。
但是,如果您的 link 是带有一些花哨样式的 span
,ARIA 就是您的一切:您只需说 <span role="link">
,您的用户将获得愉快的体验,而不是试图找到哪个词点击。
最后一个例子:在 Bootstrap 中有很多像
<i class="fas fa-arrow-up"></i>
如果它们在 link 上(大多数情况下它们是),一些屏幕 readers 例如 JAWS 会报告两个 links,一个有文本,一个是空的, 只是 "link"。在那些情况下,从屏幕上隐藏这些东西真的很好 readers:
<i class="fas fa-arrow-up" aria-hidden="true"></i>
NVDA, like JAWS, VoiceOver, Talkback, and several others, is a screen reader。屏幕 reader 是 low-vision 或 no-vision 用户用来访问其计算机的软件。如果您编写的语义正确 html,那么您的应用程序将自动在屏幕 reader.
上运行为了创建语义正确的 html,W3C 制定了一套指南,称为 Web Content Accessibility Guidelines (WCAG),它概述了您可以做些什么来改进您的 Web 应用程序,使其可用于人数最多。
它包括图像的替代文本、表单元素的标签、链接使用 well-worded 文本以及语义元素使用正确的 html 标签,例如 <h1>
用于标题,<ul>
用于列表,<table>
用于数据表等。
当 native html semantic elements can't be used, for whatever reason, then there are ARIA attributes and roles 可用于为屏幕阅读软件提供有关您要传达的object 类型的线索时。
因此,NVDA 或任何其他屏幕都没有降价 reader。你只需要聪明地使用 html.