什么是咏叹调标签，我应该如何使用？

HTML

Gil

2020-03-24

几个小时前，我阅读了有关aria-label属性的信息：

定义一个标记当前元素的字符串值。

但是我认为这就是title属性应该做的。我在Mozilla开发人员网络中进一步查找了一些示例和解释，但是我发现的唯一是

<button aria-label="Close" onclick="myDialog.close()">X</button>

这没有给我提供任何标签（所以我认为我误解了这个想法）。我在jsfiddle中尝试过。

所以我的问题是：为什么我需要aria-label和如何使用它？

第3331篇《什么是咏叹调标签，我应该如何使用？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
Tom卡卡西 2020.03.24

如果你想知道如何aria-label帮助你几乎 ..然后按照步骤......你会被你自己弄吧..

创建具有以下代码的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

现在，您需要一个虚拟屏幕阅读器模拟器，该模拟器将在浏览器上运行以观察差异。因此，Chrome浏览器用户可以安装chromevox扩展名，而mozilla用户可以使用fangs 屏幕阅读器插件

安装完成后，将耳机戴在耳朵上，打开html页面，然后将两个按钮（通过按Tab键）分别放在一个按钮上..您会听到..专注于first x button..只会告诉您x button..如果是second x button..，您只会听到back to the page button..

我希望你现在一切顺利！

卡卡西Near 2020.03.24

先决条件：

Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control

Aria does not change anything visually. (Aria is scared of designers too).

aria-label

aria-label attribute is used to communicate the label to screen reader users. Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users

How To Use:

<input type="edit" aria-label="search" placeholder="search">

There is no visual change in application. But screen readers can understand the purpose of control

aria-labelledby

aria-label和aria-labeledby均用于传达标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签，而aria-label用于传达我无法直观显示的标签

方法1：

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

方法二：

aria-labelledby还可以用于为屏幕阅读器用户组合两个标签

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
伽罗理查德 2020.03.24

title当鼠标悬停元素时，该属性显示工具提示。尽管这是一个很好的补充，但它不能帮助不能使用鼠标的人（由于行动不便）或看不到此工具提示的人（例如：视觉障碍者或使用屏幕阅读器的人）。

因此，此处的主观方法是为所有用户提供服务。我会同时添加title和aria-label属性（服务于不同类型的用户和不同类型的Web使用）。

这是一篇很好的文章，深入解释aria-label了

古一 2020.03.24

此属性旨在帮助辅助技术（例如屏幕阅读器）将标签附加到其他匿名HTML元素上。

因此，有一个<label>元素：

<label for="fmUserName">Your name</label>
<input id="fmUserName">

在<label>明确地告诉用户输入他们的名字进入input对话框，在其中id="fmUserName"。

aria-label所做的事情大致相同，但这是针对那些不实际或不希望label在屏幕上显示的情况。以MDN为例：

<button aria-label="Close" onclick="myDialog.close()">X</button>`

大多数人都可以直观地推断出此按钮将关闭对话框。使用辅助技术的盲人可能只会听到“ X”声，如果没有视觉提示，这并没有多大意义。aria-label明确告诉他们该按钮将执行的操作。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android