必须显式用label关联input，id需唯一且拼写准确；复杂说明用aria-describedby指向真实dom元素；无文本元素须用aria-label或aria-labelledby补充语义；交互元素需role与语义匹配。
label必须显式关联input，不能只靠placeholder
placeholder不是可访问的标签，它一聚焦就消失，屏幕阅读器通常不读、也不形成语义绑定。用户填表单时若没
必须用label配合for和id，或把input嵌进label里：
<label for="email">邮箱地址</label> <input type="email" id="email" name="email">
- ID 必须全局唯一、大小写敏感、不含空格或冒号；拼错（比如
emial）会导致关联静默失效 - 嵌套写法更简洁：
<label>邮箱地址 <input type="email"></label>，但注意默认是块级，需加display: inline防样式崩 - 别在已有
label的input上再加aria-label，否则读屏器会重复播报
复杂说明用aria-describedby，别塞进label或title
当密码规则、文件上传格式、错误提示等信息太长或含链接/换行时，label装不下，title又不可靠（移动端不触发、读屏支持差），就得用aria-describedby。
它指向一个已存在的 DOM 元素 ID，内容可被 CSS 控制显隐、JS 动态更新：
<input type="password" id="pwd" aria-describedby="pwd-hint pwd-error"><div id="pwd-hint">至少8位，含大小写字母和数字</div> <div id="pwd-error" role="alert"></div>
- 多个描述用空格分隔，ID 必须真实存在且未被框架（如 React）销毁重命名
-
role="alert"让错误提示能中断当前朗读，比单纯aria-live="polite"更可靠 - 目标元素别设
display: none——用visibility: hidden或aria-hidden="true"更稳妥 - iOS VoiceOver 对多 ID 空格分隔的支持不稳定，关键场景建议单 ID + 合并内容
图标、按钮等无文本元素必须补ARIA描述
纯<button></button>或<span class="icon-close"></span>没有文字，读屏器无法告知功能。不能依赖title，得用aria-label或aria-labelledby。
-
aria-label适合静态简短描述，比如<button aria-label="删除这条记录"></button> -
aria-labelledby适合复用页面中已有文本，比如图表标题：<h2 id="chart-title">Q2销售额趋势</h2> <canvas aria-labelledby="chart-title"></canvas> - 装饰性图标（如分割线旁的小点）应设
aria-hidden="true"，而不是删掉属性或留空 - 别给
<img>写alt="图片"——有意义的图写具体描述，纯装饰写alt=""
避免tabindex="0"裸奔，焦点元素必须带role和语义
给div加tabindex="0"只是让它能被 Tab 到，但屏幕阅读器仍当它是普通容器，不会提示“这是个按钮”。用户按 Enter 也不会触发行为。
- 必须同时加
role="button"（或其他对应 role）和aria-label或aria-labelledby - 原生
<button></button>、<a></a>、<input>默认可聚焦、有语义、有键盘行为，优先用它们 -
tabindex="-1"只用于 JS 动态聚焦（如模态框打开后聚焦首元素），它不可通过 Tab 进入 - 内联
onclick要换成data-action钩子+事件委托，否则逻辑和结构混在一起，后续加埋点、权限都难
aria-describedby目标元素的存活状态、以及所有交互元素的 role 补全。这些点不出错，辅助技术用户才能真正“看见”你的界面。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
