每日 30 秒 ⏱ 无障碍世界
简介
无障碍、DOM 小细节、前端开发、a11y、Accessibility
无障碍的英文为 Accessibility
由于单词拼写过长往往被缩写为 a11y
其中 11 指的是中间有11个字母。
无障碍指的是在使用过程中,不管什么类型的用户都可以正常使用。生活中最常见的就是无障碍设施
相信很多人都吐槽过,让我们先从生活例子
到前端开发
探讨探讨 无障碍
相关内容。
本文内容偏科普,作为接下来几篇前端
无障碍
文章的引子。
生活例子
盲道
是生活中最常见到的无障碍设施了,它的本意是帮助盲人
和 老花眼
等视力障碍人群进行方向指引
,让所有人都可以无障碍的行走在道路上。可是现实生活中的盲道
往往和实际意义背道而驰:
这样的盲道
相信大家肯定不止一次吐槽过它到底有没有用,除了盲道
生活中还有很多这样的无障碍设施:
- 公交车的
特殊座椅
,设计初衷给老弱病残孕
使用,但是更多的时候是被年轻人
给占用。 - 动车站的
无障碍电梯
,设计初衷给使用轮椅
和老人
等行动不便的人使用,但是每次都能看到很多人去占用它。 - 电梯中的数字键下设置着
盲文
方便所有人无障碍使用。 - 纸币上的也有
盲文
方便所有人无障碍使用。
与我何干
很多同学可能会有这样的问题 与我何干
?其实除了基数较多的 特殊群体
,我们有时候也会 暂时性
的成为 特殊群体
。在特殊群体时间性
上分为了:暂时性、永久性、情景性。
暂时性
离小二身边最近的例子便是 阿零
同学,打篮球摔倒时不小心用手去支撑地板导致骨折脱臼
。在一些需要双手操作的情景下会无能为力,比如有些手机应用需要用到 两指缩放
等操作,iPhone 提供了 辅助触控
来实现无障碍:
谁能保证自己一辈子都 完好无恙
呢?就算是 两块胸肌八块腹肌
的叉叉学长在连续一个多月加班下,由于脊柱压迫导致了暂时性失明
,并不是身强力壮就不会出事。同学们还是要多运动运动,不要久坐和埋头在电脑面前。
永久性
小二的小姨夫就是天生的 红绿色盲
,大家不要以为这个比例很低:
- 我国男色盲率:4.71+-0.074%
- 我国女色盲率:0.67+-0.036%
- 我国色盲基因携带者的频率 :8.98%
大多数的 PC 游戏都有帮助 色盲
的颜色反转,例如大家常玩的 LOL
就有提供大家可以试试。iPhone 在辅助功能中也提供了:显示调节
、色彩滤镜
、对比度增强
等功能来帮助 色盲
、色弱
、视力困难
用户。
情景性
情景性
是生活中最经常接触的无障碍。在会议
和上班
有时需要将手机调制静音,当 微信
好友发来 语音
可以通过长按语音将其转化为 文字
。
很多同学没想到吧?生活中的一些情景下也是需要无障碍
来帮助我们。
无障碍分类
无障碍主要分为:运动觉、视觉、听觉、知觉,下面介绍几个相关例子来帮助理解:
运动觉
运动觉指的 运动障碍
和 灵巧性障碍
:
- 骨折导致的操作不便,可以使用语音或者辅助设备等。
- 颈椎病导致头部不能方便转动,可以使用头部、眼部跟踪器等。
- 笔记本电脑的触控面板失灵 或者 正在乘坐公交、地铁等不方便使用鼠标的场景 ,可以利用 键盘快捷键 和 网页无障碍功能等(下篇文章讲到)。
视觉
- 老花眼和视力障碍,使用
手机放大器
和显示放大器
等,不得不提的就是有些网站使用maximum-scale=1.0
来禁止页面被缩放,这些用户该如何是好? - 色盲、色弱,网页提供一定的
对比度
和颜色
使用或者切换的工具。 - 盲人,提供可以帮助
阅读器辨识页面
的工具,其实程序员中还有 盲人程序员。
听觉
听力障碍
,使用助听器、人造耳蜗等,在使用软件或者网页,不能仅仅只给出错误提示音
还需要对错误进行视觉提示
。
知觉
- 对于
ADD 难语证
,应该减少页面干扰
和认知负担
。
力所能及
在前端页面开发过程中,可以在 力所能及
的范围内使用 无障碍阅读
相关技巧:
- 如果目标群体并不需要
无障碍阅读
可以考虑不使用。 - 日常开发任务重无暇顾及时,可以力所能及使用一部分,当闲暇时对前端页面进行优化。
四个参照
- 可感知,并不是所有人可以看清页面上的东西,例如针对色盲、色弱用户对页面的
颜色
进行一些处理。 - 可操作,并不是所有人都可以使用和常人一样的工具,例如是否可以不使用
鼠标
和触摸屏
就能操作网页。 - 易理解,设计过于
复杂
和不一致
会对使得用户困惑,例如输入框只有设置placeholder
而没有设置描述标签
,用户可能输入到一半就忘记自己在操作什么。 - 兼容性,用户是否能够通过盲人键盘、屏幕阅读器来使用页面,最熟知的便是
霍金大大
使用三个手指头来操作设备。
三个主题
接下来的文章将围绕下面三个主题,其中 语义化
相关的内容在 SEO
系列文章中就提到过 H1 の 小秘密 和 img の 小九九、SEO 初体验 便是 语义化
的一部分,实现 SEO
的同时还能帮助到 特殊群体用户
岂不是妙哉。
- 焦点:使用键盘
tab
下一项选择,tab + shift
上一项选择,合理的设置页面的焦点帮助用户提供更多使用可能
。 - 语义化:通过语义化帮助
无障碍相关
工具理解页面。 - 视觉设计:通过颜色和对比度、空间布局等帮助用户方便感知和理解页面。
无障碍相关内容
- H1 の 小秘密
- img の 小九九
- 无障碍世界
- 扼住焦点的喉咙
- 语义化与无障碍树
- HTML Cosplay
- 无障碍工具
一起成长
在困惑的城市里总少不了并肩同行的
伙伴
让我们一起成长。
- 如果您想让更多人看到文章可以点个
点赞
。 - 如果您想激励小二可以到 Github 给个
小星星
。 - 如果您想与小二更多交流添加微信
m353839115
。
本文原稿来自 PushMeTop
转载于:https://juejin.im/post/5cae8c1d5188251ad443bd94
每日 30 秒 ⏱ 无障碍世界相关推荐
- 每日 30 秒 ⏱ HTML Cosplay
简介 无障碍.WAI.ARIA.a11y.Accessibility.框架选择 如何向 视障用户 介绍兔子长什么样?有的同学可能会说: 毛茸茸的长耳朵. 短短圆圆的小尾巴. 红红的眼睛. 那如何向 视 ...
- 每日 30 秒 ⏱ 强风吹拂
感悟.反思.重启 失眠 某天清晨没有原因的醒了,害怕时间被手机没收只能迷茫的盯着天花板.不知道过了多久隐隐约约听到打鸣声,还是克制不住拿起了手机.按照惯例一般刷刷掘金和知乎,可是在心中莫名的抗拒下打开 ...
- 每日 30 秒 ⏱ 漫游器法则
简介 SEO.robot.txt.搜索引擎优化 在浩海的互联网世界中: 互联网 宛如 宇宙 站点 宛如 星系 网页 宛如 星球 网页内容 宛如 生灵万物 而在互联网世界漫游的搜索引擎爬虫小蜘蛛,就好比 ...
- 每日 30 秒 ⏱ 字符编码排雷录
简介 字符编码.字符长度错误.截取字符错误.UTF8.Unicode 计算机重重底层之下都是由 0 和 1 组合,但是你知道他们是怎么一步步变成字符串的嘛?在我们现实生活中最常见的例子可以通过 wo ...
- 每日 30 秒之 对海量数据进行切割
简介 把数组按指定大小进行分组,可以用于分页.数据切割.异步操作数据. // 该源码来自于 https://30secondsofcode.org const chunk = (arr, size) ...
- 每日 30 秒 ⏱ 唯一的数据集
简介 数组.对象.唯一.只出现一次.差集 取出两个对象数组中唯一的数据集,即差集. // 该源码来自于 https://30secondsofcode.org const filterNonUniqu ...
- 每日 30 秒 ⏱ 复制内容到剪贴板
简介 剪贴板.复制.兼容 复制内容到剪贴板 是前端开发过程中会经常遇到的一个需求,大部分同学开发时往往会直接打开搜索框开始寻找别人写好的组件库,而聪明的同学会开始思考问题: 产品的使用场景是什么? 是 ...
- 每日 30 秒 ⏱ 千里姻缘一线牵
简介 SEO.链接.a 标签.HTTP 状态码.link 标签.alternate.canonical 唐朝有个小伙叫韦固喜欢在河边玩,一天遇到一个老伯伯在月光下把两块石头系在一起.小伙看到很好奇便问 ...
- 只需要30秒就可以做的30件事情:你会选择哪一件来改变世界?
只需要30秒就可以做的30件事情:你会选择哪一件来改变世界? ( 雾霭鎏蓝﹌. 孤单24H-某时. Abby. 秋色宜人. 浪杰. 酸菜妈妈. 冰泉幽语. §Michelle∽. ┕`l .á.. a ...
最新文章
- sql server mvp 發糞塗牆
- APUE(第七章)进程环境
- Cookie application session
- Master of GCD(差分数组||线段树)
- Quartz调度源码分析
- 浅谈Kubernetes Service负载均衡实现机制
- User-Defined-Literal自定义字面量
- Shutdown Abort :亚马逊成功迁移物流业务中最后一个Oracle数据库
- 【T+】win10/win11系统安装畅捷通T+Cloud专属云18.0
- python pip是什么的简写,python pip是什么
- python求n的阶乘_python如何计算n的阶乘
- Unity导出exe时遇到的两个问题
- 地震观测仪器的历史和发展趋势(二)
- OPENWRT-LUCI开发总结-LUCI目录结构介绍
- 【Fuzzy】隶属度函数和模糊推理
- 为什么很难统一量子力学与广义相对论?
- smaa github iryoku
- mysql 自动截断_MySql中关于超长自动截断的案例详解
- 杨超越是如何实现从全网嘲到全网夸的?营销圈来告诉你!
- 附近的宠物店在哪里_离我家近的宠物医院 附近宠物诊所医院