无障碍

了解如何充分利用 MUI Base 的无障碍功能和指南。

无障碍是我们 MUI Base 组件的首要任务。然而，该库本身无法使您的应用程序完全无障碍。本页重点介绍作为开发者，您必须采取的最常见操作，以确保您的应用对需要辅助技术的用户是无障碍的。

键盘导航

MUI Base 组件遵循 WAI-ARIA 1.2 标准，因此它们开箱即可通过键盘访问。这对那些难以使用指针设备的用户很重要，但对于那些发现使用键盘导航更快，并且期望 Web 组件的行为方式与原生操作系统控件相同的用户也很有用。

具体来说，交互式组件可以使用 Tab 键聚焦。类似列表的组件（例如 Select 和 Menu）可以使用方向键、Home、End、Enter/Return 和 Escape 键浏览和激活。Select 和 Menu 还允许用户通过按字母数字键导航到以提供的字符串开头的选项。

焦点环

虽然 MUI Base 组件处理键盘导航，但开发者有责任指示组件何时被聚焦并且可以接收键盘输入。这通常通过样式化 :focus 或 :focus-visible 伪类来完成。阅读 WCAG 关于焦点外观的指南，以了解有关焦点指示器要求的更多信息。

颜色对比度

由于 MUI Base 组件是无样式的，因此由您来实现在文本和背景之间实现适当的颜色对比度。您可以使用 C. Liam Brown 的颜色对比度工具来测量设计中颜色之间的对比度，并确保它们满足最低要求（请注意，此工具使用 APCA 算法，该算法预计将成为 WCAG 3 中的新标准）。

无障碍标签

您有责任确保组件具有无障碍名称。

对于表单控件（例如 Input、Number Input 和 Select），这需要添加关联的 <label> 元素，或在组件本身上放置 aria-label 属性

<label>
  First name <Input />
</label>

或

<label for="first-name">First name</label>
<Input id="first-name" />

或

<Input aria-label="First name" />

对于按钮，它们的内部文本成为无障碍标签。如果按钮不包含文本（例如图标按钮），您才需要放置 aria-label 属性。