超全面无障碍设计指南

前言

https://www.bilibili.com/video/BV1Nf4y1v7qV/?zw（盲人使用手机有多难 | 看见2021）有兴趣大家可以自行观看一下，不过多介绍；

有时候会在短视频上刷到一些搞笑博主发的关于看到父母手机的反应，硕大的字体、震耳欲聋的声音、过曝的亮度，以及这些博主不可思议的表情，总让我印象深刻。那些围绕在我们身边最大的无障碍用户群体，正是我们的父母长辈，很多人不理解，为什么字体要调那么大，为什么声音要调那么响，为什么亮度要调那么高，那是因为他们没有意识到，父母老了，也用上了辅助模式。

他们也知道，大字体让页面看起来杂乱无章，高音量来消息容易吓人一跳，高亮度夜里容易刺激双眼，但只有这样，他们才能看清你发给他们的文字，听清你发给他们的语音。不要等到你手机字体越来越大，音量越来越大，亮度越来越高，你才能理解这种感受，不要让无障碍，成为一种障碍。

一、什么是无障碍设计（包容性设计）

无障碍设计这一概念在1974年提出，它是联合国组织主张的一种新的设计理念。

无障碍设计强调在科技高度发展的现代社会，公共空间、建筑设施和设备的设计应充分考虑残疾人和老年人等群体的使用需求，并配备相应的服务功能和装置，以创造一个充满关爱、安全、方便和舒适的生活环境。

二、设计师如何提供帮助

作为设计师，我们应该承认，人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。 因此，设计师有很多机会可以有所作为。仅通过做出更明智的设计决策，我们就可以影响（改进或协助）四种经验。

视觉体验：这包括形状、颜色、对比、文本样式、产品界面的所有图形元素

听觉体验：这是指与产品互动时产生的声音、音量和清晰度

行动体验：这包括执行任务或与产品交互所需的所有动作和动作

认知经验：这描述了用户花费在解释界面上的时间，以及使用界面需要多少注意力和精力

通常情况下，可访问性被视为对创造力的挑战；然而，如果我们将其视为一个创新的挑战，就有可能开启全新的可能性领域。实现优秀的可访问性的关键并不在于在功能或性能上做出妥协，也不意味着在美学上做出牺牲，而是要确保功能和创意体验对于所有人都是可访问的。

三、视觉无障碍设计

视觉障碍涵盖了广泛的范围，包括视力模糊、朦胧、高度远视或近视、色盲以及管状视等症状。这些症状可能使视觉障碍者在阅读计算机屏幕上的文字或图像、执行需要眼睛和手配合的任务（如移动计算机鼠标）时面临一定的困难。

在设计中我们需要考虑以下几点

1. 关注对比度

根据W3C（万维网联盟）发布的无障碍指南（WCAG），网页中的文字和背景色之间需要满足一定的对比度要求，以确保视障人群能够清晰地阅读文本。具体而言，小文本和背景色之间的对比度应至少为4.5:1，而大文本（加粗的14pt/普通的18pt及以上）和背景色之间的对比度应至少为3:1。如果对比度低于这些标准，可能会使一些老年人、白内障患者、色盲患者等视障人群难以阅读文本。

2. 不依赖颜色

对于色盲患者（包括红绿色盲、蓝黄色盲和单色色盲），他们眼中的颜色变化与正常人不同，如图所示。因此，如果我们仅依赖颜色变化来传递信息，例如状态指示、区分视觉控件和实时响应，色盲患者可能无法正确接收和理解这些信息。为了确保他们能够获得与正常人相同的信息量，我们需要结合其他设计元素来传达这些信息，而不仅仅依赖于颜色。

对于关键的状态，我们可以采用多重视觉提示手段。比如，可以运用下划线、指示符、图案或者文本等元素来补充说明操作和内容。

3. Icon不能作为唯一元素

视障人士会借助屏幕阅读器，也称为读屏软件，作为辅助工具进行阅读。通过将屏幕上的内容朗读出来，视障人士可以无需观看屏幕就能操作电脑、手机等电子设备。

而有些屏幕阅读器是无法识别一些icon的，所以当icon作为唯一的元素时，视障人士会无法识别信息。

四、听觉无障碍设计

有朋友可能在想，视觉设计如何影响听觉体验？因此，想象一下你正在与一个听觉障碍用户交谈。我敢打赌，你只能听见她说的话的一半，但是你可以通过看着她的嘴唇移动，肢体语言和面部表情来保持对话的进行。 由于视觉效果的支持增强了模棱两可的声音，因此您最终可以理解它们。

在用户界面中，声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失，因此最好以视觉提示来支持它们。

我们的目标应该是提供听觉和视觉提示的反馈，支持错误，通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间，以使人们能够看到和阅读，同时又不隐藏任何重要的内容。

一个好的做法-不限于支持声音辅助技术，是在UI元素中添加描述性标签，并在图像中添加标题，以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法，对非母语人士也有帮助。 最后，我们不应该忽略声音是问题的情况，这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感，或者处于声音可能引起干扰的情况下。然后，这是一个好习惯，让人们可以选择关闭声音而不必调低扬声器音量，从而使此功能清晰可见。

五、行动无障碍设计

行动障碍包括无法操作鼠标、键盘或触屏等设备，以及一般意义上的身体残疾用户。

在设计上提供可用键盘或鼠标控制的「获得焦点」显示状态

这些用户往往只能使用鼠标或单个按钮来完成所有操作，所以我们要确保所有界面控件交互都可只通过键盘完成或者只使用鼠标，并且控制的「焦点」状态要显而易见，例如下图中：选中的Tab和醒目的十字线。

六、认知无障碍设计

认知障碍涵盖了广泛的领域，包括记忆力、学习或语言能力、注意力、情绪控制等方面。

在设计过程中，应特别注意避免使用重复或闪烁的显示方式，因为这可能会对认知障碍用户造成使用上的不便和困扰。同时，要充分考虑用户的需求，留出足够的时间供用户进行操作和交互，确保他们有足够的时间来理解和应对显示信息。这样的设计能够更好地满足认知障碍用户的需求，提高他们的使用体验。

例如一些老年人，他们的行动已经变得非常缓慢，对于文字的理解也需要比年轻人多的时间， 为了照顾不断下降的身体机能而做出的调整，眼睛看不清，就把字体和Icon放大点，这样随之而来的也是交互热区变大，减少误操作。

结语

约有50%的人口拥有完全正常的视、听和行动能力，可以轻松地进行读写，有效地执行多任务，并且始终能够保持正常工作。然而，剩余的人口则可能面临各种问题，如视力受损、色盲、手腕或耳朵受伤，生活在嘈杂的环境中或网络信号质量不佳，过于忙碌或容易分心，存在阅读障碍或注意力障碍等。 这意味着，大约一半的用户可能在使用我们的产品或浏览我们的网站时遇到困难。

因此，我们可能错失了提高用户满意度并扩大受众范围的机会。为了更好地服务这一半的用户群体，作为设计师，我们需要关注并解决他们所面临的障碍，从而创造一个更加包容和无障碍的环境，使每个人都可以轻松地使用我们的产品或服务。