关于无障碍适配的笔记

原创

已于 2024-11-19 16:14:39 修改 · 3.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #无障碍 #wcg

于 2022-07-06 10:08:52 首次发布

该博客围绕无障碍人士可操作性网站规则展开。介绍了常用可聚焦与不可聚焦标签、tabindex，阐述了通用设置、发声相关等常用角色属性，还提及常用角色权限、颜色对比度要求、编排思路及适配强制性要求，让网站对特定人群更友好。

文章目录

一、概述
二、常用角色属性
三、常用角色权限
四、顔色對比度要求
五、编排思路
六、针对适配的强制性要求

一、概述

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

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

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

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"