【发布时间】：2018-10-01 04:07:08
【问题描述】：
属性aria-label什么时候用在什么情况下， .哪些是支持此属性的标签 .什么情况下使用这个属性 .有没有使用这个属性的规则。
如果问题不清楚，请发表评论
【问题讨论】：
-
也许您可以在这里找到问题的答案。 stackoverflow.com/questions/22039910/…
标签： html web attributes
【发布时间】：2018-10-01 04:07:08
【问题描述】：
aria-label 在不能使用可见标签的情况下提供不可见标签。
此技术的目的是为辅助技术可以读取的对象提供标签。 aria-label 属性提供对象的文本标签，例如按钮。当屏幕阅读器遇到该对象时，会读取 aria-label 文本，以便用户知道它是什么。
所有html标签都支持aria-labelarea-label attributes can be used with
<button aria-label="Close">X</button>
【讨论】：
-
我怀疑它是读取 aria-label 文本还是标签之间的文本
-
没有。您必须在 aria-label 中添加两个文本。
-
@MohammedRabiullaRABI 如果您改用
aria-labeledby，您可以指向多个ID（以空格分隔）。其中一些是可见的，有些则不是。这样您就不需要两次包含相同的字符串。例如<button aria-labeledby="foo bar"><span id="foo">Open</span><span id="bar" class="offscreen">in new window</span></button>会显示“打开”，但屏幕阅读器会显示“在新窗口中打开”。 （假设该类offscreen实际上将跨度放置在屏幕外某处）。
标签用于描述字段。拥有一个描述字段的标签非常重要，这样当用户浏览时，他们知道他们应该在那里做什么。试想一下，如果您在一个新地方，但您不知道名称并且没有标记，那么您怎么知道该地方的名称。原来如此。
现在我们来说说 aria-label，它是用来定义当前字段的标签的。最好在标签不可见时使用。此外，最好的做法是为屏幕阅读器设置 aria-label，想想一个正在使用辅助技术的盲人，他正在连接一个表单并且有一个按钮，请看下面 (MDN Example)：
X
那个盲人会在屏幕阅读器中听到什么，他会听到 X，通过这个文本他不会明白这个按钮是用来关闭对话框的。
X
如果有像那个例子那样的 aria-label，那么肯定会明白这个按钮是用来关闭对话框的。
因此，在每个可操作的字段中使用 aria-label 是最佳做法。
我认为我们应该在 aria-label 中遵循一条规则，那就是“不要改变语义元素的含义”
【讨论】：
-
如果该文本本身是“关闭的”，我认为不需要 aria-label 对吗？
-
是的，但最好在目标字段的标签上使用它，因为屏幕阅读器会读取 aria-label。因为在表单中使用标签是一种很好的做法。如果您没有足够的空间，只需使用负边距来隐藏该标签。但最好为表单字段使用标签。
在下面的示例中，按钮的样式看起来像典型的“关闭”按钮，中间有一个 X。由于没有任何迹象表明按钮的目的是关闭对话框，因此 aria-label 属性用于为任何辅助技术提供标签。
In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.
<button aria-label="Close">X</button>X
【讨论】：