如何使用HTML属性提升网站和应用的可访问性
内容提要
本文介绍了增强可访问性的关键HTML属性，如alt、aria-label、aria-labelledby、aria-describedby、role、tabindex、title、for、scope、aria-hidden、aria-live、aria-roledescription和aria-atomic。这些属性提供更好的可访问性体验，确保所有用户能轻松使用网页。
延伸解读
ARIA 使用原则：少即是多
文章强调，ARIA 属性并非越多越好。过度使用可能干扰屏幕阅读器用户，且对视力正常的用户不可见，导致认知差异。最佳实践是优先使用原生语义 HTML 元素，仅在必要时用 ARIA 补充。例如，按钮内已有 alt 或 title 时，无需再加 aria-label。保持代码简洁可维护，避免冗余标签。
alt 与 aria-label 的适用场景
alt 用于图像替代文本，装饰性图像应留空以跳过。aria-label 为无可见文本的元素提供名称，如仅含 SVG 的按钮。但若元素已有可见文本或内部图像有 alt，则不应重复使用 aria-label。优先使用可见标签，或用 aria-labelledby 关联现有文本，以减少维护负担和认知不一致。
动态内容通知：aria-live 与 aria-atomic
aria-live 用于通知屏幕阅读器动态变化，polite 等待用户空闲，assertive 立即打断。aria-atomic 控制更新时是否朗读整个区域。两者常配合使用，如新闻滚动条设置 aria-live="polite" 和 aria-atomic="true"，确保每次更新完整播报。避免滥用 assertive，以免过度干扰用户。
键盘导航与焦点管理：tabindex 与 inert
tabindex 控制键盘焦点：0 加入自然顺序，负值移出 Tab 顺序但可编程聚焦，正值应避免以免混乱。inert 使元素及其子元素完全不可交互且对辅助技术隐藏，常用于模态框打开时禁用背景内容。与 aria-hidden 不同，inert 影响所有用户交互，需谨慎使用并及时移除。
Q&A
什么是ARIA属性，它们的作用是什么？
ARIA属性是一组由W3C定义的属性，用于增强Web应用程序的可访问性，提供额外信息给辅助技术，如屏幕阅读器。
如何使用alt属性来提升图像的可访问性？
alt属性用于提供图像的替代文本，确保屏幕阅读器能够正确描述图像，若图像是装饰性的，则alt属性应留空。
aria-labelledby和aria-label有什么区别？
aria-labelledby用于将元素与已有的可见文本关联，而aria-label直接为元素提供一个不可见的标签。
tabindex属性的作用是什么？
tabindex属性用于控制元素的键盘导航顺序，使非交互元素可聚焦或禁用交互元素的聚焦。
如何使用aria-live属性来通知用户动态内容的变化？
aria-live属性用于通知辅助技术有关动态内容的变化，确保用户及时了解重要更新。
使用title属性时需要注意哪些可访问性问题？
title属性可能不会被屏幕阅读器一致地读取，且其内容通常仅在鼠标悬停时显示，可能导致某些用户无法访问这些信息。
