可访问性 角色、名称和值

为什么

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

什么

在两种情况下，我们无法使用具有内置可访问性功能的良好 HTML 元素，即使我们希望这样做

• 我们试图实现的目标没有原生 HTML 元素。
• 存在技术限制，阻止我们使用语义上正确的元素。

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

如何

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

角色

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

这可以通过 role="button" 属性来实现。现在，辅助技术的用户可以理解自定义控件是什么。<button> 内置了 role="button"，所以写 <button role="button"> 是多余的。

名称

自定义控件需要一个名称。在我们的示例中，名称是元素的内容，即 公司。只要我们将元素写成 <div role="button">公司</div>，我们就有一个很好的名称。这也称为可访问名称。我们 <div> 的可访问名称是 公司。很好。

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

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

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

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

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

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

值

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

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

<div role="button">我什么时候开始支付行程费用？</div>

很好。它具有按钮的角色。它还有一个名称，即 div 的内容。要为这个按钮赋予一个值，我们需要告诉辅助技术它处于关闭状态。这可以通过 aria-expanded="false" 来实现

<div role="button" aria-expanded="false">我什么时候开始支付行程费用？</div>

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