关于无障碍适配的笔记
文章目录
- 一、概述
- 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（必填状态）
- 三、常用角色权限
- 1、按钮类
- 示例内容
- 2、布局类
- 2.1、表格布局
- 示例内容
- 2.2、选择框
- 2.2.1、复选框
- 示例内容
- 2.2.2、单选框
- 示例内容
- 2.2.3、列表框
- 示例内容
- 2.3、菜单项
- 示例内容
- 3、标签类
- 示例内容
- 四、编排思路
- 1、确定展示布局
- 2、清除无关标识
- 3、设置tabindex
- 4、循环控制（可选）
一、概述
通常用于描述修饰无障碍人士可操作性网站的规则。
一句话说白：标签并不代表你的结构，你可以以角色标签来二次加工你的网站
W3C 2.1 标准：Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org)
国内无障碍协会： 信息无障碍协会
香港政府关于无障碍的内容 ：相关测试方法
使得整个网站对特定人群更加友好。
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（默认阅读标签）
当被聚焦时作补充说明的标签
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默认为非必填
三、常用角色权限
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>
四、编排思路
1、确定展示布局
确定好整体模块的循序性：
①保证无障碍访问时能够按照既定顺序访问。
②保证不希望被访问的内容能够被正确的屏蔽。
③是否需要内循环。（所谓内循环即指定访问顺序是否需要在特定节点内循环）
2、清除无关标识
为避免之前的设置无障碍标识影响整体布局，对于不确定的内容：
①清空dom骨架或脚本上可能的tabindex标识。
②清空dom骨架或脚本上存在的角色名称内容。
3、设置tabindex
①将不需要展现的内容，统一置换为-1。
②若仅需与排版一样顺序即可，全部需要展现的内容（这里指的是不可聚焦的元素）可以设置为0。
③若需要固定顺序，会按照数字从小到大去访问聚焦，按需配置即可。
4、循环控制（可选）
主要是保证聚焦点在特定范围内循环的要求。
可以参考：Web兼容性笔记_CoffeeAndIce的博客-CSDN博客 下第三点无障碍兼容性问题
关于无障碍适配的笔记相关推荐
- Android多屏幕适配学习笔记
我所在公司的产品以硬件为主,软件跟着特定的硬件平台走,所以,虽然从事着Android开发,却从来没有处理过多屏幕适配的问题.意识到这个可能成为自己的一个短板,所以在缺乏实践的情况下,先准备点理 ...
- iOS屏幕适配-iOS笔记
学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...
- 西瓜视频 iOS Voice Over 无障碍适配实践
动手点关注 干货不迷路
- Android屏幕适配 - 屏幕基础理论知识笔记；res资源文件命名与匹配规则
Android开发中,屏幕适配是十分让人头疼的问题,最近打算好好研究下适配的解决方案,主要参考官方文档及论坛上大神们的方法(我崇拜的鸿洋大神等):首先,先熟悉点基础知识. 常用单位 px:pixel ...
- 盲人也能用，优酷App做了哪些无障碍实践？
简介:虽然Android和iOS系统本身就有对无障碍技术的官方支持,但是随着各种技术的迭代和演进,以及页面内容的复杂度的增加,靠系统自身的支持已经远远无法达到理想的无障碍用户体验.优酷客户端针对视障群 ...
- 疫情期间我们与你同在：关爱障碍群体刚需，坚持做无障碍的倡议书
[CSDN编者按]新型冠状病毒感染的肺炎疫情发生以来,障碍群体(视障者.听障者.肢体残障者.读写障碍者.老年人等)也一样积极响应号召,战疫情,不出门,戴口罩,通过互联网了解疫情实况.学习如何防控.疫情 ...
- 疫情期间不忽略障碍群体刚需、仍坚持做无障碍的倡议书
疫情期间我们与你同在:关爱障碍群体刚需,坚持做无障碍的倡议书 新型冠状病毒感染的肺炎疫情发生以来,障碍群体(视障者.听障者.肢体残障者.读写障碍者.老年人等)也一样积极响应号召,战疫情,不出门,戴口罩 ...
- 腾讯手机QQ团队无障碍化探索的曲折与收获
大家下午好,我是来自腾讯SNG即通产品部手机QQ项目管理Alice. 大家都知道,在中国有1700多万的视障群体,他们通常从事推拿.公益等工作,为社会创造价值. 手机QQ在接触这样一个群体,在和他们沟 ...
- 阿里巴巴钉钉做信息无障碍的初心
大家好,我是来自阿里巴巴钉钉iOS & Mac 团队的鼎天,很高兴今天有机会在这里给大家分享一下钉钉在信息无障碍上做的一些事情. 今天分享的主题是"让更多人'看见'".钉钉 ...
最新文章
- Octave Convolution卷积
- 【Ajax技术】使用XHR对象发送和接受数据
- 03-cmake语法-变量，字符串
- 线性代数笔记： Cholesky分解
- android简单小项目_烤面筋怎么做到年入20万？小成本！大收益！简单易操作的好项目！...
- 【MM模块】Source Lists 货源清单
- boost::is_readable_iterator用法的测试程序
- 【转】微服务架构下分布式事务方案
- Golang 连接池的几种实现案例
- dubbo调用service后返回对象null_dubbo-go 白话文 | go 和 java 互通有无
- Java并发编程实战之基于生产者消费者模式的日志服务读书笔记
- 快速入手光学字符识别控件Aspose.OCR！学会使用C＃以编程方式对图像执行OCR
- 利用动态加载实现手机淘宝的节日特效
- node.js+uni计算机毕设项目鲸落图书商城小程序LW（程序+小程序+LW）
- iPhone十二年了，多希望这是苹果的一个新轮回！
- 【Coursera】深度神经网络的改进：超参数调整、正则化和优化（更新中2023/04/12）
- 【报告分享】2020年中国老年教育市场研究报告-IT桔子（附下载）
- linux curl命令详解，以及实例
- 财务管理专业计算机要学什么,我是学财务管理专业的，我想考计算机二级，请问考哪个比较好...
- 2020牛客寒假算法基础集训营4（A:欧几里得）（规律题）
热门文章
- Paillier同态加密算法
- Android 9.0 安装包解析错误
- 数据分享｜中国各省、各市、各区县分年、分月、逐日平均气温数据（2000年～2019年）
- 《信号分析与处理》期末复习题库整理（题目+手写知识点+答案+期末知识点精细）
- 百度Echart 地图
- cad在线转换_CAD批量转PDF？分享两种方法，一分钟完成所有图纸转换！
- 打开PR显示计算机丢失,打开PR提示媒体错误缺失WMVCore.dll的解决方法
- 使用Navicat新建PostgreSQL数据库报错ERROR: new collation (en_ US.utf8) is incompatible with the collation of t
- WORD的三种选定文本的方法
- ZMY_自定义分页加载