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

Question

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

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

在此处输入图像描述

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

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

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

score 4 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

使用“aria-live”属性解决了问题

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

3 回答 3