如何帮助屏幕 reader 用户快速迭代页面上的结果而不隐藏页面的其他信息？

Question

我正在寻找一种方法来标记 HTML 中的页面，以允许屏幕 reader 用户更快地遍历搜索结果。

仅提取少量信息并使用可折叠元素隐藏附加信息的设计被拒绝，因为它限制了视力正常的用户的体验。

我现在正在考虑使用 headers 以允许辅助技术用户在内容块之间快速跳转：

        <h2>Search results</h2>
        <div>
            <h3>Result 1 title</h3>
            <!–– some other longer information ––>
        </div>
        <div>
            <h3>Result 2 title</h3>
            <!–– some other longer information ––>
        </div>
           <!–– more search results ––>

这个技巧合适吗？ Google 等网站在返回搜索结果时执行此操作。但是，some sources 警告不要过度使用标题。

Answer 1

标题是一种选择，但既然这些是搜索结果，为什么不将它们改为 link？

这样做的美妙之处在于，它允许用户快速轻松地在各个部分之间跳转（因为屏幕 reader 用户将使用快捷方式在 link 之间跳转）并且也有利于您的非屏幕 reader 用户。

此外，为了语义和提供额外信息，您应该将每个结果放在 <li> 中作为有序列表的一部分 <ul>

这有一个额外的好处，即宣布列表中有多少项目，这是一种很好的做法。

因此您的结果页面将如下所示：

<h2>Search results</h2>
<ul>
    <li>
        <a href="results1">Result 1 title</a>
        <!–– some other longer information ––>
    </li>
    <li>
        <a href="results1">Result 1 title</a>
        <!–– some other longer information ––>
    </li>
       <!–– more search results ––>
</ul>

它也阻止了不良做法，例如在每个项目之后添加 'read more' link，当用户跳过 link 时，link 文本将使感觉。

如何帮助屏幕 reader 用户快速迭代页面上的结果而不隐藏页面的其他信息？

How to assist screen reader users to quickly iterate through results on the page without hiding additional information from the page?

html

accessibility

screen-readers