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

Question

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

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

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

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

如果有人向我提供了一个关于如何提高HTML页面可访问性级别的HTML教程，那将会很棒：

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

Answer 1

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

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

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

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

Answer 2

常见的事情是有一个＆＃34;跳过导航＆＃34;链接，它是一个锚点引用，直到您的真实内容开始的位置。这允许屏幕阅读器跳过。

<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 3

问题已通过"aria-live"有问题

修复

屏幕阅读器读取＆＃34; aria-live＆＃34;每个内容更改后标记。 因此，如果用户在搜索表单中更改文本 - 屏幕阅读器将会读取＆＃34; aria-live＆＃34;标记带有ajax加载搜索结果的内容。

使用ChromeVox

进行测试