如何提高网站的无障碍性（accessibility），使其符合《网络内容无障碍指南》（WCAG）？本文介绍了提高网站无障碍性的10个重要领域。WCAG是一系列旨在明确规定网络无障碍性的规范和途径。在这个背景下，“无障碍”意味着用户可以通过辅助技术（如屏幕阅读器、缩放或屏幕放大镜、语音听写等）正常访问网站，因为这样搭建出来的网站为所有访问者（包括残障人士）提供了公平的体验。

以下建议可以极大地提高网站的无障碍性，但需要注意的是，这些并不是实现该目的的唯一途径。在内容、设计和编码方面，还有其他一些本文或WCAG没有涉及但效果良好的途径。在为所有人创造一个公平和愉快的网站体验方面，这些途径同样重要。以下建议并非面面俱到，但可以帮助博物馆在创建包容性在线产品方面取得长足进步。

由于整个博物馆的决策会影响到无障碍性和包容性，因此不同领域的实践者都应该参考这个建议。网站管理员、设计师、开发人员、内容创建者、第三方机构以及上述任何一个领域的管理人员等人士或机构都可能从中获益。

在我们展开探讨这些建议之前，首先要注意到一种叫做“无障碍覆盖”（anaccessibilityoverlay）的产品。这类覆盖产品通常宣称通过使用一个JavaScript插件就能自动实现符合无障碍性的要求，以这种虚假承诺向网站所有者出售。无论此类产品标价多少，都请不要考虑此类产品，因为它们往往弊大于利。莱尼·芬戈德（LaineyFeingold）是目前在无障碍性领域最优秀的律师，他写过一篇文章，很好地解释了为什么无障碍覆盖类的产品没有用，甚至不能保护你免受诉讼。

01

为图像撰写替代文本

“Alt文本”是“替代文本”（alternativetext）的简称，这是一种HTML属性，可以在其中为因各种原因而无法看到图像的人提供图像的文字描述。博物馆网站，例如馆藏场所，活动相片和美术馆图像相关的网页，都需要在网站上设有无障碍阅读的可视化描述。

要精准地概括博物馆的可视化描述的相关做法，应参考《库珀·休伊特指南》（theCooperHewittguidelines），此外，这篇关于可视化描述做法的过程和语境化的文章也是一篇十分有用的资源。

要特别注意的是，并非所有图像都可算作有意义的内容并需要对其进行可视化描述。这一点针对用作链接，按钮或其他交互式控件的图像来说尤其适用。在这样的功能性用途中，替代文字必须改为简洁且准确的标签。例如，如果您使用餐厅菜单的图片作为咖啡厅的图标，则几乎可以肯定该图片的替代文字是“咖啡厅菜单”，而不是诸如“皮面餐厅菜单本，上有风格化的手写字体”之类的描述性文字。

案例：在图像上层显示替代文字

02

文本中划分标题层次

如果使用得当，标题样式将发挥巨大的作用。标题层次不仅仅面向是那些使用辅助技术的人，而是向每个人都传达了网页内容的信息层次。但是，为了增强标题的无障碍性，不仅要在视觉上对内容通过用颜色、强调和大小等方式加以区分，而且还要在页面的代码中区分开来。要做到这一点，则需要用到HTML中的标题标签。标题级别从“一级“”(h1)到“六级”(h6)，其中“一级”是最普通的级别，“六级”是最特殊的级别。换句话说，如果把此想作一本书，书名将是一级标题，每章的标题将是二级标题，章节内的小节标题将是三级标题，而这些小节内的小标题将是四级标题。在博物馆的网站上，一个信息页面可能会有一个一级标题，比如前来参观，二级标题是门票信息、交通路线、常见问题解答等等。

使用以上这样恰如其分的标题对于使用屏幕阅读器的用户来说至关重要，这能令用户高效地浏览网站，因为屏幕阅读器会提供快速扫描给定页面的选项，以供用户选择要阅读的部分。这就相当于浏览网页，跳过不感兴趣的区域，专注于重要的内容。视力正常的用户可以透过不同样式表现出来的视觉层次，快速浏览网页，并在不同的视觉区域中浏览操作，从而轻松实现这一功能。如果标题编码正确，屏幕阅读器用户也可以进行同样的操作。

03

为视频添加字幕、文本转录和描述

针对视频等基于时间的媒体，在给出具体建议之前，我们必须先明确一些定义。以下定义取自Mozaic包容性设计词汇表（MozaicInclusiveDesignGlossary）。

手语：手语是使用视觉或手势来表达意义的语言。通过手势与非手势元素相结合，手语可以传达意义。美国聋人社区的官方工作语言是美国手语（ASL）。与其他语言相比，这种语言在全美聋人协会（NationalAssociationoftheDeaf）及其活动中具有同等地位并有优先权。

译后字幕：译后字幕是为观众提供的一种翻译服务，当受众语言与媒体的语言不同时，就会提供译后字幕。例如，如果一个视频的音轨是德语的，那么屏幕上应该出现英文字幕，供英语使用者使用。译后字幕不是音频说明，理解这一点非常重要。除了使用翻译过的、与原音轨不同的语言，译后字幕并不针对外界声音、音乐等非语音音频。

字幕：字幕是正在说的内容以及任何非语音音频的实时文字表述。如果在视频出现英语或出现任何声音，英语单词将作为音频的文字替代出现。要明白音频说明并非译后字幕。字幕的语言与视频音频原语言相同。

封闭式字幕：封闭式字幕是指不刻录到视频中的字幕形式。这意味着字幕以数字形式存储在文本中，或者作为独立于媒体源的单独文件，或者作为容器格式的一部分。这种字幕更受欢迎，因为可以通过屏幕阅读器阅读出来——想想聋哑人通过盲文阅读字幕的情景。

开放式字幕：开放式字幕是刻录到视频中的字幕。这种字幕并不是作为文本存储，而是作为构成视频每一帧图像的一部分。在大多数情况下，这种字幕并不是首选（请参见封闭式字幕），但有时却是必要的——比如在公共环境中，使用不支持封闭式字幕的简单视频播放设备播放视频时。

转录文本：转录文本即通过静态文本的形式来呈现源媒体。如果有一个媒体以时间为标准，可将该媒体所有字幕连为篇章，将其视作该媒体的转录文本，这样既方便又准确。转录文本是静态文本，因此可以以独立于源媒体的速度播放。

音频描述：音频描述是一个额外的音轨，通常也被称为其他语言音轨。正如字幕与源媒体的语言相同一样，音频描述也是如此。音频描述是通过叙述来描述源媒体的视觉画面。音频描述的风格和数量在很大程度上取决于媒体源的内容。

音频回避：音频描述通常通过音频回避的方式来实现，这是一种简单的声学处理方式，几乎在所有音频编辑软件中都可以轻松实现。音频回避是指降低但不消除源音频，以源媒体音量播放音频描述轨道。源媒体的音频在描述图像的旁白下音量减弱，“回避”旁白，因此这个技术被称为音频回避。

建议：所有视频都必须有音频说明和转录文本。但是，正如上面的定义所表明的那样，音频说明与译后字幕不同，音频说明同时提供了话语和非话语音频的文字表述。了解两者的区别是很重要的。

大多数视频还必须带有音频描述。有时，尽管视频的内容可能已经通过音频得到了充分的描述，比如一个简单的“头部特写”镜头，访问者可以通过页面上视频周围的信息来判断谁在说话。但即使在这些情况下，音频描述通常也是很重要的，因为说话的人可能会有突出的面部表情或其他肢体语言，这些都是需要传达给视障观众的。

美国手语是一个出色的功能，因为它给使用者带来了真正的包容性体验。英语并不是这些美国手语使用者的主要语言，美国手语才是，这一点要牢记在心。所以，就像为讲西班牙语的听众提供西班牙语内容一样，也应该向听众提供美国手语的内容，以这种形式平等接纳和照顾听障人士。

04

注意颜色和对比度

因为不是每个人都能感知颜色，所以绝不能仅仅通过颜色来传递信息。例如，如果表单上的错误信息在用户没有提供所有提示信息的情况下，以红色显示缺失的字段，那么颜色的改变必须伴随着非颜色的形式来表达同样的信息，比如文字信息。想一想网站上涉及电子邮件注册之类的表单，这些是否都能以这种更具包容性的方式传达填写错误的信息？也可以考虑使用任何其他的图形或图表。如果没有感知颜色的能力，是否一样可以理解任何此类信息图中的信息？

颜色之间的对比也是促进无障碍体验的一个重要方面。例如，在黑色背景上阅读灰色小字就十分困难。如果网站的访问者视力较差，或有色盲，那么这种影响就会被放大。为了解决这个问题，WCAG规定了一个颜色对比度要求：小文本必须有4.5:1的对比度，大文本必须至少是3:1。有些工具是可以测量并报告这些数字的。不过重要的是，要确保这种工具是做的是基于像素的分析，否则报告的数值会不准确。

也可以在任意页面上安装并运行Wave浏览器扩展，尽管这个拓展程序并不基于像素进行分析，但对于初步检查还是十分有用的。以Instagram上的一个页面为例，我们可以看到该扩展程序报告了24处颜色对比度不符合规定的地方。如果要进行基于像素的颜色对比度问题分析，谷歌浏览器插件颜色对比度分析器（ColorContrastAnalyzer）是一个可以派上用场的浏览器扩展程序。

案例：色彩对比度较小的页面

案例：在页面上运行WAVE并显示出色彩对比度不符合要求的地方

深入研究这类问题的另一个方法是在手机或笔记本电脑的设置中启用高对比度模式，然后访问想要测评的页面。浏览后再反问自己：是否还能完全理解网页呈现的内容？

选择颜色时就要仔细考虑对比度的潜在影响，而不是事后再检查，这可以有效避免日后为了补救而付出高昂的代价，或者修正的地方过于明显。许多组织把这一点纳入品牌风格设计开发的指南中，这令他们受益匪浅。

05

控制好标签

想象一下，在你的页面上有一个右向箭头的按钮。对于视力正常的观众来说，可能很清楚这个按钮的作用，但是对于屏幕阅读器用户以及许多其他用户来说，要在代码中加入明确的标签才可以理解它的含义，比如“下一页”。这种被称为程序化标签（programmaticlabeling）的东西非常重要，因为如果没有这种标签，辅助技术用户可能不知道网站上的各种控件是做什么的。想象一下，在一个表格上，你花了很多时间填写信息，然后到了最后有两个按钮，上面写着保存和取消。如果这两个按钮没有无障碍标签，而又有一位看不到它们的人，这位用户怎么才能知道该激活哪一个呢？这种不必要的挫折感完全可以避免，我们只需在代码中遵循正确的标签做法就可以做到。尽管本文建议使用标题属性，但关键时候不使用标题属性也很重要。

无论网络和辅助技术是否支持隐形或程序化标签，任何设计系统的目标都应该是以一种可见的、永久的方式将标签信息显现出来，从而为每个人提供更加包容的体验。

另一个需要考虑的问题是如何令标签对每位用户都可见，并一直显示。例如，在带有姓名和邮政编码等标签的表格中，有些不可访问式设计通常使用占位符，也就是说在输入框空白时标签出现在输入框中，而开始输入后消失。与其这样，不如让标签一直显示出来。想象一下，一个网站的输入栏上有一个占位符标签。如果用户已经开始输入，但随后在填写表格时分心或被打断，那么就很难知道那个输入字段在需要填入什么信息。有许多方法可以在不对设计产生负面影响的情况下实现这一点。

案例：因为在输入框中使用占位符而不再显示标签

06

让网站显示适应不同比例的缩放

为了便于访问，网站至少要在放大到%时也可以正常使用。自适应设计则可以很好地解决这个问题，此时页面元素会根据浏览器窗口的大小和形状进行移动和缩放以适应页面。需要密切注意的一点是，基于文本的缩放（图像不放大）和视觉缩放（所有内容都被放大）之间是有区别的。要确保网站在这两种缩放，尤其是基于文本的缩放下，用户都能正常使用，这一点非常重要，因为这也是许多网站布局和设计容易出现问题的地方。

案例：使用基于文本的缩放而导致页面无法使用

07

使控件无需鼠标即可使用

在一个无障碍网站上，用户必须能够在不使用鼠标的情况下实现所有的互动控制（例如，通过键盘浏览操作）。此外，必须有一个清晰可见的指示，表明用户当前的注视点（pointofregard），即页面上他们所

转载请注明:http://www.aideyishus.com/lkzp/4559.html