role属性

role属性值 含义 HTML示意 说明
alert 表示警告 
<p id="ajax_error_alert" role="alert"></p>
 例如ajax操作返回错误信息的div标签。
alertdialog 表示Modal弹出框 
<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0"

        role="alertdialog" id="alert1">

    <p id="alert_title">弹出框</p>

    <p id="alert_message">哥，你输入的时间穿越了，请重新输入！</p>

    <input type="button" value="关闭" id="alert_close" />

</div>
 自定义的出错提示弹框。
application 表示应用 
<div id="application" role="application">

    <label id="date_label" for="date">时间</label>:

    <input id="date" type="text"/>

    <button id="bn_date">选择日期...</button>

    <div id="dp1" class="datepicker" aria-hidden="true">

        <-- 时间选择控件具体 -->

    </div>

</div>
 例如自定义的时间选择器。
button 表示按钮 
<div role="toolbar" tabindex="0" aria-activedescendant="button1">

  <img src="btncut.png" id="button1" role="button" alt="cut" />

  <img src="btncopy.png" id="button2" role="button" alt="copy" />

  <img src="btnpaste.png" id="button3" role="button" alt="paste" />

</div>
 大家都懂的，没啥好说的
checkbox 表示复选框 
<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>
 同样，大家都懂的，没啥好说的
combobox 表示表单控件 
<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"

      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

    <li id="cb1-opt1" role="option">晴川</li>

    <li id="cb1-opt2" role="option">静秋</li>

    <li id="cb1-opt3" role="option">黄小仙</li>

</ul>

<input type="text" role="combobox" />










grid
表示网格


<table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true">

  <caption id="grid1_label">美女们</caption>

  <thead>

    <tr>

      <th id="grid1_q" tabindex="-1">晴川</th>

      <th id="grid1_j" tabindex="-1">静秋</th>

      <th id="grid1_h" tabindex="-1">黄小仙</th>

    </tr>

  </thead>

  <tbody id="data"></tbody>

</table>







gridcell
表示网格单元


<table role="grid" aria-readonly="true">

  <tr role="row" aria-selected="false">

    <td role="gridcell" tabindex="-1">晴川</td>

    <td role="gridcell" tabindex="-1">静秋</td>

    <td role="gridcell" tabindex="-1">黄小仙</td>

  </tr>

</table>


类似于table & table-cell




group
表示组合并


<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>










heading
表示标题


<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>


例如时间选择器中的月份标题：








listbox
表示列表框


<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"

      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

    <li id="cb1-opt1" role="option">晴川</li>

    <li id="cb1-opt2" role="option">静秋</li>

    <li id="cb1-opt3" role="option">黄小仙</li>

</ul>










log
表示日志记录


<div role="log" aria-atomic="false" aria-relevant="additions"></div>


类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。




menu
表示菜单


<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>










menubar
表示菜单栏


<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>










menuitem
表示菜单项


<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>










menuitemcheckbox
表示可复选的菜单项


<ul role="menubar" title="美女菜单">

  <li role="menuitem" tabindex="0" aria-haspopup="true">美女

    <ul role="menu" aria-hidden="true">

      <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">晴川</li>

      <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">静秋</li>

      <li role="menuitemcheckbox" 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>










menuitemradio
表示只能单选的菜单项


<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>










option
表示选项


<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"

      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />

<ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true">

    <li role="option">晴川</li>

    <li role="option">静秋</li>

    <li role="option">黄小仙</li>

</ul>










presentation
表示描述


<div class="slider">

    <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"

        role="slider" src="slider_control.png" />

    <div role="presentation" tabindex="0">45</div>

</div>


左边示例的HTML为一个自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。








progressbar
表示进度条


<div class="progress" role="progressbar"

    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">

    <div class="progressIndicator" style="width: 23.3333%;"></div>

    <div class="progressVal" aria-hidden="false">23%</div>

</div>










radio
表示单选


<h3 id="girl_label">美女们：</h3>

<ul role="radiogroup" aria-labelledby="girl_label">

    <li tabindex="-1" role="radio" aria-checked="false">

        <img role="presentation" src="radio-unchecked.gif" /> 晴川

    </li>

    <li tabindex="0" role="radio" aria-checked="true">

        <img role="presentation" src="radio-checked.gif" /> 静秋

    </li>

    <li tabindex="-1" role="radio" aria-checked="false">

        <img role="presentation" src="radio-unchecked.gif" /> 黄小仙

    </li>

</ul>


自定义单选框控件的时候使用，下图为左侧HTML的效果图：








radiogroup
表示单选组


<h3 id="girl_label">美女们：</h3>

<ul role="radiogroup" aria-labelledby="girl_label">

    <li tabindex="-1" role="radio" aria-checked="false">

        <img role="presentation" src="radio-unchecked.gif" /> 晴川

    </li>

    <li tabindex="0" role="radio" aria-checked="true">

        <img role="presentation" src="radio-checked.gif" /> 静秋

    </li>

    <li tabindex="-1" role="radio" aria-checked="false">

        <img role="presentation" src="radio-unchecked.gif" /> 黄小仙

    </li>

</ul>










region
表示区域


<div role="region" tabindex="-1" aria-expanded="false">

    我之所以会出现，是因为主人你点击了某个命中注定的按钮。

</div>


例如用在div区域显示隐藏切换的时候。




row
表示行


<table role="grid" aria-readonly="true">

  <tr role="row" aria-selected="false">

    <td role="gridcell" tabindex="-1">晴川</td>

    <td role="gridcell" tabindex="-1">静秋</td>

    <td role="gridcell" tabindex="-1">黄小仙</td>

  </tr>

</table>


用在表格模拟的行列表上，对应table下面的tr标签。




separator
表示分隔


<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="separator" tabindex="-1"></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>


反应在下图就是那条黑色的1像素水平分隔线：








slider
表示滑动条


<div class="slider">

    <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"

        role="slider" src="slider_control.png" />

    <div role="presentation" tabindex="0">45</div>

</div>










spinbutton
表示微调


<div class="spinbutton" role="spinbutton"

    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">

50</div>


例如下面这个数值微调效果截图：








tab
表示标签


<div class="tabpanel">

  <ul class="tablist" role="tablist">

    <li aria-selected="true" role="tab" 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>










tablist
表示标签列表


<div class="tabpanel">

  <ul class="tablist" role="tablist">

    <li aria-selected="true" role="tab" 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>










tabpanel
表示标签面板


<div role="tabpanel">

  <ul class="tablist" role="tablist"><-- 选项卡 --></ul>

  <div id="panel1" aria-labelledby="tab1" role="tabpanel">

     <ul class="controlList">

        <li><input id="girl1" type="radio" name="girl" value="q" />

            <label for="girl1">晴川</label></li>

        <li><input id="girl2" type="radio" name="girl" value="j" checked />

            <label for="girl2">静秋</label></li>

        <li><input id="girl3" type="radio" name="girl" value="h" />

            <label for="girl3">黄小仙</label></li>

    </ul>

  </div>

  <div id="panel2" aria-labelledby="tab2" role="tabpanel"></div>

  <div id="panel3" aria-labelledby="tab3" role="tabpanel"></div>

  <div id="panel4" aria-labelledby="tab4" role="tabpanel"></div>

</div>










timer
表示计数


<div role="timer" aria-atomic="true" aria-relevant="all">0</div>


模拟计数器，使用在动态显示规律数值变化的地方




toolbar
表示工具栏


<div role="toolbar" tabindex="0" aria-activedescendant="button1">

  <img src="btncut.png" id="button1" role="button" alt="cut" />

  <img src="btncopy.png" id="button2" role="button" alt="copy" />

  <img src="btnpaste.png" id="button3" role="button" alt="paste" />

</div>


左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。




tooltip
表示提示文本


<div class="text">

   <label id="name_label" for="name">姓名:</label>

   <input type="text" id="name" name="name" aria-labelledby="name_label"

       aria-describedby="tip" aria-required="false" />

   <div id="tip" role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div>

</div>


如下图黄色的这个提示框：








tree
表示树形


<ul role="tree">

   <li aria-expanded="true" tabindex="-1" role="treeitem">

      <img alt="展开" src="expanded.gif" />美女

      <ul role="group"></ul>

   </li>

   <li aria-expanded="false" tabindex="0" role="treeitem">

      <img alt="收起" src="contracted.gif" />淑女

      <ul role="group"></ul>

   </li>

</ul>


效果见下面treeitem中的图。




treeitem
表示树结构选项


<ul role="tree">

   <li aria-expanded="true" tabindex="-1" role="treeitem">

      <img alt="展开" src="expanded.gif" />美女

      <ul role="group">

         <li tabindex="-1" role="treeitem">晴川</li>

         <li tabindex="-1" role="treeitem">静秋</li>

         <li tabindex="-1" role="treeitem">黄小仙</li>

      </ul>

   </li>

   <li aria-expanded="false" tabindex="0" role="treeitem">

      <img alt="收起" src="contracted.gif" />淑女

      <ul role="group"></ul>

   </li>

</ul>












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




												


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

    
								
  1. Spring注解驱动开发(二)-----生命周期、属性赋值
		
    bean的生命周期 bean的生命周期:bean创建---初始化----销毁的过程容器管理bean的生命周期:我们可以自定义初始化和销毁方法:容器在bean进行到当前生命周期的时候来调用我们自定义的初 ...
    
		
    2. 
						
  2. 译文 对无障碍网页应用（ARIA）的选择
		
    //本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom marku ...
    
		
    3. 
						
  3. HTNL5-ARIA role属性
		
    WAI-ARIA Web Accessibility Initiative’s Accessible Rich Internet Applications 无障碍网页倡议–无障碍的富互联网应用,也简称 ...
    
		
    4. 
						
  4. iOS开发-二维码扫描和应用跳转
		
    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
    
		
    5. 
						
  5. IOS开发UI篇—导航控制器属性和基本使用
		
    IOS开发UI篇—导航控制器属性和基本使用 一.导航控制器的一些属性和基本使用 1.把子控制器添加到导航控制器中的四种方法 (1) 1.创建一个导航控制器 UINavigationController ...
    
		
    6. 
						
  6. C#的百度地图开发(二)转换JSON数据为相应的类
		
    原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...
    
		
    7. 
						
  7. [原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略
		
    原文:[原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 .NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 前言:之前的讨论一直关注在怎么从D ...
    
		
    8. 
						
  8. 从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板
		
    标题:从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11155 ...
    
		
    9. 
						
  9. 使用Typescript重构axios(二十三)——添加withCredentials属性
		
    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 学习UEFI 之你把C语言学好了码？学习UEFI 之你把C语言学好了吗？
			
    很多人在问我说: 怎样子把UEFI 学好?! 其实写BIOS 的人答案应该只有一个,把SPCE看懂看完然后融会贯通!这样子的答案好像跟没有是一样的! 小弟就以我的学习经验来分享给大家吧!(虽然我也没学 ...
    
			
    2. 
						
  2. 2、记录代码----Ajax
			
    $.ajax({ url:'/content-engine/index.php/tracker/confirmSendEmail', async: false, //默认为true,同意异步传输 da ...
    
			
    3. 
						
  3. 微信小程序<web-view>出现{"base_resp":{"ret":-1}}
			
    最近在使用小程序<web-view>这个标签加载一个https网页的时候出现了{"base_resp":{"ret":-1}}这一个问题 搞了好久~ ...
    
			
    4. 
						
  4. AttributeError:module 'keras.engine.topology' has no attribute 'load_weights_from_hdf5_group_by_name
			
    在jupyter notebooks上运行tensorflow-keras的Mask R-CNN时遇到如下错误: 参考博客中写了两种解决方案: 解决方案一:报错是由于keras版本不对造成的.load ...
    
			
    5. 
						
  5. mysql之备份与恢复
			
    数据备份全备 备份命令 :mysqldump把数据库的数据以sql语句导出属于逻辑备份 格式 : mysqldump -uroot -p123456 -S 多实例的mysql.sock 数据库名 &g ...
    
			
    6. 
						
  6. java web 开发三剑客  -------电子书
			
    Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知In ...
    
			
    7. 
						
  7. Selenium 2自动化测试实战29（组织单元测试用例和discover更多测试用例）
			
    一.组织单元测试用例 看看unittest单元测试框架是如何扩展和组织新增的测试用例以之前的calculator.py文件为例,为其扩展sub()方法,用来计算两个数相减的结果. #coding:ut ...
    
			
    8. 
						
  8. Django Auth模块及User对象方法
			
    一:Django的用户认证 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1:authenticat ...
    
			
    9. 
						
  9. .pkl文件是什么？python
			
    对于.pkl文件,我是在接触 SMPL模型的时候用到的.SMPL的开源项目包里,有model文件夹,打开有两个.pkl文件.然后,找到了一个说的相对比较详细的网址.https://jingyan.ba ...
    
			
    10. 
						
  10. Golang－ import 导入包的几种方式：点，别名与下划线
			
    包的导入语法 在写Go代码的时候经常用到import这个命令用来导入包文件,看到的方式参考如下: import( "fmt" ) 然后在代码里面可以通过如下的方式调用 fmt.Pr ...
    
			
    11.