ARIA简介
Source: Dev.to
WAI-ARIA 的目的是什么？它是如何工作的？
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）的目的是让网页内容和复杂的用户界面组件对残障人士更友好——尤其是在仅使用原生 HTML 无法为辅助技术（如屏幕阅读器）提供足够的语义信息来理解动态内容或自定义小部件时。它允许开发者向元素添加角色、状态和属性，使辅助技术能够识别事物是什么（例如菜单或按钮）以及它们处于什么状态（例如已展开或已选中），从而提升依赖可访问性工具的用户的导航和交互体验。
什么是 ARIA 角色？
ARIA 角色是你在 HTML 元素上添加的属性，用来告诉辅助技术（如屏幕阅读器）这些元素的作用或功能，当仅凭 HTML 本身无法明确其目的时。通过为元素指定角色（例如 button、navigation、alert、main 等），你为其定义语义含义，使可访问性工具能够正确呈现并与之交互，尤其是那些不使用内置语义元素的自定义或动态 UI 组件。这有助于残障用户更可靠地理解和浏览网页界面。
aria-label 与 aria-labelledby 属性的作用是什么？
aria-label 与 aria-labelledby 属性为元素提供可访问名称，以便辅助技术向用户传达其用途。
aria-label在元素内部直接提供文本标签，适用于没有可见文字的情况。aria-labelledby引用另一个元素的文本作为标签，允许复用已有内容。
两者都确保自定义或非文本元素能够被正确识别，并让依赖屏幕阅读器或其他可访问性工具的用户能够理解其含义。
aria-hidden 属性是什么？它是如何工作的？
aria-hidden 属性控制元素是否应向辅助技术暴露。
aria-hidden="true"会将元素从屏幕阅读器中隐藏，适用于装饰性或冗余内容。aria-hidden="false"则确保元素可以被朗读并与之交互。
当元素已经被隐藏时（例如使用 HTML 的 hidden 属性，或其本身或祖先元素使用 display: none 或 visibility: hidden），无需再使用 aria-hidden。在这些情况下，元素会自动从可访问性树中排除，aria-hidden 就显得多余。
aria-describedby 属性是什么？它是如何工作的？
aria-describedby 属性将一个元素与一个或多个提供额外描述信息的元素关联起来。屏幕阅读器等辅助技术可以传达这些超出元素名称或标签的有用上下文。与提供可访问名称的 aria-labelledby 不同，aria-describedby 指向的文本提供更详细的解释或操作指示，帮助用户更好地理解或使用该元素。被引用的内容不必在屏幕上可见，也能作为描述使用。
这些内容展示了在语义 HTML 不足时，ARIA 如何支持可访问性，从而实现更具包容性的自定义界面。它们为接下来的新工作坊 Build an Accessible Audio Controller 打下基础，我将在下次继续探讨。期间，继续编码吧！