WAI-ARIA无障碍网页应用属性（role）

发表于 更新于 分类于 ， 本文字数： 18k 阅读时长 ≈ 16 分钟

ARIA属性表

role属性值 含义 HTML示意
alert 表示警告 
1
2
3
4
5
<!-- p标签-->
<p id="ajax_error_alert" role="alert">你足够的美</p>

<!-- div标签 -->
<div class="alert alert-warning" role="alert">你足够的美</div>

例如从 ajax 操作返回错误信息的 p div 标签。
alertdialog 表示警告弹出框 
1
2
3
4
5
6
<!-- 自定义的出错提示弹框、弹出组件等。 -->
<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0" role="alertdialog" id="alert1">
    <p id="alert_title">弹出框的标题</p>
    <p id="alert_message">Error，危险，佛波勒警告。</p>
    <input type="button" value="关闭" id="alert_close" />
</div>

https://www.w3.org/TR/wai-aria-1.2/#alertdialog
A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert and dialog.
application 表示应用 
1
2
3
4
5
6
7
8
9
10
11

<!-- 普通使用 -->
<div class="application" role="application">...</div>

<!-- bootstrap 的 datepicker 时间选择器组件 -->
<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 表示按钮 
1
2
3
4
5
6
7
8
9
10

<!-- span 按钮 -->
<span class=”btn” role=”button”></span>

<!-- 按钮组，图片按钮 -->
<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 表示复选框 
1
2
3
4
5
6
7
8
9
10
<!-- 正常下使用 -->
<input type="text" role="combobox" />

<!-- 组合多选时，使用 `li` `div` 模拟复选框 -->
<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 表示表单控件 
1
2
3
4
5
6
7
8
9
10
<!-- 正常下使用 -->
<input type="text" role="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、search、telephone、url或e-mail。
  • aria-owns属性值设置相同的值作为list属性。另外select元素没有multiple属性或者说size属性值大于1。
dialog 表示Modal弹出窗 
1
2
3
4
<!-- bootstrap 的 modal 组件 -->
<div class="modal" tabindex="-1" role="dialog">
  具体看bootstrap的modal组件
</div>

https://www.w3.org/TR/wai-aria-1.2/#dialog
A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal. See related alertdialog.
grid 表示网格 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 例子1 -->
<div aria-readonly="true" role="grid"><table role="presentation"></table></div>

<!-- 例子2，table写法标准 table / caption / th -->
<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 网格单元格 
1
<tr role="row"><td role="gridcell">Fido</td></tr>
  • td的祖先元素（或table元素）定义了 role="grid"；
  • th（列标题或行标题，并且其祖先元素或table元素定义了 role="grid" ）
group 表示组合并 
1
2
3
4
5
6
7
8
9
<div class="btn-group" role="group" aria-label="First group">...</div>

<!-- 按钮组合使用 -->
<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 表示标题 
1
2
3
<div class="page-title" role="heading" aria-level="1"></div>
<!-- 使用div模拟h1等等情况。 -->
<div role="heading" aria-live="assertive" aria-atomic="true">2023年6月</div>
listbox 表示列表框 
1
2
3
4
5
6
7
8
<ul role="listbox" aria-expanded="true"></ul>
<!-- 按钮组合使用 -->
<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>
  • 模拟带有multiple属性并且size值大于1的select元素，或者datalist并且aria-multiselectable属性值设置为false。
  • 如使用ul来模拟下拉选择框中的列表项。
log 表示日志记录 
1
<div role="log" aria-atomic="false" aria-relevant="additions"></div>
  • 这个比喻一流：类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。
menu 表示菜单 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul role="menu" aria-hidden="true"></ul>

<!-- 组合菜单，整一个效果 -->
<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 表示菜单栏 
1
2
3
4
5
<ul role="menubar">
    <li role="menuitem">
        <ul role="menu" aria-hidden="true"></ul>
    </li>
</ul>
menuitem 表示菜单项 
1
2
3
4
5
<ul role="menubar">
    <li role="menuitem">
        <ul role="menu" aria-hidden="true"></ul>
    </li>
</ul>
menuitemcheckbox 可复选的菜单项 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 一个效果 -->
<ul role="menu" aria-hidden="true"><li role="menuitemcheckbox"></li></ul>

<!-- 一个效果 -->
<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 表示只能单选的菜单项 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 一个效果 -->
<ul role="menu" aria-hidden="true">
    <li role="menuitemradio"></li>
</ul>

<!-- 一个效果，表示单选 -->
<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 表示选项 
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul role="listbox" aria-expanded="true">
    <li role="option"></li>
</ul>

<!-- 一个效果，表示选项 -->
<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 表示描述 
1
2
3
4
5
6
7
<h1 role="presentation">text</h1>
<!-- 一个效果，滑块上的当前内容都描述 -->
<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 表示进度条 
1
2
3
4
5
<!-- 表示这是一个进度表 -->
<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 表示单选按钮 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="radio" role="radio"></div>
<!-- 一个效果，滑块上的当前内容的描述 -->
<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>
radiogroup 表示单选组 
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 一个效果，标记在单选组合的父元素上 -->
<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 表示区域 
1
2
3
<div role="region" tabindex="-1" aria-expanded="false">
    我之所以会出现，是因为主人你点击了某个命中注定的按钮。
</div>

例如用在 div 区域显示隐藏切换的时候。
row 表示行 
1
2
3
4
5
6
7
<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 表示分隔 
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
  • 用在类似 | 的分割线上。
slider 表示滑动条 
1
2
3
4
5
<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 表示微调 
1
2
3
4

<!-- 用在上下数字调整的标签上 -->
<div class="spinbutton" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"
  tabindex="0">50</div>
tab 表示标签 
1
2
3
4
5
6
7
8
9
// 典型的书签切换效果，子元素。
<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 表示标签列表 
1
2
3
4
5
6
7
8
<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 表示标签面板 
1
2
// 表示标签最外层标签嵌套
// 同上代码
timer 表示计数 
1
<div role="timer" aria-atomic="true" aria-relevant="all">0</div>
  • 模拟计数器，使用在动态显示规律数值变化的地方。
toolbar 表示工具栏 
1
2
3
4
5
<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 表示提示文本 
1
2
3
4
5
6
<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 表示树形 
1
2
3
4
5
6
7
8
9
10
<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 表示树结构选项 
1
// 同上
--------------本文结束 感谢您的阅读--------------