我有一个非常简单的文件来测试文本转语音的可访问性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum</h1>
<form method="POST" action="">
<input id="check1" type="checkbox" value="1" aria-labelledby="check1-label" />
<label id="check1-label" for="check1">This is an input label</label>
<button type="submit">Submit</button>
</form>
</body>
</html>
我正在使用 read-aloud Chrome / Firefox 扩展程序,因为它似乎是这方面最流行的扩展程序之一。它只是忽略了形式。
我有什么遗漏的吗?
此类浏览器扩展程序根本不能代表因障碍(盲人、视力不佳、有障碍等)而需要屏幕阅读或 TTS 的用户。 所有这些用户都使用可以在其设备上的任何位置读取屏幕的软件,而不仅仅是在浏览器中。
无论作者怎么说,这些扩展的功能对于具有真正可访问性需求的用户来说还远远不够完整。 它们更适合偶尔需要 TTS 但并不总是需要它的用户。例如,将文本快速转换为有声读物,供不想阅读的傻瓜或儿童使用。
请注意,不过,有一些更高级的专用应用程序可以制作有声读物或将几段文本转换为语音。
对于您作为开发人员/设计人员来说,如果您的目标是测试网站的可访问性,那么基本上意味着您没有使用具有可访问性需求的真实用户每天真正使用的正确工具进行测试。 换句话说,你没有达到目标,你的测试无效,你在浪费时间。
您应该使用用户在现实生活中使用的真实软件来测试可访问性,以便真正体验它的含义。没有 36 种方法,您应该在计算机中运行屏幕阅读器。 例如,Windows 上的 NVDA、Mac/iPhone/iPad 上的 VoiceOver、Android 上的 Talkback。所有这些都是免费的,VoiceOver 和 Talkback 通常甚至无需安装任何东西即可使用。
Jaws、NVDA、VoiceOver 和 Talkback 等真正的屏幕阅读器或多或少遵循可访问性和 ARIA 标准。他们所有人在阅读您所呈现的页面时都不会有任何重大问题。我没有看到任何重大错误。 不过,存在无用的冗余。
由于您的
<input>
已经正确链接到您的 <label>
,因此您不需要另外将其与 aria-labelledby 链接。您应该删除 aria-labelledby。
这是完全多余的,它可能是导致您的浏览器扩展无法读取它的原因。
但是,TTS 浏览器扩展可以或多或少地遵循标准,或者根本不遵循标准,并且不期望或不需要这样做,因此很难说您观察到的行为是错误还是有意为之,也很难说您应该做什么准确地修复它(如果可以修复)。 根据可访问性标准,这绝对是错误的,但由于此类浏览器扩展主要不是针对残障用户,因此可能有不同的意图。