html5语义化标签优先，aria仅在必要时动态补充状态与关系；避免冗余role声明，禁用aria-label掩盖结构问题；验证须以辅助技术实际体验为准。
HTML5语义化标签本身已自带明确含义和默认无障碍支持，但结合ARIA属性不是为了“补救”语义缺失，而是为复杂交互场景提供精准、动态的语义补充。关键在于：原生语义优先，ARIA只在必要时增强。
先用对语义化标签，再决定是否加ARIA
浏览器和屏幕阅读器对
- ✅ 正确做法：用
- ❌ 不推荐：用模拟表单组——绕过了更可靠、更简洁的原生方案
- ✅ 合理补充：若用
实现手风琴菜单，则必须加role="tablist"、role="tab"、role="tabpanel"，因为本身无此语义用ARIA描述动态状态与关系
语义化标签描述静态结构，ARIA擅长表达变化中的状态和跨元素关联。例如，一个切换显示/隐藏的搜索框，视觉上可展开收起，但语义需同步更新。
- aria-expanded="true/false"：标记折叠组件当前状态（如侧边栏、下拉菜单），屏幕阅读器会播报“已展开”或“已折叠”
- aria-hidden="true/false"：配合JavaScript控制内容可见性时，同步告知辅助技术该区域是否应被忽略
- aria-controls="target-id"：声明一个按钮控制另一个区域（如“筛选”按钮控制筛选面板），建立操作与结果的逻辑链
- aria-labelledby / aria-describedby：当标签或说明文字物理分离时（如图标按钮旁有隐藏文本，或密码输入框下方有提示），用ID引用确保语义连通
避免常见误用陷阱
ARIA不是装饰品，滥用反而损害可访问性。以下行为会削弱而非增强语义：
- 给
- 用div + role="link"替代——失去原生链接的键盘操作（Enter/Space）、跳转能力及SEO价值
- 仅靠aria-label掩盖语义混乱的结构——比如用aria-label="登录表单"包裹一堆无序div，不如重构为
- 忘记同步更新ARIA状态——JavaScript切换内容后未更新aria-expanded或aria-hidden，导致辅助技术读取过期信息
验证是否真正增强了语义
最终判断标准不是代码是否“写了ARIA”，而是辅助技术能否准确理解并传达意图：
- 用NVDA或VoiceOver朗读页面，检查结构层级、控件名称、状态提示是否清晰自然
- 仅用键盘Tab导航，确认焦点顺序合理，所有交互元素均可到达且状态可见
- 动态操作后（如点击展开），验证屏幕阅读器是否及时播报新状态（如“菜单已展开”）
- 使用浏览器开发者工具的“Accessibility”面板，查看ARIA属性是否被正确识别、无冲突或冗余
- ✅ 合理补充：若用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
