可访问性问题根源在于语义结构崩坏与属性冗余，导致屏幕阅读器误读、跳过或重复播报；label与aria-label共存违反“唯一可访问名称”规范；HTML5解析器静默修正非法嵌套会破坏ARIA关系；alt、aria-hidden、role="presentation"作用机制不同，混用易引发不可访问黑洞。
可访问性问题不是“加个aria-label就完事”，很多错误源于语义结构崩坏或属性冗余，直接导致屏幕阅读器跳过内容、误读层级、重复播报，甚至完全失效。
为什么label和aria-label同时存在会触发“重复标签”警告
当一个<input>既通过for/id关联了<label>，又设置了内容相同的aria-label，辅助技术会计算两次可访问名称——这违反了WAI-ARIA规范中“唯一可访问名称”的要求。
- 屏幕阅读器可能播报两遍，或只取优先级更高的
aria-label而忽略视觉标签，造成上下文断裂 - ARC Toolkit、axe等工具会明确报错：
ARIA input field has both a visible label and an aria-label - 修正方式：二选一。优先用
<label>（语义清晰、支持点击聚焦、无需额外维护），仅在无法包裹或动态渲染场景下才用aria-label - 若必须共存（如旧系统迁移过渡期），确保文本不一致，例如
label写“邮箱”，aria-label写“用于接收验证邮件的邮箱地址”
<header>、<nav>替换div后样式全丢，根本原因不是CSS不兼容
是选择器没覆盖新标签。浏览器对<header>等元素没有默认样式（除了display: block），它不会继承.header类的任何规则。
- 现象：替换后高度塌陷、margin失效、字体还原为浏览器默认值——本质是“无样式”，不是“样式错乱”
- 立即修复：把
.header改成header，或扩写为header, .header保持兼容 - 浮动清除要同步更新：
div.clearfix的::after伪元素规则对<nav>无效，得加nav { display: flow-root; }或保留class="clearfix" - 别依赖
outline调试语义结构——它只显形，不暴露DOM嵌套断裂。真出问题时，用DevTools右键父容器 → “Edit as HTML”，删个空格再回车：如果子节点整体跳出，说明原始HTML已被浏览器静默修正
浏览器自动“修”HTML，反而让可访问性更糟
HTML5解析器对非法嵌套（比如<p><div>...</div></p>）的容错处理，会直接关闭<p>，把<div>扔到外面。结果DOM变成<p>...</p><div>...</div>——你写的<section aria-labelledby="title">根本没包住标题，aria-labelledby彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 这类错误W3C Validator会直报：
Error: Element div not allowed as child of element p - 检查方法：在Console运行
document.body.innerHTML，和你本地源码逐行比对；多出的</p>、消失的<section>就是线索 - 常见高危组合：
<p>里塞<div>、<h1>、<ul>；<li>里塞<section>；<button>里嵌<a> - 修正原则：语义容器只放允许的子元素。查MDN文档的“Permitted content”字段，别凭感觉嵌套
alt、aria-hidden、role="presentation"混用容易踩坑
它们目标相似（隐藏内容），但作用机制和可访问性影响完全不同，错配会导致图片被跳过、图标文字不可读、或焦点陷阱。
-
alt=""：对装饰性图片正确；但若图片本身含关键信息（如流程图、验证码），留空等于删除内容 -
aria-hidden="true"：隐藏元素及其所有子节点，但**仍保留在DOM中、仍可被JS操作、仍占用tab顺序（除非同时设tabindex="-1"）** -
role="presentation"：仅移除元素自身的语义，子元素仍按原样暴露给辅助技术——适合包裹图标+文字的<span>，让屏幕阅读器跳过容器，只读文字 - 最危险组合：
<img src="x.png" alt="" aria-hidden="true">——双重隐藏，但若JS later移除aria-hidden，图片仍无alt，变成不可访问黑洞
真正卡住人的，往往不是某个属性怎么写，而是DOM结构被浏览器悄悄改写后，你还在对着源码调CSS或ARIA——先确认实际渲染的DOM是否和你写的HTML一致，再动其他。
