屏幕阅读器究竟是什么?我应该如何处理我的网站?

时间:2014-07-19 21:35:59

标签: html accessibility screen-readers

很抱歉,如果这是一个太天真的问题,但究竟什么是屏幕阅读器?在设计网页(html文档)时应该如何考虑它们?

进行谷歌搜索并没有多大帮助...维基百科的条目太笼统了。

我是否应该在html标记中添加任何内容以特别处理屏幕阅读器?

3 个答案:

答案 0 :(得分:2)

屏幕阅读器通常用于使具有视觉障碍的用户可以访问计算机,例如如果你是盲人,你将无法看到一个网站,但有了软件,你可以“阅读”给你。

我所知道的最常见的屏幕阅读器是JAWS screen reader

JAWS是L J ob A ccess W ith S peech(因此名称)的简称尝试确保您的网站或Web应用程序可访问时使用的常用工具。例如。为美国政府创建网站需要确保根据“康复法案”第508节确保您的内容可访问:http://www.section508.gov/

您可能需要的所有信息都在该网站上,但一些快速提示将是:

  • 为具有alt属性
  • 的图片添加信息性描述
  • 使用<TH>标记正确定义表格标题并使用scope属性
  • 确保在禁用CSS时您的网站/应用仍以可读方式呈现

答案 1 :(得分:2)

屏幕阅读器是一种“读取”文档(在您的情况下是一个网页)并以视觉障碍(例如失明)的人可以轻松消费的方式输出的软件。

屏幕阅读器只能理解文本(和一些格式)。以下是您可以(而且应该)做的事情,以改善盲人或几乎盲人的可访问性:

  • 使用<strong><em>代码,而不是非描述性<b><i>。如果计算机正在朗读它,它可以强调这些词。
  • 始终在图片上包含alt属性。您甚至可以将其留空(也称为 null - alt="");这表示图像不是必需的/装饰性的。否则,请放置图像的文字说明。
  • 辅助功能软件通常会忽略title属性。实际上,只有那些可以使用电脑鼠标的人才能阅读它,所以请避免使用它。
  • 转动CSS并查看您的页面。如果没有意义,你应该重新考虑布局。
  • ARIA角色(通过role属性)很有帮助。例如,如果您使链接看起来像按钮,辅助技术会提供不同的交互。因此,通过正确设置role,使用辅助技术的人可以按照您的意图使用该元素。在这种情况下,您需要设置role="button"
  • 使用具有语义含义的标记(例如sectionarticlenavasideheader,以及更常见的{{1}你使用CSS设置样式的h1...6div而不是{标签}。这可以让软件勾勒出你的页面,盲人可以直接跳到主要内容,就像你可以用眼睛扫描一样。
  • 与最后一个相关;使用spantime以及abbr等鲜为人知的标记,而不是另一个CSS类。

这仅适用于屏幕阅读器。甚至不考虑聋人 - 查看您的视频和音频的字幕(使用新的HTML5 address<audio>代码)。

请注意,我不是无障碍专家(我也不是盲人,所以我不会从经验中说话)。 W3C有可访问性标准,可能比我的标准更合适(以及a list of quick tips)。

答案 2 :(得分:1)

你的问题有两个问题:

  1. 屏幕阅读器是一种软件,可以读取屏幕并将其转换为视障人士可以使用的内容,如音频或盲文。就网络而言,它会读取DOM,而不是实际屏幕。

  2. 您需要做的事情非常简单:让您的应用程序易于理解为屏幕阅读器。例如,通过向alt提供图像来执行此操作。在W3C上有一个名为WCAG的屏幕阅读器标准。你真正需要做的主要取决于你的观众。如果您的网站上不太可能有这种残疾人,那么您可能不得不为此工作做更少的工作。