aria-label和title属性有什么区别？

Question

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

所以我来创建按钮,如:

<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>

但复制/粘贴标题以创建一个咏叹调标签看起来很丑陋.我应该选择哪一个,为什么？

Answer 1

ARIA标记用于您网站的残障访问者.它是非常好的Bootstrap,它们默认支持它.

可访问的富Internet应用程序(ARIA)定义了使残障人士更容易访问Web内容和Web应用程序(尤其是使用Ajax和JavaScript开发的Web应用程序)的方法.例如,ARIA支持可访问的导航地标,JavaScript小部件,表单提示和错误消息,实时内容更新等.

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

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

Answer 2

请根据 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/

方法 4：使用 title 属性

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

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

最好扩展 WAI 的 aria-描述的基本示例（可在以下链接中找到），为您的示例生成以下内容：

使用 aria-scribedby 属性为用户界面控件提供描述性标签 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() 函数。因此，您可以决定是否要继续使用工具提示的标题属性，还是更喜欢使用以下两个事件处理程序将描述性文本显示为工具提示：

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

不幸的是，据我所知，没有显示可以使用引用（就像 aria-descriptedby 属性一样）的工具提示的快捷方式。

Answer 3

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

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