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

Question

我想让我的 HTML 页面适合 reader 屏幕。

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

屏幕 reader 首先显示 header，然后 sidebar，最后 搜索结果.

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

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

Answer 1

一个常见的做法是设置一个 "skip navigation" link，它是指向您的真实内容开始位置的锚点引用。这允许屏幕阅读器向前跳转。

<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;
}

Answer 2

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

如果可以使用 HTML5，请使用 <header>、<aside> 或 <nav>，然后使用 <main> 元素作为 header 、过滤器以及侧边导航和搜索结果。

如果不能使用HTML5，则在这些区域的包装元素。

作为最佳做法，您还应该向文档添加标题结构（屏幕 reader 也可以通过这些导航）和跳过 link（对于有视力的 keyboard-only 用户)

Answer 3

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

解决

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

测试

How to set priority for screen readers of some HTML page parts?