aria-***状态值

属性状态	属性值	HTML示意	说明
aria-checked	字符串。表示检查的状态。`true`表示元素被选择；`false`表示元素未被选择；`mixed`表示元素同时有选择和为选择状态。	<ul role="group"><li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> <li role="checkbox" aria-checked="false" tabindex="0">晴川</li><li role="checkbox" aria-checked="true" tabindex="0">静秋</li><li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li> </ul>	该属性用来表明用户是否选择了某些项（如左边这个截图所示）。
aria-disabled	字符串。表禁用状态，`true`表示当前是非激活状态；`false`表示清除非激活状态。	<div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div>	对应单复选框等控件的`disabled`属性，一般用在自定义模拟控件中。
aria-expanded	字符串。表示展开状态。默认为`undefined`, 表示当前展开状态未知。其它可选值：`true`表示元素是展开的；`false`表示元素不是展开的。	<h3 id="tab1" aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab" tabindex="0">姑娘们</h3><div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel"><h3 tabindex="0">请选择你中意的：</h3><ul class="controlList"><li><input id="p1_1" type="radio" name="girl" value="q" /><label for="p1_1">晴川</label></li><li><input id="p1_2" type="radio" name="girl" value="j" checked /><label for="p1_2">静秋</label></li><li><input id="p1_3" type="radio" name="girl" value="h" /><label for="p1_3">黄小仙</label></li></ul> </div>	例如在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的`open`属性。
aria-hidden	字符串。可选值为`true`和`false`, `true`表示元素隐藏(不可见)，`false`表示元素可见。	<div aria-hidden="false">23%</div>	该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的`div`, 当前`aria-hidden`为`false`, 表示该进度值是可见的。
aria-invalid	字符串。表示元素值是否错误的。默认为`false`, 表示是OK的，如果为`true`, 则表示值验证不通过。	<input type="text" size="3" aria-labelledby="valid" aria-invalid="false" />
aria-pressed	字符串。表示按下的状态，可选值有：`true`, `false`, `mixed`, `undfined`.默认为`undfined`, 表示按下状态未知；`true`表示元素往下（按钮按下）；`false`表示元素抬起；`mixed`表示元素同时有按下和没有按下的状态。	<div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false"aria-disabled="false">添加</div>	左边HTML表示按钮已经按下，同时处于非禁用状态。
aria-selected	字符串。表示选择状态。可选值有：`true`, `false`, `undefined`. 默认为`undefined`，表示元素选择状态未知。`true`表示元素已选择；`false`表示未被选中。	<div class="tabpanel"><ul class="tablist" role="tablist"><li role="tab" aria-selected="true" tabindex="0">美女</li><li role="tab" aria-selected="false" tabindex="-1">淑女</li><li role="tab" aria-selected="false" tabindex="-1">熟女</li><li role="tab" aria-selected="false" tabindex="-1">腐女</li></ul> </div>	元素被选中表明其处于某种交互之中，因此选中元素很可能处于focus焦点获取状态

转载于:https://www.cnblogs.com/kunmomo/p/11569321.html

无障碍开发（四）之ARIA aria-***状态值相关推荐

无障碍开发（六）之ARIA在HTML中的使用规则
ARIA使用规则一如果你使用的元素( HTML5 )具有语义化,应该使用这些元素,而不应该重新定义一个添加ARIA的角色.状态或属性的元素. 浏览器的语义化标签已经默认隐含ARIA语义,像nav,a ...
无障碍开发（一）之初认识
ARIA是什么? ARIA是W3C的 Web无障碍推进组织发布的可访问富互联网应用实现指南.WAI-ARIA是一个为残疾人士等提供无障碍访问动态.可交互Web内容的技术规范.是Web Accessib ...
无障碍开发系列之准则及评级
欢迎访文我的博客YangChen's Blog 无障碍开发准则无障碍支持的怎么样?自然需要一个标准来判定,这个标准是W3C制定的,分为3个等级,分别A.AA.AAA,AAA级是无障碍的最高等级.这个 ...
iPhone开发四剑客之《Objective-C基础教程》
iPhone 开发四剑客之<Objective-C 基础教程> Objective-C 语言是 C 语言的一个扩展集,许多(可能是大多数)具备 Mac OS X 外观的应用程序都是使用该语 ...
HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
Nutch开发(四)
Nutch开发(四) 文章目录 Nutch开发(四) 开发环境 1.Nutch插件设计介绍 2.解读插件目录结构 3. build.xml 4. ivy.xml 5. plugin.xml 6. 解读 ...
firefox扩展开发(四) ：更多的窗口控件
firefox扩展开发(四) : 更多的窗口控件 2008-06-11 17:00 标签盒子标签盒子是啥?大家都见过,就是分页标签: 对应的代码: <?xml version="1. ...
从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装
标题:从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11343141. ...
web策略类游戏开发(四)一个可以承载万人在线的架构
web策略类游戏开发(四)一个可以承载万人在线的架构 Webgame现在已经开始需要进入大统一服务器时代,每个游戏区域容纳的玩家数量将从现在的几万人发展到几十万人,因此在新的背景下,webgame如何 ...
acc--›Android无障碍开发手势操作
文章目录前言 dispatchGesture `api>=24` GestureDescription GestureResultCallback 执行手势 DslAccessibilityG ...

无障碍开发（四）之ARIA aria-***状态值

aria-***状态值

无障碍开发（四）之ARIA aria-***状态值相关推荐

最新文章

热门文章