数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学什么是 aria-label 及其使用方法？
标签对于盲人、低视力人士、行动不便人士或记忆力减退人士至关重要。如果缺少标签，许多用户将无法访问表单。视觉标签是出现在表单控件附近并描述特定表单字段或字段组中包含信息的文本。每个标签都必须以编程方式与表单控件或控件组关联。标签并不总是<label>元素。
aria-label 介绍
Aria label 代表可访问的富互联网应用程序 (Accessible Rich Internet Application)，这是一个 W3C 规范，用于改进可访问性，超越语义 HTML所能达到的水平。该组织的倡议是为残疾人提供通过 ARIA 标签连接到互联网或应用程序的解决方案。
aria-label 属性指定一个将用于标记当前元素的字符串。基本上，它用于为没有可见文本的屏幕元素提供文本替代项。它有助于定义字符串，并为辅助技术用户提供有关文档结构的附加信息。
aria-label 通常用于用更精确的信息替换现有标签。它允许辅助技术将标签附加到原本匿名的 HTML 元素。但是，我们必须谨慎使用 aria-label，因为它并不适用于所有 HTML 元素。
支持 aria-label 属性的 HTML 元素包括：
textarea
select
button
audio 和 video (当 control=”#” 时)
a (当 href=”#” 时)
众所周知，标签很重要，因为它们允许我们在元素及其描述之间建立逻辑连接。例如，在 HTML <input> 元素的情况下，我们可以使用 <label> 元素来指定 <input> 的用途。当没有元素可以作为标签时，我们可以使用 aria-label 属性。
我们可以使用 aria-label 指定用作辅助功能标签的字符串。这优先于任何其他本机标签机制，例如 label 元素；例如，如果一个按钮同时具有文本内容和 aria-label，则只使用 aria-label 值。
当我们对元素的目的有一些视觉指示时，例如使用图形而不是文本的按钮，但您仍然需要为无法访问视觉指示的任何人（例如仅使用图像指示其目的的按钮）澄清该目的，我们可能会使用 aria-label 属性。
HTML 元素的文本内容默认用作辅助功能标签。当元素具有 aria-label 属性时，辅助功能名称将转换为字符串并传递到该属性中。
ARIA 标签的优势
可访问性：使网页对残疾人（尤其是盲人）可访问，提供解释环境的视觉扩展。
体验：aria label 简单地解释页面内的内容，并显示如何切换控件和在文本框中书写。
视觉等效性：aria label 的意义在于，用户无需可视化所有内容，即可体验万维网的感受。aria label 是对 HTML API 的简单补充，但对于需要它的人来说，它是一个强大的工具。
如何使用 aria-label
Aria-label 期望值为一个字符字符串，这将是辅助功能名称。我们可以在标准 HTML 元素上使用 aria-label 属性。
示例
让我们看看如何将 aria-label 与 HTML <button> 元素一起使用。
<!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>
技术 |
声音输出 |
|---|---|
VoiceOver |
链接，阅读全文 |
ChromeVox |
阅读全文，链接 |
Narrator |
阅读全文，链接 |
NVDA |
链接，阅读全文 |
211 次浏览
