HTML5技术

使用ARIA角色增强可访问性 - 易天曦小盆友(5)

字号+ 作者:H5之家 来源:博客园 2015-11-20 11:34 我要评论( )

aria-activedescendant字符串。表示后代元素的id值。div role="toolbar" tabindex="0" aria-activedescendant="button1" img src="btncut.png" role="button" alt="cut" / img src="btncopy.png" role="button" alt

aria-activedescendant 字符串。表示后代元素的id值。 <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" role="button" alt="cut" /> <img src="btncopy.png" role="button" alt="copy" /> <img src="btnpaste.png" role="button" alt="paste" /> </div> aria-activedescendant 属性定义了当工具栏获取焦点时,哪一个工具栏的子控件获取了焦点。在此HTML示例中,工具栏的第一个控件(拥有id “button1″)是能获取焦点的子控件。

aria-atomic 字符串。表示区域内容是否完整播报。值可以为true和false。当为true时,表示辅助设备需要把整个区域内容都通报给使用者;如果为false则表示只需要通报修改的部分。 <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> 还是这个时间选择器年月标题的例子。这里的aria-atomic为true则表示当时间改变的时候,这里的年月日期要完整播放,不要只改了月份就只报月份内容。

aria-autocomplete 字符串。表示用户的文本框的自动提示是否提供。可选值有:inline, list, both,none. <input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" /> <ul tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li> </ul> 目前,该属性对于inline和list两个值的含义暂不清楚。不过可以确定的是该属性对应HTML5中autocomplete属性。需要注意的是,如果aria-autocomplete="list", aria-autocomplete="inline"或aria-autocomplete="both"被设置在支持autocomplete的元素上,则autocomplete的属性值需要设成"on", 如果是aria-autocomplete="none",则需要设成"off"

aria-busy 字符串。表当前区域的忙碌状态。默认为false, 表清除busy状态;可选为true, 表该区域正在加载;或为error, 表示该区域验证无效。 <ul aria-atomic="true" aria-busy="true" aria-live="polite"> 如果某个区域内(如这里ul)有多个地方需要修改,需要全部修改完毕再通知使用者的话,就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。

aria-controls 字符串。空格分隔的id属性值列表。 <h3 aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab" tabindex="0">姑娘们</h3> <div aria-labelledby="tab1" aria-hidden="false" role="tabpanel"> <h3 tabindex="0">请选择你中意的美女……</h3> </div> 该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被role为group, region, 或widget的元素使用。

aria-describedby 字符串。空格分隔的id属性值列表。 <ul role="group"> <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> <li role="checkbox" aria-checked="false" aria-describedby="desc1" tabindex="0">晴川</li> </ul> <p>杨幂饰演的穿越女王~~</p> 同样的,该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。

aria-dropeffect 字符串。表示拖拽效果。可选值有:copy, move, reference, execute, popup,none, 依次表示:复制,移动,参照,执行,弹出以及没有效果。 <-- 暂无HTML示例 --> 该属性用在拖拽上。

aria-flowto 字符串。空格分隔的id值们。 <-- 暂无HTML示例 --> 如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读;如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。

aria-grabbed 字符串。拖拽中元素的捕获状态。可选值有:true, false, undefined. 默认为undefined,表示元素捕获状态未知。true表示元素可以捕获;false表示不能被捕获。 <-- 暂无HTML示例 --> 该属性用在拖拽上。类似于HTML5中的draggable属性。

aria-haspopup 字符串。true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。 <ul role="menubar" title="美女菜单"> <li role="menuitem" tabindex="0" aria-haspopup="true"> 美女<ul role="menu" aria-hidden="true"> <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li> <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li> <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li> </ul> </li> <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li> <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li> <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li> </ul>

aria下拉菜单

aria-label 字符串。 <-- 暂无HTML示例 --> 定义一个字符串值标记当前元素。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzbin

    探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzb

    2017-04-25 09:02

网友点评
r