WAI-ARIA无障碍网页应用 HTML5 设计辅助功能

使用 HTML5 设计辅助功能

Rajesh Lal

下载代码示例

如果您真的对面向广大受众感兴趣，将需要为网站设计辅助功能。 辅助功能使网页更易于访问、更易于使用，可供每个人浏览。 通常，使用最新的技术更易于实现辅助功能。 当前，这意味着使用 HTML5。

为了具备易访问性，您需要在多种设备上提供您的内容，如使用键盘或鼠标的普通计算机、屏幕阅读器、音频浏览器、具有有限带宽的设备、旧式浏览器和计算机以及手机和触摸设备。 而且，它应覆盖最广泛的人群，包括残障人士、老年人、文化水平不高或暂时患病的人以及喜欢只使用键盘或鼠标的人。

残障人士辅助功能旨在提供以下四个主要方面的解决方案：

• 听力
• 移动性
• 认知能力
• 视觉

听力问题是指用户可能无法听到网站上的任何声音。 其解决方法是针对所有非文本内容（如字幕和隐藏字幕）使用替代文本来帮助用户感知内容。 这包括改写成文字的言语和符号语言（如果可能）。

残障人士面临的移动性问题是指无法使用鼠标或键盘。 解决网上移动性问题的方法是使内容可操作，即使得所有功能可单独从键盘以及通过操纵杆访问，如有可能应提供语音识别和音频反馈功能。 允许通过正确使用标题和锚点进行导航，并使用户能够停止基于时间的内容。 不允许对页面进行任何自动刷新操作。

认知困难影响内容本身，例如文本和图像的大小或颜色对比度。 闪烁的图形和字体类型也可能给某些用户带来困难。 其解决方法是使内容明白易懂。 使用便于阅读的宋体并允许调整字体大小。 对前景和背景使用对比度高的颜色。 避免自动刷新、图像闪烁和自动播放媒体和动画。 使用多个视觉提示和标准图标使内容易于理解。

视觉问题范围涉及无法区分颜色到完全看不见内容。 这类问题的解决方法是使内容稳健，以便可以被用户代理可靠解释并可使用屏幕阅读器轻松访问。 使用语义 HTML 并遵循标准。 使用语法正确的 HTML 并验证您的页面。 在适用时使用 lang 属性和 abbr 标记。

简而言之，要易于访问，Web 上的内容要求是可被感知、可操作、可理解和稳健的。 这 些属性一起构成了万维网联盟 (W3C) POUR 模型，它规定：显示给用户的信息和 UI 元素必须可被用户的感官感知；必须为用户提供操作 UI 的方式；用户必须可以理解信息和知道如何使用界面元素；内容必须足够稳健以便可以使用各种用户代理（包括辅助技术 (AT)）来访问它。

既然您了解了辅助功能的基本知识，让我们看一下与易访问的 Web 设计有关的两个非常重要的概念： 逐渐增强和易访问的丰富 Internet 应用程序 (ARIA)。

逐渐增强和 ARIA

逐渐增强是使用语义 HTML、样式表和脚本促进实现辅助功能的 Web 设计方法。 其理念是创建这样的网站：基本内容可供每个人访问，而更高级的内容和功能则可供具有更强能力、更高带宽或更高级工具的人访问。 创建网站时，您首先关注的是以最简单的方式显示内容。 使用语义上结构化的 HTML 设计页面。 修改视觉效果内容（如黑体或斜体）的所有表示元素放入外部样式表。

语义 HTML 表示页面中的 HTML 标记应以与其含义而非表示有关的方式描述内容。 有关内容修饰的所有信息应放入 CSS 文件，而应在加载页面和分析并应用样式表后通过外部链接的 JavaScript 添加网页的逻辑和客户端行为。 逐渐增强确保了 JavaScript 文件出错时，仍可以正确样式加载页面。 如果忽略 CSS 文件（例如，通过屏幕阅读器），HTML 页面仍包含所有内容。

所有最新的 OSe 都具有自己的辅助功能 API，每个 API 是一组由浏览器公开的打开方法和界面，以便读取和分析文本。 Microsoft 版本是 Microsoft Active Accessibility (MSAA)，它是 Windows 的 UI 自动化 (UIA) 的一部分；Linux 则是 IAccessible2；Apple 依赖于 Mac OS X 辅助功能协议 — 但是它们都遵循 W3C (bit.ly/OlD4lX) 所定义的 ARIA 标准。 图 1 显示用户如何使用 AT 设备（如屏幕阅读器）与易访问的网页交互。 这类设备使用辅助功能 API 来访问网页。

图 1 用户如何使用辅助技术访问网页

ARIA 是 W3C Web 无障碍倡议 (WAI) 的一部分，它定义使 Web 内容和 Web 应用程序更易于访问的方式。 ARIA 用于提高使用 HTML、CSS、JavaScript、AJAX 和相关技术开发的动态内容和高级 UI 控件的辅助功能。 ARIA 现在正式成为 HTML5 规范的一部分，还可以嵌入在常用的 JavaScript 库（如 JQuery、Dojo 和 YUI）中。 有关详细信息，请访问 bit.ly/b89BEJ。

ARIA 使用一组角色、状态和属性来将网页公开给辅助功能 API。 在网页的元素（公开给 AT）上分配这些角色、状态和属性。 最新的 AT 工具（包括 JAWS、NVDA 和 VoiceOver）支持 ARIA。 让我们进一步了解 ARIA。

ARIA 角色

角色以有意义的方式指示元素的类型。 假定屏幕阅读器遇到包含 role=navigation 的页面上的一个 HTML 元素。 屏幕阅读器将知道此 HTML 元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。

将 ARIA 角色属性应用到类似以下的 HTML 元素：

1.           <div role="XXX"> </div>
2.         

此处“XXX”是依赖于 HTML 元素的类型和它在页面上的角色的值。 根据它表示的内容，它可以取很多值，如 form、navigation、search 或 article。 角色有以下三种类型：

• 作为导航界标的界标角色。
• 结构性角色定义文档的结构并帮助组织内容。
• 小组件角色由独立的 UI 小组件和复合小组件构成，其中复合小组件是两个或多个独立小组件的容器。

图 2 显示 ARIA 中可用的所有角色值。 ARIA 中有 8 个界标角色、18 个结构性角色、25 个独立界面小组件角色和 9 个复合 UI 小组件角色。 您可以在 bit.ly/S0HUvi 中查看更多信息。

图 2 ARIA 角色值

界标角色	结构性角色	小组件角色
			独立小组件	复合小组件
application	article	region	alert	progressbar	combobox
banner	columnheader	row	alertdialog	radio	grid
complementary	definition	rowheader	button	scrollbar	listbox
contentinfo	directory	separator	checkbox	slider	menu
form	document	toolbar	dialog	spinbutton	menubar
main	group		gridcell	status	radiogroup
navigation	heading		link	tab	tablist
search	img		log	tabpanel	tree
	list		marquee	textbox	treegrid
	listitem		menuitem	timer
	math		menuitemcheckbox	tooltip
	note		menuitemradio	treeitem
	presentation		option

与角色不同，ARIA 状态和属性是可为每个 HTML 元素设置的特性。

ARIA 状态

ARIA 状态是 HTML 元素的动态属性，它表示与对象关联的数据但是不影响元素的基本性质。 有两种 ARIA 状态类型：全局和小组件，如图 3 中所示。 全局状态可以应用到任意元素，而与角色是否已应用到该元素无关。 小组件状态是需要用户交互的 UI 小组件的属性。

以下显示了属性 aria-hidden：

1.           <div aria-hidden="true">
2.   <p>Paragraph text here </p>
3. </div>
4.         

此代码将对屏幕阅读器隐藏该段落。

ARIA 属性

ARIA 属性类似于 ARIA 状态，但是在页面上是相对静态的，它们作为 HTML 元素的其他属性。 小组件属性与小组件状态相似，但是该值在页面范围内保持不变。 有 11 个全局属性和 14 个小组件属性（请参阅图 3）。

图 3 ARIA 状态和属性

属性类型	全局	小组件
ARIA 状态	aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid	listitem math note presentation region row rowheader separator toolbar
ARIA 属性	aria-atomic aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-live aria-owns aria-relevant	aria-autocomplete aria-haspopup aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext

以下是小组件属性 aria-required 的一个示例：

1.           <label for="username">User name:</label>
2. <input id="username" type="text" aria-required="true">
3.         

这使表格的输入字段成为必填字段。

图 3 列出了所有 ARIA 状态和属性。 有关详细信息，请访问 bit.ly/OlbLeh。

您了解一些 ARIA 及其角色、状态和属性后，就可以使用它来创建逐渐增强的易访问网站。

创建易访问的网站

典型网站包含很多组件。 让我们了解一下如何使用 HTML5 和 ARIA 创建以下每个组件，不要忘记实现辅助功能：

1. 主页
2. 带徽标的页眉区域
   • 导航菜单
   • 主图形
   • 主内容
   • 信息块
   • 联系信息表
3. “常见问题”页
4. 带视频的“关于”页

图 4 显示我将创建的网站的基本结构。

图 4 网站示例的站点地图

图 5 显示一个基于产品或服务的网站的典型主页布局。 为了创建它，我首先将 HTML5 用于实现逐渐增强，然后使网站可供 AT 设备访问。

图 5 主页的标准布局

正如您所看到的，我在页面上标识了很多元素： 页眉、导航、对操作的调用、主图形、包含简短内容的欢迎消息、信息块和页脚。

按 照逐渐增强原则，我创建了一个按顺序的 HTML5 页来包含这些元素，使用了元素 <header>、<nav>、<figure>、<article>、<section>、<aside> 和 <footer>，如图 6 中所示。

图 6 HTML5 主页

1.           <!doctype html>
2. <html lang="en">
3. <head><title>HTML5 Home Page</title></head>
4. <body>
5.   <header><!-- header -->
6.   <a href="/"><img src="images/logo.png"></a>
7.   </header>
8. <nav><!-- navigation -->
9. <ul>
10.   <li><a href="/">Home</a></li>
11.   <li><a href="/contact">Contact</a></li>
12.   <li><a href="/faq">FAQ</a></li>
13.   <li><a href="/about">About</a></li>
14. </ul>
15. </nav>
16. <div><!-- main content -->
17. <section>
18.   <figure><img src="images/maingraphics.png">
19.   <figcaption>Welcome image.
20.           More help on image<a href="#/">Help</a></figcaption>
21.   </figure>
22. </section>
23. <section>
24.   <h2><a href="Action" target="_blank">Subscribe</a></h2>
25.   <article>
26.   <h2>Welcome!</h2>
27.   <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
28.   </article>
29. </section>
30. </div>
31. <aside><!-- info blocks -->
32.   <h4>Promotion</h4><ul><li>items</li></ul>
33.   <h4>Awards</h4><ul><li>items</li></ul>
34.   <h4>News</h4><ul><li>items</li></ul>
35. </aside>
36. <footer><!-- footer -->
37.   <div>Copyright © 2012</div>
38.   <div><a href="">Privacy Policy</div>
39. </footer>
40. </body>
41. </html>
42.         

在最新的浏览器中支持此代码，不支持的所有 HTML5 元素默认为 <div> 元素。 例如，如果不支持 <header> 元素，浏览器将它替换为 <div>，如下所示：

1.           <header><!-- header -->
2. <a href="/"><img src="images/logo.png"></a>
3. </header>
4. <div><!-- header -->
5. <a href="/"><img src="images/logo.png"></a>
6. </div>
7.         

为了使 AT 工具识别文档的导航界标和结构性部分，我为每个元素添加了以下角色，如图 7 中所示：

• header role=banner
• nav role=navigation
• maincontent role=main
• section role=region
• article role=article
• aside role=complementary
• footer role=contentinfo

图 7 添加角色

1.           <!doctype html>
2. <html lang="en">
3. <head><title> Accessible HTML5 Home Page</title></head>
4. <body>
5.   <header role="banner"><!-- header -->
6.   <a href="/"><img src="images/logo.png"></a>
7.   </header>
8. <nav role="navigation"><!-- navigation -->
9. <ul>
10.   <li><a href="/">Home</a></li>
11.   <li><a href="/contact">Contact</a></li>
12.   <li><a href="/faq">FAQ</a></li>
13.   <li><a href="/about">About</a></li>
14.  </ul>
15. </nav>
16. <div id="maincontent" role="main"><!-- main content -->
17. <section>
18.  <figure><img src="images/maingraphics.png">
19.  <figcaption>Welcome image.
20.           More help on image<a href="#/">Help</a></figcaption>
21.  </figure>
22. </section>
23. <section role="region">
24.   <h2><a href="Action" target="_blank">Subscribe</a></h2>
25.   <article role="article">
26.   <h2>Welcome!</h2>
27.   <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
28.   </article>
29. </section>
30. </div>
31. <aside role="complementary"><!-- info blocks -->
32.   <h4>Promotion</h4><ul><li>items</li></ul>
33.   <h4>Awards</h4><ul><li>items</li></ul>
34.   <h4>News</h4><ul><li>items</li></ul>
35. </aside>
36. <footer role="contentinfo"><!-- footer -->
37.   <div>Copyright © 2012</div>
38.   <div><a href="">Privacy Policy</div>
39. </footer>
40. </body>
41. </html>
42.         

为了对所有浏览器应用样式，首先要将所有 HTML5 元素的块级元素放入样式表，如下所示：

1.           <style>
2. header,footer,nav,article,aside,section,figure,figcaption{display:block;}
3. </style>
4.         

我包含了 ARIA 角色以便为每个特定元素应用样式：

1.           <style>
2.   header[role="banner"]{/* Styles for banner */}
3.   header{/* Styles for other headers */}
4.   #maincontent[role="main"]{ /* Styles for main content */}
5.   nav[role="navigation"]{/* Styles for navigation */}
6.   section[role="group"]{/* Styles for section */}
7.   article[role="article"]{/* Styles for article */}
8.   aside[role="complementary"]{/* Styles for info blocks */}
9.   footer[role="contentinfo"]{/* Styles */}
10. </style>
11.         

因为 HTML 页是按顺序分析，最好将 JavaScript 文件放到页面底部、页脚之后。 这使网站完全独立于 JavaScript：Java­Script 函数仅在文档就绪且完整加载后才实例化。 以下代码显示在我的示例中插入的脚本文件：

<footer role="contentinfo"><!-- ><!-- footer -->

  <div>Copyright © 2012</div>

  <div><a href="">Privacy Policy</div>

</footer>

  <script type="text/javascript" src="jquery.min.js"></script>

  <script type="text/javascript" src="main.js"></script>

</body>

</html>

创建易访问的联系信息表

表格是基于 Web 的交互不可或缺的一部分，HTML5 提供很多帮助实现辅助功能的新输入类型和属性。 图 8 列出与 HTML5 表格有关的输入类型和属性。

图 8 表格输入类型和属性

输入类型	input type=datetime input type=datetime-local input type=date input type=month input type=time input type=week input type=number	input type=range input type=email input type=url input type=search input type=tel input type=color
属性	autocomplete autofocus form formaction formenctype formmethod formnovalidate	formtarget list multiple pattern placeholder required step

为了实现辅助功能，表格应限定为单个用途。 联系信息页应只包含联系信息表，不含其他信息。 这使得使用 AT 设备的人更易于访问它。

使用正确的输入类型也很重要。 这提高了支持该属性的设备的用户体验。 例如，input type=number 可以显示移动设备的数字键区，而 input type=url 则显示很多智能手机的虚拟键盘中的特殊“.com”按钮。

您将标签中的 for 属性与输入元素中的 id 属性一起使用，如下所示：

1.           <label for="useremail">Your E-mail:</label>
2. <input id="useremail" name="useremail" type="email" value=""/>
3.         

这将标签映射为辅助设备中的输入元素。 您还可以使用 aria-describedby 属性以更详细说明的方式执行此操作。 例如，如果您有每个输入字段的一些帮助文本，可以将它与输入文本关联：

1.           <label for="useremail">Your E-mail:</label>
2. <input id="useremail" type="email" value="" aria-describedby="helpemail"/>
3. <p id="helpemail">Your email address will be used for further communication</p>
4.         

接下来是添加 placeholder 属性和必需的 HTML5 属性（使用 aria-required=“true”）。 placeholder 属性允许您显示有效输入是什么样子，必需的属性则使输入框为必填字段：

1.           <label for="useremail">Your E-mail:</label>
2. <input id="useremail" type="email" placeholder="[e-mail]" required
3. aria-required="true" value="" aria-describedby="helpemail"/>
4. <p id="helpemail">Your email address will be used for further communication</p>
5.         

请注意，占位符不是标签。 还请记住，如果您为文本加星号以表示必填字段，则星号将随每个字段一起被屏幕阅读器读取，这将为视觉受损的用户提供较差的用户体验。 请改用 aria-required 字段属性，它将告知 AT 设备该字段是必填字段并使用背景色或图像（而非星号）将这点告知用户。

您还可以添加 autofocus 属性，它帮助将焦点设置为表格的第一个元素。

图 9 显示用于创建一个易访问的 HTML5 联系信息表的代码，图 10 则显示联系信息表。

图 9 创建一个 HTML5 联系信息表

1.           <div id="contact" role="main"><!-- main content -->
2.   <!-- content -->
3.     <section id="content">
4.       <article>
5.         <h2>Contact <span>Form</span></h2>
6.         <form id="contacts-form" action="" method="post">
7.           <fieldset>
8.             <div class="field">
9.               <label for="name" >Name </label>
10.               <input id="name" placeholder="John Smith" autofocus required
11.                 aria-required="true" type="text" value="" />
12.             </div>
13.             <div class="field">
14.               <label for="email">E-mail</label>
15.               <input id="email" placeholder="[e-mail]" type="email" required
16.                 aria-required="true" value=""/>
17.             </div>
18.             <div class="field">
19.               <label for="website">Website</label>
20.               <input id="website" placeholder="http://website.com"
21.                 type="url" />
22.             </div>
23.             <div class="field">
24.               <label for="message">Message</label>
25.               <textarea id="message"
26.                 placeholder="Write your message Here!" required
27.                 aria-required="true" ></textarea>
28.             </div>
29.             <div><a href="#" onclick="submit()">Send Your Message!</a></div>
30.           </fieldset>
31.         </form>
32.       </article>
33.     </section>
34. </div>
35.         

图 10 浏览器中的“联系信息表”页

执行更新可能对残障人士有一定困难，但是当您将 aria-live 属性与 status、log 和 alert 的角色属性一起使用时，活动区域可使辅助设备识别更新：

• aria-live=“off”： 未公布更新（区域为非活动的）
• aria-live=“polite”： 用户空闲时公布更新
• aria-live=“assertive”： 优先级更高，但是更新不一定立即公布
• 用于不同消息类型的 role=“log”、role=“status” 和 role=“alert”

以下是将此集成到 HTML 代码的一个简单方法：

1.           <div id="liveregion" role="log" aria-live="polite">
2.         

现在我们来看具有易访问内容的“常见问题”页。

使用图像创建易访问的“常见问题”页

“常见问题”页是很多网站中访问次数最多的页。 您的“常见问题”页可能包含文本、表、链接、图像和标题，这些都应是易访问的。 让我们看看您如何实现这一点。 首先，HTML 内容应只包含语义 HTML 标记，任何修饰元素应放入样式表。 因此，不采用：

1.           <i>italics</i>
2.         

您使用：

1.           <em>emphasized</em>
2.   <cite>citation</cite>
3.         

不采用：

1.           <b>bold</b>
2.         

您使用：

1.           <strong>strong</strong>
2.         

请注意这些元素将含义添加到内容并由屏幕阅读器以不同方式解释它们。 例如，一些屏幕阅读器将更改 <strong> 元素的音调但不更改 <b> 元素的音调。

正确使用与标题有关的标题元素（如 <h1>、<h2> 等）也很重要。 理想情况下，您应在一个页面中使用一个 <h1> 标题并根据需要使用多个副标题。 确保每个 HTML 元素有结束标记。 还要确保正确结束所有有序和无序列表。 标准做法还建议您将所有标记采用小写形式并将它们正确嵌套。 图 11 给出了一个示例。

图 11“常见问题”页的标记

1.           <h1>FAQ</h1>
2.   <h2>List of frequently asked questions</h2>
3.     <ul>
4.     <li><a href="#q1">Accessible Text</a></li>
5.     <li><a href="#q2">Accessible Tables</a></li>
6.     <li><a href="#q3">Accessible Links</a></li>
7.     <li><a href="#q4">Accessible Images</a></li>
8.     <li><a href="#q5">Accessible Titles</a></li>
9.     </ul>
10.   <h2 id="q1">Accessible Text</h2>
11.     <h3>Semantic HTML</h3>
12.     <h3>Proper hierarchy</h3>
13.     <h3>Localized content</h3>
14.     <h3>Acronym</h3>
15.     <h3>Font-size</h3>
16.     <h3>Color</h3>
17.   <h2 id="q2">Accessible Table</h2>
18.   <h2 id="q3">Accessible Links</h2>
19.   <h2 id="q4">Accessible Images</h2>
20.   <h2 id="q5">Accessible Titles</h2>
21.         

要创建本地化的内容，您使用全局 <html> 元素中的 lang 属性设置页面的语言：

1.           <html lang="en">
2.         

对于采用不同语言的内容，请在 <p> 或 <span> 元素中使用 lang，如下所示：

1.           <p><span lang="la">Carpe diem </span>(seize the day)</p>
2.         

并对缩写形式使用 abbr 标记：

1.           <p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>
2.         

内容的字体大小应始终是相对的。 请永远不要使用绝对大小或固定大小，因为这限制了浏览器的字体缩放功能。 使用以下值之一来增加或减小浏览器默认的字体大小：

• 百分比 (%)
• em（相对于大写字母 M 的大小）
• ex（相对于大写字母 X 的大小） 
• 关键字（小、中、大、更小、更大等） 

例如：

1.           font-size:100%;
2.   line-height:1.125em;
3.         

颜色应为查看内容提供视觉帮助，不应单独用来显示信息。 前景和背景颜色对比度高对于页面易访问很重要。 W3C 建议普通文本的对比率为 4.5 比 1，更大文本的对比率为 3 比 1。

对于表格验证，单个输入元素可能显示彩色背景以指示错误，这对色盲用户可能不可见。 确保您对同一信息有多个提示，如用标签指示错误。

当您正在使用样式表中的颜色时，将 background-color 元素设置为使用补色。 一些用户可能更易于查看黑色背景的内容，因此允许将页面颜色更改为更暗的主题。 例如：

1.           body {
2.   font-family:Arial, Helvetica, sans-serif;
3.   font-size:100%;
4.   line-height:1.125em;
5.   background-color:#212222;
6.   color:#242424;
7. }
8.         

标准表一般具有一个表头行，可能有一个表尾行，但是使用简单表标记不可能区分它们。 不过 HTML5 提供了很多有用的新标记：

• <caption> 是表的标题
• <details> 显示用户可以按需查看或隐藏的其他详细信息
• <summary> 在屏幕阅读器读取真实表数据前公布
• <thead> 指示表头行
• <tfoot> 指示表尾行

图 12 显示易于 AT 设备访问的示例 HTML 表的代码。

图 12 易访问的表

1.           <h4>Table with Caption, Summary and Details</h4>
2. <table>
3.   <caption>
4.     <strong>Lorem Ipsum.</strong>
5.     <details>
6.       <summary>Help</summary>
7.       <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
8.      </details>
9.   </caption>
10.   <thead>
11.     <tr>
12.       <th>Table header column 1</th>
13.       <th>Table header column 2</th>
14.       <th>Table header column 3</th>
15.     </tr>
16.   </thead>
17.   <tfoot>
18.     <tr>
19.       <td>Table footer column 1</td>
20.       <td>Table footer column 2</td>
21.       <td>Table footer column 3</td>
22.     </tr>
23.   </tfoot>
24.   <tbody>
25.     <tr>
26.       <td>Table data column 1</td>
27.       <td>Table data column 2</td>
28.       <td>Table data column 3</td>
29.     </tr>
30.   </tbody>
31. </table>
32.         

创建链接时，避免使用通用的“单击此处”和“查看更多信息”链接。 使用 title 属性和有意义的锚文本。 下面是添加链接的正确方式：

1.           <p>Designandmethod.com has an article on accessibility.
2.           See the <a title="click for more information at the Design 
3. & Method Web site" href="http://designandmethod.com">
4. Big picture at Design and Method</a></p>
5.         

请谨慎使用 ASCII 符号。 当您有多个页时，避免使用大于和小于符号（> 和 <）来前进和后退到下一组项。 请改用明文，如“后 10 项”和“前 10 项”。请注意在痕迹导航中使用大于符号似乎合乎逻辑，但是遗憾的是屏幕阅读器会将“下一步>>”读为“下一步，大于，大于”，这是毫无意义的。 如果您的设计需要“>”，请使用 CSS 背景图像。

最后，链接应带下划线。 这帮助色盲用户确定此文本为链接。 您可以在样式表中使用修饰做到这点：

1.           {
2.   text-decoration: underline;
3.   display:block;
4.   border-bottom:1px solid #000;
5. }
6.         

要使图像易访问，请以有意义的 alt 属性开头并将空白 alt (alt=“”) 用于修饰图像。 确保包含 title 属性 — 它在 alt 属性不可用时显示为工具提示并可由屏幕阅读器查看。 如果 alt 和 title 属性均未找到，AT 设备将公布图像的名称，因此请确保为图像指定有意义的名称。

将 role=presentation 用于图像或任何与 AT 设备无关的元素。 如果您要包含图像映射，请对每个区域使用 alt。 您还可以对图像使用 figure 和 figcaption 标记。 使带动画的图像最小化；它们可能导致癫痫病人发病。

以下示例显示如何使图像易访问：

1.    <figure><img src="images/maingraphics.png" alt="Example screen shot" 
2. title="main graphics showing screenshot example">
3. <figcaption>Image with caption.</figcaption></figure>
4.         

以下是用于图像映射的代码：

1.           <area shape=rect coords=0,0,10,10 href="example.htm" alt="example">
2.         

创建易访问内容的最后一点是在标题开头包含相关关键字。 在开头具有简明的标题和相关关键字可以帮助视力受损的用户更快地浏览它们。

在以下示例中，在每个标题中包含冗余的“How to make”似乎增强了可读性，但是屏幕阅读器将为每个标题重复这三个单词，使用户难以快速浏览内容。 在标题开头使用精确、相关的关键字可提高内容的易访问性：

1.           <a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
2. <a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
3. <a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
4. <a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>
5.         

现在我们简单了解一下如何向一个包含音频和视频的易访问网站添加“关于”页。 我们先了解如何使音频和视频元素易访问。

具有音频和视频的易访问“关于”页

假定我希望“关于”页包含一个介绍我的网站内容的视频。 HTML5 中的 <audio> 和 <video> 标记便于在网页中嵌入多媒体内容，但是这样做为以下用户访问内容带来困难：非母语用户、耳聋或听力不好的用户、盲人用户，或扬声器出故障或处于嘈杂环境的任何用户。 可以遵循一些特定准则来应对这些问题。 以下是一些使音频和视频内容易访问的方法：

• 以 HTML 格式提供音频或视频的文字记录。
• 对于不支持 media 标记的浏览器提供替代内容。
• 控件至少要有“开”/“关”按钮。
• 媒体不应是自动启动而是用户启动的。
• 提供下载媒体文件的链接。
• 使用视频/音频磁迹提供字幕（隐藏字幕或字幕）。

字幕通常是视频中按时间对齐的所说话语的文字记录，可帮助用户了解内容。 对于耳聋用户，字幕是更好的解决方案，因为它们不包含伴随所说话语的噪声、音响效果、音乐等。

现在我们可以使用 track 元素和以下格式提供字幕支持： 

• WebVTT 用于为视频内容加字幕
• SMPTE-TT（计时的文本格式）用于加字幕
• SRT 用于字幕文件

请注意对视频的辅助功能支持仍在继续改进，但是以下提供了一个示例：

1.           <video controls>
2. <source src="video-file.mp4" type="video/mp4"/>
3. <track src="en.vtt" kind="subtitles" srclang="en"
4. label="English p subtitles" default/>
5. <track src="en.ttml" kind="captions" srclang="en"
6. label="English p captions" default/>
7. </video>
8.         

尽管没有提供对媒体的粒度控制，HTML5 具有显示媒体元素的控件的 controls 属性。 这些控件可通过键盘访问：

• 空格键用于切换播放和暂停。
• 左箭头和右箭头分别用于将视频前进和后退 5 秒。
• CTRL+左箭头或右箭头分别用于将视频前进或后退 60 秒。
• HOME+左箭头或右箭头用于跳到视频的开头或结尾。
• 如果音量按钮有焦点，则上箭头和下箭头可以增加和减小音量。

Visual Studio 2012 中的辅助功能支持

您知道 Visual Studio 2012 使辅助功能更易于实现一定很高兴。 现在提供 HTML 元素中 ARIA 角色、特性和属性的 IntelliSense，如图 13 和图 14 中所示。

图 13 Visual Studio 2012 中对 ARIA 角色的 IntelliSense 支持

图 14 IntelliSense 中支持 ARIA 属性

创建易访问的网页后，您将要进行检查，确保它真正满足辅助功能要求。 使用 Visual Studio 2012，您可以轻松通过右键单击某个页面并选择“检查辅助功能”这样做，如图 15 中所示。

图 15 您可以在 Visual Studio 2012 中检查网页的辅助功能

您然后选择 Web 内容辅助功能准则或您要对照检查的 WCAG 级别： 优先级 1 或优先级 2（请参阅 bit.ly/S0Nb66）。 您还可以针对无障碍委员会第 508 条进行检查，它引用美国政府在康复法第 508 条中定义的标准 (section508.gov)。 您选择了准则后，Visual Studio 2012 将检查所有 HTML 元素并显示有关页面中任何错误或警告的详细报告，如图 16 中所示。

图 16 Visual Studio 2012 中的 Web 内容辅助功能报告

您现在了解了如何使用 HTML5 创建易访问的网站，并且知道一些 Visual Studio 2012 辅助功能如何提供这方面的帮助。 当您浏览易访问的 Web 内容时这些应是工具箱中的有用附加工具。

 

Rajesh Lal 在 Nokia 工作，一直很关注 HTML5 和 Web 技术。 他撰写了有关 Windows 小工具、Web 小组件、移动 Web 和 Silverlight 技术的多本专著。 要讨论软件设计和方法中的辅助功能问题，请访问 dsgnmthd.com/accessibility。 有关作者的信息，请查看 iRajLal.com。

衷心感谢以下技术专家对本文的审阅： Art Barstow、Lakshmi C. Chava 和 Dennis Lembrée