为屏幕阅读器导航提供备用标题的最佳方式是什么？

Question

我的任务是标记一个文档，其视觉标题已被编写如下：

• 我们的论文讨论了 2022 年 XYZ 的各种努力
  • XYZ 2022 年在美术领域
    • XYZ 2022年美术板块进展总结
    • XYZ 2022 年各类型进展结果
      • 工匠运动中 XYZ 的美术部门进展
      • 印象派运动中 XYZ 的美术部门进展
      • XYZ 在后衰退运动中的美术部门进展
  • XYZ 2022 年在科学领域内
    • XYZ 2022年科学板块进展总结
    • XYZ各分公司2022年进度结果
      • XYZ 化学领域的科学部门进展
      • XYZ 在生物学领域的科学部门进展
      • XYZ 在燃素学领域的科学部门进展
  • XYZ 2022 年在高级研究领域内
    • XYZ 2022年研究领域进展总结
    • XYZ 2022 年努力进展成果
      • XYZ 在公共交通领域的研究进展
      • XYZ 在量子光子学领域的研究进展
      • XYZ 在可再生采矿领域的研究进展

我担心的是标题的措辞方式会使它们通过屏幕阅读器导航变得乏味。例如，如果我想跳到“印象派运动”部分，我将不得不在区分每个标题的实际信息之前听很多重复的“美术结果中的 XY”前缀。

这不是我的内容，我不能更改标题，作者也不能。但是，我已获准调整标记以便呈现一个修改的与视觉不同的语义“大纲”视图。欢迎提供反馈，但我认为像下面这样的大纲对于通过屏幕阅读器导航的人会更有用：

• 我们的论文讨论了 2022 年 XYZ 的各种努力
  • 2022 年 XYZ 的美术部门
    • XYZ 2022年进度总结
    • 各个流派的结果
      • 工匠机芯
      • 印象派运动
      • 后衰退运动
  • 2022 年 XYZ 的科学部门
    • XYZ 2022年进度总结
    • 单个分支的结果
      • 化学领域
      • 生物领域
      • 燃素学领域
  • 2022 年 XYZ 高级研究
    • XYZ 2022年进度总结
    • 努力的结果
      • 公共交通空间
      • 量子光子空间
      • 可再生采矿空间

我的问题是，我如何以现实世界的屏幕阅读实用程序可以接受的方式完成此任务？

如果我只是把每个标题都当作：

<h4>Fine arts sector progress at XYZ within the impressionist movement</h4>

并添加一个带有缩短版本的aria-label，例如：

<h4 aria-label="impressionist movement">Fine arts sector progress at XYZ within the impressionist movement</h4>

这会是一个有效和适当的解决方案吗？有没有一种方法可以使用内置在操作系统中的东西（如 VoiceOver 或 ChromeVox）来测试结果，或者像 JAWS 这样的付费实用程序在这方面的行为是否有很大不同？

Answer 1

从基本用户体验 (UX) 的角度来看，您通常希望将最重要的信息放在首位，以便用户可以快速浏览文本并找到他们需要的内容。即使从有远见的角度来看，您找到“印象派运动”的例子也很困难。我的眼睛必须扫描文本的开头并“过滤”掉它，直到我找到重要的文本，它靠近每个标题的末尾。我发现你的第二个大纲更容易阅读/扫描。

同样的概念也适用于屏幕阅读器用户。如果他们能先听到重要的文本，那么如果文本不是他们想要的，他们就可以快速继续前进。

屏幕阅读器用户可以快速跳转到各种标题级别。如果我知道“印象派运动”是第 4 级标题<h4>，那么我可以按4键跳转到下一个标题级别 4，这样我就不必费力地浏览每个标题。这会有所帮助，但我仍然必须在标题开头听到相同的重复文本，然后才能听到结尾的重要部分。

aria-label 用于交互元素而非静态文本时效果最佳。您必须在各种屏幕阅读器上进行测试，看看它是否在标题上得到认可。 W3.org 网站上有一个“Practical Support for aria-label”文档，其中提到 aria-label 可能不会被用作标题。

• 不要在任何标题元素上使用 aria-label 或 aria-labelledby，因为它会在 NVDA、VoiceOver 和 Talkback 上覆盖它们。 JAWS 会忽略它们。

如果您想为标题提供替代文本，更好的方法是使用可见隐藏的屏幕阅读器文本。这是通过定义一个 CSS 类来完成的，该类使浏览器不显示文本，但文本确实存在，因此屏幕阅读器用户仍然可以听到它。您可以随意调用 CSS 类，但常用的名称是 sr-only。您可以在What is sr-only in Bootstrap 3? 看到该类的定义。 （您不必使用引导程序来获取该类。只需复制该文章中的 CSS。）

因此，您的代码将包含第一个大纲中的当前可见文本，但您可以通过aria-hidden 向屏幕阅读器隐藏该文本，然后您将拥有视力正常的用户看不到但屏幕阅读器可以看到的可见隐藏文本。它看起来像这样：

<h4>
  <span aria-hidden="true">Fine arts sector progress at XYZ within the impressionist movement</span>
  <span class="sr-only">impressionist movement</span>
</h4>

Answer 2

我会避免对屏幕阅读器用户想要阅读的内容做出太多假设，例如aim of accessibility is to provide an equivalent user experience for people with disabilities (according to the W3C)。

鉴于冗长的内容是核心问题，理想的做法是解决这个问题，最好得到包括残疾人在内的研究的支持。如果这超出了您的职权范围，那么为所有用户保持相同的内容可能会减少混淆。

使用屏幕阅读器的人仍然可以像有视力的用户一样扫描他们不感兴趣的内容，这只是在技术的帮助下。 This article by Léonie Watson 更多地谈论让屏幕阅读器用户决定什么是重要的。