如何为某些 HTML 页面部分的屏幕阅读器设置优先级？

Posted 2023-05-07

【中文标题】如何为某些 HTML 页面部分的屏幕阅读器设置优先级？

【英文标题】：How to set priority for screen readers of some HTML page parts?

【发布时间】：2015-08-26 00:00:21

【问题描述】：

我想让我的 html 页面适合屏幕阅读器。

目前，页面有3个主要部分：标题、侧边栏和内容：

屏幕阅读器首先阅读标题，然后是侧边栏，最后是搜索结果。

不幸的是，视力有问题的用户等待很长时间，而程序将读取所有侧边栏内容（因为侧边栏包含许多过滤器）。 如何为搜索结果设置更高的优先级？因为搜索结果应该在侧边栏内容之前阅读。

如果有人向我提供有关如何提高 HTML 页面的可访问性级别的 HTML 教程，那就太好了：

如何更改某些 DIV 元素以被屏幕阅读器跳过？ 如何更改阅读页面内容的顺序？ 如何使搜索表单和搜索结果（以及一些链接）仅可读？

【问题讨论】：

这只是部分答案，但使用 HTML5 元素，如页眉、页脚、导航、旁边、文章和部分将有助于您的事业。此外，确保在适当的 div 元素上使用 aria 地标角色（role="search"、role="navigation"、role="main" 等）。

请问您为什么要尝试做这些事情？

@unobf 因为我有一大堆搜索过滤器，用户希望首先听到搜索结果

@unobf 这就是为什么我想在创建搜索结果时跳过标题和侧边栏

【参考方案1】：

不要试图向屏幕阅读器用户隐藏内容，他们会想要访问该内容。相反，您可以将地标添加到您的内容区域。然后，屏幕阅读器将能够直接跳转到页面的相关部分，包括结果，但仍然能够在需要时访问其他控件。

如果您可以使用 HTML5，请分别使用 <header>、<aside> 或 <nav>，然后将 <main> 元素分别用于您的标题、过滤器以及侧边导航和搜索结果。

如果您不能使用 HTML5，则将 role="banner"、role="complementary"、role="navigation" 和 role="main" 添加到这些区域的包装元素中。

作为最佳实践，您还应该在文档中添加标题结构（屏幕阅读器也可以通过这些结构进行导航）和跳过链接（对于有视力的、仅使用键盘的用户）

【参考方案2】：

一个常见的做法是有一个“跳过导航”链接，它是指向您的真实内容开始位置的锚点参考。这允许屏幕阅读器向前跳过。

<a href="#main" class="skip-navigation">Skip Navigation</a>

...

<h1 id="main">Search Results</h1>

如果您愿意，您可以将其样式设置为屏幕阅读器仍可读取但普通浏览器不可见的方式。

.skip-navigation 
  position: absolute;
  left: -5000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;

【讨论】：

感谢@Brad，但是div 标签呢？如果包含skip-navigation 类，它会作为链接跳过吗？

HTML5 提供了header、aside 和article 等标签，为网页添加了语义含义。除了跳过链接之外，这些链接还可以用于更易于访问的页面。

@bmalets skip-navigation 类仅用于样式。你不需要使用它。这里的整个操作是您有一个指向页面参考的链接。

【参考方案3】：

问题已通过 "aria-live" 属性修复

屏幕阅读器会在每次内容更改后读取“aria-live”标签。 因此，如果用户更改搜索表单中的文本 - 屏幕阅读器将使用 ajax 加载的搜索结果读取“aria-live”标签的内容。

用ChromeVox测试