Question

我习惯在我的链接/按钮/ ...上使用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>

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

Answer 1

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

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

来源：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/

<块引用>

方法四：使用title属性

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

恕我直言，您不需要使用 aria-labelledby 单独标记按钮，因为实际上按钮元素已经显示为“(Icon hidden by CSS !?) Show raw result”，恕我直言，这已经很容易理解了。

最好在以下链接下扩展 WAI 的 aria-describedby 基本示例，为您的示例生成以下内容：

使用 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-描述的属性一样使用引用。

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

3 个答案: