今天遇到一个非常有意义的问题，即无障碍WEB页面设计思路。自己以前从来没有考虑过这些问题，然而通过检索发现，无障碍网页设计真的非常重要。

在信息化如此发达的今天，我们的生活几乎已经离不开网上订票、公交查询、新闻阅读、网络购物等等多种信息化服务。可是还有许多视力有障碍的人士，他们同样需要这些多种多样的信息化服务来丰富他们的生活。现在已经有一些读屏软件可以让视力有障碍的人们通过声音的方式来浏览网页。然而，由于网页的页面结构本身在设计时的一些疏漏或不周，为视力有障碍的人们阅读网页带来一些困难。因此，从网页设计伊始即融入无障碍网页设计思想，将造福于千千万万有上网需求的有视力障碍的人们。

我搜集到一些重要的设计思路，分享给web前端开发人员，希望大家都从自己做起，共同为有视力障碍的人士力所能及地做一些事情。

（一）中华人民共和国通信行业标准《信息无障碍－身体机能差异人群－网站设计无障碍技术要求》

工业和信息化部在2008年发布了中华人民共和国通信行业标准《信息无障碍－身体机能差异人群－网站设计无障碍技术要求》（以下简称“行标” ）。行标中所涵盖的人群范围非常广，不仅包括我上面提到的视力有障碍的人士，还包括其他各类身体机能存在差异的人群。下面是行标中的相应描述：

人们在获取信息方面的障碍主要体现在视觉、听觉、运动和认知障碍上，健全人由于某些原因也可能无法正常访问网页，具体类型如下：

· 可能无法看见、听见、移动，不方便或完全无法处理某些类型的信息； 

· 可能在阅读理解文本方面有困难； 

· 可能无法使用键盘或鼠标；  

· 使用的可能是只能显示文本的显示器、小显示器或者低速的 Internet 网络连接；

· 可能不会流畅地说或理解文档书写所使用的语言； 

· 眼睛、耳朵或手在忙于做其他事情（例如驾车、在噪音环境下工作等）； 

· 可能使用了早期版本的浏览器、完全不同的浏览器、语音浏览器或不同的操作系统

信息无障碍服务的目的是要帮助任何人在任何条件下获取网络信息，要保证网页可以被任何人直接或借助辅助工具访问到，要求网页设计做到以下几点：

· 网页内容必须是可感知的；

· 网页内容中的界面组件必须是可操作的；

· 网页内容和控件必须是可理解的；

· 网页内容必须足够健壮，能够与当前及未来的用户代理（包括辅助技术）协同工作

行标中没有规定实现无障碍网页设计的具体技术，而是给出相应的指导原则及评价标准。每项原则之下的规范的合格标准被划分为三个等级：

· 第 1  级合格标准

· 实现最低级别的无障碍访问。

· 可以合理地应用到所有 Web  内容中。

· 第 2  级合格标准

· 实现强化级别的无障碍访问. 

· 可以合理地应用到所有 Web  内容中。

· 第 3  级合格标准

· 实现附加的增强的无障碍访问。

· 并非必须应用到所有 Web  内容中。

1. 内容的可感知性

1. 为所有非文本内容提供替代文本

· 目的是确保所有非文本内容可用文本形式展现。在这里，“文本形式”指的是电子文本，而不是文本的图像。电子文本有一个独特的优势，那就是它可以从视觉、听觉、触觉上或者它们中的任何组合方式上被感知。从而，以电子文本表示的信息可以以用户最容易接受的方式传达给用户。此外，它还可以很方便地被放大和朗读，或者以任何触觉方式呈现，从而使得内容可以更容易地被理解和传播。

2. 为多媒体信息提供同步替代文本

· 本规定的目的是帮助获取信息有障碍的人了解多媒体的信息内容。在很多对话中，音频描述不能恰当地插入到对话中存在的停顿当中。为多媒体内容提供同步替代内容的第 1 级合格标准中规定的方法允许用户访问多媒体中全部的信息。这种方法还允许用户在音频描述由于某些原因不可用的条件下以非可视化方式访问可视化信息。对于包含交互功能的多媒体信息，交互元素（比如连接）应该可以被嵌入到全部多媒体信息的文本替代内容中。本节（在第 3 级合格标准中）也包含多媒体内容的手语翻译以及扩展音频描述的方法。在扩展音频描述中，视频播放可以被定时冻结，以便更多的音频描述内容可以被插入到对话之间的停顿中。

3. 保证信息和结构可以与表现相分离

· 本规定的目的是确保全部信息能以一种所有用户都能感知的方式来传递。如果所有的信息能够以一种可以由软件决定的格式来传递，那么它就可以以不同的方式（可视的、可听的、可接触的）呈现给用户。如果信息被内嵌到一种特定的方式而使得信息不能和显示分离，那么信息就不能按照用户的需要改变成其他格式。本规定中的合格标准都是为了确保那些通常和显示方式紧密结合在一起的信息能够以不同形式存在，以便于它们可以以其他形式被显示。

4. 前景文字和背景要容易区分

· 某些规定致力于使信息能够被显示成各种替代格式。与它们不同，本规定强调的是使缺省的显示方式能够最大程度地可用于残障群体。本规定主要的着眼点在于使得用户能够更加容易地区分前景信息和背景信息。对于可视化显示而言，这需要保证前景信息与背景信息之间有足够的对比度；对于音频内容而言，这需要前景声音的音量要比背景声音的音量足够大。通常，具有视觉和听觉障碍的用户会在区分前景和背景信息方面有比较大的困难。

2. 内容中的接口组件的可操作性

1. 所有功能都可通过键盘接口操作

· 如果所有的功能都能使用键盘来完成，那么它们就可以通过语音（产生键击输入效果）、鼠标（通过屏幕软键盘输入）以及很多种模拟键盘输入的辅助技术来支持。只要键盘输入不具有时间无关性，那么其他的输入方式就不具备灵活性，也不能在不同类型的残疾人中得到广泛使用。有些设备不带有传统的键盘，比如 PDA 或手机。如果这些设备支持 Web 浏览功能，那他们就应该具备某种方式来生成文本或者键击动作。本标准使用术语“键盘界面”来说明Web 内容应当能通过键击动作来控制，这些键击动作的来源可以是键盘、键盘模拟器或者其他能够生成键盘或者文本输入的硬件或软件。

2. 用户在阅读或与网页交互时可以控制时限

· 相对于大多数用户，某些用户需要更多的时间来完成某项任务。他们需要花费更多的时间来作出反应，他们需要花费更多的时间来阅读，他们可能有视力问题，需要花费更多时间来找到或阅读所需信息，他们也可能需要通过某种花费更多时间的辅助技术来访问信息。本标准的重点是确保用户能够有足够的时间来完成任务。主要的途径包括消除时间限制以及给用户足够的额外时间使他们能够完成任务。在某些特定场景中，无法给予用户额外的时间来完成任务，它们可以不受本规定约束。

3. 允许用户避开光敏性内容

· 有些人对光线过敏，可能会由于可视化内容的闪烁而导致疾病发作。大多数人直到疾病发作时才知道他们有这个问题。对这个问题，警告信息用处并不大，因为它们常常被忽略，特别是被儿童忽略，因为儿童可能并不能真正理解其含义。本规定的目的是确保避免使用那些哪怕只看一两秒钟也很容易导致光过敏的闪烁。

4. 提供帮助用户查找内容的机制

· 网页中应提供一些帮助用户查找内容的机制，引导他们在网页中浏览，或者从一个网页浏览到另一个网页。本规定的目的在于帮助用户发现他们所需要的内容并允许他们记录这些内容的位置。对于有残障的用户，这类任务通常有一定难度。对于查找、导航、定位这类任务，最重要的一点是用户能够知道自己当前所处的位置。导航功能应该提供可能目的地的信息。读屏软件将内容转换成合成语音，因为是音频数据，所以必须要以线性模式进行播放。本标准中的一些规定说明了需要采取什么样的措施才能使读屏软件的用户能够成功地在内容中进行导航。其他一些规定则允许用户更加容易地分辩导航栏和页面标题，以及跳过重复内容。

5. 帮助用户避免错误，并在出现错误时方便地加以纠正

· 每个人都会犯错误，但身体有残障的人更容易出现输入错误。此外，他们还比较难察觉自己犯了错误。由于在视觉、颜色感知方面的限制或者辅助技术的使用，典型的错误诊断方法对于他们来说并不是很明显。本标准中相关规定的目的是减少发生不可逆转的严重错误的数目，增加错误被检查出来的可能性并帮助用户了解应该如何纠错。

3. 内容与控制的可理解性

1. 文本内容可读、可理解

· 本规定的目的是使文本内容能够被用户阅读，或者借助辅助技术阅读，对于理解文本内容所需要的那些信息，要保证其可用性。用户会通过很多不同的方式来理解文本的含义，有些人通过视觉方式，有些通过听觉方式，有些通过触觉方式，有些同时通过视觉和听觉方式来理解。有些用户在理解书写的文字的时候非常困难，但当文本内容被大声朗读出来，或者当内容的关键部分被用视觉方式展现出来，或者被翻译成手语后，他们甚至可以理解其中很复杂的含义。有些用户很难从上下文中推断出一个单词或者短语的意思，特别是当这个单词或短语以不常用的方式被使用，或者是具有特殊含义的时候。对于这些用户，能不能阅读和理解文本，取决于文本中是否提供了特殊定义或者缩写词的扩展形式。如果语种和文本的书写方向不能被识别，一些支持语音功能或者图形功能的用户代理可能就无法正确地表达文本的含义。虽然对于大多数用户来说这可能是个小问题，但对于某些用户（例如视障者）而言，这会是个重大障碍。在某些情况下，如果不带发音就无法确定文本的含义，则发音信息也必须提供。

2. 内容的布置和功能性是可预测的

4. 兼容性要求

1. 兼容目前及未来的用户代理（包括辅助技术）

· 本规定的目的是支持目前及未来的用户代理，特别是辅助技术之间的兼容性。这可以通过以下措施来实现：

· 1） 保证创作的内容中不包含扰乱辅助技术的元素（比如，格式不合理的标记）以及辅助技术不支持的元素（比如使用不符合规定的标记或代码）。

· 2） 以辅助技术能够识别和交互的标准方式发布信息。

· 由于技术更新迅速，辅助技术的开发人员在跟上技术潮流方面会遇到麻烦，因此很重要的一点就是内容要遵循约定并兼容相关 API，从而使辅助技术能够更容易地与新技术相结合。

2. 确保内容是无障碍的或者提供一个无障碍的选项

（二）无障碍网页设计规范

下面我将该规范的内容进行总结和精简，方便大家阅读。

1. 对于听觉及视觉的内容要提供相等的替代文字内容

        网页设计过程中，为了展示的效果更美观，我们往往用一些精美的小图片来替代文字。但是这种非文字的元素会给借助屏幕阅读器来浏览网页的用户带来困难。所以网页开发者在网页中遇到非文字的听觉或视觉内容时，如果能同时提供同等内容的替代文字，将可使听觉障碍或视觉障碍者能够无碍地浏览和获取这些资讯内容。

示例：用alt说明图片内容。

[html] view plain copy

1. <A href="routes.html">  

2.     <IMG src="topo.html" alt="前往體育館的路徑圖">  

3. </A>  

示例：若图片内容需要较长说明，可用longdesc另外连接一个页面。

[html] view plain copy

1. <IMG src="97sales.gif" alt="Sales for 1997 " longdesc="sales97.html">  

 
2. 不要单独靠色彩来提供特殊资讯
        对我们很多人的习惯而言，常用红色表示重要内容等。但是这些颜色所传达的信息可能对于视觉有障碍的人士而言不太方便。另外前景色与背景色的颜色太过相近，也会给使用者的阅读带来困难。所以我们在颜色的表示之外尽量还是用文字内容进行相应描述。

3. 适当地使用标记语言和样式表单
        应当按照标记和属性本来的功能来使用，比如表格就是用来显示表格式的内容的，而尽量少用表格来排版等。

示例：放大第一个字体，使用自定义的dropcap代替css的first-letter。

[html] view plain copy

1. <HEAD>  

2.     <TITLE>Drop caps</TITLE>  

3.     <STYLE type="text/css">  

4.       .dropcap { font-size : 120%; font-family : Helvetica }   

5.     </STYLE>  

6. </HEAD>  

7. <BODY>  

8.     <P><SPAN class="dropcap">O</SPAN>nce upon a time...</P>  

9. </BODY>  

4. 阐明自然语言的使用

        网页中最好能够标明网页所采用的语言，这样方便屏幕阅读器进行文字的识别，从而方便使用者可以顺利地理解网页的内容。

示例：用span标明语言的转化。

[html] view plain copy

1. <P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. </P>  

示例：用acrony对缩写做说明。

[html] view plain copy

1. <P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!  

示例：在html文件起始位置标明网页主要采用的语言。

[html] view plain copy

1. <HTML lang="fr">  

2.        ....rest of an HTML document written in French...  

3. </HTML>  

5. 建立编排良好的表格

        应尽量减少使用表格排版。因为屏幕阅读器对于表格内容的读取可能是“支离破碎”的，这样不便于理解内容。最好用div+css的形式。如果必须需要用表格展示的内容，则最好在表格的行和列等位置给予总结性的提示信息。

示例：在表格里先用summary说明用途，并在每一格中标上header以清楚地知道对应栏目。

[java] view plain copy

1. <TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator,the type of coffee (decaf or regular),and whether taken with sugar.">  

2.      <CAPTION>Cups of coffee consumed by each senator</CAPTION>  

3.      <TR>     

4.          <TH id="header1">Name</TH>  

5.          <TH id="header2">Cups</TH>       

6.          <TH id="header3" abbr="Type">Type of  Coffee</TH>     

7.          <TH id="header4">Sugar?</TH>  

8.      </TR>  

9.      <TR>    

10.          <TD headers="header1">T. Sexton</TD>    

11.          <TD headers="header2">10</TD>  

12.          <TD headers="header3">Espresso</TD>  

13.          <TD headers="header4">No</TD>  

14.     <TR>  

15. </TABLE>  

6. 确保网页能在新科技下良好地呈现
        在应用新技术的同时也要对之前的旧技术保持良好的兼容性。
 

7. 确保使用者能处理时间敏感内容的改变

        所谓“时间敏感内容”是指网页上元素的“移动”、“闪烁”、“卷轴”等效果。这些效果动态性过强，可能让某些有认知障碍或神经疾病的人士产生注意力分散甚至身体不适的状况。另外有些有视觉障碍的人士所使用的读屏设备对一些动态效果支持不好，这样也会为阅读带来难题。因此，对于这些效果展示方式，网页开发者有必要尽量斟酌是否使用。

示例：比如不应该在meta里限制时间，并重新载入网页。

[html] view plain copy

1. <META http-equiv="refresh" content="60">  

8. 设计设备独立网页

        提供多种网页的互动方式，使得使用者可以根据自身的情况来选择最合适的设备。如网页既支持鼠标操作，又支持键盘操作，还支持语音输入等。

示例：用键盘的alt+C键开启连结。

[html] view plain copy

1. <A accesskey="C" href="doc.html" hreflang="en" title="XYZ company home page">XYZ company home page</A>  

示例：利用制表符tab键控制表单的填写顺序，以方便用键盘操作。

[html] view plain copy

1. <FORM action="submit" method="post">  

2.     <INPUT tabindex="2" type="text" name="field1">  

3.     <INPUT tabindex="1" type="text" name="field2">  

4.     <INPUT tabindex="3" type="submit" name="submit">  

5. </FORM>  

9. 使用过渡的解决方案
        要充分考虑各个浏览器对网页开发技术的支持程度，提升网页对各个版本浏览器的兼容性问题。

10. 使用官方订立的技术和规范
        网站开发时尽量使用国际通用标准的技术。因为这些技术往往会对技术开放性和系统互通性有一定的考虑，可能更适合于更广泛人群和各种类型。

11. 提供内容导引资讯

        网页在展示内容时，对于较为复杂的网页结构或者控件，应当对其进行分类并提供分类名称或上下文提示。

示例：利用fieldset区分表单中不同类别，legend为不同类别的标题。

[html] view plain copy

1. <FORM action="//example.com/adduser" method="post">  

2.     <FIELDSET>  

3.         <LEGEND>個人資料</LEGEND>  

4.         <LABEL for="firstname">First name: </LABEL>  

5.         <INPUT type="text" id="firstname" tabindex="1">  

6.         <LABEL for="lastname">Last name: </LABEL>  

7.         <INPUT type="text" id="lastname" tabindex="2">  

8.         ...more personal information...  

9.     </FIELDSET>  

10.     <FIELDSET>  

11.         <LEGEND>醫療紀錄</LEGEND>  

12.         ...medical history information...  

13.     </FIELDSET>  

14. </FORM>  

示例：在下拉列表中把相关内容用OPTGROUP分类。

[html] view plain copy

1. <FORM action="//example.com/prog/someprog" method="post">  

2.     <P>  

3.         <SELECT name="ComOS">  

4.             <OPTGROUP label="GROUP1">  

5.                 <OPTION label="1.1" value="g1.1">第一項  

6.                 <OPTION label="1.2" value="g1.2">第二項  

7.                 <OPTION label="1.3" value="g1.3">第三項  

8.             </OPTGROUP>  

9.             <OPTGROUP label="GROUP2">  

10.                 <OPTION label="2.1" value="g2.1">第一項  

11.                 <OPTION label="2.2" value="g2.2">第二項  

12.             </OPTGROUP>  

13.         </SELECT>  

14. <pre name="code" class="html">    </P></pre></FORM>  

15. <pre></pre>  

16. <pre></pre>  

12. 提供清楚的浏览网站机制

        网站具有清楚和一致的浏览机制（如恰当的分类导航等），都可以让使用者更容易地找到需要的信息而不致迷失方向。

13. 确保简单清楚的网页内容

        网页内容应该清楚和简单，这样使用者可以更容易地理解网页内容。太过正式或官方的用词会给有认知或学习障碍的人士理解网页资讯带来困难。

希望大家都从自身做起，在工作的同时为无障碍网页的设计贡献一点力量。

参考资料：

1. 中国信息无障碍行标指南

2. 信息无障碍－身体机能差异人群－网站设计无障碍技术要求

3. 无障碍网页规范

 本文由职坐标整理发布，欢迎关注职坐标网页设计频道，学习更多设计创作知识！