优先使用原生HTML元素，必要时用ARIA补充；正确设置role、aria-*属性以准确传达语义、状态与关系，并随界面变化动态更新，确保辅助技术可感知。
ARIA（Accessible Rich Internet Applications）属性用于增强网页的可访问性，帮助辅助技术（如屏幕阅读器）更好地理解动态内容和复杂控件。正确使用ARIA能提升残障用户对Web应用的使用体验，但错误使用反而会造成干扰。以下是ARIA在HTML中的正确使用规范。
1. 只在必要时使用ARIA
优先使用原生HTML元素，因为它们自带语义和可访问性支持。只有当标准HTML无法满足需求时才引入ARIA。
- 用 button 元素代替 。
- 用 nav、main、section 等语义化标签替代 role="navigation" 或 role="main"。
- 避免“ARIA滥用”：不要给已有语义的元素重复添加role或aria-*属性。
2. 正确使用role属性
role 定义元素的类型或功能，应根据组件的实际行为选择合适值。
- 常见角色：button、alert、dialog、tablist、menu。
- 例如自定义下拉菜单：
- ...
- 确保role与实际交互一致，否则会误导辅助技术。
3. 使用aria-*属性传达状态和关系
ARIA提供多种属性描述动态状态和元素之间的关联。
立即学习“前端免费学习笔记（深入）”；
- aria-expanded：表示可折叠元素是否展开。
-
aria-hidden：隐藏视觉上存在但对辅助技术无意义的内容。
-
aria-labelledby 和 aria-label：为无文本标签的元素提供名称。
确认删除？
-
aria-describedby：指向描述性文本，适用于提示或错误信息。
密码需包含字母和数字
4. 保持ARIA属性动态更新
当界面状态变化时，必须同步更新相关ARIA属性。
- 模态框打开时设置 aria-modal="true"，关闭时移除或设为false。
- 切换选项卡时，更新 aria-selected="true" 和 tabindex。
- 使用JavaScript监听事件并修改属性，确保辅助技术及时感知变化。
基本上就这些。关键是：用原生HTML优先，按需补充ARIA，确保语义准确、状态同步、标签清晰。不复杂但容易忽略细节。
