aria-label 和 title 属性有啥区别？

Posted 2023-02-16

【中文标题】aria-label 和 title 属性有啥区别？

【英文标题】：What is the difference between aria-label and title attributes?aria-label 和 title 属性有什么区别？

【发布时间】：2015-03-13 06:07:55

【问题描述】：

我习惯在我的链接/按钮/...上使用title="" 属性来详细说明它们。但据我所知，出于可访问性的原因，bootstrap 使用了很多 aria-label="" 属性。

所以我想创建如下按钮：

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-label="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw">
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

但是复制/粘贴标题以创建 aria-label 看起来很丑陋。我应该选择哪一个，为什么？

【参考方案1】：

ARIA 标记用于您网站的禁用访问者。 Bootstrap 非常好，默认支持它。

Accessible Rich Internet Applications (ARIA) 定义了创建 Web 的方法 内容和 Web 应用程序（尤其是那些使用 Ajax 和 javascript）更容易被残障人士使用。例如， ARIA 支持可访问的导航地标、JavaScript 小部件、表单 提示和错误消息、实时内容更新等。

来源：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

要回答您的问题，您应该使用哪一个，请仅使用title-attribute。因为如果您的鼠标悬停在按钮上并将title 的文本显示为工具提示，则使用此属性。 aria-label 不支持这种方式。

【讨论】：

但是屏幕阅读器仍然只能使用标题吗？

很遗憾，无法将此添加为新答案，但应使用aria-label 属性而不是title 属性。这里有一篇很好的文章解释了原因，包括一个注释，默认情况下某些屏幕阅读器不会大声朗读 title 属性：dev.opera.com/articles/ux-accessibility-aria-label/…

aria-label 应与title 属性结合使用。 Aria 用于屏幕阅读器，title 属性用于想要了解有关按钮操作的更多信息的其他人。

屏幕阅读器的世界在处理title + aria-label + 我上次检查时的锚文本方面相当分散：Source 1，Source 2。这对于依赖屏幕阅读器的人来说是非常不幸的，因为他们必须听很多额外的、多余的内容。

您不能依赖 2013 年的文章。一切都应在实际应用版本上进行测试。

【参考方案2】：

要支持屏幕阅读器和工具提示，请同时使用 aria-label 和 title 属性。

如果您不需要工具提示，请使用 aria-label，因为这是辅助功能支持的首选。

【参考方案3】：

请根据 W3C.org Web Accessibility Initiative 的网站检查以下优先顺序：

<label for="reference-id for labelled form-element" class="visuallyhidden"> <form-element aria-label="label for the form-element"> <form-element aria-labelledby="reference-id's for label-element"> <form-element aria-describedby="reference-id's for descriptive-element"> <form-element title="description for the element">

所有屏幕阅读器均不建议也不支持仅使用标题标签。实际上，许多屏幕阅读器将无法聚焦标题标签，从而无法通过键盘控制访问它，从而跳过阅读内容。

标签控件 https://www.w3.org/WAI/tutorials/forms/labels/

方法四：使用title属性

title 属性也可以用来识别表单控件。这种方法通常不太可靠并且不推荐，因为某些屏幕阅读器和辅助技术不会将标题属性解释为标签元素的替代品，可能是因为标题属性通常用于提供非必要信息。当鼠标悬停在表单域上时，title 属性的信息作为工具提示显示给视觉用户。

恕我直言，您不应该使用 aria-labelledby 单独标记按钮，因为实际上按钮元素已经显示“（图标被 CSS 隐藏！？）显示原始结果”，恕我直言，这已经足够理解了。

在以下链接中扩展 WAI 的 aria- describeby 基本示例可能会更好，为您的示例生成以下内容：

使用 aria- describeby 属性为用户界面控件提供描述性标签 https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-describedby="description-raw-result"
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

...

<div id="description-raw-result">Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw</div>

请注意，在示例 4 下还有一个涉及工具提示的更详细的示例，但它也需要您实现 JavaScript 的 showTooltip() 函数。 因此，您可以决定是继续使用工具提示的 title 属性，还是更喜欢使用以下两个事件处理程序将描述性文本显示为工具提示：

onmouseover="tooltipShow(event, this, 'description-raw-result');"
onfocus="tooltipShow(event, this, 'description-raw-result');"

不幸的是，据我所知，没有用于显示工具提示的简写方式，可以使用引用，就像 aria- describeby 属性一样。