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

Question

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

目前，页面有3个主要部分:header、sidebar和content:

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

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

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

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

Answer 1

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

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

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

作为最佳实践，您还应该向文档添加标题结构(屏幕阅读器也可以通过这些结构进行导航)和一个跳过链接(适用于视力正常的纯键盘用户)