无障碍开发（二）之ARIA role属性

role属性值 含义 HTML示意 说明
alert 表示警告 
<p ></p>
 例如ajax操作返回错误信息的div标签。
alertdialog 表示Modal弹出框 
<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0"
        role="alertdialog" >
    <p >弹出框</p>
    <p >哥，你输入的时间穿越了，请重新输入！</p>
    <input type="button" value="关闭"  />
</div>
 自定义的出错提示弹框。

 

无障碍开发（二）之ARIA role属性
application 表示应用 
<div >
    <label >时间</label>:
    <input />
    <button >选择日期...</button>
    <div >
        <-- 时间选择控件具体 -->
    </div>
</div>
 例如自定义的时间选择器。
button 表示按钮 
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="btncut.png"  />
  <img src="btncopy.png"  />
  <img src="btnpaste.png"  />
</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>
 同样，大家都懂的，没啥好说的

 

无障碍开发（二）之ARIA role属性
combobox 表示表单控件 
<input 
      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
      
<ul >
    <li >晴川</li>
    <li >静秋</li>
    <li >黄小仙</li>
</ul>

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




无障碍开发（二）之ARIA role属性






grid
表示网格


<table >
  <caption >美女们</caption>
  <thead>
    <tr>
      <th >晴川</th>
      <th >静秋</th>
      <th >黄小仙</th>
    </tr>
  </thead>
  <tbody ></tbody>
</table>


无障碍开发（二）之ARIA role属性




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>




无障碍开发（二）之ARIA role属性






heading
表示标题


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



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

 


无障碍开发（二）之ARIA role属性






listbox
表示列表框


<input 
      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
      
<ul >
    <li >晴川</li>
    <li >静秋</li>
    <li >黄小仙</li>
</ul>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






option
表示选项


<input 
      role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" />
      
<ul >
    <li role="option">晴川</li>
    <li role="option">静秋</li>
    <li role="option">黄小仙</li>
</ul>




无障碍开发（二）之ARIA role属性






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显示的就是当前滑动位置对应的值。

 


无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






radio
表示单选


<h3 >美女们：</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的效果图：

 


无障碍开发（二）之ARIA role属性






radiogroup
表示单选组


<h3 >美女们：</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>




无障碍开发（二）之ARIA role属性






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像素水平分隔线：

 


无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






spinbutton
表示微调


<div class="spinbutton" role="spinbutton"
    aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
50</div>



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

 


无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性






tabpanel
表示标签面板


<div role="tabpanel">
  <ul class="tablist" role="tablist"><-- 选项卡 --></ul>
  <div >    
     <ul class="controlList">
        <li><input  />
            <label for="girl1">晴川</label></li>
        <li><input  checked />
            <label for="girl2">静秋</label></li>
        <li><input  />
            <label for="girl3">黄小仙</label></li>
    </ul>
  </div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>




无障碍开发（二）之ARIA role属性






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"  />
  <img src="btncopy.png"  />
  <img src="btnpaste.png"  />
</div>


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




tooltip
表示提示文本


<div class="text">
   <label >姓名:</label>
   <input type="text" 
       aria-describedby="tip" aria-required="false" />
   <div >必须是美女姓名哦~~</div>
</div>



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

 


无障碍开发（二）之ARIA role属性






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>




无障碍开发（二）之ARIA role属性







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


无障碍开发（二）之ARIA role属性


无障碍开发（二）之ARIA role属性


 

 
                    
            
                

                  
 
        

	 
        

            

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                                    
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2021-12-22
                            
    • 
                                                        
  • 
                                 
                                2022-03-01
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                        
  • 
                                 
                                2022-12-23
                            
    • 
                                                

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                                 
  • 
                     
                    2022-12-23
                
    • 
                                     
  • 
                     
                    2022-12-23
                
    • 
                                     
  • 
                     
                    2021-12-18
                
    • 
                                     
  • 
                     
                    2021-10-04
                
    • 
                                     
  • 
                     
                    2022-12-23
                
    • 
                                     
  • 
                     
                    2022-03-07
                
    • 
                            

   
 



    
相关资源 

        
   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode