Sal*_*ali 288 html assistive-technology
几个小时前,我读到了aria-label属性,其中:
定义标记当前元素的字符串值.
但在我看来,这就是该title属性应该做的事情.我在Mozilla开发者网络中进一步了解了一些示例和解释,但我发现的唯一的事情是
<button aria-label="Close" onclick="myDialog.close()">X</button>
哪个不给我任何标签(所以我认为我误解了这个想法).我在jsfiddle这里尝试过.
所以我的问题是:我为什么需要aria-label以及如何使用它？
Oll*_*son 377
它是一个旨在帮助辅助技术(例如屏幕阅读器)将标签附加到其他匿名HTML元素的属性.
所以有<label>元素:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
在<label>明确地告诉用户输入他们的名字进入input对话框,在其中id="fmUserName".
aria-label做同样的事情,但是对于那些label在屏幕上不实用或不可取的情况.以MDN为例:
<button aria-label="Close" onclick="myDialog.close()">X</button>`
大多数人都能够直观地推断出这个按钮会关闭对话框.使用辅助技术的盲人可能会听到"X"大声朗读,如果没有视觉线索,这并不意味着什么.aria-label明确告诉他们按钮会做什么.
Ada*_*dam 60
在你给出的例子中,你是完全正确的,你必须设置title属性.
如果aria-label是辅助技术(如屏幕阅读器)使用的一种工具,则浏览器本身不支持它,并且对它们没有影响.它对WCAG所针对的大多数人(屏幕阅读器用户除外)没有任何帮助,例如有智力障碍的人.
"X"不足以为按钮引导的动作提供信息(想想没有计算机知识的人).它可能意味着"关闭","删除","取消","减少",一个奇怪的十字架,一个涂鸦,什么也没有.
尽管W3C似乎在类似的例子中推广了aria-label这个title属性:http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14,但你可以看到该技术支持不包括标准浏览器:http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14
实际上aria-label,在这种情况下,可能会使用一些操作来提供更多上下文:
例如,盲人不会像我们这些有良好视力的人一样感知弹出窗口,这就像是一种背景的变化.对于没有屏幕阅读器的人来说,"关闭"对于屏幕阅读器来说,"回到页面"将是一个更方便的选择.
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>
Mou*_*mit 30
如果你想知道实际上有多大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键)......你可以听到......专注于first x button..只会告诉你x button..但是在...的情况下,second x button你只会听到back to the page button..
我希望你现在好好的!!
小智 13
先决条件：
Aria 用于改善视障用户的用户体验。视障用户使用 JAWS、NVDA 等屏幕阅读器软件浏览应用程序。在浏览应用程序时，屏幕阅读器软件会向用户宣布内容。Aria 可用于在代码中添加内容，帮助屏幕阅读器用户了解控件的角色、状态、标签和目的
咏叹调在视觉上没有任何改变。（Aria 也害怕设计师）。
咏叹调标签
aria-label 属性用于将标签传达给屏幕阅读器用户。通常搜索输入字段没有视觉标签（感谢设计师）。aria-label 可用于将控件标签传达给屏幕阅读器用户
如何使用：
<input type="edit" aria-label="search" placeholder="search">
应用程序没有视觉变化。但是屏幕阅读器可以理解控制的目的
咏叹调
aria-label 和 aria-labelledby 都用于传递标签。但是 aria-labelledby 可用于引用页面中已存在的任何标签，而 aria-label 用于传达我未在视觉上显示的标签
方法一：
<span id="sd">Search</span>
<input type="text" aria-labelledby="sd">
方法二：
aria-labelledby 还可用于为屏幕阅读器用户组合两个标签
<span id="de">Billing Address</span>
<span id="sd">First Name</span>
<input type="text" aria-labelledby="de sd">
title当鼠标悬停在元素上时，该属性会显示工具提示。虽然这是一个很好的补充，但它对无法使用鼠标（由于行动不便）或看不到此工具提示的人（例如：有视觉障碍的人或使用屏幕阅读器的人）没有帮助。
因此，这里的谨慎方法是为所有用户提供服务。我会同时添加title和aria-label属性（为不同类型的用户和不同类型的网络使用提供服务）。
这是一篇深入解释的好文章aria-label
作为一个侧面的答案，值得注意的是：
aria-hidden或aria-expanded. 但前提是实施和测试正确！