¥Accessibility
Radix Primitives 遵循 WAI-ARIA 创作实践指南,并在各种现代浏览器和常用辅助技术中进行了测试。
我们处理了许多与可访问性相关的复杂实现细节,包括 aria
和 role
属性、焦点管理和键盘导航。这意味着用户应该能够在大多数情况下按原样使用我们的组件,并依赖其功能遵循预期的无障碍设计模式。
¥We take care of many of the difficult implementation details related to accessibility, including aria
and role
attributes, focus management, and keyboard navigation. That means that users should be able to use our components as-is in most contexts and rely on functionality to follow the expected accessibility design patterns.
WAI-ARIA 由 W3C 发布和维护,它指定了 Radix Primitives 中出现的许多常见 UI 模式的语义。这旨在为未使用浏览器提供的元素构建的控件提供含义。例如,如果你使用 div
元素而不是 button
元素来创建按钮,则需要向 div
添加一些属性,以表明它是屏幕阅读器或语音识别工具的按钮。
¥WAI-ARIA, published and maintained by the W3C, specifies the semantics for many common UI patterns that show up in Radix Primitives. This is designed to provide meaning for controls that aren't built using elements provided by the browser. For example, if you use a div
instead of a button
element to create a button, there are attributes you need to add to the div
in order to convey that it's a button for screen readers or voice recognition tools.
除了语义之外,不同类型的组件还具有预期的行为。button
元素将以 div
元素无法响应的某些交互方式响应,因此开发者需要使用 JavaScript 重新实现这些交互。WAI-ARIA 创作实践 为实现 Radix 基础组件附带的各种控件的行为提供了额外的指导。
¥In addition to semantics, there are behaviors that are expected from different types of components. A button
element is going to respond to certain interactions in ways that a div
will not, so it's up to the developer to reimplement those interactions with JavaScript. The WAI-ARIA authoring practices provide additional guidance for implementing behaviors for various controls that come with Radix Primitives.
¥Accessible Labels
原生 HTML label
元素内置了许多表单控件,旨在为相应的 input
元素提供语义和上下文。对于非表单控件元素,或 Radix Primitives 提供的自定义控件,请参阅 WAI-ARIA 提供规范,了解如何为这些控件提供可访问的名称和描述。
¥With many built-in form controls, the native HTML label
element is designed to provide semantic meaning and context for corresponding input
elements. For non-form control elements, or for custom controls like those provided by Radix Primitives, WAI-ARIA provides a specification for how to provide accessible names and descriptions to those controls.
在可能的情况下,Radix Primitives 会包含抽象,以便简化控件的标记。Label
基础组件旨在与我们的许多控件配合使用。最终,你需要提供这些标签,以便用户在浏览你的应用时获得正确的上下文。
¥Where possible, Radix Primitives include abstractions to make labelling our controls simple. The Label
primitive is designed to work with many of our controls. Ultimately it's up to you to provide those labels so that users have the proper context when navigating your application.
¥Keyboard Navigation
许多复杂组件(例如 Tabs
和 Dialog
)都包含用户对如何使用键盘或其他非鼠标输入方式与其内容进行交互的期望。Radix Primitives 提供符合 WAI-ARIA 创作实践 规范的基本键盘支持。
¥Many complex components, like Tabs
and Dialog
, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. Radix Primitives provide basic keyboard support in accordance with the WAI-ARIA authoring practices.
¥Focus Management
正确的键盘导航和良好的标签通常与焦点管理密切相关。当用户与某个元素交互并因此导致某些内容发生变化时,将焦点随交互移动通常会很有帮助,这样下一个制表位就会根据应用的新上下文合乎逻辑。对于屏幕阅读器用户来说,移动焦点通常会导致系统发出通知来传达新的上下文,这依赖于正确的标签。
¥Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with an element and something changes as a result, it's often helpful to move focus with the interaction so that the next tab stop is logical depending on the new context of the app. And for screen reader users, moving focus often results in an announcement to convey this new context, which relies on proper labelling.
在许多 Radix 基础组件中,我们根据用户在给定组件中通常进行的交互来移动焦点。例如,在 AlertDialog
中,当模态框打开时,焦点会以编程方式移动到 Cancel
按钮元素,以预测对提示的响应。
¥In many Radix Primitives, we move focus based on the interactions a user normally takes in a given component. For example, in AlertDialog
, when the modal is opened, focus is programmatically moved to a Cancel
button element to anticipate a response to the prompt.