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

Question

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

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

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

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

如果有人向我提供HTML教程,告诉我如何提高HTML页面的可访问性级别,那将会很棒:

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

Answer 1

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

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

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

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