Web无障碍指南（WCAG）2.0定义了如何使残障人士更方便地使用Web内容的方法。无障碍涉及广泛的残疾类别，包括视觉、听觉、身体、语言、认知、语言、学习以及神经残疾。尽管这些指南内容广泛，但它无法满足所有类型、程度和多重残疾人群的需要。这些指南也适合老年人上网，还可让普通用户更好地使用。
1可感知性-信息和用户界面必须以可感知的方式呈现给用户
a.替代文本：为所有非文本内容提供替代文本，使其可以转化为人们需要的其他形式，如大字体印刷、盲文、语音、符号或更简单的语言；
b.时基媒体：为基于时间的媒体提供替代；
c.适应性：创建可用不同方式呈现的内容（例如简单的布局），而不会丢失信息或结构；
d.可辨别性：使用户更容易看到和听到内容，包括把背景和前景分开。
2可操作性-用户界面组件和导航必须可操作
a.键盘可访问：使所有功能都能通过键盘来操作
b.充足的时间：为用户提供足够的时间用以阅读和使用内容
c.癫痫：不要设计会导致癫痫发作的内容
d.可导航性：提供帮助用户导航、查找内容、并确定其位置的方法
3可理解性-信息和用户界面操作必须是可理解的
a.可读性：使文本内容可读、可理解
b.可预测性：让网页以可预见的方式呈现和操作
c.辅助输入：帮助用户避免和纠正错误
4鲁棒性-内容必须健壮到可信地被种类繁多的用户代理（包括辅助技术）所解释
a.兼容：最大化兼容当前和未来的用户代理
1、常见的障碍分类
1.1、视力障碍：
青光眼、白内障、色盲、全盲等视觉状态，优化方法有：标签语义化方便阅读器定位；字体放大保证字体动态；避免无衬色字体；增强对比度；1.2、听力障碍：
耳聋，听力损失等，优化方法有：视频，音频添加字幕；为图标增加文案；增加无障碍标签；1.3、肢体障碍：
肢体残疾、瘫痪或类似帕金森等疾病导致的肢体问题，优化方法有：控件可点击范围扩大、交互目标尺寸放大、增大组件间距，方便用户直接点击到目标元素；增加语音交互；1.4、语言障碍：
失语症，听觉丧失导致的口语沟通不利，方言口语化等；1.5、认知障碍：
阅读障碍、自闭症、阿兹海默症等疾病状态，优化方法有：拟物化图标，提示信息清晰，帮助内容扼要，简化操作流程。2.如何改善信息获取的障碍
2.1、文字的改良
大字版本是互联网公司进行无障碍改造的第一步。注意观察身边老年人使用手机的方式，会发现他们经常会眯着眼睛去看屏幕上的内容，其实就是在文字识别上存在问题，字体做大在基础思路上方向是对的。2.2、字体字号的设定
不过大部分的无障碍设计最先要解决的是能不能用，之后才是好不好用的问题。而到了年的现在，许多行业内第一批推行适老化的企业，已经总结出了一些很值得我们学习的经验，下面的内容中我会挑选业内比较有代表性的成果来进行一些总结。字号大小会直接影响可读性，不同的媒介中对于字体大小有着不同的适用范围，例如名片印刷文字最小可以设定为6，而日常的APP规范中，正文使用的最小字体是不建议小于11的。在我们谈论字体大小的时候，一定不要脱离本身的使用环境，以下所有内容描述均是在1倍图比例下的数字。网上可以看到日本JIS设计规格对于字体大小的建议，不过关于JIS建议的部分，网上大部分内容都是给到了一个毫米为单位的字体大小，而移动产品使用的是像素。本着实事求是的态度，我通过搜索引擎翻阅了日本资料，并根据72dpi的分辨率为基准，一一对应帮大家换算出了这张表格所对应的字体像素值：JIS规格-按年龄划分的最小可读字符大小
可以看出，日语中文中建议的最小字号为14像素。结合W3C发布的《Web内容无障碍指南（WCAG2.1）》对于无障碍设计的字体大小建议为18像素，这里建议常规正文的文字大小使用18像素。2.3、需要规避的字体类型
适老化改造需要注重信息可读性。衬线体作为一种带有明显装饰细节的字体类型，在很多应用场景会带来很有个性的风格化展示，但是在适老化改造中，干净清爽，效果醒目的无衬线体才是更有效的内容载体。衬线体与无衬线体文字
2.4、字体的使用场景
除了常规使用，针对不同的使用场景，百度也通过一系列研究，拓宽了字体的使用界限。百度团队通过大量分析，总结了12类文字排版的应用方向，再经过进一步收敛提炼，总结为三个主要场景和一个辅助场景，从信息层级和场景权重的角度，分别进行了字号、行距和字重的设计。2.5、提供可调节的文字选项
很多系统底层设计中就可以进行字体大小的改变，但不同手机系统内的实现状况有所不同。安卓系统基本实现了跟随系统字号进行动态调节，苹果系统中进行字号调节后，软件内的字体大小很多不会随之改变，这与系统本身的功能有关，不过越过系统本身的限制，在APP中依然可以提供一键切换字体大小的选项，先用户一步帮助他们躲开很多麻烦。2.6、提供字幕
为了帮助听力受损或听力障碍用户，软件中最常见的辅助工具就是视频中的字幕。外国电影中有专门为听障朋友们准备的字幕（SubtitlesfortheDeafHeardofHearing，失聪及听障者字幕，简称SDH），可以选择开启和关闭。除了普通的对话之外，包括过场音乐，鼓掌声等声音信息都会直接体现在字幕上，进行情景的讲解。2.7、读屏功能的无障碍标签
许多存在视觉障碍问题的用户，需要依靠无障碍模式下的读屏功能来获取信息。读屏软件会朗读出页面中的文字内容，帮助看不见的用户依靠听觉来了解界面中的内容。我们需要注意的是，读屏软件一般只能读取文字而不能读取图片内容。从设计侧我们可以通过增加替代性文字描述来让软件可以读取，不过更加直观的方法是让前端工程师添加无障碍标签（accessibilitylabel），这样读屏软件才能理解。图片来源：苹果中国-辅助功能-无障碍旁白功能
①采用高对比度的颜色搭配
色彩对比度（colorcontrast）指的是背景颜色和前景颜色之间的明度差别，最低为1:1（白字放在白色背景上），最高为21:1（黑字放在白色背景上），色彩对比度越高内容就越清晰。在颜色的对比度上，可以根据《Web内容无障碍指南》WCAGAA规范的规定，所有重要文本及图标内容的色彩对比度需要至少达到4.5:1，才能拥有较好的可读性。这样不仅能够让老年用户获得更好的使用体验，对普通用户来说，在视力受限的场景下也能更高效地从屏幕上获取信息。②颜色对比度查询工具
颜色对比度在日常设计中很难把握，这里也为大家准备了一个简单测验设计配色对比度是否合规的网站WebAIM对比度检查器，通过输入内容色值与背景色值，就可以得到直观的对比度数据，或者下载使用免费插件Stark进行检查，对Sketch和Figma等主流软件都有很好的支持。3.如何改善操作障碍
日常使用APP，出于屏效以及ROI的推动，会有许多弹窗与浮层出现，而关闭按钮又出奇地小，对于长时间网上冲浪的年轻人来说，误触都不是什么奇怪的事情。如果恰好在晃动的车上，或是正在吃饭，单手点按某个按钮的准确率都会变低。足够大的操作区域：我们所有人都随时随地的可能陷入暂时性的肢体障碍状态，而最高效的解决方式就是加大可点击区域。那么，要如何确定可点击区域足够大呢？各类设计规范中都有大量手势操作的功能，不同场景下会使用不同的手势类型，常见的iOS标准手势有点击、拖动、滑动、长按等等。手机为了识别这些不同操作，需要判断手指接触屏幕后产生的热区范围：iOS人机交互的规范是：所有点击元素不能小于44*44point；安卓的MaterialDesign规范的则会更加严格，不可以小于48*48dp；我们常见的软件中会出现错误，就是可点击的图标太小，以新浪微博为例：
除了按钮本身的大小，在不同功能按钮之间，也要注意保持足够的空间距离，避免拥挤在一起引发过多的误触，建议模块之间保持8像素或者以上的间距，并采用分段式结构，将功能清晰明确地展示，这样不仅能带来功能上的便利，从视觉角度上也能创造更多的留白，让页面更加清晰简洁。4.如何改善交互理解障碍
4.1、优化图标的呈现方式
图标作为一种概括性的符号，可以作为辅助图形来帮助用户理解不同的功能，但是大部分产品之间是按照各自的设计风格进行制作的，同一个功能按钮在不同软件中，甚至在同一个软件的不同页面中，也会出现不同的造型，这时单纯的图标所传递的信息不再准确。设计师在进行产品的无障碍改造时，可以通过下面几个方面的努力去改善这种状况：
①对抽象的符号进行拟物化改造
打车我们会想到「滴滴」，点外卖会想到「饿了么」，买东西会打开「淘宝」，出现这样的“无意识”操作，是因为多年来软件培养的用户习惯。但是对于障碍群体之一的老年人来说，这些都有悖于几十年来积累的人生经验。由于社会化发展的速度远远超过老年人认知能力成长的蜕变，老年人在认知层面很难理解我们眼中的“共识”，所以在适老化设计中，要结合老年用户所生长的年代因素、习惯因素，让图标的图形化接近老年人日常生活中可以理解的形象，方便用户更好的理解信息。②为图标增加文案。
除了图形上的调整，在图标上增加文案，能够更加直观地传递信息。优化图标呈现方式
4.2、增加语音交互
俗话说“眼观六路，耳听八方”，听觉一直是我们获取信息的重要途径，语音交互在交互中也扮演着重要角色。而我们随着年龄增长，逐渐失去良好的听觉能力。所以，在进行语音交互设计的时候，要注意到：①增加音频反馈
在操作时除了图形反馈外，可以对正确操作添加温和的音效，错误的操作则添加警示的音效。②增大音量
根据世界卫生组织年的听力损失分级标准，当人处于重度听力损失时，大部分谈话内容就无法听到了。对于健全人来说，60分贝已经是很高的音量，但对于听力受损的老年用户，可以适当将音量提升到80分贝或以上。年WHO听力损失分级标准
③提供直观的语音交互服务
帮助老年用户通过语音获取足够的信息。语音交互案例
4.3、简化操作界面
我们熟悉的横向卡片流，一看到就能知道通过滑动来进行更多内容的阅览，而对于老年用户，呈现在屏幕上的，就是他们理解中的“所有内容”。同时很多软件在使用中会加入大量营销类型的弹窗，这些打断操作的内容对老年人用户来说是极大的困扰，无意间触发了跳转，更是不知道自己究竟在操作什么界面。操作过于复杂，对老年用户不友好
适老化改造中要合理安排主要功能和次要功能，简化操作方式。
简化操作
增加内容的直观性可以帮助用户更好理解，界面内容简单一致可以让用户更容易记住功能的位置，同时也减少使用出错，主要操作都要实现“点击”即可完成。5.规划与合作
5.1、提前做好研究
无障碍改造是整个团队配合的产物，大家身上的极客精神也都愿意去做好事，改善残障用户的使用体验。但是实际操作中很多问题直到测试阶段甚至发布之后才凸显出来，一些功能bug，导致改版计划不得不搁浅。我们应当在设计初期阶段就加入对无障碍设计的考量，与产品和用研部门进行足够的调查与沟通，及时避免在后期遇到违反无障碍规范的问题。延伸到整个业务链条的设计师、前端后端开发以及测试等环节可能产生的各种无障碍体验bug，减少无效工作与频繁返工，及时给到用户拥有更佳使用体验的产品。5.2、提供无障碍交互文档
版本需求的设计内容完成后，我们会上传标注文档，标注文字、间距、色彩、尺寸等信息。涉及到适老化改造项目，设计师还要提供一份无障碍标注文档，用来说明交互界面如何与无障碍辅助工具沟通，前端工程师可以依据我们提供的内容，为页面内的图标增加无障碍标签，以实现读屏软件的功能。无障碍交互文档
无障碍设计在近两年越来越多的被提及，但对于很多人来说，仍是一个陌生的领域。众多一线软件在*策驱动下历时一年的改版结果，依然没有解决社会突发状况下大部分残障人士以及老年人的使用需求。老龄化的趋势已经不可阻挡，我们的产品也需要更快速的进化来提供更多的包容性，让日渐庞大的用户群体得到平等的体验。没有人能准确预测未来，但可以确信的是，无障碍设计，可以创造一个更美好的世界，一个也许我们不再畏惧老去的世界。往期推荐
10分钟带你回顾CommonJs和ESModule
帮你了解diif算法
HTML5本地存储的5个冷知识
TypeScript之泛型
void0和undefined的关系
浏览器的缓存机制
预览时标签不可点收录于合集#个上一篇下一篇