比昨天更好一点点のWeb无障碍

以下内容来源于自己在公司内部的分享「2021.08.13」,同步成文章,用来鞭策自己不忘初心,持续在无障碍的道路上尽一点自己的绵薄之力❤️❤️

Why 价值/意义

当我把分享的主题发给张老师,张老师立马就问了我一句,如果花费人力成本去做了无障碍,但是最后发现,对产品的收益并没有任何提升,那为啥要做呢?

张老师也提到,在他入行不久就在宣传推广无障碍,但是并未有很多互联网产品会愿意花人力成本进行这个工作~

基于张老师的疑问🤔️,我自己也去思考了以下两个问题

  • 为什么要做Web无障碍?
  • 有什么收益?价值体现

我要如何自下而上的推动产品进行无障碍的改造呢?

有需求,有市场

中国🇨🇳有8500多万 残障人士,2亿多 60岁以上的老年人,隐藏在人群中的大量认知障碍人士

而且无障碍访问指的是面向所有人群、针对各处场景的无障碍访问支持

因为即使是四肢健全的正常人,也会遇到各种使用障碍,例如手提重物或在颠簸的车辆中使用手机,眼镜丢了或者弱视、光线很强或者很暗等情境限制下,也有可能是用户的硬件出现了异常,比如鼠标坏了,网络缓慢,电源不足等。

人文情怀

让任何人在任何情况下都能平等、方便、无障碍地获取信息并利用信息。(信息无障碍的概念和价值)

(信息无障碍)这件事是对用户体验的一个很大的提高,我们不认为我们的用户只是非残障人士,如果(产品)买一所有人就应该让每一个人的用户体验都很好

---摘自朱萧木(锤子科技用户体验副总裁)

国家倡导&规章制度

2020年末,工信部印发《互联网应用适老化无障碍 改造专项行动方案》通知

通知里面提及了总体要求及群体、相关工作安排及进度,甚至罗列了要求改造的首批网站及APP名单。

可能今天我们的产品未曾被要求,但是未来没准随着人口老龄化,适老化及无障碍会变成所有产品线的一个基准,早点行动起来不会被动~

What 定义

什么是Web无障碍?下面通过一个小短片来了解一下,曾经部分有障碍人士使用互联网的情况~

原视频链接www.youtube.com/watch?v=YOy...

  • 设计和开发网站、工具和技术,使残障人士能够使用它们~
  • 所有人都存在"有障碍"的情况 Web无障碍包括所有影响浏览网页的障碍

Web无障碍不仅仅只服务于残障人士,对于类似下面提及的有障碍的情境也比较有益处。

  • 使用不同 屏幕、输入模式的设备
  • 年龄增长能力发生变化的老年人,如行动迟缓无法及时操作;
  • 有"暂时性残障"的人,如手臂骨折或眼镜丢失或鼠标失灵等;
  • 有"情境限制"的人,例如在明亮的阳光下或在无法听音频的环境中;
  • 使用慢速互联网连接,或带宽有限或昂贵的人。

What can we do?

具体什么是无障碍的场景呢?我们又能做什么呢?

视觉无障碍

视觉无障碍主要是指因为某些有视力模糊、朦胧、高度远视或近视、色盲和管状视等视力问题,看计算机屏幕上的文字或者图像存在困难,需要眼和手配合(如移动计算机鼠标)等。

因而需要在某些情况下,需要注意以下某些方面的设计。

信息内容注意对比度

过低对比度,会导致一些老花、白内障、色盲患者等视障人群,无法识别文本。

关键信息不依赖颜色

在一些色盲患者眼中(包括红绿色盲、蓝黄色盲和单色色盲,见下方的图片)。

假设是一个很重要的表单,猜一下在不同的人眼里看到是什么?

当我们仅仅使用颜色的变化来提示错误时,他们无法接收到这些信息。所以我们不能单单只依靠颜色传达诸如「 状态指示、区分视觉控件、实时响应」等信息,除了颜色外还需要增加设计元素,以确保他们能接收到和正常人等量的信息。

对于重要的状态,可以同时使用多个视觉提示。使用下划线、指示符、图案或文本等元素来描述操作和内容。

图标不作为唯一元素

视障人士通过朗读出屏幕上的内容,从原本的看👀变成了听👂。

一个很普通的菜单图标。

大型活动,假设所有的按钮都是用图片,没有添加title等文本描述,借助屏幕阅读设备的人对这个页面的按钮都是未知的。

必要场景添加提示音、朗读功能。

听觉无障碍

行动无障碍

键盘可访问

支持语音控制、物理切换控制支持进行交互操作。

辅助技术

语音技术(如语音助手/语音输入)

假设手机屏幕碎了,Home键还能用,IOS的Siri,可以呼起某些应用,但是目前主流厂商的APP并未开启语音技术

点击区域足够大

认知无障碍

认知障碍症是因大脑神经细胞病变而引致大脑功能衰退的疾病,患者的记忆、理解、语言、学习、计算和判断能力都会受影响,部分且会有情绪、行为及感觉等方面的变化。

避免重复或闪烁

某种频率或图案的闪烁可能诱发光敏反应,包括癫痫。动画及移动的内容也可能导致不适或物理反应

  • 不使用某种频率或图案的闪烁;
  • 内容闪烁前对用户给出提示,同时提供替代方案;
  • 除非必要,要让用户可以关掉动画。

其他

  • 给用户留出充足的操作时间
  • 在特殊场景或必要时给用户提供辅助能力

已有的无障碍建设

  • 各大APP进行无障碍建设和实践
  • 更多的手机厂商和政府网站支持无障碍
  • 生活中的无障碍场景应用普及

比昨天更好一点的无障碍,就是更温暖一点的互联网~~~

链接参考

相关推荐
qbbmnnnnnn9 分钟前
【CSS Tricks】如何做一个粒子效果的logo
前端·css
唐家小妹10 分钟前
【flex-grow】计算 flex弹性盒子的子元素的宽度大小
前端·javascript·css·html
涔溪12 分钟前
uni-app环境搭建
前端·uni-app
安冬的码畜日常16 分钟前
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格(上)
前端·css·css3·html5·网格布局·grid布局·css网格布局
洛千陨16 分钟前
element-plus弹窗内分页表格保留勾选项
前端·javascript·vue.js
小小199218 分钟前
elementui 单元格添加样式的两种方法
前端·javascript·elementui
前端没钱38 分钟前
若依Nodejs后台、实现90%以上接口,附体验地址、源码、拓展特色功能
前端·javascript·vue.js·node.js
爱喝水的小鼠43 分钟前
AJAX(一)HTTP协议(请求响应报文),AJAX发送请求,请求问题处理
前端·http·ajax
叫我:松哥1 小时前
基于机器学习的癌症数据分析与预测系统实现,有三种算法,bootstrap前端+flask
前端·python·随机森林·机器学习·数据分析·flask·bootstrap
让开,我要吃人了1 小时前
HarmonyOS鸿蒙开发实战(5.0)网格元素拖动交换案例实践
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙开发