我们可以在一个 div having aria-role = main 里面有一个 div having aria-role = main

Question

这是一个有效的场景吗：

代码：

<html>
   <div role = "main">
      <div role = "main">
      </div>
   </div>
</html>

在具有主要角色的 div 中有一个主要角色。它会导致屏幕阅读器出现任何问题吗？

Answer 1

docs are pretty clear on this（注意：应该，不是必须）

Within any document or application, the author SHOULD mark no more than one element with the main role.

这是否会导致屏幕阅读器出现问题可能会有所不同。

HTML spec 在这里也很有启发性。

编辑：update in the HTML 5.2 spec：

There must not be more than one visible main element in a document. If greater than one main element is present in a document, all other instances must be hidden using §5.1 The hidden attribute.

Answer 2

The HTML5 documentation 说

Authors must not include more than one main element in a document.

（术语 "document" 很重要，必须正确理解，见下文）

也就是说：

will it cause any problem or issues in screen readers?

是的。这可能会导致问题，因为 main 元素是 "skip to main content" 链接的 non-obtrusive 替代项。所以有两个 main 节点可能会导致未指定的行为。

编辑：关于 ARIA 文档

The ARIA documentation says

Note: Because document and application elements can be nested in the DOM, they may have multiple main elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

只要一个 HTML 标准网页只有一个 document 节点（这是 body 的默认角色），那么它 绝不能 包含多个 main（或 role=main）元素。但是您仍然可以将文档节点嵌套在 body 标记内，并且每个文档关联的元素不超过一个 main。

我们可以在一个 div having aria-role = main 里面有一个 div having aria-role = main

Can we have a div having aria-role = main inside a div having aria-role = main

html

accessibility

wai-aria