在使用Angular Material时,我一直在看到aria属性.有人可以向我解释,咏叹调前缀是什么意思？但最重要的是,我想要了解的是aria-hidden和hidden属性之间的区别.
Leo*_*mer 336
ARIA(可访问的富Internet应用程序)定义了一种使残障人士更容易访问Web内容和Web应用程序的方法.
该hidden属性是HTML5中的新属性,告诉浏览器不要显示该元素.该aria-hidden属性告诉屏幕阅读器他们是否应该忽略该元素.有关更多详细信息,请查看w3文档:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
使用这些标准可以使残疾人更容易使用网络.
Unk*_*pus 34
隐藏属性是布尔属性(True/False).在元素上使用此属性时,它将删除与该元素的所有相关性.当用户查看html页面时,不应显示具有hidden属性的元素.
例:
<p hidden>You can't see this</p>
Aria隐藏属性表示元素及其所有后代在浏览器中仍然可见,但对于辅助功能工具(如屏幕阅读器)将不可见.
例:
<p aria-hidden="true">You can't see this</p>
看看这个.它应该回答你所有的问题.
注意: ARIA代表Accessible Rich Internet Applications
资料来源: Paciello集团
根据HTML 5.2:
在元素上指定时,[
hidden属性]表示该元素尚未或不再与页面的当前状态直接相关,或者它用于声明要由页面的其他部分重用的内容反对被用户直接访问.
示例包括一些选项卡列表,其中某些面板未公开,或者登录屏幕在用户登录后消失.我喜欢将这些内容称为"暂时相关",即它们与时间相关.
另一方面,ARIA 1.1说:
[
aria-hidden状态]指示元素是否向可访问性API公开.
换句话说,aria-hidden="true"从辅助功能树中删除的元素(大多数辅助技术aria-hidden="false"都会遵循这些元素)和元素将永远暴露给树.没有aria-hidden属性的元素处于"未定义(默认)"状态,这意味着用户代理应根据其呈现将其公开给树.例如,如果用户代理的文本颜色与其背景颜色匹配,则可以决定将其删除.
该语义有可预见的效果在浏览器/用户代理.我区分的原因是建议使用用户代理行为,但规范不要求.
该hidden属性应隐藏所有演示文稿中的元素,包括打印机和屏幕阅读器(假设这些设备符合HTML规范).如果要从辅助功能树以及可视媒体中删除元素,aria-hidden可以实现.但是,不要hidden 仅因为你想要这种效果而使用.首先问问自己aria-hidden语义是否正确(见上文).如果hidden语义不正确,但您仍希望在视觉上隐藏元素,则可以使用其他技术,如CSS.
并且,假设用户的辅助技术符合ARIA规范,它不会hidden向用户公开元素.这对于"视觉天赋"是有用的,例如图标,图像等对于用户消费不是必需的.
最后,两个属性之间的语法有所不同.
hidden是一个布尔属性,意味着如果属性存在则它是真的 - 无论它可能具有什么值 - 如果该属性不存在则为false.对于真实情况,最佳做法是在all(hidden)或空字符串值(hidden)中不使用任何值.我不建议,hidden因为有人阅读/更新你的代码可能会推断aria-hidden="true"会产生相反的效果,这是完全错误的.
hidden相反,它是一个枚举属性,允许一个有限的值列表.如果<div hidden>...</div>属性存在,则其值必须为<div hidden="">...</div>或hidden="true".如果您想要"未定义(默认)"状态,请完全删除该属性.
进一步阅读:https: //github.com/chharvey/chharvey.github.io/wiki/Hidden-Content
| 归档时间： |
|
| 查看次数： |
236511 次 |
| 最近记录： |