Question

在标有role="main"属性的网页上有多个元素可能是正确的吗？

有一个页面，搜索结果分为几部分。部分类似于页面，但当AJAX附带更多数据时，页面上会出现一个新部分。

我希望JAWS的用户（等等）理解文档的结构，并向他们提供在他们面前有搜索结果页面的信息，并将其分成几部分。

这个标记由JAWS完全按照我的意愿发音：

<div class="main" role="main" aria-label="Search results">

    <div class="main__portion" role="main" aria-label="Page 1">
        <a href="#">Link 1</a><br/>
        <a href="#">Link 2</a>
    </div>

    <div class="main__portion" role="main" aria-label="Page 2">
        <a href="#">Link 1</a><br/>
        <a href="#">Link 2</a>
    </div>

</div>

但用role="main"标记每个部分看起来很难。哪个角色更适合？并且要求JAWS在关注第一个链接时必须阅读“搜索结果第1页”。

Answer 1

将每个div标记为main将验证，但它不会向无视力的用户提供有用的信息。 Main用于将主要内容标记为与辅助内容不同，因此在您的外部div上使用它是合适的。把它放在所有的内部div上也只是变成了噪音，还有一件事需要听，才能得到实际的内容。

屏幕阅读器用户会发现，了解总共有多少结果以及他们应该选择哪一项更有用。这可以使用列表标记来完成，或者在页面顶部给出总计，然后将每个结果编号为其标题/标题/链接文本的一部分。作为一般规则，任何对视力正常的用户显而易见的信息也应该出现在内容或标记中，ARIA仅在必要时提供后备或额外支持。

Answer 2

WAI-ARIA main role：

在任何文档或应用程序中，作者应该使用主要角色标记不超过一个元素。

但它是应该，而不是必须。

（请注意，HTML5的main element只能在文档中使用一次。）

哪个角色属性值更适合包含在role =“main”中并且可读？

2 个答案: