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