无障碍功能

改进网页的无障碍功能

爱丽丝·博克斯霍尔
Alice Boxhall
戴夫·加什
Dave Gash
梅金·卡尼
Meggin Kearney

此文档集是 Udacity 关于无障碍功能的课程中涵盖的部分内容的文本版本。它不是视频课程的直接转录,而是以课程的原创内容为基础,更简洁地介绍无障碍功能的原则和做法。

摘要

  • 了解无障碍功能的含义及其在 Web 开发中的应用。
  • 了解如何让所有人都能轻松访问和使用网站。
  • 了解如何在尽量减少开发影响的情况下添加基本的无障碍功能。
  • 了解有哪些 HTML 功能可用以及如何使用这些功能来改进无障碍功能。
  • 了解用于打造精致无障碍体验的高级无障碍功能技术。

了解无障碍功能及其范围和影响有助于您成为更好的 Web 开发者。本指南旨在帮助您了解如何才能让所有人都能轻松访问和使用您的网站。

“Accessibility”(无障碍功能)可能难以拼写,但不一定难实现。在本指南中,您将了解如何轻松上手,从而轻松改进无障碍功能、如何使用 HTML 的内置功能创建更方便且更强大的界面,以及如何利用一些先进技术打造精致的无障碍体验。

您还会发现,其中的许多方法有助于您为所有用户(而不仅仅是残障人士)打造更愉悦、更易于使用的界面。

当然,许多开发者对无障碍功能的含义只有模棱两可的理解,这与政府合同、核对清单和屏幕阅读器有关,对吧?- 对此,人们对周围存有诸多误解。 例如,许多开发者认为,解决无障碍功能问题会迫使他们选择是在打造愉悦和有吸引力的体验之间做出选择,还是打造既笨拙又难看但易于访问的体验。

当然,实际情况根本不是这样,所以我们先澄清这个问题,然后再进入正题。什么是无障碍?我们想要了解什么?

什么是无障碍?

从广义上来讲,我们所说的网站可以访问,意味着网站的内容可用,其功能实际上可由任何人运行。作为开发者,很容易认为所有用户都能看到和使用键盘、鼠标或触摸屏,并且可以像您一样与您的网页内容互动。这可能会给某些人带来良好的体验,但也会造成一些问题,从简单的烦恼到障碍,不一而足。

因此,无障碍功能是指可能不在“典型”用户这一狭窄范围之内的用户的体验,他们访问内容或与之互动的内容可能与您的预期不同。具体来说,它涉及遭受某种类型的残疾或残疾的用户。请谨记,这种体验可能是非生理上的或暂时性的。

例如,尽管我们在讨论无障碍功能时往往集中在身体有缺陷的用户身上,但我们都能够将因其他原因而无法访问的界面体验结合起来。您是否曾在手机上使用桌面版网站时遇到问题,是否遇到过“您所在地区不提供此内容”消息,或者在平板电脑上找不到熟悉的菜单?这些都是无障碍功能问题。

随着了解的深入,您会发现,在这种更广泛、更普遍意义上的解决无障碍功能问题几乎总能改善所有人的用户体验。让我们看一个示例:

无障碍功能较差的表单。

此表单存在几个无障碍功能问题。

  • 文本对比度较低,导致低视力用户难以阅读。
  • 标签位于左侧,字段位于右侧,许多人很难将它们关联起来,而对于需要放大网页才能使用网页的人来说,他们几乎是不可能的;想象一下,在手机上看着这些标签,不得不四处移动,才能弄清楚到底是什么。
  • “记住详情?”标签未与该复选框关联,因此您必须仅点按或点击小方块,而不是直接点击该标签;此外,使用屏幕阅读器的用户很难找出关联。

现在,挥动无障碍功能魔杖,查看修复这些问题的表单。 我们将调暗文本,修改设计,使标签接近为其加标签的内容,并修复要与复选框关联的标签,以便您也可以通过点击标签来切换标签。

改进了无障碍功能的表单。

您会更倾向于哪个平台?如果您说的是“无障碍版本”,就表明您正在试图了解本指南的一个主要前提。通常,对于少数用户而言,会成为完全阻碍因素的问题也是许多其他用户的痛点,因此,通过解决无障碍功能问题,您可以改善所有用户的体验。

Web 内容无障碍指南

在本指南中,我们将提及网络内容无障碍指南 (WCAG) 2.0,这是无障碍专家整理的一系列指南和最佳做法,旨在有条不紊地阐明“无障碍”的含义。

WCAG 的内容围绕四大原则进行组织,这些原则通常以首字母缩写词“POUR”来描述:

  • 可感知:用户能否感知到内容?这有助于我们牢记,某个内容可通过一种感官(例如视觉)感知,并不意味着所有用户都能感知它。

  • 可操作:用户能否使用界面组件并浏览内容?例如,无法使用鼠标或触摸屏的用户无法操作需要悬停互动的内容。

  • 易于理解:用户能否理解内容?用户能否理解界面,其一致性是否足以避免混淆?

  • 可靠:内容能否被多种用户代理(浏览器)使用?是否支持辅助技术?

虽然 WCAG 提供了内容无障碍的含义,但有时可能会让您感到有点不知所措。为帮助缓解这一问题,WebAIM(Web 无障碍功能 in Mind)团队将 WCAG 准则提炼成了一份简单易行的核对清单,专门针对 Web 内容。

WebAIM 核对清单简要概述了您需要实现的内容;如果需要扩展定义,您还可以链接到底层 WCAG 规范。

有了这个工具,您就可以制定无障碍工作的方向,并确信只要您的项目符合概述的条件,用户在访问您的内容时就应该能获得良好的体验。

了解用户的多样性

在了解无障碍功能时,了解世界上用户的多样性以及影响他们的无障碍功能主题类型会很有帮助。为了进一步说明,请看下面这段包含丰富信息的问答环节,访谈到 Victor Tsaran 是一位全盲的 Google 技术项目经理,

Victor Tsaran。
Victor Tsaran

您在 Google 从事什么工作?

在 Google,我的职责是帮助确保我们的产品适用于各类多样化用户,无论他们是否有身体缺陷或残疾。

用户存在哪些类型的障碍?

当我们想到哪些类型的障碍会让他人难以访问我们的内容时,许多人会立即想到像我这样的盲人用户。没错,这种身体障碍确实会导致用户难以甚至无法使用大量网站。

许多现代 Web 技术都有一个令人遗憾的副作用,那就是创建的网站无法用于盲人用户访问 Web 所用的工具。然而,无障碍功能实际上并不只是如此。我们发现,将身体缺陷视为视觉、运动、听觉和认知这四大类很有帮助。

下面我们将逐一介绍这几项。您能提供一些视觉障碍的示例吗?

视觉障碍可以分为几类:像我一样无视力的用户可能会使用屏幕阅读器、盲文或结合使用这两者。

一个盲文阅读器。
一个盲文阅读器

现在,完全看不到视力实际上是很不寻常的,但您很有可能认识或遇到至少一个完全看不到视力的人。但是,还存在着大量所谓的弱视用户。

这个范围很广,从像我妻子这样没有角膜的人,虽然基本上看不清印刷品,但是看不清印刷品,并且被视为合法盲人,到可能只是视力不佳且需要佩戴强处方眼镜的人。

这个类别的应用范围很广,所以此类别的用户自然就会有各种各样的便利性:有些人会使用屏幕阅读器或盲文显示屏(我甚至听说一位女士在阅读屏幕上显示的盲文,因为他们阅读的盲文比印刷文字更容易阅读),或者他们可能会使用文字转语音技术进行放大,而他们可能只是使用屏幕阅读器的全屏幕功能进行缩放;他们还可以使用高对比度选项,例如操作系统高对比度模式、高对比度浏览器扩展程序或网站的高对比度主题。

高对比度模式。
高对比度模式

许多用户甚至组合使用这些功能,例如我的朋友 Laura,她会结合使用高对比度模式、浏览器缩放和文字转语音功能。

低视力会引起很多人共鸣。首先,随着年龄的增长,我们都会遇到视力减退的情况,因此即使您没有经历过这种情况,也很有可能听到过父母的抱怨。但很多人都会有这样沮丧的经历,那就是在阳光明媚的窗户旁拿出笔记本电脑,却突然发现自己什么也看不懂!或者,接受过激光手术或可能只是需要看清房间对面内容的人,可能使用过我提到的某种通讯方式。因此我认为开发者很容易对弱视用户产生同理心

对了,我不该忘了提及色觉不佳的人, 大约有 9% 的男性有某种形式的色觉缺陷!另外还有大约 1% 的女性也存在此功能。它们可能难以区分红色和绿色,或黄色和蓝色。下次设计表单验证时,请考虑到这一点。

对运动障碍有什么影响?

是的,运动缺陷或灵敏性缺陷。这一群体包括那些因为可能因受到某些 RSI 或其他部位而感到疼痛而不想使用鼠标的人群,以及可能身体瘫痪并且身体特定部位活动范围受限的人群。

一个人正在使用眼动追踪设备。
眼动追踪设备

有运动障碍的用户可能会使用键盘、开关设备、语音控制甚至眼动追踪设备与计算机互动。

与视力障碍类似,运动障碍也可能是暂时性或情境问题:比如鼠标手的手腕骨折。也可能是笔记本电脑的触控板损坏,或者您乘坐的火车运行不稳。在很多情况下,用户的移动能力都会受到阻碍,而通过确保我们能够迎合用户的需求,我们可以改善整体体验,不仅可改善存在永久性障碍的用户,还可服务于暂时发现无法使用基于指针的界面的用户。

好了,我们来谈谈听力障碍吧。

从严重失聪到有听力障碍的人士,该群体的范围可谓多样化。我们的听力往往会随年龄增长而衰退,这与视力非常相似。我们中的许多人会使用助听器等常见辅助装置来帮助我们。

一台底部带有字幕的电视。
屏幕字幕

对于有听力障碍的用户,我们需要确保不依赖于声音,因此请务必使用视频字幕和转写文稿等内容,并在界面中提供声音作为替代方法。

就像我们在视觉和运动障碍中看到的一样,可以很容易想象,听力正常的人也会从这些调整中受益。我的许多朋友都说,他们喜欢带有字幕和转写文稿的视频,因为这意味着即使他们身处开放式办公室,没有携带耳机,仍然可以观看视频!

好吧,您能给我们简单介绍一下认知障碍吗?

认知疾病有许多种,例如注意力障碍、阅读障碍和自闭症,这可能意味着人们想要或需要以不同方式获取信息。这些群体的住宿环境自然极其多样,但我们发现,某些方面与其他领域存在重叠,例如使用缩放功能来简化阅读或集中注意力。此外,这些用户可能还会发现,真正的极简设计效果最佳,因为它能最大限度地减少分心和认知负荷。

我认为每个人都能感受到认知过载的压力,因此显而易见的是,如果我们打造的产品非常适合认知障碍人士,我们将创造的内容将给所有人带来愉悦的体验。

那么,您会如何总结一下您对无障碍功能的看法?

如果观察人们可能存在的多样化的能力和残障情况,就会发现,仅为具有完美视力、听力、灵敏度和认知能力的人设计和打造产品似乎非常狭窄。 这几乎让人不知所措,因为我们为所有人打造了一种压力更大且用处不大的体验,而对部分用户来说,打造的体验实际上是将他们完全排除在外。

在这次采访中,Victor 确定了一系列缺陷,并将其分为四大类:视觉、运动、听觉和认知。他还指出,每种类型的缺陷都可能是情境性、暂时性或永久性缺陷。

我们来看一些访问缺陷的真实示例,并了解它们分属这些类别和类型。请注意,某些缺陷可能属于多个类别或类型。

情境性 临时重定向 永久重定向
视觉内容 脑震荡 失明
电机 抱着婴儿 手臂骨折、RSI* RSI*
听力 嘈杂的办公室
认知 脑震荡

重复性劳损:例如腕管综合征、网球肘、扳机指

后续步骤

我们已经掌握了很多基础!您已阅读了

  • 什么是无障碍以及为什么说它对每个人来说都很重要
  • WCAG 和 WebAIM 无障碍功能核对清单
  • 你应该考虑的不同类型的障碍

在本指南的其余部分,我们将深入探讨创建无障碍网站的实用方面。我们将围绕 3 个主要主题领域进行这项工作:

  • 焦点:我们将了解如何构建可以使用键盘(而非鼠标)操作的内容。这当然对有运动障碍的用户来说非常重要,但也能确保所有用户的界面都能保持良好状态。

  • 语义:我们将确保以适合各种辅助技术的可靠方式表达界面。

  • 样式设置:我们将考虑视觉设计,并了解如何让界面的视觉元素尽可能灵活和易用。

由于上述每一个主题都能构成一个完整的课程,因此我们不会涵盖创建无障碍网站的方方面面。不过,我们会为您提供足够的入门信息,并为您提供一些不错的资源,供您详细了解每个主题。