什么是咏叹调标签,我应该如何使用?
几个小时前,我阅读了有关aria-label属性的信息:
定义一个标记当前元素的字符串值。
但是我认为这就是title
属性应该做的。我在Mozilla开发人员网络中进一步查找了一些示例和解释,但是我发现的唯一是
<button aria-label="Close" onclick="myDialog.close()">X</button>
这没有给我提供任何标签(所以我认为我误解了这个想法)。我在jsfiddle中尝试过。
所以我的问题是:为什么我需要aria-label
和如何使用它?
如果你想知道如何
aria-label
帮助你几乎 ..然后按照步骤......你会被你自己弄吧..创建具有以下代码的html页面
现在,您需要一个虚拟屏幕阅读器模拟器,该模拟器将在浏览器上运行以观察差异。因此,Chrome浏览器用户可以安装chromevox扩展名,而mozilla用户可以使用fangs 屏幕阅读器插件
安装完成后,将耳机戴在耳朵上,打开html页面,然后将两个按钮(通过按Tab键)分别放在一个按钮上..您会听到..专注于
first x button
..只会告诉您x button
..如果是second x button
..,您只会听到back to the page button
..我希望你现在一切顺利!
先决条件:
Aria is used to improve the user experience of visually impaired users. Visually impaired users navigate though application using screen reader software like JAWS, NVDA,.. While navigating through the application, screen reader software announces content to users. Aria can be used to add content in the code which helps screen reader users understand role, state, label and purpose of the control
Aria does not change anything visually. (Aria is scared of designers too).
aria-label
aria-label attribute is used to communicate the label to screen reader users. Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users
How To Use:
There is no visual change in application. But screen readers can understand the purpose of control
aria-labelledby
aria-label和aria-labeledby均用于传达标签。但是aria-labelledby可以用来引用页面中已经存在的任何标签,而aria-label用于传达我无法直观显示的标签
方法1:
方法二:
aria-labelledby还可以用于为屏幕阅读器用户组合两个标签
title
当鼠标悬停元素时,该属性显示工具提示。尽管这是一个很好的补充,但它不能帮助不能使用鼠标的人(由于行动不便)或看不到此工具提示的人(例如:视觉障碍者或使用屏幕阅读器的人)。因此,此处的主观方法是为所有用户提供服务。我会同时添加
title
和aria-label
属性(服务于不同类型的用户和不同类型的Web使用)。这是一篇很好的文章,深入解释
aria-label
了此属性旨在帮助辅助技术(例如屏幕阅读器)将标签附加到其他匿名HTML元素上。
因此,有一个
<label>
元素:在
<label>
明确地告诉用户输入他们的名字进入input
对话框,在其中id="fmUserName"
。aria-label
所做的事情大致相同,但这是针对那些不实际或不希望label
在屏幕上显示的情况。以MDN为例:大多数人都可以直观地推断出此按钮将关闭对话框。使用辅助技术的盲人可能只会听到“ X”声,如果没有视觉提示,这并没有多大意义。
aria-label
明确告诉他们该按钮将执行的操作。你的回答