Question

我打算在页面内容中插入广告，同时不破坏可访问性和语义。我的页面的内容位于<main>元素内，但如果我应该使用<aside>或<div role="complementary">来嵌套广告，我感到很困惑。

让我感到困惑的是W3C's documentation说：

补充：文档的任何支持主要内容的部分，但它本身是独立且有意义的。

并在页面下方的Example 1中显示：

<div id="rightsideadvert" role="complementary">....an advertisement here...</div>

我的理解是，并非所有广告（如Google广告）都会支持或与主要内容相关。什么是适当的标记使用？

<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Test page</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>

<main>
<!-- main content -->

<aside>
<!-- advertisement -->
</aside>

<!-- main content continues -->
</main>

</body>
</html>

Answer 1

应使用aside element。其定义明确提到广告：

该元素可用于[…] 用于广告 […]以及用于其他与最近的祖先切片内容的主要内容分开的内容。

aside元素在默认情况下具有complementary角色（因此不应显式添加）。

除非广告与内容集成在一起，否则最好将其置于main元素之外。但是，如果不可能（例如您的情况），则在aside中使用main似乎是最好的选择。

WAI-ARIA扮演complementary角色：

如果补充内容与主要内容是完全可分离的，则可以使用更一般的角色。

但是aside元素允许的其他角色（feed，note，search或presentation）似乎不合适。 / p>

在<main>元素中添加广告的语义方式？

1 个答案: