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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27953425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:21:45  来源:igfitidea点击:

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

htmltwitter-bootstraptitlewai-aria

提问by Alain Tiemblo

I am used to use title=""attribute on my links/buttons/... to detail them. But bootstrap uses lots of aria-label=""attributes, for accessibility reasons as far as I understood.

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

So I come up to create buttons like:

所以我想出创建按钮,如:

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

But copying/pasting the title to create an aria-label looks just ugly. Which one should I choose, and why?

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

采纳答案by tjati

ARIA-tags are used for disabled visitors of your site. It's very nice of Bootstrap, that they support it by default.

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.

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

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

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

To answer your question, which one you should use, use only the title-attribute. Because this attribute is used if your mouse go over the button and shows the text of titleas a tooltip. With aria-labelis not supported in this way.

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