无障碍设计至关重要：如何为所有人构建应用程序（Miranda Limonczenko 主讲）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

关于米兰达

米兰达是 VMware 的高级技术撰稿人、前端开发人员，也是用户体验倡导者。她在BooksonCode.com上记录了自己的编程历程。

演示文稿大纲及文字稿

我叫米兰达·利蒙琴科 (Miranda Limonczenko)，是 VMware 的高级技术撰稿人和前端 Web 开发人员。今天，我将和大家聊聊 Web 无障碍，它为何如此重要，以及我与团队一起为导盲犬协会 (Guide Dogs for the Blind) 构建网站的经验，还有我们为提升网站无障碍性所做的工作。

为什么需要网络无障碍访问？

其实，它的意义就在于“访问”。网络可访问性让任何人都能不受限制地使用网络应用和软件。这一点至关重要，因为我们对软件的依赖程度非常高。我们的工作、学习和生活都取决于我们使用软件和网络应用的能力。

当我们构建的网站缺乏无障碍功能时，即使我们拥有所有必要的工具来实现这一点，我们也实际上是在剥夺人们的工作机会、教育机会或产品使用权。这就是为什么提起诉讼如此有理有据的原因。

今天，我不谈诉讼，而是谈网络无障碍的积极意义，即为用户创造体验。

正因如此，能与导盲犬协会合作搭建他们的网站才如此令人兴奋。

我们的目标

我们为他们搭建网站的目标是为盲人或视力障碍者创造愉悦的体验。

访问该网站的人，可能是最近受伤的人，也可能是多年来一直遭受痛苦的人——在网站上创造令人愉悦的体验，可以提供某种缓解或安慰，以便他们能够寻求服务。

盲人和视障人士的重点关注领域

我们将用户群体分为两类：盲人和视障人士。

对于视力障碍者，我们着重强调了高色彩对比度、醒目的悬停状态以及提高对比度的选项等等，但今天我们主要关注这些方面。

对于使用屏幕阅读器软件聆听 HTML 文档朗读的盲人来说，我们专注于菜单架构、将元素与上下文联系起来以及使用替代文本来丰富图像体验。

高色彩对比度

我们使用了这款对比度工具，它能有效提升色彩对比度。我们测试了所有品牌颜色：黑色文字和白色文字分别叠加在所有品牌颜色上的效果。我建议大家都这样做。

我们发现了一些问题：
我们把所有品牌颜色都列在一个电子表格里。我们发现，白色文字在粉色背景上效果最佳，但对于其他所有品牌颜色来说，黑色文字效果最佳。作为一名网页开发人员，记住这一点很重要，这样我才能在粉色背景上使用白色文字时做出例外处理。在这种情况下，品牌颜色之间存在例外，而不是统一的规则。

但我们也发现，橙色（另一种品牌色）上的黑色文字对比度更好，尽管对我们中的一些人来说，视觉上感觉对比度更高。考虑到色盲的存在，使用软件进行对比度测试非常重要。我们能够分辨出不同人眼中的对比度差异。

戏剧性的悬浮状态

这一点对很多人来说并不那么直观。这绝对是我们所有人都需要学习的东西——包括我自己。

这不仅适用于悬停状态，也适用于图表或状态指示器。颜色不应是变化的唯一指示符。仅仅将状态指示器从绿色变为橙色再变为红色，不足以表明状态。

所以这可以是动态效果，也可以是图标、轮廓，或者只是基于颜色的视觉上不同的元素。

我举几个例子。一个是粉色背景上的白色文字，另一个是橙色背景上的黑色文字。鼠标悬停前，背景是粉色，文字是白色的。鼠标悬停后，文字颜色、背景颜色都会改变，并且会出现边框。即使你想象没有颜色差异，也能看出区别。但我认为同样重要的是，这种效果确实很漂亮。我们通常认为悬停状态的趋势是降低透明度或者从黑色过渡到灰色。虽然这些细微的变化可能看起来很漂亮，但高对比度的色彩同样美观，而且更适合用户。

这里还有另一个例子：颜色会改变，但图标也会反转负片，使箭头着色，而圆点消失。

对比度工具栏

最后，我想说这是一个“额外惊喜”——我们添加了一个工具栏，可以调节对比度和字体大小。我们这样做是为了表达对网站访客的重视。我们知道有些人会使用放大软件或对比度调节软件。但对于那些没有安装或不了解这些软件的用户，我们希望为他们提供这个选项，让他们可以调节整个网站的对比度和字体大小，并且设置会保存，这样每次他们访问网站时，都会自动应用到他们的设置中。

我收到一位用户的反馈。她使用了放大软件和色彩对比度软件，但当她使用这个网站时，她说“网站太漂亮了，我不需要这些软件”。这让我非常高兴。

菜单架构

现在我们讨论的是主要使用屏幕阅读器软件的用户。这些用户在使用屏幕阅读器软件时仍然可以浏览网站，但他们的主要用途还是使用屏幕阅读器软件。

我们重点关注的一点是菜单架构。很多人都忽略了这一点：对于视力正常的用户来说，页面主体部分非常醒目，包含广告、行动号召等等。但对于使用屏幕阅读器的用户来说，首先接触到的是菜单架构。很多时候，用户根本看不到页面主体部分。如果听到想要访问的选项，用户就会直接导航到那里。

这就是为什么关注主菜单架构的用户体验如此重要。我们为此做了调研。我们使用了一款名为 Optimal Sort 的工具。我们收集了一些内容，把它们放在一系列卡片上，发送给不同的用户，让他们将内容分组。有趣的是：我当时觉得自己做得非常好。当我整理好内容后，我觉得已经很完美了。但当我看到其他人是如何整理的，我才意识到自己绝对是个例外。每个人对事物的感知都不同，所以调研非常重要。

上下文中的基础要素

接下来，我们重点关注元素及其上下文关联。我认为，对于网页开发者来说，使用屏幕阅读器软件至关重要。Mac 系统内置了 VoiceOver 软件。您可以使用屏幕阅读器浏览您的网页应用，从而对其进行优化。

屏幕阅读器的一个功能是允许读者直接跳转到标题或链接。它们并非以段落为导向进行朗读。你可能会听到“点击这里”，然后心想“这里是什么？”，却一头雾水。

使用链接时，应该说明链接指向哪里。

如果视觉上不合理，你可以用一个标签覆盖它aria-label。例如，一个标签aria-label可以显示“您当前位于第一页”，而实际文本只显示“1”。

图片可通过替代文字丰富用户体验。

我们（至少在本次演讲中）最后关注的是“图片可以通过替代文本丰富用户体验”。我对替代文本非常感兴趣，因为它很容易出错。

我经常看到“图表内容”这样的描述，但却没有说明图表具体包含什么。这种替代文字遗漏了人们需要了解的信息。重要的是要有同理心，设身处地地思考意图，并实现意图。上下文很重要。如果信息已经重复，那就没必要重复。

以下是导盲犬网站上的另一个例子：网站各处都使用了醒目的图片。这些图片非常精美，占据了页面的大部分空间。我个人认为，这些图片应该留白，因为它们只是装饰性的。但是，用户反馈说，他们虽然看到了这些色彩鲜艳、精美的大图占据了页面的大部分空间，却看不清图片的内容。最终，我们遍历了整个网站，为这些醒目的图片添加了替代文字。

例如，一张宣传图片上写着：“一位 GDB 女毕业生带着她的黑色拉布拉多导盲犬沿着铁轨徒步旅行。”

最后想说的话

其实，我真正想强调的是，为盲人和视障人士打造一个贴心周到的网站是多么令人愉悦。这让我深刻体会到，好的设计和开发才是关键，而这应该成为我们一切工作的核心。关键在于要有同理心、保持好奇心，并为用户创造最佳体验。

演示文稿链接

这是演讲幻灯片（PDF）的下载链接。

本次演讲将于7月23日作为CodeLand:Distributed会议的一部分进行。会议结束后，演讲视频将以录制视频的形式添加到本文中。