文章目录

  • 一、概述
  • 1、常用可聚焦标签
  • 2、不可聚焦标签
  • 3、tabindex (标签顺序)
  • 二、常用角色属性
  • 1、通用设置
  • 1.1、aria-hidden (相对隐藏)
  • 1.2、aria-owns（元素拥有的内容）
  • 1.3、aria-haspopup（存在菜单/浮动）
  • 1.4、aria-expanded(展开状态)
  • 2、发声相关
  • 2.1、aria-label（默认阅读标签）
  • 2.2、aria-labelledby（阅读标签）（优）
  • 2.3、aria-disabled（禁用状态）
  • 2.4、aria-atomic（是否完整播报）（组合）
  • 2.4.1、aria-live（播报时机）
  • 2.5、数值大小控制
  • 2.5.1、aria-valuemax（最大值）
  • 2.5.2、aria-valuemax（最小值）
  • 2.5.3、aria-valuemax（当前值）
  • 2.6、aria-readonly（只读状态）
  • 2.7、aria-required（必填状态）
  • 2.8、aria-describedby （备注内容专用）
  • 三、常用角色权限
  • 1、按钮类
  • 示例内容
  • 2、布局类
  • 2.1、表格布局
  • 示例内容
  • 2.2、选择框
  • 2.2.1、复选框
  • 示例内容
  • 2.2.2、单选框
  • 示例内容
  • 2.2.3、列表框
  • 示例内容
  • 2.3、菜单项
  • 示例内容
  • 3、标签类
  • 示例内容
  • 4、输入框类
  • 示例内容
  • 错误提示示例
  • 5、列表选项类
  • 示例内容
  • 四、顔色對比度要求
  • 五、编排思路
  • 1、确定展示布局
  • 2、清除无关标识
  • 3、设置tabindex
  • 4、循环控制（可选）


一、概述

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

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

W3C 2.1 标准：Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org)国内无障碍协会： 信息无障碍协会香港政府关于无障碍的内容 ：相关测试方法 使得整个网站对特定人群更加友好。
Tips ： 核心要义是，上下dom节点的顺序，如果设置为0，则按照顺序，否则则需要自己强制处理。

1、常用可聚焦标签

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

2、不可聚焦标签

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

3、tabindex (标签顺序)

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

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

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

二、常用角色属性

1、通用设置

1.1、aria-hidden (相对隐藏)

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

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

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

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

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

1.4、aria-expanded(展开状态)

true表示元素是展开的；false表示元素不是展开。（并不会在语音中呈现）

2、发声相关

具体影响可以到声音响应级别

2.1、aria-label（默认阅读标签）

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

若已经与 标签 for 关联，则无需再设置

2.2、aria-labelledby（阅读标签）（优）

当被聚焦时作补充说明的标签 ,优先级比aria-label高，存在时，只会响应这个标签

①本标签对应id绑定的标签内容，若不存在，则无效。

②当与aria-label共存，若本标签聚焦的id无法搜寻，则以aria-label为准。

2.3、aria-disabled（禁用状态）

针对单选/复选框（在语音上可以呈现是否被禁用）

true表示当前是非激活状态；false表示清除非激活状态。

2.4、aria-atomic（是否完整播报）（组合）

默认为完整播报，可以设置为false来控制仅播报修改部分

2.4.1、aria-live（播报时机）

需要与本属性组合才能达到修改发声的情况，默认为off。

polite：表示当其他不操作选择的时候播报，没有太明显连续感觉；

assertive ：表示当其他播报结束后，马上开始播报，明显的急促感觉；

rude：表示即时提醒播报，存在甚至中断其他播报的情况。

2.5、数值大小控制

通常放置在可调节的数值标签内

2.5.1、aria-valuemax（最大值）

标签允许的最大值。

2.5.2、aria-valuemax（最小值）

标签允许的最小值。

2.5.3、aria-valuemax（当前值）

标签允许的当前值。

2.6、aria-readonly（只读状态）

通常放置位于可编辑的标签内，说明只读与否。

true 为只读，false为默认可编辑

2.7、aria-required（必填状态）

通常放置位于可编辑的标签内，说明只读与否。

true 为必填，false默认为非必填

2.8、aria-describedby （备注内容专用）

通常输入框需要一些内容备注，这时，需要用到这个属性

<input aria-describedby="input-desc"></input>
<p id="input-desc">
 输入框的内容描述
</p>

三、常用角色权限

1、按钮类

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

角色名

描述

alert

通常用于描述慎点的按钮

alertdialog

搭配alert 增加警告说明内容

application

通常用于描述可以进入应用的按钮

button

通常用于描述普通按钮

示例内容

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

2、布局类

2.1、表格布局

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

角色名

描述

grid

通常用于表格，也可以用于区分布局

row

通常用于指代行

gridcell

通常指代列

示例内容

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

2.2、选择框

2.2.1、复选框

泛指复选框结构相关角色

角色名

描述

group

通常用于圈定某些范围，称为组

checkbox

通常用于复选框

属性表

属性名

描述

aria-checked

true表示元素被选择；false表示元素未被选择；mixed表示元素为薛定谔的选择

示例内容
<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>
2.2.2、单选框

泛指单选框结构相关角色

角色名

描述

radio

通常用于单选框

radiogroup

通常用于单选框组

属性表

属性名

描述

aria-checked

true表示元素被选择；false表示元素未被选择；mixed表示元素为薛定谔的选择

示例内容

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

<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>
2.2.3、列表框

泛指下拉框结构相关角色

角色名

描述

listbox

通常用于列表框

option

通常用于列表框选项

属性表

属性名

描述

aria-expanded

true表示元素是展开的；false表示元素不是展开。（并不会在语音中呈现）

示例内容
<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>

2.3、菜单项

泛指菜单项结构相关角色

角色名

描述

menubar

通常用于菜单栏

menuitem

通常用于菜单项

menuitemradio

通常用于描述菜单单选项

menuitemcheckbox

通常用于描述菜单复选项

属性表

属性名

描述

aria-haspopup

true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。（并不会在语音中呈现）

aria-checked

true表示元素被选择；false表示元素未被选择；mixed表示元素为薛定谔的选择

示例内容
<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>

3、标签类

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

角色名

描述

tabpanel

通常用于标签面板

tablist

通常用于标签列表

tab

通常用于描述tab标签

属性表

属性名

描述

aria-selected

true表示元素已选择；false表示未被选中

示例内容
<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>

4、输入框类

角色名

描述

alert

通常用于错误提示内容

属性名

描述

for

用id 将输入框与label的描述绑定一起

示例内容

<label for="form-name">示例名称 <span class="red-tag">*</span> :</label>
<input placeholder="请输入名称"  id="form-name">
错误提示示例
<p for="form-name" role="alert" >示例名称错误</p>
<input placeholder="请输入名称"  id="form-name">

5、列表选项类

通常支持搜索功能的输入框伴随

角色名

描述

combobox

通常用于动态输入框

listbox

通常用于列表框

option

通常用于列表框选项

属性表

属性名

描述

aria-expanded

true表示展开；false表示未被展开

aria-autocomplete

none： 表示组件不支持自动完成功能。

inline： 表示组件支持自动完成功能，并且建议用户在输入时，根据上下文提供的建议进行选择。

list： 表示组件支持自动完成功能，并且在输入时显示一个弹出列表，其中包含了根据用户输入提供的建议。

both： 表示组件同时支持 inline 和 list 两种自动完成功能。

aria-controls

通常为datalist 元素的id

示例内容

<input 
placeholder="请输入名称"  
id="name"
role="combobox" 
aria-expanded="true"
aria-autocomplete="list"
aria-controls="name-list">
<datalist id="name-list" role="listbox">
    <option role="option" tabindex="-1">Ben Chow</option>
    <option role="option" tabindex="-1">Sohi</option>
</datalist>

四、顔色對比度要求

工具：
① https://www.weiyuan.com.tw/contrast_ratio
② https://products.aspose.app/html/zh/contrast-checker
③https://developer.paciellogroup.com/color-contrast-checker/ （直接安裝）

五、编排思路

1、确定展示布局

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

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

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

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

2、清除无关标识

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

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

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

3、设置tabindex

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

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

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

4、循环控制（可选）

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