Radix Primitives 遵循 WAI-ARIA 编写实践指南,并在各种现代浏览器和常用辅助技术中进行了测试。
我们处理了许多与无障碍功能相关的复杂实现细节,包括 aria
和 role
属性、焦点管理和键盘导航。这意味着用户应该能够在大多数情况下按原样使用我们的组件,并依靠功能来遵循预期的无障碍设计模式。
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
primitive 旨在与我们的许多控件一起使用。最终,由您来提供这些标签,以便用户在导航您的应用程序时获得适当的上下文。
许多复杂组件,如 Tabs
和 Dialog
,都带有用户对其内容如何使用键盘或其他非鼠标输入方式进行交互的期望。Radix Primitives 根据 WAI-ARIA 编写实践 提供基本的键盘支持。
适当的键盘导航和良好的标签通常与焦点管理密切相关。当用户与元素交互并且结果发生某些变化时,根据应用程序的新上下文移动焦点通常很有帮助,以便下一个 tab 键停靠位是符合逻辑的。对于屏幕阅读器用户,移动焦点通常会导致发布公告以传达此新上下文,这依赖于适当的标签。
在许多 Radix Primitives 中,我们根据用户在给定组件中通常采取的交互来移动焦点。例如,在 AlertDialog
中,当模态框打开时,焦点将以编程方式移动到 Cancel
按钮元素,以预期对提示做出响应。