语义化标签被div包裹对辅助技术影响极小，但ul/ol内嵌div、table中插入div、dl外加div等违反严格内容模型的嵌套会直接破坏可访问性，导致dom被浏览器静默修正、语义断裂。
语义化标签是否被 div 包裹，对辅助技术（如屏幕阅读器）读取影响极小——只要 HTML 结构本身合法、嵌套符合内容模型规范。
哪些嵌套会直接破坏可访问性？
问题不在于“有没有 div”，而在于“div 是否塞进了不该放它的语义容器里”。浏览器遇到非法嵌套时可能静默修正 DOM，导致辅助技术看到的结构和你写的不一致。
-
ul和ol内部只能直接包含li；若中间插了div，浏览器会把它“踢出”列表，变成列表外的孤立节点 -
table只接受thead、tbody、tr等表格子元素；div塞进去会导致整个表格结构被重排，表头与数据行关联断裂 -
dl必须由dt和dd直接组成；用div包一层，就等于废掉了定义列表的语义关系
header / main / nav 套在 div 里安全吗？
完全安全。这些块级语义标签本身不约束父容器类型，div 是中性容器，不覆盖也不干扰其角色声明。
- 辅助技术识别的是元素自身的
role（如banner、main、navigation），不是它上面有没有div - axe、WAVE 等检测工具不会为此报错；实测 NVDA、VoiceOver 均能正确 announce 这类结构
- 但注意：别为了“套一层”而多写无意义的
div—— DOM 层级过深（>6 层）会影响部分旧版辅助技术的遍历效率
为什么有时屏幕阅读器跳过了某段内容？
大概率不是因为 div 包裹，而是语义缺失或隐式隐藏。
-
display: none或visibility: hidden的元素会被辅助技术彻底忽略，哪怕里面是h1 - 没加
alt的img、没关联label的input、没设role或aria-label的自定义按钮，都会变成“不可读黑洞” -
main重复出现或漏掉，会让屏幕阅读器无法定位页面主体，用户得手动翻找
真正要盯紧的，是 HTML 合法性本身——用 validator.w3.org 扫一遍，比纠结 div 嵌套更有价值。无效 HTML 才是辅助技术解析失序的根源，而大多数 div 套语义标签的写法，恰恰是为了让结构更可控、更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
