role属性

role属性值 含义 HTML示意 说明
alert 表示警告 
  1. <p id="ajax_error_alert" role="alert"></p>
 例如ajax操作返回错误信息的div标签。
alertdialog 表示Modal弹出框 
  1. <div aria-labelledby="alert_title" aria-hidden="false" tabindex="0"
  2.         role="alertdialog" id="alert1">
  3.     <p id="alert_title">弹出框</p>
  4.     <p id="alert_message">哥，你输入的时间穿越了，请重新输入！</p>
  5.     <input type="button" value="关闭" id="alert_close" />
  6. </div>
 自定义的出错提示弹框。
application 表示应用 
  1. <div id="application" role="application">
  2.     <label id="date_label" for="date">时间</label>:
  3.     <input id="date" type="text"/>
  4.     <button id="bn_date">选择日期...</button>
  5.     <div id="dp1" class="datepicker" aria-hidden="true">
  6.         <-- 时间选择控件具体 -->
  7.     </div>
  8. </div>
 例如自定义的时间选择器。
button 表示按钮 
  1. <div role="toolbar" tabindex="0" aria-activedescendant="button1">
  2.   <img src="btncut.png" id="button1" role="button" alt="cut" />
  3.   <img src="btncopy.png" id="button2" role="button" alt="copy" />
  4.   <img src="btnpaste.png" id="button3" role="button" alt="paste" />
  5. </div>
 大家都懂的，没啥好说的
checkbox 表示复选框 
  1. <ul role="group">
  2.   <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
  3.       <li role="checkbox" aria-checked="false" tabindex="0">晴川</li>
  4.       <li role="checkbox" aria-checked="true" tabindex="0">静秋</li>
  5.       <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li>
  6. </ul>
 同样，大家都懂的，没啥好说的
combobox 表示表单控件 
  1. <input id="cb1-edit" class="cb_edit" type="text" tabindex="0"
  2.       role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
  3.  
  4. <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
  5.     <li id="cb1-opt1" role="option">晴川</li>
  6.     <li id="cb1-opt2" role="option">静秋</li>
  7.     <li id="cb1-opt3" role="option">黄小仙</li>
  8. </ul>
  9.  
  10. <input type="text" role="combobox" />
  1.  

grid 表示网格 
  1. <table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true">
  2.   <caption id="grid1_label">美女们</caption>
  3.   <thead>
  4.     <tr>
  5.       <th id="grid1_q" tabindex="-1">晴川</th>
  6.       <th id="grid1_j" tabindex="-1">静秋</th>
  7.       <th id="grid1_h" tabindex="-1">黄小仙</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody id="data"></tbody>
  11. </table>
gridcell 表示网格单元 
  1. <table role="grid" aria-readonly="true">
  2.   <tr role="row" aria-selected="false">
  3.     <td role="gridcell" tabindex="-1">晴川</td>
  4.     <td role="gridcell" tabindex="-1">静秋</td>
  5.     <td role="gridcell" tabindex="-1">黄小仙</td>
  6.   </tr>
  7. </table>
 类似于table & table-cell
group 表示组合并 
  1. <ul role="group">
  2.   <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li>
  3.       <li role="checkbox" aria-checked="false" tabindex="0">晴川</li>
  4.       <li role="checkbox" aria-checked="true" tabindex="0">静秋</li>
  5.       <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li>
  6. </ul>

heading 表示标题 
  1. <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>
 例如时间选择器中的月份标题：
listbox 表示列表框 
  1. <input id="cb1-edit" class="cb_edit" type="text" tabindex="0"
  2.       role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
  3.  
  4. <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
  5.     <li id="cb1-opt1" role="option">晴川</li>
  6.     <li id="cb1-opt2" role="option">静秋</li>
  7.     <li id="cb1-opt3" role="option">黄小仙</li>
  8. </ul>

log 表示日志记录 
  1. <div role="log" aria-atomic="false" aria-relevant="additions"></div>
 类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。
menu 表示菜单 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
  6.       <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
  7.     </ul>
  8.   </li>
  9.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  12. </ul>

menubar 表示菜单栏 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
  6.       <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
  7.     </ul>
  8.   </li>
  9.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  12. </ul>

menuitem 表示菜单项 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
  6.       <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
  7.     </ul>
  8.   </li>
  9.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  12. </ul>

menuitemcheckbox 表示可复选的菜单项 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">静秋</li>
  6.       <li role="menuitemcheckbox" tabindex="-1" aria-checked="false">黄小仙</li>
  7.     </ul>
  8.   </li>
  9.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  12. </ul>

menuitemradio 表示只能单选的菜单项 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
  6.       <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
  7.     </ul>
  8.   </li>
  9.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  12. </ul>

option 表示选项 
  1. <input id="cb1-edit" class="cb_edit" type="text" tabindex="0"
  2.       role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
  3.  
  4. <ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">
  5.     <li role="option">晴川</li>
  6.     <li role="option">静秋</li>
  7.     <li role="option">黄小仙</li>
  8. </ul>

presentation 表示描述 
  1. <div class="slider">
  2.     <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
  3.         role="slider" src="slider_control.png" />
  4.     <div role="presentation" tabindex="0">45</div>
  5. </div>
 左边示例的HTML为一个自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。
progressbar 表示进度条 
  1. <div class="progress" role="progressbar"
  2.     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">
  3.     <div class="progressIndicator" style="width: 23.3333%;"></div>
  4.     <div class="progressVal" aria-hidden="false">23%</div>
  5. </div>

radio 表示单选 
  1. <h3 id="girl_label">美女们：</h3>
  2. <ul role="radiogroup" aria-labelledby="girl_label">
  3.     <li tabindex="-1" role="radio" aria-checked="false">
  4.         <img role="presentation" src="radio-unchecked.gif" /> 晴川
  5.     </li>
  6.     <li tabindex="0" role="radio" aria-checked="true">
  7.         <img role="presentation" src="radio-checked.gif" /> 静秋
  8.     </li>
  9.     <li tabindex="-1" role="radio" aria-checked="false">
  10.         <img role="presentation" src="radio-unchecked.gif" /> 黄小仙
  11.     </li>
  12. </ul>
 自定义单选框控件的时候使用，下图为左侧HTML的效果图：
radiogroup 表示单选组 
  1. <h3 id="girl_label">美女们：</h3>
  2. <ul role="radiogroup" aria-labelledby="girl_label">
  3.     <li tabindex="-1" role="radio" aria-checked="false">
  4.         <img role="presentation" src="radio-unchecked.gif" /> 晴川
  5.     </li>
  6.     <li tabindex="0" role="radio" aria-checked="true">
  7.         <img role="presentation" src="radio-checked.gif" /> 静秋
  8.     </li>
  9.     <li tabindex="-1" role="radio" aria-checked="false">
  10.         <img role="presentation" src="radio-unchecked.gif" /> 黄小仙
  11.     </li>
  12. </ul>

region 表示区域 
  1. <div role="region" tabindex="-1" aria-expanded="false">
  2.     我之所以会出现，是因为主人你点击了某个命中注定的按钮。
  3. </div>
 例如用在div区域显示隐藏切换的时候。
row 表示行 
  1. <table role="grid" aria-readonly="true">
  2.   <tr role="row" aria-selected="false">
  3.     <td role="gridcell" tabindex="-1">晴川</td>
  4.     <td role="gridcell" tabindex="-1">静秋</td>
  5.     <td role="gridcell" tabindex="-1">黄小仙</td>
  6.   </tr>
  7. </table>
 用在表格模拟的行列表上，对应table下面的tr标签。
separator 表示分隔 
  1. <ul role="menubar" title="美女菜单">
  2.   <li role="menuitem" tabindex="0" aria-haspopup="true">美女
  3.     <ul role="menu" aria-hidden="true">
  4.       <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li>
  5.       <li role="separator" tabindex="-1"></li>
  6.       <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li>
  7.       <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li>
  8.     </ul>
  9.   </li>
  10.   <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li>
  11.   <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li>
  12.   <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li>
  13. </ul>
 反应在下图就是那条黑色的1像素水平分隔线：
slider 表示滑动条 
  1. <div class="slider">
  2.     <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"
  3.         role="slider" src="slider_control.png" />
  4.     <div role="presentation" tabindex="0">45</div>
  5. </div>

spinbutton 表示微调 
  1. <div class="spinbutton" role="spinbutton"
  2.     aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
  3. 50</div>
 例如下面这个数值微调效果截图：
tab 表示标签 
  1. <div class="tabpanel">
  2.   <ul class="tablist" role="tablist">
  3.     <li aria-selected="true" role="tab" tabindex="0">美女</li>
  4.     <li role="tab" aria-selected="false" tabindex="-1">淑女</li>
  5.     <li role="tab" aria-selected="false" tabindex="-1">熟女</li>
  6.     <li role="tab" aria-selected="false" tabindex="-1">腐女</li>
  7.   </ul>
  8. </div>

tablist 表示标签列表 
  1. <div class="tabpanel">
  2.   <ul class="tablist" role="tablist">
  3.     <li aria-selected="true" role="tab" tabindex="0">美女</li>
  4.     <li role="tab" aria-selected="false" tabindex="-1">淑女</li>
  5.     <li role="tab" aria-selected="false" tabindex="-1">熟女</li>
  6.     <li role="tab" aria-selected="false" tabindex="-1">腐女</li>
  7.   </ul>
  8. </div>

tabpanel 表示标签面板 
  1. <div role="tabpanel">
  2.   <ul class="tablist" role="tablist"><-- 选项卡 --></ul>
  3.   <div id="panel1" aria-labelledby="tab1" role="tabpanel">
  4.      <ul class="controlList">
  5.         <li><input id="girl1" type="radio" name="girl" value="q" />
  6.             <label for="girl1">晴川</label></li>
  7.         <li><input id="girl2" type="radio" name="girl" value="j" checked />
  8.             <label for="girl2">静秋</label></li>
  9.         <li><input id="girl3" type="radio" name="girl" value="h" />
  10.             <label for="girl3">黄小仙</label></li>
  11.     </ul>
  12.   </div>
  13.   <div id="panel2" aria-labelledby="tab2" role="tabpanel"></div>
  14.   <div id="panel3" aria-labelledby="tab3" role="tabpanel"></div>
  15.   <div id="panel4" aria-labelledby="tab4" role="tabpanel"></div>
  16. </div>

timer 表示计数 
  1. <div role="timer" aria-atomic="true" aria-relevant="all">0</div>
 模拟计数器，使用在动态显示规律数值变化的地方
toolbar 表示工具栏 
  1. <div role="toolbar" tabindex="0" aria-activedescendant="button1">
  2.   <img src="btncut.png" id="button1" role="button" alt="cut" />
  3.   <img src="btncopy.png" id="button2" role="button" alt="copy" />
  4.   <img src="btnpaste.png" id="button3" role="button" alt="paste" />
  5. </div>
 左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
tooltip 表示提示文本 
  1. <div class="text">
  2.    <label id="name_label" for="name">姓名:</label>
  3.    <input type="text" id="name" name="name" aria-labelledby="name_label"
  4.        aria-describedby="tip" aria-required="false" />
  5.    <div id="tip" role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div>
  6. </div>
 如下图黄色的这个提示框：
tree 表示树形 
  1. <ul role="tree">
  2.    <li aria-expanded="true" tabindex="-1" role="treeitem">
  3.       <img alt="展开" src="expanded.gif" />美女
  4.       <ul role="group"></ul>
  5.    </li>
  6.    <li aria-expanded="false" tabindex="0" role="treeitem">
  7.       <img alt="收起" src="contracted.gif" />淑女
  8.       <ul role="group"></ul>
  9.    </li>
  10. </ul>
 效果见下面treeitem中的图。
treeitem 表示树结构选项 
  1. <ul role="tree">
  2.    <li aria-expanded="true" tabindex="-1" role="treeitem">
  3.       <img alt="展开" src="expanded.gif" />美女
  4.       <ul role="group">
  5.          <li tabindex="-1" role="treeitem">晴川</li>
  6.          <li tabindex="-1" role="treeitem">静秋</li>
  7.          <li tabindex="-1" role="treeitem">黄小仙</li>
  8.       </ul>
  9.    </li>
  10.    <li aria-expanded="false" tabindex="0" role="treeitem">
  11.       <img alt="收起" src="contracted.gif" />淑女
  12.       <ul role="group"></ul>
  13.    </li>
  14. </ul>

当然并不是所有的HTML元素都具有对应的ARIA的role，下表列出了常用的标签元素对应的ARIA的role

无障碍开发（二）之ARIA role属性的更多相关文章

  1. Spring注解驱动开发(二)-----生命周期、属性赋值

    bean的生命周期 bean的生命周期:bean创建---初始化----销毁的过程容器管理bean的生命周期:我们可以自定义初始化和销毁方法:容器在bean进行到当前生命周期的时候来调用我们自定义的初 ...

  2. 译文 对无障碍网页应用（ARIA）的选择

    //本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom marku ...

  3. HTNL5-ARIA role属性

    WAI-ARIA Web Accessibility Initiative’s Accessible Rich Internet Applications 无障碍网页倡议–无障碍的富互联网应用,也简称 ...

  4. iOS开发-二维码扫描和应用跳转

    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...

  5. IOS开发UI篇—导航控制器属性和基本使用

    IOS开发UI篇—导航控制器属性和基本使用 一.导航控制器的一些属性和基本使用 1.把子控制器添加到导航控制器中的四种方法 (1) 1.创建一个导航控制器 UINavigationController ...

  6. C#的百度地图开发(二)转换JSON数据为相应的类

    原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...

  7. [原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略

    原文:[原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 .NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 前言:之前的讨论一直关注在怎么从D ...

  8. 从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板

    标题:从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11155 ...

  9. 使用Typescript重构axios(二十三)——添加withCredentials属性

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

随机推荐

  1. PHP反序列化总结

    之前遇到过很多次php反序列化相关的内容,总结一下. (反)序列化给我们传递对象提供了一种简单的方法.serialize()将一个对象转换成一个字符串,unserialize()将字符串还原为一个对象 ...

  2. TCP输出 之 tcp_write_xmit

    概述 tcp_write_xmit函数完成对待发送数据的分段发送,过程中会遍历发送队列,进行窗口检查,需要TSO分段则分段,然后调用tcp_transmit_skb发送数据段: 源码分析 static ...

  3. JDBC——JDBC基础

    1.JDBC与数据库的交互过程概括性来说,JDBC与数据库交互有以下这些步骤:1.建立一个到数据库的连接.2.在数据库中对表执行检索.创建,或修改的SQL查询.3.关闭到数据库的连接.JDBC的类和接 ...

  4. 微信小程序之阻止冒泡事件

    众所周知,在微信小程序给标签绑定点击方法大家都会想到 "bindtap" 但是在页面中会遇到 点击 会冒泡而触发其他元素的时间发生 那么怎么办呢 就把引发冒泡事件的始作俑者的 bi ...

  5. windows驱动程序

    官网文档 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/

  6. StringJoiner 源码阅读

    StringJoiner 属性说明 /** * StringJoiner 使用指定的分割符将多个字符串进行拼接,并可指定前缀和后缀 * * @see java.util.stream.Collecto ...

  7. 使用Statement对象执行静态sql语句

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java ...

  8. 在mac下安装fiddler

    说明:学习fiddler好久了,一直以来也没形成文档,之前学的一些知识也快忘得差不多了:正好利用假期,把之前学的知识都捡起来,捋一遍,形成文档,供以后使用的时候参考和借鉴 一:下载Mono 因为fid ...

  9. jenkins凭证与新建任务

    一.凭证介绍 有许多第三方网站和应用程序可以与 Jenkins 进行交互,例如程序代码仓库,云存储系统和服务等. 此类应用程序的系统管理员可以在应用程序中配置凭证以专供 Jenkins 使用.通常通过 ...

  10. Access access中，查询字段是否存

    '===========================================================' 过程及函数名:  ListAllTableAndAllField' 版本号  ...