什么是 aria-label?如何使用?

htmlweb developmentfront end technology更新于 2025/3/29 15:40:17

标签对于盲人、视力低下、行动不便或记忆力减退的用户至关重要。如果缺少标签，许多用户将无法访问表单。视觉标签是出现在表单控件附近的文本，用于描述特定表单字段或字段组中包含的信息。每个标签必须以编程方式与表单控件或控件组关联。标签并不总是 <label> 元素。

aria-label 简介

Aria 标签 代表 无障碍富互联网应用，这是一项 W3C 规范，旨在提高无障碍性，超越语义 HTML 所能实现的范围。组织者的倡议是为残障人士提供通过 ARIA 标签连接到互联网或应用程序的解决方案。

aria-label 属性指定用于标记当前元素的字符串。基本上，它用于为没有可见文本的屏幕元素提供替代文本。它有助于定义字符串，并为辅助技术用户提供有关文档结构的附加信息。

Arial-label 通常用于用更精确的信息替换现有标签。它允许辅助技术将标签附加到原本匿名的 HTML 元素上。但是，使用 aria-label 时必须谨慎，因为它并非适用于所有 HTML 元素。

支持 aria-label 属性的 HTML 元素包括:

textarea
select
button
音频和视频(当 control="#" 时)
a(当 href="#" 时)

众所周知，标签非常重要，因为它们使我们能够在元素及其描述之间建立逻辑联系。例如，对于 HTML <input> 元素，我们可以使用 <label> 元素来指定 <input> 的内容。当没有元素可以用作标签时，我们可以使用 aria-label 属性。

我们可以使用 aria-label 属性指定一个字符串作为可访问标签。这优先于任何其他原生标签机制，例如 label 元素;例如，如果一个按钮同时包含文本内容和 aria-label，则只使用 aria-label 值。

当我们对元素的用途有某种视觉指示时，例如按钮使用图形而非文本，但仍需要向无法访问视觉指示的用户阐明该用途(例如按钮仅使用图像来指示其用途)，我们可能会使用 aria-label 属性。

默认情况下，HTML 元素的文本内容用作可访问性标签。当元素具有 aria-label 属性时，可访问名称将转换为字符串并传递到该属性中。

ARIA 标签的优势

可访问性:使残障人士(尤其是盲人)可以访问网页，可以通过视觉扩展来解读环境。
体验: aria 标签简单地解释页面内容，并显示如何切换控件以及如何在文本框中书写。
视觉等效性: aria 标签的重要性在于，它能够让用户无需将所有内容都可视化，就能体验到万维网的体验。 aria 标签是 HTML API 的一个简单补充，但对于需要它的人来说，它是一款强大的工具。

如何使用 aria-label

Aria-label 的值需要一个字符串，该字符串将作为可访问的名称。我们可以在标准 HTML 元素上使用 aria-label 属性。

示例

让我们看看如何在 HTML <button> 元素中使用 aria-label。

<!DOCTYPE html>
<html>
  <head>
    <title>What is aria-label and How to Use It?</title>
  </head>
  <style>
      button{
          background-color:lightgrey;
          border:0;
          height:25px;
          width:25px;
          font-size:18px;
          color:darkslategrey;
          margin:10px;
      }
      button:hover{
          background-color:crimson;
          color:white;
      }
  </style>
  <body>
    <button aria-label="close" onclick="myDialog.close()">x</button>
  </body>
</html>

在本例中， <button> 的样式类似于标准的"关闭"按钮。我们使用 aria-label 属性为辅助技术提供标签，因为没有任何内容表明该按钮的用途。

示例

我们来看另一个示例，这次使用 <a> 元素上的 aria-label。

<!DOCTYPE html>
<html>
  <head>
    <title>What is aria-label and How to Use It?</title>
    <style>
        a{
            background-color:azure;
            color:indigo;
            font-size:20px;
            margin:10px;
        }
        a:hover{
            background-color:indigo;
            color:azure;
        }
    </style>
  </head>
  <body>
    <a href="#" class="more-link" aria-label="read the entire article">More</a>
  </body>
</html>