可访问性 角色、名称和值

为什么

用户界面组件需要一个角色、一个名称，有时还需要一个值，以确保使用 辅助技术 的用户能够使用它们。辅助技术的例子包括屏幕阅读器、开关控件和语音识别软件。

什么

有两种情况，即使我们想使用一个具有内置可访问性功能的良好 HTML 元素，我们也无法做到：

• 没有原生的 HTML 元素来实现我们想要实现的功能。
• 存在技术限制，阻止我们使用语义正确的元素。

在这两种情况下，我们都需要构建一个自定义控件。一个重要的可访问性原则是，自定义控件需要一个角色、一个名称，有时还需要一个值。

如何操作

我们如何确保自定义组件具有角色、名称和值？

角色

在我们上一节“按钮和链接”中，我们了解到下拉菜单按钮应该被编码为一个 <button>。如果我们的框架不允许我们这样做怎么办？如果它强制我们改用 <a> 呢？如果我们正在使用的库中的导航组件是用 <a> 构建的呢？那么我们需要添加一个角色。

这是通过 role="button" 属性完成的。现在，辅助技术的用户可以理解自定义控件是什么。<button> 具有内置的 role="button"，因此编写 <button role="button"> 是多余的。

名称

自定义控件需要一个名称。在我们的例子中，名称是元素的内容，即Company。只要我们是这样编写元素的：<div role="button">Company</div>，我们就拥有了一个好的名称。这也被称为可访问名称。我们 <div> 的可访问名称是Company。很好。

这太简单了。在下面的登录表单中，我们有几个组件——一个 logo、一个标题、一个标签、一个下拉菜单、一个输入框和一个按钮。

我们正在仔细查看标签、下拉菜单和输入框。在视觉上，下拉菜单和输入框之间没有明显的区别。下拉菜单是用 <select> 编码的，这是一个适合此情况的正确元素。但是，它没有名称。

<select name="countryCode">…</select>

它有一个 name 属性。这与可访问名称不同。这令人困惑。文章《什么是可访问名称？》对此进行了更详细的解释。name 属性是为计算机准备的。在 <form> 中，它在提交数据时用作引用。这个名称 countryCode 对任何用户都没有帮助。它不会被辅助技术识别。

要给这个 <select> 提供可访问名称，我们必须使用 aria-label 属性。通常，我们会将一个可见标签连接到 <select> 组件。在此情况下，只有一个可见标签同时用于这两个组件。

这是一个带有可访问名称的 <select>

值

某些组件具有值或状态。手风琴是打开还是关闭。这个信息必须是可访问的。

手风琴被视为自定义组件。这里没有标准的 HTML 元素可以使用。每个手风琴标题都应该是 <button> 或 role="button"

<div role="button">我何时会被收取乘车费用？</div>

好的。它具有 button 的角色。它也有一个名称，即 div 的内容。要给这个 button 提供一个值，我们需要告诉辅助技术它当前是关闭的。这是通过 aria-expanded="false" 完成的。

<div role="button" aria-expanded="false">我何时会被收取乘车费用？</div>

现在，我们的手风琴标题具有角色、名称和值。