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

Question

我习惯于在 links/buttons/... 上使用 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>

但是 copying/pasting 创建 aria-label 的标题看起来很难看。我应该选择哪一个，为什么？

Answer 1

ARIA 标签用于您网站的残疾访问者。 Bootstrap 非常好，他们默认支持它。

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

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

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

Answer 2

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

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

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

Approach 4: Using the title attribute

The title attribute can also be used to identify form controls. This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information. The information of the title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.

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

扩展 WAI 的基本示例可能会更好 aria-describedby 可用 link 为您的示例生成以下内容：

使用 aria-describedby 属性为用户界面控件提供描述性标签 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 属性还是更喜欢将描述文本显示为具有以下两个 event-handlers:

的工具提示

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

遗憾的是，据我所知，没有 short-hand 用于显示可以像 aria-describedby 属性一样使用引用的工具提示。

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

What is the difference between aria-label and title attributes?

html

title

wai-aria

twitter-bootstrap