div布局容器内嵌套语义HTML标签是否会影响辅助技术使用？

结论先行：只要语义标签本身的用法符合规范，外层嵌套多少层用于flex/grid布局的纯容器div，都不会影响辅助技术的正常解析。

你习惯先用div搭布局骨架再填充语义内容的开发方式完全没问题，这也是前端开发的主流实践，核心逻辑很简单：

• 屏幕阅读器等辅助技术解析页面时，构建的是无障碍语义树，<div>、<span>这类默认不带任何语义的通用容器，只要没被手动加ARIA角色、语义属性，就会在语义树构建过程中被直接跳过，根本不会打断内部语义标签的层级关联，也不会产生冗余的语义节点。
• 真正会导致辅助技术识别异常的，从来不是外层套了多少层布局div，而是语义标签本身的错误用法，常见踩坑点有这几个：
  • 给纯布局用的div乱加ARIA语义角色，比如给flex容器加role="main"、role="nav"，反而会和内部真正的<main>、<nav>标签产生语义冲突，造成重复识别、导航错乱。
  • 破坏语义标签的合法嵌套规则，比如把页脚<footer>错误塞进<address>标签内部、把块级语义标签塞进行内标签里这类写法错误，才是无障碍失效的核心原因。
  • 当div本身承担交互组件功能（比如弹窗外壳、折叠面板容器）时，没有补充对应的ARIA属性做语义声明；但纯静态布局用的div完全不需要额外加任何语义相关属性，保持默认即可。

下面这种日常写法是完全可以被辅助技术正常识别的，不需要做特殊调整：

<!-- 以下三层div仅用于grid/flex布局，无任何语义属性 -->
<div class="global-grid-container">
  <div class="content-flex-wrapper">
    <div class="main-column">
      <!-- 内部语义标签可被正常解析，不受外层div影响 -->
      <header>站点导航</header>
      <main>
        <article>
          <h1>文章标题</h1>
          <p>正文内容</p>
        </article>
      </main>
      <footer>页脚信息</footer>
    </div>
  </div>
</div>

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