在<main>元素内语义化添加广告：<aside>与<div role="complementary">选择困惑

算力阿峰

2026-5-25

关于

嘿，这个问题问得特别好——很多人都会在语义化和可访问性的交叉点上犯迷糊，咱们来把它掰扯清楚：

首先得明确核心：

本身就默认带有complementary的ARIA角色（除非它嵌套在<article>里，此时默认角色是note），所以两者在语义上是等价的，但原生元素永远是优先选项——浏览器和辅助技术对原生语义标签的支持更稳定，代码也更简洁。

接下来结合你提到的W3C对complementary的定义来判断：

文档中支持主内容、但独立且自身具备意义的任何部分

咱们分两种广告场景来看：

1. 和主内容相关的广告（推荐类、主题匹配）

比如你主内容是户外装备评测，广告是同款装备的促销或者配套配件——这种完全符合W3C的定义：它支持主内容（给用户提供相关购买选项），自身也是独立完整的推广内容。

这种情况下，直接用

就对了，不需要额外加role="complementary"，还能顺便加上aria-label提升可访问性，让屏幕阅读器用户清楚知道这是广告区域：

<main>
  <!-- 主内容区域 -->
  <article>
    <h1>2024年度最佳登山背包评测</h1>
    <p>...</p>
  </article>

  <!-- 相关广告 -->
  <aside aria-label="相关户外装备广告">
    <div class="ad-card">
      <p>立即入手评测同款背包，享8折优惠！</p>
      <!-- 广告内容 -->
    </div>
  </aside>
</main>

2. 和主内容完全无关的广告（随机投放、跨主题）

比如你主内容是科技新闻，广告是零食促销——这种广告并不“支持主内容”，不符合complementary的定义，所以不能用

或者带complementary角色的div。

这种情况下，建议用普通<div>，搭配role="region"和清晰的aria-label来明确它的性质，避免辅助技术误判为主内容的一部分：

<main>
  <!-- 主内容区域 -->
  <article>
    <h1>AI大模型最新进展</h1>
    <p>...</p>
  </article>

  <!-- 无关广告 -->
  <div role="region" aria-label="推广广告">
    <div class="ad-card">
      <p>网红零食限时特惠，买一送一！</p>
      <!-- 广告内容 -->
    </div>
  </div>
</main>

核心总结

优先用<aside>：当广告符合W3C对complementary的定义（和主内容相关、独立有意义）时，原生语义标签是最优解，兼顾语义化和可访问性。
避免滥用complementary：如果广告和主内容无关，不要硬套这个角色，用普通div加明确的ARIA标签即可。
永远别忘了可访问性：不管用哪种容器，都要给广告区域加清晰的标识（比如aria-label），让所有用户都能快速识别这是广告内容。

内容的提问来源于stack exchange，提问作者JAT86