一、概述

通常用于描述修饰无障碍人士可操作性网站的规则。

一句话说白：标签并不代表你的结构，你可以以角色标签来二次加工你的网站

W3C 2.1 标准：Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org)

使得整个网站对特定人群更加友好。

1、常用可聚焦标签

<button>、<input>、<select>、<a>
1

2、不可聚焦标签

<div>、<span> 、<table>、<tr>
1

3、tabindex (标签顺序)

原则上属于1~32767范围内，可以加入到Tab与无障碍屏幕阅读上

默认值为 0 ,会相应根据页面排序

设置值为 -1，会被排除出Tab及无障碍屏幕阅读外

二、常用角色属性

aria-hidden (相对隐藏)

避免被读取输出,实际上还是需要加display:none一起用

aria-label（默认阅读标签）

当被聚焦时作补充说明的标签

aria-owns（元素拥有的内容）

通常用于指代元素间的关系，以id来标识（通常不会在语音上呈现）

aria-haspopup（存在菜单/浮动）

通常表示点击的时候是否会出现菜单/浮动内容（通常不会在语音上呈现）

三、常用角色权限

1、按钮类

泛指的可以当作按钮的角色

示例内容

<div class="nomal-button">
    <!-- 通用按钮框角色-->
    <div class="alertdialog" role="alertdialog" aria-label="通常描述慎用内容的说明框" tabindex="0">
        <label>警告内容示例：</label>
        <button role="alert" aria-label="通常描述慎用按钮">警告按钮</button>
        <button role="application" aria-label="通常描述应用按钮">应用按钮</button>
        <button role="button" aria-label="通常描述普通按钮">普通按钮</button>
    </div>
</div>
1
2
3
4
5
6
7
8
9

2、布局类

2.1、表格布局

泛指的可以构建简单表格识别的角色

示例内容

<table role="grid" tabindex="0" aria-label="通常为表格">
    <tr role="row" aria-label="通常为行">
        <td role="gridcell" aria-label="通常为列" tabindex="0">1</td>
        <td role="gridcell" tabindex="0">2</td>
        <td role="gridcell" tabindex="0">3</td>
    </tr>
    <tr role="row">
        <td role="gridcell" tabindex="0">4</td>
        <td role="gridcell" tabindex="0">5</td>
        <td role="gridcell" tabindex="0">6</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12

2.2、选择框

2.2.1、复选框

泛指复选框结构相关角色

属性表

示例内容

<div role="group" tabindex="0">
    <label>人民币：<input type="checkbox" aria-checked="mixed" value="222"></label>
    <label>美元：<input type="checkbox" aria-checked="false" value="111"></label>
    <label>日元：<input type="checkbox" aria-checked="true" value="333"></label>
</div>
1
2
3
4
5

2.2.2、单选框

泛指单选框结构相关角色

属性表

示例内容

单选框的属性一般通过方向键选择

<div role="radiogroup" tabindex="0">
    <label>人民币：<input type="radio" name="money" tabindex="0"  value="222"></label>
    <label>美元：<input type="radio" name="money" tabindex="0" value="111"></label>
    <label>日元：<input type="radio" name="money" tabindex="0" value="333"></label>
</div>
1
2
3
4
5

2.2.3、列表框

泛指下拉框结构相关角色

属性表

示例内容

<ul role="listbox" aria-expanded="true">
    <li id="cb1-opt1" tabindex="0" role="option">人民币</li>
    <li id="cb1-opt2" tabindex="0"  role="option">美金</li>
    <li id="cb1-opt3" tabindex="0" role="option">日元</li>
</ul>
1
2
3
4
5

2.3、菜单项

泛指菜单项结构相关角色

属性表

示例内容

<ul role="menubar" title="选项菜单">
    <li role="menuitem" tabindex="0" aria-haspopup="false">
        有钱
        <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="0" aria-haspopup="false">
        随机给钱
        <ul role="menu" aria-hidden="true">
            <li role="menuitemcheckbox" tabindex="-1" aria-checked="true">人民币</li>
            <li role="menuitemcheckbox" tabindex="-1" aria-checked="false">美元</li>
            <li role="menuitemcheckbox" tabindex="-1" aria-checked="false">日元</li>
        </ul>
    </li>
    <li role="menuitem" tabindex="-1" aria-haspopup="false">没钱</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、标签类

通常用于切换标签选项卡切换格局

属性表

示例内容

<div role="tabpanel" tabindex="0">
    <ul role="tablist" tabindex="0">
        <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>
    </ul>
</div>
1
2
3
4
5
6
7

四、编排思路

1、确定展示布局

确定好整体模块的循序性：

①保证无障碍访问时能够按照既定顺序访问。

②保证不希望被访问的内容能够被正确的屏蔽。

③是否需要内循环。（所谓内循环即指定访问顺序是否需要在特定节点内循环）

2、清除无关标识

为避免之前的设置无障碍标识影响整体布局，对于不确定的内容：

①清空dom骨架或脚本上可能的tabindex标识。

②清空dom骨架或脚本上存在的角色名称内容。

3、设置tabindex

①将不需要展现的内容，统一置换为-1。

②若仅需与排版一样顺序即可，全部需要展现的内容（这里指的是不可聚焦的元素）可以设置为0。

③若需要固定顺序，会按照数字从小到大去访问聚焦，按需配置即可。

4、循环控制（可选）

主要是保证聚焦点在特定范围内循环的要求。

可以参考：Web兼容性笔记_CoffeeAndIce的博客-CSDN博客 下第三点无障碍兼容性问题