什么是咏叹调标签，我应该如何使用它？ [英] What is aria-label and how should I use it?

问题描述

几小时前，我阅读了咏叹调标签属性，其中：

A few hours ago I read about the aria-label attribute, which:

定义标签当前元素的字符串值。

Defines a string value that labels the current element.

但在我看来，这就是 title 属性应该做的事情。我进一步查看了 Mozilla开发者网络以获取一些示例和解释，但我发现的唯一的事情是

But in my opinion this is what the title attribute was supposed to do. I looked further in the Mozilla Developer Network to get some examples and explanations, but the only thing I found was

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

这不会给我提供任何标签（所以我假设我误解了这个想法）。我在 jsfiddle 这里试过。

Which does not provide me with any label (so I assume I misunderstood the idea). I tried it here in jsfiddle.

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

So my question is: why do I need aria-label and how should I use it?

推荐答案

这是一个属性，旨在帮助辅助技术（例如屏幕阅读器）将标签附加到匿名HTML元素。

It's an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

所以有< label> 元素：

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

< label> 明确地告诉用户将其名称输入到输入框中，其中 id =fmUserName。

The <label> explicitly tells the user to type their name into the input box where id="fmUserName".

aria-label 完成同样的事情，但是对于那些不切实际或不希望拥有标签在屏幕上。以 MDN示例：

aria-label does much the same thing, but it's for those cases where it isn't practical or desirable to have a label on screen. Take the MDN example:

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

大多数人都能够直观地推断出这个按钮会关闭对话框。使用辅助技术的盲人可能会听到X大声朗读，如果没有视觉线索，这并不意味着什么。 aria-label 明确告诉他们按钮的作用。

Most people would be able to infer visually that this button will close the dialog. A blind person using assistive technology might just hear "X" read aloud, which doesn't mean much without the visual clues. aria-label explicitly tells them what the button will do.

这篇关于什么是咏叹调标签，我应该如何使用它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！