我们都有不同的需求,无论是听觉、认知、心理、医疗或它们的混合。但在使用和理解产品方面,我们都是平等的。这在网页设计中尤为重要,尽管它可以应用于所有数字接触点。为了纪念2022 年全球无障碍宣传日,我们将引导您了解围绕无障碍的一些常见问题,并为您提供可操作的技巧,以使您的产品更易于访问。
无障碍的目的是什么?
数字无障碍的目的是确保每个人都能从任何在线服务中受益。这可以包括向图像添加替代文本,以便屏幕阅读器可以扫描视觉效果,以及检查不同背景的对比度。
用 Glucode 的 UX/UI 设计师 Marianka Cilliers 的话说:“你的设计是为了解决用户问题,如果不考虑无障碍,你可能会错过重点——因为问题只为你的部分受众解决了。”
无障碍的四个原则是什么?
当我们谈论无障碍时,我们经常使用术语 POUR。这是一个首字母缩略词,代表可感知 (Perceivable)、可操作 (Operable)、可理解 (Understandable) 和 稳健 (Robust)。您可以将这些视为四个理解层,需要发生这些层才能使您的最终用户真正掌握并从您创建的数字接触点中受益。
- 可感知 (Perceivable)。 您的用户需要能够掌握内容的布局以及您呈现它的方式。他们的屏幕阅读器是否可以识别顶部有一个导航栏?设计是否易于辨认? 这是考虑颜色对比度、简洁性和适应性的好地方。
- 可操作 (Operable)。 您的用户需要能够与您的数字接触点进行交互。在最简单的形式中,它可以是关于按钮是否足够大以供点击。 在更复杂的形式中,它是关于用户是否可以使用辅助技术完成任务——例如填写您网站上的表格或通过您的应用程序进行购买。 例如,您只能使用键盘浏览 Sketch 主页。 还有一个“跳过导航”按钮,可以帮助您更快地到达目的地。

您可以通过按 Tab 键浏览我们的主页。
- 可理解 (Understandable)。 用户应该理解界面以及如何使用它。 这是考虑如何使您的数字接触点尽可能直观的好地方。 使用产品或服务不应复杂。 而且,至少,它应该是可预测的。 确保每个页面或屏幕与其余页面或屏幕一致。
- 稳健 (Robust)。 您的数字接触点——尤其是网站——应提供多种形式的无障碍功能。 这样,您的用户将能够选择首选的无障碍工具,以便他们可以根据自己的需求更好地定制他们的体验。
有哪些无障碍实践的例子?
关于无障碍的好处是,只要我们致力于使我们的产品和网站对每个人都有效,总是有改进的空间。 以下是一些使您的产品、设计或网站更易于访问的示例
- 使用原生字体和默认大小来启用动态文本缩放
- 检查文本在不同背景下的对比度。 一个好的比例是 4.5:1
- 模拟各种形式的色盲,以确保用户可以区分不同的状态
- 对于 iOS,请确保您的点击状态至少为 44 像素,以方便任何有行动障碍的人
- 确保文本标签准确描述组件的功能。
当然,我们只是在这些五个技巧中略有涉猎。 我们鼓励您阅读更多关于该主题的信息,并找到对用例友好的方法,使您的项目更易于访问。 好的起点包括 W3C Web Accessibility 平台、Google 和 Apple 的无障碍指南——这尤其有用,具体取决于您为哪个操作系统进行设计。
归根结底,无障碍是为了真正努力与您的用户建立联系。 它需要坐下来,真正地站在别人的角度思考。 尽管有很多工作要做,但付出是值得的。 使您的应用程序和网站易于访问不仅有助于更大的利益——这也意味着您创建了一个比以前更好的产品。 一款真正满足客户需求的产品。
但当谈到无障碍在设计中的重要性时,Yana Gevorgyan 说得最好。 Cluse(Sketch 的对比度检查插件)的创建者在一次采访中与我们分享说,“作为设计师,创造每个人都可以使用的产品是我们的道德责任,而不仅仅是一部分人。[…] 世界上大多数人都连接到互联网,并依靠它来完成日常任务。 其中包括来自不同背景、年龄和身体能力的人。 虽然并非所有物理空间都对残疾人开放,但没有理由网站也应该如此。”