前言
无障碍、工具、插件、a11y、Accessibility
其实 无障碍
离我们挺近的例如:
- 色盲:男生患有的比例为
1/12
,女生患有的比例为1/200
。 - 老年人:看不清字需要使用放大镜、视觉灵敏度降低需要对比度太低的内容看不清。
- 孕妇:抱着小孩不能双手进行操作。
在编码和设计的时可以对这部分人群做出相应的帮助,对于无障碍设计方面可以看看下面这篇文章无障碍设计 非常详细,下面也给出一些用于无障碍开发的相关工具。
更多内容可以阅读 无障碍世界
工具
WAI-ARIA
在上一篇文章 HTML Cosplay 已经对 WAI-ARIA 有了一定的了解,其实 WAI-ARIA 与前端开发并不冲突,你也可以把它当做开发的一个工具。例如在开发一个前端的按钮时:
<style>
.button {}
.button.pressed {}
</style>
<!-- 按钮 -->
<div class="button">
我是一个按钮
</div>
<!-- 按钮被激活 -->
<div class="button pressed">
我是一个按钮
</div>
复制代码
用上 WAI-ARIA
的 aria-pressed
来替代 pressed
还增加了按钮的语义:
<style>
.button {}
.button[aria-pressed="true"] {}
</style>
<!-- 按钮 -->
<div class="button"
role="button"
aria-pressed="false">
我是一个按钮
</div>
<!-- 按钮被激活 -->
<div class="button"
role="button"
aria-pressed="true">
我是一个按钮
</div>
复制代码
系统自带
- Mac:打开
系统偏好设置>辅助功能
即可选择视觉、听觉、交互相关的帮助工具,例如放大镜、色彩反转、对比度设置等等。 - iPhone:打开
设置>通用>辅助功能
即可选择视觉、听觉、交互相关的帮助工具,例如放大镜、色彩反转、对比度设置等等。 - 原生安卓在这方面做得好像比较好,小二手头只有一部
oppo r9
并没有比较实用的辅助工具。 - Win:小二没有使用 Win,欢迎大家到 Github 上帮助补充这部分内容。
VoiceOver
一款苹果公司出品的无障碍辅助工具,内置于 Mac 电脑和 iPhone、iPad 等设备中。对于 Mac 电脑的使用在语义化与无障碍树中已经有提到过,这里给出几个能流利使用的快捷键:
control+option+右箭头/左箭头
:切换导航,相当于焦点中的tab
。control+option+shift+下箭头/上箭头
:进入或退出当前导航选中的内容。control+option+command+h
:阅读网页内容中的heading
。control+option+space
:模拟鼠标点击事件。control+option+u
:使用转子。
对于 iPhone 和 iPad 快捷键:
- 单指轻点一次:选着项目。
- 单指轻点两次:模拟点击项目。
- 单指左右滑动:切换项目。
- 双指点击:停止阅读。
- 双指旋转:选择切换模式,只浏览链接、heading 等。
- 三指上下滑动:进行滚动或翻页。
Chrome Accessibility
在 语义化与无障碍树 中提到过这是谷歌浏览器自带的一个功能,当你在控制台 Elements
下选择节点或者审查元素的时候会给出 无障碍树
的相关内容:
在 Audits
中也增加了 Accessibility
的选项:
当点击 Run audits
谷歌浏览器会给出当前页面无障碍相关的评分
和可优化
的地方而且内容十分详细:
在 Color Contrast Is Satisfactory
中还可以看到当前页面对于 颜色的建议
,当然也可以在 Elements
中直接点击颜色:
在上面图片中可以看到,给出了两条对比曲线可以提供选择
,并且给出了相应的评分,当然这只是作为一个参考并不是强制要求当做教条来使用。
NoCoffee
一款谷歌浏览器插件使用后可以模拟 色盲用户
访问页面的效果,帮助我们找出页面中需要改进的地方。例如在掘金主页选择绿色盲模拟
:
可以很清楚的看出掘金的 蓝色系
统统变成了 紫色系
,对于红色的重点内容被变为了 黄色
。
High Contrast
一款谷歌浏览器插件使用后可以提高页面的 对比度
模拟 颜色不明感
用户访问页面的效果,帮助我们找出页面中需要改进的地方。例如在掘金主页:
无障碍相关内容
一起成长
在困惑的城市里总少不了并肩同行的
伙伴
让我们一起成长。
- 如果您想让更多人看到文章可以点个
点赞
。 - 如果您想激励小二可以到 Github 给个
小星星
。 - 如果您想与小二更多交流添加微信
m353839115
。
本文原稿来自 PushMeTop