什么是咏叹调标签，我应该如何使用它?

几个小时前，我读到了aria-label属性，它:

定义标记当前元素的字符串值。

但在我看来，这就是title属性应该做的事情。我在Mozilla开发者网络中进一步寻找了一些例子和解释，但我唯一找到的是

<button aria-label="Close" onclick="myDialog.close()">X</button>

这并没有给我提供任何标签(所以我认为我误解了这个想法)。我在jsfiddle中尝试过。

所以我的问题是:为什么我需要aria-label，我应该如何使用它?

当前回答

当鼠标悬停在元素上时，title属性会显示一个工具提示。虽然这是一个很好的补充，但它不能帮助那些不能使用鼠标(由于行动不便)或看不到此工具提示的人(例如:视觉障碍或使用屏幕阅读器的人)。

因此，这里的正念方法是为所有用户服务。我会同时添加title和aria-label属性(服务于不同类型的用户和不同类型的web使用)。

这是一篇深入解释aria-label的好文章

2019-10-09 12:07:41

其他回答

它是一个用来帮助辅助技术(例如屏幕阅读器)将标签附加到匿名HTML元素的属性。

这里有<label>元素:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>显式地告诉用户将他们的名字输入到id="fmUserName"的输入框中。

Aria-label做了大致相同的事情，但它适用于在屏幕上显示标签不实际或不可取的情况。以MDN为例:

<button aria-label="Close" onclick="myDialog.close()">X</button>`

大多数人可以直观地推断出这个按钮将关闭对话框。使用辅助技术的盲人可能只听到“X”被大声念出来，如果没有视觉线索，这没有多大意义。Aria-label显式地告诉它们按钮将做什么。

2014-02-26 11:50:15

因此，这里的正念方法是为所有用户服务。我会同时添加title和aria-label属性(服务于不同类型的用户和不同类型的web使用)。

这是一篇深入解释aria-label的好文章

2019-10-09 12:07:41

如果你想知道如何aria-label帮助你实际上..然后按照下面的步骤……你自己会得到的。

创建一个具有以下代码的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

现在，您需要一个虚拟屏幕阅读器模拟器，它将在浏览器上运行，以观察差异。因此，chrome浏览器用户可以安装chromevox扩展，mozilla用户可以使用fangs屏幕阅读器插件

一旦完成安装，把耳机在你的耳朵，打开html页面，使焦点在两个按钮(按tab键)一个接一个。你可以听到…聚焦第一个x按钮..会告诉你只有x按钮..但如果第二个x按钮。您只会听到返回页面按钮。

我希望你现在得到了它!!

2016-05-30 13:29:55

作为一个侧面的回答，值得注意的是:

ARIA is commonly used to improve the accessibility for screen readers. (not only but mostly atm.) Using ARIA does not necessarily make things better! Easily ARIA can lead to significantly worse accessibility if not implemented and tested properly. Don't use ARIA just to have some "cool things in the code" which you don't fully understand. Sadly too often ARIA implementations introduce more issues than solutions in terms of accessibility. This is rather common since sighted users and developers are less likely to put extra effort in extensive testing with screen readers while on the other hand ARIA specs and validators are currently far from perfect and even confusing in some cases. On top of that each browser and screen reader implement the ARIA support non-uniformly causing the major inconsistencies in the behavior. Often it's better idea to avoid ARIA completely when it's not clear exactly what it does, how it behaves and it won't be tested intensively with all screen readers and browsers (or at least the most common combinations). Disclaimer: My intention is not to disgrace ARIA but rather its bad ARIA implementations. In fact it's not so uncommon that HTML5 don't offer any other alternatives where implementing ARIA would bring significant benefits for the accessibility e.g. aria-hidden or aria-expanded. But only if implemented and tested properly!

2020-07-18 11:39:16

先决条件:

Aria用于改善视障用户的用户体验。视障用户使用JAWS、NVDA等屏幕阅读器软件浏览应用程序。在应用程序中导航时，屏幕阅读器软件向用户宣布内容。Aria可用于在代码中添加内容，以帮助屏幕阅读器用户理解控件的角色、状态、标签和目的

艾瑞亚在视觉上没有改变任何东西。(Aria也害怕设计师)。

aria-label

Aria-label属性用于将标签传递给屏幕阅读器用户。通常搜索输入字段没有视觉标签(感谢设计师)。Aria-label可用于将控件的标签传递给屏幕阅读器用户

如何使用:

<input type="edit" aria-label="search" placeholder="search">

在应用中没有视觉上的变化。但是屏幕阅读器可以理解控制的目的

咏叹调-拉布莱德比

aria-label和aria- labledby都用于传递标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签，而aria-label则用来传达没有在视觉上显示的标签

方法1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

方法2:

Aria-labelledby还可以用于组合屏幕阅读器用户的两个标签

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

2019-04-26 18:01:15

什么是咏叹调标签，我应该如何使用它?

推荐文章

最新文章

标签