跳至内容

无障碍性

Radix Primitives 遵循 WAI-ARIA 作者实践指南,并在各种现代浏览器和常用辅助技术中进行测试。

我们处理了许多与无障碍性相关的复杂实现细节,包括 ariarole 属性、焦点管理和键盘导航。这意味着用户应该能够在大多数情况下按原样使用我们的组件,并依靠功能遵循预期的无障碍性设计模式。

WAI-ARIA

WAI-ARIA 由 W3C 发布和维护,它指定了 Radix Primitives 中出现的许多常见 UI 模式的语义。这旨在为不使用浏览器提供的元素构建的控件提供意义。例如,如果您使用 div 而不是 button 元素来创建一个按钮,则需要向 div 添加一些属性,以便向屏幕阅读器或语音识别工具传达它是一个按钮。

除了语义之外,还有一些行为是不同类型的组件所期望的。button 元素将以 div 不具有的方式响应某些交互,因此开发人员有责任使用 JavaScript 重新实现这些交互。 WAI-ARIA 作者实践 为实现 Radix Primitives 附带的各种控件的行为提供了额外的指导。

无障碍标签

在许多内置表单控件中,本机 HTML label 元素旨在为相应的 input 元素提供语义意义和上下文。对于非表单控件元素,或者对于像 Radix Primitives 提供的自定义控件, WAI-ARIA 提供了规范,说明如何为这些控件提供无障碍名称和描述。

在可能的情况下,Radix Primitives 包含抽象来简化对我们控件的标记。 Label 原语旨在与我们的许多控件一起使用。最终,您需要提供这些标签,以便用户在浏览您的应用程序时拥有适当的上下文。

键盘导航

许多复杂的组件,如 TabsDialog,对于用户如何使用键盘或其他非鼠标输入方式与其内容交互,都具有预期。Radix Primitives 根据 WAI-ARIA 作者实践 提供基本的键盘支持。

焦点管理

适当的键盘导航和良好的标记通常与焦点管理密切相关。当用户与元素交互并且结果发生变化时,移动焦点通常很有帮助,这样下一个制表位将根据应用程序的新上下文进行逻辑化。对于屏幕阅读器用户,移动焦点通常会导致公告传达这个新的上下文,这依赖于适当的标记。

在许多 Radix Primitives 中,我们根据用户通常在给定组件中采取的交互方式来移动焦点。例如,在 AlertDialog 中,当模式打开时,焦点以编程方式移动到 Cancel 按钮元素,以预期对提示的响应。

信息

来源: Radix UI