关于无障碍适配的笔记

CoffeeAndIce

已于 2024-11-19 16:14:39 修改

阅读量3.5k

点赞数 1

分类专栏：兼容性问题常見問題處理文章标签：前端 javascript 无障碍 wcg

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

本文链接：https://blog.csdn.net/CoffeeAndIce/article/details/125633967

版权

常見問題處理同时被 2 个专栏收录

12 篇文章

订阅专栏

兼容性问题

4 篇文章

订阅专栏

文章目录

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

一、概述

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

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

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">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、循环控制（可选）

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

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

六、针对适配的强制性要求

可以参考如下

window._hook = {
  func: {
    enter: {
      "#userQuetion": "inputHook",
    },
    tab: {},
    arrow: {},
    keyup: {},
  },
  hook: {
    enter: {
      inputHook: function (selector, event) {
        console.log(selector);
        console.log(event);
      },
    },
    tab: {},
    arrow: {},
    keyup: {},
  },
  /**
   * @todo deconstruct the event content of the processing hook
   */
  hookHandler: function (event, mode) {
    var _this = window._hook;
    if ("keyup" == mode) {
      _this._keyup_hook(event);
      return;
    }

    var eventKey = event.key;
    if ("Tab" == eventKey) {
      _this._tab_hook(event);
    } else if ("Enter" == eventKey) {
      _this._enter_hook(event);
      console.log("enter");
    } else if (
      "ArrowUp" == eventKey ||
      "ArrowDown" == eventKey ||
      "ArrowLeft" == eventKey ||
      "ArrowRight" == eventKey
    ) {
      _this._arrow_hook(event);
    }
  },
  /**
   * @todo Initialize the listener
   * @param {Event} event
   */
  initialise: function () {
    var _this = window._hook;
    window.addEventListener("keydown", function (event) {
      _this.hookHandler(event);
    });

    window.addEventListener("keyup", function (event) {
      _this.hookHandler(event, "keyup");
    });
  },
  _hook_loop_call: function (func, hookFunc, event) {
    for (const key in func) {
      if (func.hasOwnProperty(key)) {
        hookFunc[func[key]](key, event);
      }
    }
  },
  _enter_hook: function (event) {
    var _this = window._hook;
    var enterFunc = _this.func.enter;
    _this._hook_loop_call(enterFunc, _this.hook.enter, event);
  },
  _tab_hook: function (event) {
    var _this = window._hook;
    var tabFunc = _this.func.tab;
    _this._hook_loop_call(tabFunc, _this.hook.tab, event);
  },
  _arrow_hook: function (event) {
    var _this = window._hook;
    var arrowFunc = _this.func.arrow;
    _this._hook_loop_call(arrowFunc, _this.hook.arrow, event);
  },
  _keyup_hook: function (event) {
    var _this = window._hook;
    var keyupFunc = _this.func.keyup;
    _this._hook_loop_call(keyupFunc, _this.hook.keyup, event);
  },
};