菜单

利用 Web 标准生成 ASP.NET 2.0 Web 站点

2018年9月15日 - 法律效力

  Stephen Walther
SuperExpert.com

适用于:
Microsoft ASP.NET 2.0 (Beta 2)
Microsoft Visual Studio .NET 2005
Microsoft Visual Web Developer

摘要: Microsoft ASP.NET 2.0
具有众多中之效力,能拉而设计及变化符合 XHTML 和而访问性标准的 Web
站点。本文探讨如何与为什么生成这些符合标准的站点。

图片 1

本页内容
简介
生成 XHTML Web 站点
XHTML 标准的版本
创建 XHTML 页
XHTML 和 ASP.NET 控件
验证 XHTML 页
XHTML 和 DOCTYPE 切换
XHTML 和 MIME 类型
配置 XHTML 一致性
生成可访问的 ASP.NET Web 站点
可访问性标准
ASP.NET 2.0 中的可访问性改进
创建可访问的图像
创建可访问的表单
创建可访问的导航
创建可访问的数据
创建可访问的 XHTML
创建可访问的脚本
验证页的可访问性
示例应用程序:可访问的 XHTML ASP.NET Web 站点
访问 Amazon Web 服务
默认页
默认页的 XHTML 功能
默认页的可访问性功能
搜索页
搜索页的 XHTML 功能
搜索页的可访问性功能
母版页
母版页的 XHTML 功能
母版页的可访问性功能
小结

简介

Web 标准要您会由此极端少之工作,生成可让顶广泛受众访问的 Web 站点。Web
标准的许诺是:只需要设计页面一次于,即可为该页以完全相同的主意于其他现代底浏览器中显示和做事。例如,在按部就班专业生成以后,旨在以
Microsoft Internet Explorer
中为某种方式展示的页可于另浏览器(如,Mozilla Firefox、Netscape
Navigator、Opera、Camino 和
Safari)中坐同等之措施示,而不论需完成其余附加的做事。

Web 标准的一个附加利益是 — 使 Web
站点又便于为残疾人士访问。这是一个限制广泛的叫广大群体,包括视力衰退的中年人物,刚刚于滑雪时跌断胳膊的人选,以及完全失明的人等。使用正规可避免无意中梗阻那些拥有暂时性或永久性身体残疾的人士看
Web 页。

于变满足公共 Web 标准的 Web 站点而言,Microsoft ASP.NET 2.0
框架是超级的框架。特别强调的是,ASP.NET 2.0 框架中的每个控件都循 XHTML
和而访问性标准开展了全面的检讨和测试。此外,Microsoft Visual Studio .NET
2005 还含部分新工具,用于按照 XHTML 和而访问性标准认证 Web 页。

正文的目的是为而提供关于 XHTML 和而访问性标准的概述,并说明什么利用
ASP.NET 2.0 和 Visual Studio .NET 2005
来满足这些规范。在本文的最终,将分步演练以下功能,即开立能够以满足
XHTML 和而访问性标准的 ASP.NET 2.0 Web 站点。

图片 2回页首

生成 XHTML Web 站点

HTML 在正式的场合曾过时了。World Wide Web Consortium (W3C) 于 2000 年
6 月 26 日发布了 XHTML 的率先独本子作为推荐标准。XHTML 标准的靶子是代表
HTML。按照 W3C 的传教,“XHTML 是 HTML
的后来人”(http://www.w3.org/MarkUp/)。

XHTML 标准的制定者具有两不行目标:

在文档结构和表示形式之间创建更明显的分离。

将 HTML 重新表示为 XML 的应用程序。

为兑现率先独对象,W3C 一直以锲而不舍地自 HTML
中剔除纯粹描述性的因素以及属性(他们是自 HTML 4.0
开始就等同经过的)。例如,XHTML 1.0 Strict 不含各级如 <font>
标记之类的因素或如 bgcolor
属性之类的特性,因为这些因素和性能完全用于描述文档的外观,它们同文档的结构没有任何关系。

W3C 一直以全力一旦 Web
站点设计人员与开发人员摒弃特定标记应当具备一定外观这等同观念。例如,您或许会见觉得
<h1>
标记(标题标记)的用处是在页中呈现很之加粗文本。这实际上是拂的。<h1>
标记用来在文档中标记标题而不是任何任何东西。如何表现标题标记由浏览器确定。视力衰退的人物使用的屏幕阅读器可能行使抑扬顿挫的声息来大声朗读标题标记的始末。不支持多单字体大小的
PDA 可能用闪烁文本呈现标题标记的情。

你不应有试图使如 <h1> 标记之类的页元素来支配 Web
页的外观。相反,您当通过应用层叠样式表来指示 Web
页的外观。而且,您所祭的层叠样式表应当是外部
层叠样式表。请以标志和属性来号文档的组织,而用样式表来控制文档的代表形式。

XHTML 的亚独目标是逼 HTML 开发人员遵守更为严格的 XML 规则。按照 W3C
的布道,“XHTML 1.0 是 HTML 4.01 的作为 XML 1.0
应用程序的考订”(http://www.w3.org/MarkUp/)。换句话说,使用 XHTML 生成
Web 页时,实际上是于开创 XML 文档。

XML 文档具有比 HTML 文档更严格的语法。例如,XML 区分轻重缓急写,所有 XML
属性都须放在引号内,而且 XML 标记不可知重叠。强迫 Web
站点开发人员和统筹人员守有再度胜要求的语言规则来成千上万益处。

便宜有,用 XHTML
标记编写的页具有更胜的超越浏览器、跨设备与跨操作系统兼容性。如果以浏览器被开辟传统的
HTML 页,浏览器将想法地见该页。浏览器将准备展现该页,即使你的 HTML
一团糟。例如,Internet Explorer(以及 Firefox 和
Opera)能够好好地出示下面的 HTML 页。

<i><B>this is bold and italic</I> and this is bold </body></HTML>

Internet Explorer 会恰当地显示该页 — 即使该页缺少 <html>
<body> 开始标记,<b>
标记不具有相当的毕标记,并且开始和结束 <i>
标记的深浅写不一致。所有重点的浏览器还能够适应几乎任何 HTML
标记“混合物”,并且不顾一切地见一些情节。

浏览器的这种适应行为是生死攸关的,因为不同的浏览器(或雷同浏览器的将来版,或于不同操作系统及运行的相同浏览器)可能为不同方法呈现错乱的
HTML。实际上,对于最新版本的 Internet Explorer、Mozilla Firefox 同 Opera
而言,它们呈现无效 HTML
的法震惊地同。但是,一旦开背游戏规则,就不见面获任何保险。

不过,如果用 XHTML 的复严格的规则编写 Web 页,那么 Web
页就重新发出或以同样的道跟时浏览器协作,并且它们将连续和当前浏览器的前景初本子协作。对于任何企业而言,几乎都不富有对每个浏览器、在每个操作系统和每个设备及测试该
Web 站点的资源。如果依照 Web 标准编制页面,那么尽管不要有如此的资源。

图片 3回去页首

XHTML 标准的本

产生三单本子的 XHTML 1.0,它们分别对应三个本子的 HTML 4.01:

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.0 Transitional 包含 HTML 4.01 Transitional
中之整套标志和属性。引入 XHTML 1.0 Transitional 标准的目的是,使现有
HTML 设计人员以及开发人员无需经验极端多的痛苦就会迁徙至 XHTML。

XHTML 1.0 Strict 与 XHTML 1.0 Transitional
的不同之处在于,它当文档结构及代表形式中实行了扳平种植更加强烈的离别。与
XHTML 1.0 Transitional 不同,XHTML 1.0 Strict
强迫你使用层叠样式表来控制页的外观。

XHTML 1.0 Frameset 文档意在成用 <frameset>
标记将浏览器划分为多独框架的文档(XHTML 1.0 Transitional 和 Strict
页不克包含 <frameset> 标记)。

W3C 还揭示了 XHTML 1.1 以作推荐标准(2001 年 5 月 31 日)。XHTML 1.1
非常类似于 XHTML 1.0 Strict。二者的最主要分在,可以用附加模块扩展
XHTML 1.1 以便支持新元素。例如,可以转特定的 XHTML 1.1 页,该页还包含
MathML(数学符号语言)、SVG(可伸缩向量语言)或创办的自定义模块中的因素。

终极,W3C 正在制订 XHTML 2.0
推荐标准。因为 XHTML 2.0
仍然处在起草阶段,并且当前从未 Web
浏览器支持该标准,所以我们不以本文讨论其。

ASP.NET 2.0 框架和 Visual Studio .NET 2005 面向 XHTML 1.0
Transitional。该标准是 XHTML 标准中限制性最低的,而且她是暨现有 HTML
页最般配的正经。但是,还足以变更面向 XHTML 1.0 Strict 标准还是 XHTML 1.1
标准的 ASP.NET 2.0 页(请参考后面的“配置 XHTML 一致性”一省)。

(请小心,默认情况下,ASP.NET 框架的 Beta 2 本面向 XHTML 1.1。 ASP.NET
2.0 框架的尾声版将面向 XHTML 1.0 Transitional。)

图片 4回来页首

创建 XHTML 页

跟 HTML 页不同,XHTML 页必须是正统格式且使得之 XML 文档。XHTML 1.0
推荐标准的第 4 部分对 HTML 和 XHTML
之间的别进行了总。这里给出生成中 XHTML 页的绝关键要求的列表:

页必须包含有效的 XHTML DOCTYPE。

有效的 XHTML 页必须在其任何内容之前包含一个 XHTML DOCTYPE。当在 Visual Studio .NET 2005 或 Microsoft Visual Web Developer 中创建新的 ASP.NET 页时,该页中将自动包含 XHTML 1.0 Transitional 的正确的 DOCTYPE。下面列出四个标准的 XHTML DOCTYPE:

XHTML 1.0 Transitional

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

向页中添加 DOCTYPE 会影响该页在浏览器中的呈现方式。请参阅以下标题为“XHTML 和 DOCTYPE 切换”的一节。

根元素必须引用 XHTML 命名空间。

XHTML 页的开始 <html> 标记必须指定默认命名空间 http://www.w3.org/1999/xhtml。以下是 XHTML 1.0 Transitional 页的有效开始 <html> 标记的示例:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

所有元素和属性名都必须小写。

XML 区分大小写。因此,在 <p> 标记和 <P> 标记之间存在差异。只有前者是有效的 XHTML 段落标记。

属性值必须始终放在引号内。

确保始终将属性值放在双引号或单引号中。例如,以下是无效的 XHTML。

<a href=SomePage.aspx>Next</a>

在该示例中,href 属性缺少引号。以下代码是有效的 XHTML。

<a href=SomePage.aspx>Next</a>

您可以通过选择菜单选项 ToolsOptionsFormat,将 Visual Studio .NET 2005 和 Visual Web Developer 配置为自动将属性值放在引号内。

所有具有开始标记的非空元素都必须具有匹配的结束标记。

如果具有开始 <p> 标记,则必须包含结束 </p> 标记来标记段落的结束。对于根本不包含任何内容的标记,例如 <br> 标记,可同时提供开始和结束标记 <br></br>,也可以使用空元素简写

为使 XHTML 页与现有的 HTML 浏览器向后兼容,需要小心处理打开和关闭标记的方式。例如,现有 HTML 浏览器倾向于将开始和结束 <br> </br> 标记错误地解释为两个 <br> 元素。因此,您应当使用空元素简写</br>

此外,除非您小心地在结束斜杠之前添加一个空格,否则现有 HTML 浏览器在处理空元素简写时会出现问题。因此,应当使用 <BR< b>[space] />(而不是)向页中添加 <br> 元素。

不得存在重叠标记。

可以使标记嵌套,但是不允许使标记重叠。例如,以下 XHTML 是有效的。

<b><i>This is bold and italic</i></b>

但是,以下 XHTML 是无效的。

<i><b>This is bold and italic</i></b>

不得存在属性最简化。

所有属性都必须具有值,即使该值看起来有一点儿奇怪。例如,标记<input type="checkbox" checked />是无效的 XHTML,因为 checked 属性不具有值。该标记应当写成<input type="checkbox" checked />

必须使用 id 属性而不是 name 属性。

在 HTML 中,可以使用 name 属性来标识 <a><applet><form><frame><iframe><img><map> 元素。尽管可以使用 name 属性生成 XHTML 1.0 Transitional 页,但在 XHTML 1.0 Strict 和 XHTML 1.1 标准中已经将 name 属性删除。您应当改而使用 id 属性来标识这些元素。

必须将 <script><style> 元素的内容包装到 CDATA 节中。

如果在脚本或样式表中使用特殊字符(例如 < 或 &)或实体引用(例如 <&),则需要将脚本或样式表的内容标记为 CDATA(字符数据)节,如下所示。

<script type="text/javascript">
<![CDATA[

function isLess(a, b) {
  if (a < b)
    return true;
}

]]>
</script>

使用 CDATA 节并非对所有浏览器都有效。例如,Internet Explorer 会将 <script> 标记中的 CDATA 节视为语法错误。可以通过添加 JavaScript 注释避免该问题,如下所示。

<script type="text/javascript">
/* <![CDATA[ */

function isLess(a, b) {
  if (a < b)
    return true;
}

/* ]]> */
</script>

JavaScript 使用 /**/ 来标志注释的开始和结束。因此,CDATA 节对 JavaScript 隐藏,但不对分析该页的浏览器隐藏。总之,较好的做法是将样式规则和脚本放在外部文件中,而从 XHTML 页中引用这些文件。通过使用外部样式表和脚本,能够避免上述所有问题。

图片 5返页首

XHTML 和 ASP.NET 控件

默认情况下,ASP.NET 2.0 框架中带有的每个 ASP.NET 控件都展现有效的
XHTML。换句话说,向页中上加 ASP.NET
控件时,您无需完成另外异样工作来转有效之 XHTML
标记。例如,如果你为页中补充加 GridView 控件,则 GridView
控件会生成有效之 XHTML 标记。

此地用澄清三独要点。首先,包含 ASP.NET 控件的页的源代码不见面由此 XHTML
验证。验证 ASP.NET 页时,需要验证页呈现的情节(在 Internet Explorer
中挑选 View Source 时看到底拥有情节),而未是该页的源代码。

下,在开创 ASP.NET 页时,没有其他工作阻止你编写无效的
XHTML。您当好望 ASP.NET
页中添加希望增长的别样标记。例如,如果向页中上加 标记,那么页将不见面经过
XHTML 1.0 Strict 验证。

末,当您运于定义 ASP.NET 控件时,没有其余保管。如果请第三方
ASP.NET 控件(例如,一个甲级的提高 DataGrid
控件),则该控件可能会见呈现有效的
XHTML,但也可能无会见。保证不作错误是控件供应商之权责。

图片 6返回页首

验证 XHTML 页

Visual Studio .NET 2005 和 Visual Web Developer 会在变化无常 Web
页的进程中自行验证该页的卓有成效。通过以违反规则之情节下补充加绿色或红色波浪线,在“Source”视图中指出验证问题。红色波浪线对应于诸如缺少了标记之类的印证错误。绿色波浪线对诺吃验证警告,例如,使用了就否决的记。

以鼠标悬停在其他波浪线上方,可查包含验证错误或警示信息的家伙提示(参见图
1)。或者,还可在 Error List
窗口中查看验证错误或警示的列表(依次选择 ViewOther
Windows
Error List)。

图片 7

1. 验证 XHTML 文档

默认情况下,Visual Studio .NET 2005 和 Visual Web Developer 被安排为对
Internet Explorer 6.0 架构验证页。如果要本着 XHTML
架构验证页,则需要由工具栏的下拉列表中摘 XHTML
架构中之一个,或相继选择 ToolsOptionsValidation
来选择对象架构。

作为代表方式,还足以经应用
W3C验证服务来说明 ASP.NET 页。W3C
验证服务如你能透过提供 URL 或经达成载 XHTML 页的源代码来验证页。

图片 8归来页首

XHTML 和 DOCTYPE 切换

也 Web页指定 DOCTYPE 会影响浏览器上现页的法门。Internet
Explorer、Mozilla Firefox 同 Opera 全都支持一种植名叫也“DOCTYPE
切换”(也受“DOCTYPE 嗅探”)的效应。

引入 DOCTYPE 切换的目的是若浏览器会正确地表现符合标准的 Web
站点与旧式 Web 站点。大多数 Web 站点为出为表现 HTML 页而休是 XHTML
页。浏览器通过判断是否在 DOCTYPE 来规定何时应该以规范来上现页。

Internet Explorer 6+ 支持少数栽表现模式,分别叫 Quirks 模式与 Standards
模式。当 Internet Explorer 呈现包含有效 XHTML(或 HTML 4.0)DOCTYPE
的页时,它会盖 Standards 模式表现该页;否则,它会因
Quirks模式表现该页(有关详细信息,请参阅 CSS Enhancements in Internet
Explorer
6)。

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer
相同之片种植表现模式:Quirks 和 Standards(有关详细信息,请参阅
http://www.opera.com/docs/specs/doctype/)。

Mozilla Firefox 1+ 支持三栽表现模式:Quirks 模式、Almost Standards
模式和 Standards 模式。Firefox 的 Almost Standards 模式对应于 Internet
Explorer 和 Opera 的 Standards 模式。当页含有效之 XHTML 1.0
Transitional DOCTYPE(并且该页被分配为 text/html MIME 类型)时,Firefox
会以 Almost Standards 模式表现该页。当页含 XHTML 1.0 Strict 或 XHTML
1.1 DOCTYPE(或者该页被分配也 XML MIME 类型)时,该页将以 Standards
模式表现(有关详细信息,请参阅
http://www.mozilla.org/docs/web-developer/quirks/doctypes.html)。

得经过临时向页中上加以下客户端脚本(该脚本在新式版本的 Internet
Explorer、Firefox 和 Opera 中中)确定浏览器的即展现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>

君需关爱浏览器的变现模式,因为其见面影响将层叠样式表应用于该页的计。如果将现有
HTML 页转换为 XHTML
页,那么以浏览器中开辟她常,它们或者拘留起挺差。

比如,Internet Explorer
以不同方式计算页元素的深浅,这取决于呈现模式(它采用不同的 CSS Box
Model)。在 Quirks
模式下,元素的肥瘦是通过以元素的情、内边距、边框以及边距相加而计量得到的。在
Standards 模式下,元素的增幅是就考虑要素内容之升幅而计量得到的。

诸如,考虑下列两单 <div> 标记。

<div style="width:400px;border:solid 1px black"> 
    First Box 
    </div> 
    <div style="width:400px;border:solid 1px black;padding:10px"> 
    Second Box 
    </div>

除外次单 <div> 元素的叠加内边距以外,这点儿独 <div>
元素是同一的。在 Quirks 模式(参见图 2)下,这有限只 <div>
元素看起大小一样,因为以测算第二个 <div>
元素的升幅时考虑了其的叠加内边距(这简单个元素的到底增长率为 400px)。在
Standards 模式(参见图 3)下,第二只 <div>
元素看起而较第一个 <div>
元素宽,因为于盘算元素的大幅度时无考虑内边距(这半独要素的究竟幅度大于
400px)。

图片 9

2. Quirks 模式

图片 10

3. Standards 模式

这只是 Quirks 模式下浏览器差异的一个演示。在 Quirks
模式下,每个浏览器都为一定差之法门实现
W3C层叠样式表标准。有关切换至 Standards
模式之一个妙处在受,它强制几乎拥有现代浏览器因为稀接近之措施(不完全相同,但若是好得多)解释
W3C标准。

设若欲 Web 页以同一方式出现在有浏览器被,那么通过包含 XHTML 1.0
Transitional DOCTYPE 触发 Standards 模式(在 Internet Explorer 和 Opera
中)和 Almost Standards 模式(在 Firefox
中)是一个好主意。幸运的凡,默认情况下,Visual Studio .NET 2005 和
Visual Web Developer 自动将欠 DOCTYPE 添加到每个新的 ASP.NET 页中。

图片 11回页首

XHTML 和 MIME 类型

当 Web 浏览器从 Web 服务器请求页时,Web 服务器会为该页分配一定的 MIME
类型(也称为 Content 类型)。例如,HTML 页被分配为 text/html MIME
类型,GIF 图像被分配也 image/gif MIME 类型,而 Microsoft Word
文档被分配也 application/msword MIME 类型。

浏览器采用 MIME 类型来规定如何处理页(或任何资源)。例如,如果浏览器从
Web 服务器获得一个负有可识别图像 MIME
类型的公文,则浏览器尝试用该公文说明并呈现为图像。如果浏览器获得一个具
application/msword MIME 类型的文书,则该浏览器可能自动打开 Microsoft
Word 以展示该文档(这里的宜行为在浏览器及其配置方式)。

W3C 为 XHTML 文档引入了一个 MIME 类型。这无异新的 MIME 类型是
application/xhtml+xml。W3C 建议乃当供 XHTML 文档时使用
application/xhtml+xml MIME 类型,因为 XHTML 页应该以比旧式 HTML
页更严苛的主意开展诠释。

通过以页指令中含 ContentType 属性,为 ASP.NET 页分配一定的 MIME
类型。例如,在 ASP.NET 页的顶部包含以下指令会造成为该页分配
application/xhtml+xml 类型。

<%@ ContentType="application/xhtml+xml" %>

W3C 的推介标准产生一个暴问题:并非所有浏览器都能认得别
application/xhtml+xml。特别需要指出的凡,Internet
Explorer(有史以来最为盛行的 Web 浏览器)不克认识别 application/xhtml+xml
MIME 类型。因此,使用推荐的 application/xhtml+xml MIME 类型提供 XHTML
页不是一个管用的选取。

生三种植缓解拖欠问题之方。可以应用 text/html MIME 类型来提供 XHTML
页,或者以 application/xml(或 text/xml)MIME 类型来供 XHTML
页,也堪运用内容商方式。让咱本着上述每个选择进行追究。

首先单选项 — 以 text/html 类型提供页 —
是极爱的取舍。默认情况下,ASP.NET 页被分配也该 MIME
类型。更好的做法是,按照 W3C 的提议,在通往现有的 HTML
浏览器提供页时使用这同一抉择(请参阅
http://www.w3.org/TR/xhtml-media-types/)。如果创建的凡 XHTML 1.0
Transitional 页,并且 Web 应用程序的基本点受众使用未可知领悟
application/xhtml+xml MIME 类型的浏览器,那么为 text/html
类型提供页似乎很睿智。毕竟,引入 XHTML 1.0 Transitional
标准的目的是只要开发人员能够更为好地以长存的 HTML 页迁移到 XHTML。

立刻等同看好是起争议的。例如,Ian Hickson 看,绝不应该因 text/html
类型提供 XHTML 页,因为这样会招随便的、不规范的 XHTML 页(请参阅
http://hixie.ch/advocacy/xhtml)。他建议作者们连续坚持运用 HTML
4.0,直到再也多之浏览器完全支持 XHTML 标准了。

亚个挑选是利用 application/xml 或 text/xml MIME 类型,以 XML 类型提供
XHTML 页。在朝 Internet Explorer 提供 XML 文档时,该文档会作为 XML
文档进行剖析并显现到浏览器中。(该文档由 document.XMLDocument 对象公开的
XML DOM 表示。)

因为 XML 类型提供 XHTML 文档的长处是,XHTML 文档具有的另外问题且见面让
Internet Explorer 的 XML
分析器捕获。例如,如果文档包含重叠标记,或者如没有以性能的值包装至引号内,则免见面表现该文档,并且会显示错误信息(参见图
4)。XHTML
纯粹主义者认为该表现是相同起善事,因为她可以防范你编写格式错误的 XHTML。

图片 12

4. Internet Explorer 中显示 XML

该措施的问题是:默认情况下,Internet Explorer 呈现 XML
文档的源代码。因此,如果坐 XML 类型提供 XHTML 文档,则 Web
站点访问者将张 XHTML 文档的源代码,而无是预料的呈现输出。W3C
推荐了一个据此来化解该问题的“窍门”(请参阅
http://www.w3.org/MarkUp/2004/xhtml-faq\#ie):如果经过采取
XSLT 转换将 XHTML 文档转换为 HTML,那么文档将分析为 XML 并展示也 HTML。

诸如,清单 1 中之 ASP.NET 页将以 XML 文档的花样提供,但吃转移为 HTML
文档。结果页会正确地亮在 Internet Explorer、Opera 和 Firefox 中。

清单 1. XMLPage.aspx

<%@ Page Language="VB" ContentType="text/xml" %> 
<?xml-stylesheet type="text/xsl" href="copy.xsl"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>My Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:TextBox ID="txtFirstName" runat="server" /> 
    </div> 
    </form> 
</body> 
</html>

页指令会促成该页以 text/xml 类型呈现。清单中之老二行引用了一个号称吧
copy.xsl 的 XSLT
样式表,它会对眼前文档执行标识转换。换句话说,除了将原始XML
文档中之所有因素复制到新的 HTML
文档中以外,它从没有召开任何事情。copy.xsl 的源代码包含在清单 2 中。

清单 2. Copy.xsl

<stylesheet version="1.0" 
     xmlns="http://www.w3.org/1999/XSL/Transform"> 
  <template match="/"> 
    <copy-of select="."/> 
  </template> 
</stylesheet>

该解决方案是实惠之,但它们若未是雅美好。当分析 XML
文档时,的确获得了附加的验证步骤。但是,如果以 Visual Studio .NET 2005
或 Visual Web Developer 中生成 ASP.NET
页,那么开环境会在“Source”视图中实施同一之征。最后,Internet
Explorer 将吸收和于其发送 text/html 类型文档时一致之文档。

其三只挑选 — 内容商,将 W3C
推荐标准的精神及极端要命程度之浏览器兼容性最佳地组合在一起(请参阅
http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation)。当以内容商时,会以不同之
MIME 类型向不同的浏览器提供 ASP.NET 页。如果浏览器声称其支持
XHTML,则向其提供 XHTML 类型的页;否则,以 text/html MIME
类型向该浏览器提供页。

清单 3 中之 Global.asax 包含向不同的浏览器提供不同 MIME
类型页所要的代码。如果用拖欠文件上加到 Web 项目蒙,则每个 ASP.NET 页的
MIME 类型都见面趁每个请求而改。将页提供给 Firefox 或 Opera 时,该页以
application/xhtml+xml 类型提供。另一方面,Internet Explorer 6 会接受
text/html 页。

清单 3. Global.asax

<script runat="server"> 
    Sub Application_PreSendRequestHeaders(ByVal s As Object, _ 
      ByVal e As EventArgs) 
        If Array.IndexOf(Request.AcceptTypes, _ 
          "application/xhtml+xml") > -1 Then 
            Response.ContentType = "application/xhtml+xml" 
        End If 
    End Sub 
</script>

图片 13归来页首

配置 XHTML 一致性

ASP.NET 2.0 框架的默认行为是表现针对 XHTML 1.0 Transitional
能够通过验证的页。生成 Web
站点的大部开发人员都盼望面向该专业,因为其是和现有 HTML
页最为相配的正规化。但是,在少数情况下,该专业或者来得无比松散或者太严峻。

像,如果你称为伟大,那尔或许要生成 XHTML 1.0 Strict(甚至 XHTML
1.1)的 Web 站点。毕竟,XHTML 1.0 Transitional
标准的目标是充当通往这些还具备限制性标准的跳板。默认情况下,因为 ASP.NET
2.0 框架面向 XHTML 1.0 Transitional,所以某些 ASP.NET 控件会显现与 XHTML
1.0 Strict 或 XHTML 1.1 不配合的性质。

又,有时你还可能发现 XHTML 1.0 Transitional
标准的限制性过大。Microsoft 必须对现有 ASP.NET 1.1
控件进行多桩改成才会适合 XHTML 1.0 Transitional
标准。其中有的改观或者会见毁现有的 ASP.NET 1.1 Web 站点。

以满足每个人之求,Microsoft 创建了一个号称吧 xhtmlConformance
的新布局选,您可以于 Web
站点的布文件被设置该选项。新的安排选使你能够指定 Web 页的 XHTML
一致性的级别。它的情如下所示。

<configuration> 
<system.web> 
    <xhtmlConformance  
        mode="transitional" /> 
</system.web> 
</configuration>

默认情况下,xhtmlConformance 设置也值
transitional。但是,还好用拖欠选择设置也值 strict
legacy

如果将 xhtmlConformance 选项设置为 strict,那么规范的 ASP.NET
控件将不见面重新呈现某些性能。例如,ASP.NET <form> 控件将不再呈现
name 属性。除非 ASP.NET 页包含(不符合标准的)客户端脚本,否则由
transitional 模式切换到 strict 模式时,不见面注意到任何变化。

如果将 xhtmlConformance 选项设置为
legacy,那么对某些因素以及属性(但切莫是总体),ASP.NET 框架将还原也
ASP.NET 1.1 呈现行为。在这种气象下,ASP.NET 框架将展现不跟另外 XHTML
标准相当的内容,并且页将不再通过 XHTML 标准认证。例如,在 legacy
模式下,呈现 <br> 标记时不见面呈现她需要的 XHTML 结束斜杠
(<br />)。只有当将现有 ASP.NET 1.1 应用程序迁移到 ASP.NET 2.0
的进程遭到碰到问题时常,将 xhtmlConformance 设置为 legacy
模式才是发含义之。

图片 14归来页首

生成可访问的 ASP.NET Web 站点

守公共 Web
标准的补益是:它们而您为尽可能少地干活,使尽量多的人口能够看您的 Web
页。需要指出的凡,可访问性标准要你会转移可为残疾人士又易看的 Web
站点。

无异于如果强调的是,Web
站点用户中的一定部分装有这样要那样的残疾。请试想一下你自己的家庭成员,并且考虑他们面临产生小人会面在和
Web
页交互时相遇麻烦。我就是出一部分达了岁数的亲属是盲人或者去了动作协调性。我猜,本文的很多读者为起高达了年龄的双亲还是祖父母,他们当动大多数
Web 站点时见面遇见重重不便。

生成可访问的 Web
站点有成百上千尽量的理由:财务、道德、法律等等。但是,我们拿重要讨论法律动机。在美国,按照康复法案
(Rehabilitation Act) 508 节的要求,联邦当局机关开发之另 Web
站点都要要残疾人士可拜。这同一法规适用于联邦当局机关以及和联邦当局机构签订合同的合作社(请参阅
http://www.section508.gov)。

其他国家/地区为保有类似的渴求。例如,在加拿大,Treasury Board Common
Look and Feel Standards 要求联邦当局机关开发的 Web
站点都要要残疾人士得以拜。在澳大利亚,Disability Discrimination Act
要求澳大利亚服务器上承前启后的所有 Web 站点(无论其是否是政府之 Web
站点)都要要残疾人士可以拜。(有关而访问性法律之详细信息,请参阅
http://www.w3.org/WAI/Policy。)

当自身懂的 Web 站点开发人员中,没有任何人会有意识转移残疾人士无法访问的
Web 站点。问题在于大多数开发人员都非熟识各种可访问性标准。

每当本文的下列各节中,将概述以下简单只最好要的但访问性标准:WCAG 和 508
节标准。您还将修如何通过采用 ASP.NET 控件生成可访问的 Web
页。最后,您将学怎么“验证”Web 页的可是访问性。

图片 15归来页首

然访问性标准

差一点拥有可访问性标准与法规还源自 W3C Web Content Accessibility 1.0
Guidelines (WCAG)。这些轨道是由于 World Wide Web Consortium 在 1999 年 5
月 5 日作为推荐标准首蹩脚公布之(请参阅 http://www.w3.org/TR/WCAG10)。

WCAG 包含 14
长规则。每一样漫长则而饱含一个还是多个更表明该则的检查点。每个检查点都按照
1 到 3 的先级进行独家。为而这些规则的实践变得更便于,W3C
已经昭示了同一组文档,其中含关于如何遵守这些规则的艺(请参阅
http://www.w3.org/TR/WCAG10-TECHS/)。

而可要求不同水平地遵守 WCAG 准则。如果要求 Web 站点满足所有优先级 1
的检查点,则您可展示有 Conformance Level A 的标识语。当 Web
站点满足所有优先级 1 和 2 检查点时,该 Web 站点可来得 Conformance
Level Double-A 标识语。最后,满足所有检查点的 Web 站点可展示
Conformance Level Triple-A 标识语(请参阅
http://www.w3.org/WAI/WCAG1-Conformance.html)。

508 节准则源自 WCAG
准则。在美国,联邦当局单位(以及和联邦当局机关签订合同的店)需要针对就组则与最高水准之关注,因为这些轨道具有法律效力。您可以在
508 节 Web 站点朗诵到 508 节准则的完全文本。

ASP.NET 2.0 框架旨在使你能够满足所有 WCAG 优先级 1 暨预级 2
的检查点以及所有 508 节准则。这些规则下起来特别严厉。每个使用 ASP.NET
2.0 框架的开发人员都需检讨以及测试每个 ASP.NET
控件的不过访问性。而且,每个开发人员都应该在桌面上设置一个屏幕阅读器,以便对这些规则测试页。

图片 16返页首

ASP.NET 2.0 中的但是访问性改进

正文重点谈论 ASP.NET 2.0
框架中六单方面的而访问性改进。在下列各节中,您将上怎么样用 ASP.NET
控件来展示可看的图像、表单、导航、数据和
XHTML。在本节结尾,我们尚用考虑同当 ASP.NET
页中运用客户端脚论有关的不过访问性问题。

图片 17返页首

创造而看的图像

乃不应该做如此的假设:与 Web 站点互相的每个人犹好实际看到您的 Web
站点。如果有人是盲人或者眼神不足,那么这个人哪怕可能要用屏幕阅读器或盲文显示器来拜会您的
Web 页。屏幕阅读器通过行使语音合成器来朗读 Web
页中的文件。盲文显示器将页中之文书转换为盲文表示。

对于无法见到她的丁而言,图像及其它非文本页元素(例如,Java、Shockwave
和 Flash 内容)都是从未就此底。如果你希望如果 Web
站点对于盲人或弱视的人头是不过看的,那么用为 Web
页中的兼具非文本内容提供文本等学内容。

Web 页中的每个图像都应有包含 alt 属性。alt
属性用来代表出于屏幕阅读器或另辅助性设备看的轮换文本。以下是 alt
属性的运用方法。

<img src="Products23.gif" alt="Image of Products" />

alt
属性应当涵盖图像的征。在另外情况下,它还不应只是包含该图像的文书称。alt
属性的目的是吧盲童和眼神正常的人数传递相同的图像信息。写入 alt
属性的价值经常要求针对拖欠因素的含义进行人工解释。因此,不能自动完成创建 alt
属性的经过。

每个显示图像的 ASP.NET
控件都富含用于为该图像提供替换文本的方法。例如,ASP.NET 图像控件包含
AlternateText 属性。如果利用 Image 控件,则用将
AlternateText 属性设置为来义的价。

<asp:Image ImageUrl="Products23.gif" AlternateText="Image of Products" Runat="Server" />

如若有图像只是当作设计因素,则应当以其的 alt
属性设置为空字符串。如果图像不持有用传达的产生因此信息,那么尽管无理由而屏幕阅读器的页解说易得乱七八糟。

<img src="PageDivider.gif" alt="图片 18" />

以 ASP.NET 2.0 框架中,必须用非常规措施,使你能够上现空的
AlternateText。如果用空文本分配受 ASP.NET 控件的性,则 ASP.NET
控件将根本不见面展现该属性。例如,假而将以下 ASP.NET Image
控件添加至页中。

<asp:Image ImageUrl="PageDivider.gif" AlternateText="" Runat="Server" />

当这种气象下,会展现以下标记。

<img src="PageDivider.gif" style="border-width:0px;" />

请注意,alt 属性消失了。这是具 ASP.NET
控件属性的默认行为。当没有啊属性分配值时,该属性不见面呈现出。遗憾之是,在这种场面下,我们实在希望吗
alt 属性呈现空值。

为缓解该问题,ASP.NET 2.0 框架中引入了以下新属性,使你能用 Image
控件显示空替换文本:GenerateEmptyAlternateText 属性。

<asp:Image ImageUrl="PageDivider.gif" GenerateEmptyAlternateText="true" Runat="Server" />

假设使用 GenerateEmptyAlternateText 属性,则会对地表现 alt=””
属性。

当图像表示有真正复杂的事物(例如,组织结构图)时,不可知利用 alt
属性来提供替换文本说明。当用提供较丰富之图像含义说明时,需要动用
longdesc 属性。

longdesc 属性接受相对还是切 URL 作为它们的值。该 URL
应当链接到含有图像内容的文件说明的页。以下示例说明如何用该属性和
<img> 标记配合使用。

<img src="OrgChart.gif" alt="Company Organization Chart" longdesc="/OrgChartDescription.aspx" />

ASP.NET Image 控件包含一个称呼吧 DescriptionUrl 的性,它对应于
HTML longdesc 属性。以下示例说明如何利用该属性。

<asp:Image ImageUrl="OrgChart.gif" 
AlternateText="Company Organization Chart" DescriptionUrl="/OrgChartDescription.aspx" Runat="server" />

图片 19回页首

创立而看的表单

Web
页表单可能为视力低下的人和短斤缺两动作协调性的人物带来问题。如果由此屏幕阅读器访问
Web 页表单,那么可能非常不便将表明单域与那相应的签相关联。例如,假而 Web
页包含以下表单。

<table> 
    <tr> 
        <td>First Name:</td> 
        <td><input name="txtFirstName" /></td> 
    </tr> 
    <tr> 
        <td>Last Name:</td> 
        <td><input name="txtLastName" /></td> 
    </tr> 
    </table>

欠表单显示一个口之名和姓的输入域。在这种气象下,因为该表单显示在表中,所以屏幕阅读器用户或非常不便用正确的标签及科学的发明单域相关联。HTML
4.0
中引入以下新标志,以使您能够用说明单域标签及发明单域相关联:<label>
标记。下面说明什么使 <label> 标记编写前面的表单。

<table> 
    <tr> 
        <td><label for="txtFirstName">First Name:</label></td> 
        <td><input name="txtFirstName" id="txtFirstName" /></td> 
    </tr> 
    <tr> 
        <td><label for="txtLastName">Last Name:</label></td> 
        <td><input name="txtLastName" id="txtLastName" /></td> 
    </tr> 
    </table>

<label>
标记将表单域标签以及该相应的说明单域显式关联起来。请小心,<input>
域包含 id 属性,这是以 for 属性的值必须是输入域的 id
属性而休是 name 属性。

通常,ASP.NET Label 控件生成 <span>
标记。但是,如果你当声明 ASP.NET Label 控件时供了
AssociatedControlId 属性,则该控件会呈现 <label>
标记。下面说明什么用 ASP.NET LabelTextBox
控件生成可访问的表单。

<table> 
    <tr> 
        <td><asp:Label AssociatedControlID="txtFirstName"  
          runat="server">First Name:</asp:Label></td> 
        <td><asp:TextBox ID="txtFirstName" runat="server" /></td> 
    </tr> 
    <tr> 
        <td><asp:Label AssociatedControlID="txtLastName"  
          runat="server">Last Name:</asp:Label></td> 
        <td><asp:TextBox ID="txtLastName" runat="server" /></td> 
    </tr> 
    </table>

当啊 ASP.NET 控件提供标签时,应当用 ASP.NET Label 控件,而不是
HTML <label> 标记。在将一个 ID 分配受 ASP.NET 控件(如
TextBox 控件)时,呈现到浏览器被的 ID 可能与公分配为该控件的 ID
不同。因此,如果应用 <label> 标记,则 <label>
标记中之 ID 可能同所表现的 TextBox 控件的 ID
不兼容。另一方面,如果用 ASP.NET Label 控件,则无需顾虑该问题。

ASP.NET CheckBoxRadioButtonCheckBoxList
RadioButtonList 控件自动呈现 <label>
标记。在使用这些控件时,请小心用 Text
属性来号控件的文本。您不应当执行以下操作。

<asp:CheckBox Runat="Server" /> Include Gift Wrap

反倒,请执行以下操作。

<asp:CheckBox Text="Include Gift Wrap" Runat="Server" />

对于通过屏幕阅读器及 Web
页进行交互的用户,大型表单也恐怕出问题。在倾听大型表单的始末时,很容易忘在聆听该表单的哪个部分。在展示大型表单时,将拖欠表单划分为多个小片是一个吓主意。您得由此动
<fieldset>
标记将单个表单划分为多个组成部分。以下示例说明什么运用该标记。

<form id="form1" runat="server"> 
    <div> 
    <fieldset> 
    <legend>Contact Information</legend> 
    ... form fields 
    </fieldset> 
    <fieldset> 
    <legend>Payment Information</legend> 
    ... form fields 
    </fieldset> 
    </div> 
    </form>

欠表单通过 <fieldset> 标记划分为有限独子表单。<legend>
标记用来号这些子表单的用途。在 Internet Explorer、Firefox 和 Opera
中形时,这些子表单被限框直观地划分为多单独立的区域(参见图
5)。但是,重要的凡如铭记,<fieldset>
标记的主要用途是实现可访问性。如果不喜欢 <fieldset>
标记的可视化外观,那么可经体制表规则改该标记的外观,或通过动用 CSS
displayvisibility 属性将该标记了隐形。

图片 20

5.

标记

眼神低下的人并无是 Web 页用户蒙受绝无仅有可能当 Web
表单难以访问的食指。那些缺乏动作协调性的用户也会以和表单交互时遇到困难。

以变 Web 表单时,为每个表单域包含 accesskeytabindex
属性总是一个好主意。accesskey
属性使无法利用鼠标的用户会一直导航及另外说明单域。tabindex
属性使你能控制表单域的 Tab
键顺序。对于那些要经过键盘(或如键盘一样操作的辅助性设备)与页面进行互动的用户而言,这点儿单特性可若该生活变得更便民一些。

下面是一个还要使 accesskeytabindex 属性的示范表单。

<asp:Label  
        AssociatedControlID="txtFirstName"  
        AccessKey="f" 
        runat="server"><u>F</u>irst Name</asp:Label> 
    <asp:TextBox 
        id="txtFirstName" 
        TabIndex="1"  
        Runat="server" /> 
    <br /> 
    <asp:Label  
        AssociatedControlID="txtLastName"  
        AccessKey="l" 
        runat="server"><u>L</u>ast Name</asp:Label> 
    <asp:TextBox 
        id="txtLastName" 
        TabIndex="2"  
        Runat="server" />

tabindex 属性用来控制表单域的 Tab 键顺序。因为第一个表单域具有的
tabindex 值为 1,所以当用户率先浅仍 Tab
键时,该页中任何出现于拖欠表单之前的别样因素还为超越了。

在采用 Internet Explorer 或 Firefox 时,按 ALT+F 可机关将问题移至
First Name 文本框。如果照 ALT+L,则典型会自行转换至 Last Name
文本框。在用 Opera 时,必须首先按 SHIFT+ESC,然后才能够选访问键。

请注意,First NameLast Name
标签的第一只假名都带有下划线。通过为字母添加下划线,可以吧 Web
站点的用户提供访问键的直观表示。这是于 Microsoft Windows
应用程序中标记访问键的科班措施。但是,还发生另以表单中指示访问键的推介方式(请参阅
http://www.cs.tut.fi/~jkorpela/forms/accesskey.html)。

采用下划线指示访问键的一个问题是无力回天为按钮中之字符添加下划线,并且越链接已包含下划线。例如,下面的
Button 控件并无像你预期和希的那么行事。

<asp:Button 
        Text="<u>S</u>ubmit" 
        Runat="server" />

每当呈现该 ASP.NET Button 控件时,会显得实际文本
S**ubmit,而无是亮带产划线的<u>S</u>字符。ASP.NETButton 控件呈现 HTML<input type=”submit”>
标记,但遗憾之是,
<input type=”submit”>**标记不支持下划线。

您可能当可由此行使样式规则解决该问题。遗憾的凡,当前无在以下这种过浏览器兼容方法:即,使用层叠样式表为
<input type=”submit”>记中之单个字符加下划线。

假如你愿意以页中采取客户端 JavaScript,则可解决该问题。清单 4
中之页含的 JavaScript 根据是否按照下 ALT
键而显或躲藏所有访问键。当随下 ALT
键时,会弹有一个绳,显示看键键盘组合键(参见图 6)。该脚本于 Internet
Explorer 和 Firefox 中还能健康干活(Opera 不动 ALT
键来摘取访问键)。

图片 21

6. AccessKeys.aspx

清单 4. AccessKeys.aspx

<%@ Page Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server"> 
    <title>Contact Form</title> 
<style type="text/css"> 
    .accessKey  
    { 
        display:none; 
        position:absolute; 
        z-index:5000; 
        padding:3px; 
        border:solid 1px black; 
        background-color: #ffffe0 
    } 
</style> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
    window.onload = function()  
        { 
            document.onkeydown = displayAccessKeys; 
        } 
    function displayAccessKeys(e) 
    { 
        if (!e) e = window.event; 
        if (e.keyCode == 18) 
        { 
            toggleAccessKeys(); 
            document.onkeydown = null; 
            document.onkeyup = hideAccessKeys; 
        } 
    } 
    function hideAccessKeys(e) 
    { 
        if (!e) e = window.event; 
        if (e.keyCode == 18) 
        { 
            toggleAccessKeys(); 
            document.onkeyup = null; 
            document.onkeydown = displayAccessKeys; 
        } 
    } 
    function toggleAccessKeys() 
    { 
        var spans = document.getElementsByTagName('span'); 
        for (var k=0;k */ 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <table> 
    <tr> 
        <td> 
            <asp:Label  
                ID="lblFirstName" 
                AssociatedControlID="txtFirstName"  
                AccessKey="f" 
                runat="server">First Name</asp:Label> 
        </td> 
        <td> 
            <asp:TextBox ID="txtFirstName" runat="server" /> 
            access key is f 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <asp:Label  
                ID="lblLastName"  
                AssociatedControlID="txtLastName" 
                AccessKey="l"  
                runat="server">Last Name:</asp:Label> 
        </td> 
        <td> 
            <asp:TextBox ID="txtLastName" runat="server" /> 
            access key is l 
        </td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
        <asp:Button Text="Submit" runat="server" /> 
        access key is s 
        </td> 
    </tr> 
    </table> 
    </div> 
    </form> 
</body> 
</html>

清单 4 中之页含样式表和客户端 JavaScript。样式表隐藏了由于 accessKey
类标识的其余 <span> 标记的情节。JavaScript 会在 ALT
键已经被依下经常进行检测,并且亮 <span> 标记的始末。

告留意,即使 Web 浏览器被禁用了样式表和
JavaScript,该页也克健康干活。在这种情况下,将接连显示访问键帮助(参见图
7)。

图片 22

7. AccessKeys.aspx 相当降格

图片 23回去页首

创办而看的导航

我讨厌拨打客户支持电话并论活动系统的指令操作。当电脑语音系统就此那低沉单调的声音发表每个选项时,我发温馨正值逐年地更换总。如果按错了一个键,那么您便会永远迷失在机关计算机体系充分不可测的迷宫中。

遗憾之是,如果你被迫采取屏幕阅读器,那么这正是你在访几乎任何 Web
页时的体会。大多数 Web 站点都以各级一样页中寓一个导航栏,其中蕴蓄对 Web
站点各个组成部分的链接列表。如果用屏幕阅读器,则当你打开页时,都得逐项聆听这些导航链接中的逐一链接。

通过对导航栏进行同样远在简易的改动,就可判增强 Web
页的但是访问性。只待补充加一个因此来跳了所有导航链接的法门。可以就此“跳了导航”链接完成该工作。

例如,CNN Web 站点涵盖一个导航栏,其中列有了 CNN
Web 站点的例外部分(World、U.S.、Weather 等等)。但是,CNN Web
站点的筹划人员已开了平等码聪明之业务。如果查看页的源代码,则您将注意到导航栏上会产出以下链接。

<a HREF="#ContentArea" TARGET="_self">
<img src="http://i.cnn.net/cnn.gif" alt="Click here to skip to main content." 
width="10" height="1" border="0" align="right"></a>

当查看 CNN Web
站点的主页时,您绝对免会见盼该链接。该链接中带有的图像是一律轴透明底单像素图像。但是,如果你用屏幕阅读器访问该页,则会看与该图像相关联的轮换文本。盲人可以选取超了有导航链接,并一直换至
Web 页的重中之重内容区域(这跟以自动语音系统受到按照 0
并一直导航及话务员等学)。

“跳了导航”链接已给合并到多只专业 ASP.NET 2.0
控件被。特别需要指出的凡,MenuTreeViewSiteMapPathWizard
CreateUserWizard 控件全都支持“跳了导航”链接。

像,清单 5 中之页含 ASP.NET Menu 控件。该控件用来展示指为该 Web
站点中其他页的链接列表。

清单 5. SiteMenu.aspx

<%@ Page Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Skip Navigation</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:Menu  
        id="Menu1" 
        Runat="server"> 
        <Items> 
            <asp:MenuItem Text="Home" NavigateUrl="Home.aspx" /> 
            <asp:MenuItem Text="Products" NavigateUrl="Products.aspx" /> 
            <asp:MenuItem Text="Services" NavigateUrl="Services.aspx" /> 
            <asp:MenuItem Text="About" NavigateUrl="About.aspx" /> 
        </Items> 
    </asp:Menu> 
    <hr /> 
    Here is the main content of the page... 
    </div> 
    </form> 
</body> 
</html>

若果查清单 5 中页的源代码,您将视以下链接出现在菜单顶部。

<a HREF="#Menu1_SkipLink" TARGET="_self"><img alt="Skip Navigation Links" 
src="/WebResource.axd?d=ChXz41GuDxNm-7TcWyCl_w2&amp;t=632495684475122400" 
  width="0" height="0" style="border-width:0px;" />

该链接包含一轴以公查看该页时无会见现出的富有和高都为零星之图像。但是,通过屏幕阅读器访问该页的用户可以择“跳了导航”链接跳到拖欠菜单的最终。

默认情况下,“跳了导航”链接包含文本 Skip Navigation
Links
。可以透过重新改 Menu 控件的 SkipLinkText 属性修改该值。

图片 24回到页首

开创而看的数目

ASP.NET 2.0 框架包含一组丰富的、用于展示数据库数据的控件。这些控件包括
GridViewDetailsViewDataListFormView
Repeater 控件。默认情况下,GridViewDetailsView
DataList 控件在 HTML 表中显数据库记录。

以 HTML 表中展现信息经常,如果操作错误,则恐勾可访问性问题。在聆听
HTML 表的情常常,您特别爱忘自己手上以该表中之岗位。例如,假要您运
HTML
表显示一个成品信息列表。在聆听由屏幕看器朗读的阐发内容时,您大爱用某表单元格所代表的音讯做混,不知底它是有关产品名称的,还是关于所订购产品数量的,抑或是关于仓储这些产品之库的代码。

在查看 HTML
表时,可经过扫视列或执行标题来确定特定单元格的含义。为使表对于以屏幕阅读器的用户是只是看的,需要显式标记表标题并拿这些题目与各个单元格显式关联起来。

以创造表以展示数据时,应当尽用是的号来标记列和实践标题。表标题应当总是用
<th> 标记进行标记,如下所示。

<table> 
    <thead> 
    <tr> 
        <th>Product Name</th> 
        <th>Price</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
        <td>Milk</td> 
        <td>$2.33</td> 
    </tr> 
    <tr> 
        <td>Cereal</td> 
        <td>$5.61</td> 
    </tr>   
    </tbody>       
    </table>

以该示例中,<th> 标记用来号以下简单个列标题:Product Name
Price

有的计划人员避免用 <th>
标记,因为他俩非喜她的默认可视化外观。在多数浏览器被,<th>
标记的始末居中并且加粗。但是,需要记住的凡,标记绝不应该为此来控制表示形式。如果你要列标题看起如正规的表单元格,则您该添加如下所显示之体裁规则。

<style type="text/css"> th {text-align:left;font-weight:normal} </style>

为要表可访问,还该显式指明与各个单元格相关联的一个或多只标题。您得用大半只特性用于这目的:scopeheaders
axis

scope
属性可用来指示表标题是排标题还是执行标题。例如,下面的说明而涵盖列标题和行标题,它们还通过采用
scope 属性的 <th> 标记进行标记。

<table> 
    <thead> 
    <tr> 
        <th></th> 
        <th scope="col">First Train</th> 
        <th scope="col">Last Train</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
        <th scope="row">Alewife</th> 
        <td>5:24am</td> 
        <td>12:15am</td> 
    </tr> 
    <tr> 
        <th scope="row">Braintree</th> 
        <td>5:15am</td> 
        <td>12:18am</td> 
    </tr>   
    </tbody>       
    </table>

该表包含 Boston 地铁 Red Line 的时间表(参见图
8)。请留意,每个列标题都含 scope=”col” 属性,而每个行标题都含有
scope=”row” 属性。

图片 25

8. 简而言之的地铁时间表

scope 属性非常适合于简单的阐明。但是,对于越来越复杂的阐发,需要采取
headers
属性。例如,嵌套表可能来三独或还多之题与单个单元格相关联。headers
属性使你会用和各个单元格相关联的题来号它。

axis 属性使你会对表标题进行分类。例如,在地铁日表中,可以将属于性
axis=”location” 添加到每个代表位置的题(Alewife
Braintree 标题)中。axis 属性接受由逗号分隔的色列表。

清单 6 中之页含一个复扑朔迷离版本的 Boston 地铁时间表,它又利用了
headersaxis 属性(参见图 9)。

图片 26

9. 复杂的地铁时间表

清单 6. Subway.aspx

<%@ Page Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Red Line Subway Schedule</title> 
    <style type="text/css"> 
        caption {color:white;background-color:red;font-size:xx-large} 
        table {width:500px;border-collapse:collapse} 
        td,th {padding:5px} 
        td {border:1px solid black} 
        tbody th {text-align:right} 
        .headerRow th {font-size:x-large;text-align:left}     
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <table  
      summary="This table contains the schedule of train  
                departures for the Red Line"> 
    <caption>Red Line Schedule</caption> 
    <thead> 
    <tr> 
        <th></th> 
        <th id="hdrFirstTrain" axis="train">First Train</th> 
        <th id="hdrLastTrain" axis="train">Last Train</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="headerRow"> 
        <th id="hdrWeekday" axis="day" colspan="3">Weekday</th> 
    </tr> 
    <tr> 
        <th id="hdrAlewife1" axis="location">Alewife</th> 
        <td headers="hdrAlwife1 hdrWeekday hdrFirstTrain">5:24am</td> 
        <td headers="hdrAlwife1 hdrWeekday hdrLastTrain">12:15am</td> 
    </tr> 
    <tr> 
        <th id="hdrBraintree1" axis="location">Braintree</th> 
        <td headers="hdrBraintree1 hdrWeekday hdrFirstTrain">5:15am</td> 
        <td headers="hdrBraintree1 hdrWeekday hdrLastTrain">12:18am</td> 
    </tr>   
    <tr class="headerRow"> 
        <th id="hdrSaturday" axis="day" colspan="3">Saturday</th> 
    </tr> 
    <tr> 
        <th id="hdrAlewife2" axis="location">Alewife</th> 
        <td headers="hdrAlewife2 hdrSaturday hdrFirstTrain">8:24am</td> 
        <td headers="hdrAlewife2 hdrSaturday hdrLastTrain">11:15pm</td> 
    </tr> 
    <tr> 
        <th id="hdrBraintree2" axis="location">Braintree</th> 
        <td  
          headers="hdrBraintree2 hdrSaturday hdrFirstTrain">7:16am</td> 
        <td  
          headers="hdrBraintree2 hdrSaturday hdrLastTrain">10:18pm</td> 
    </tr>   
    </tbody>       
    </table> 
    </div> 
    </form> 
</body> 
</html>

要留心,每个表单元格都富含 headers 属性。headers
属性表示和列和行标题相对应之 ID
的空格分隔列表。地铁时间表中之每个单元格都有所相关联的职位、日期和火车标题。

同时,请注意,每个 <th> 标记都抱有一个 axis
属性,用于表示和标题相关联的品种。例如,WeekdaySaturday
标题都和 day 轴相关联。First TrainLast Train 标题与
train 轴相关联。

最后,请留意清单 6 中之表而富含 summary 属性和 标记。summary
属性的办事措施很接近于 alt 属性。您可以动用 summary
属性提供浏览器未表现的表的说明。另一方面,浏览器呈现
标记的内容。您该利用 标记来标识表的用。

倘以 ASP.NET 2.0 GridViewDetailsView 控件来展示 HTML
表中的数据库数据,则默认情况下,生成的 HTML 表是可看的。例如,清单 7
包含一个 ASP.NET 页,它经过采用 GridView 控件来显示 Titles
数据库表的情。

清单 7. DisplayTitles.aspx

<%@ Page Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Display Titles</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:GridView 
        id="grdTitles" 
        DataSourceId="srcTitles" 
        Runat="server" /> 
    <asp:SqlDataSource 
        id="srcTitles" 
        ConnectionString= 
         "Server=localhost;Trusted_Connection=true;Database=Pubs" 
        SelectCommand="Select * FROM Titles" 
        Runat="server" /> 
    </div> 
    </form> 
</body> 
</html>

在清单 7 中,GridView 控件被绑定到一个表示 Titles
数据库表中著录之 SqlDataSource 控件。在浏览器被开辟清单 7 中之
ASP.NET 页时,Titles 数据库表的情节展示在 HTML 表中(参见图 10)。

图片 27

10. DisplayTitles.aspx

伸手留意,GridView 控件自动吗每个列标题生成 <th>
标记。而且,如果当浏览器被甄选 View
Source,则好看到也每个列标题自动生成 scope=”col” 属性。

GridView 控件支持外基本上只及可访问性相关的性质:

CaptionCaptionAlign — 使用这些属性可以向 GridView 控件生成的 HTML 表中添加标题。

RowHeaderColumn — 使用该属性可以指示行标题(相对于列标题而言)。请将该属性设置为从数据源返回的列的名称(例如,title_id)。

UseAccessibleHeader — 使用该属性可以指示是否应当用 或 <td> 标记呈现列标题。默认情况下,该属性具有值 true

请注意,GridView 控件不享 Summary 属性。但是,像大多数 ASP.NET
控件一样,GridView 控件支持 expando 属性。当您声明 GridView
控件时,您可声明喜欢的外性质,而拖欠属性将给展现到浏览器被。因此,如果你要往
GridView 中添加摘要,则请按照如下方式声明 summary 属性。

<asp:GridView 
        id="grdTitles" 
        DataSourceId="srcTitles" 
        summary="Displays the contents of the Titles database table" 
        Runat="server" />

GridView
控件的默认行为非常适合于以可看的不二法门展示简单数据表。但是,如果你需出示更加复杂的表(例如,一组嵌套表),则您得得额外的干活。

譬如,您或许想显示产品类别的列表,并且期望以每个类别下显得匹配产品的列表。换句话说,您愿意创建单页“主要信息/详细信息”表单(参见图
11)。在这种景象下,需要也每个表单元格包含 headers 属性。

图片 28

11. 嵌套 Repeater 控件

清单 8 中之页说明如何用一个 Repeater 控件嵌套到外一个 Repeater
控件被,以及怎样变化符合可访问性准则要求的复杂表。

清单 8. NestedRepeaters.aspx

<%@ Page Language="VB"%> 
<%@ Import Namespace="System.Data" %> 
<%@ Import Namespace="System.Data.SqlClient" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script runat="server"> 
    Private dtblProducts As New DataTable 
    Sub Page_Load() 
        Dim dad As New SqlDataAdapter("SELECT * FROM PRODUCTS", _ 
         "Server=localhost;Trusted_Connection=true;Database=Northwind") 
        dad.Fill(dtblProducts) 
    End Sub 
    Function GetProducts(ByVal CategoryID As Integer) As DataView 
        Dim view As DataView = dtblProducts.DefaultView 
        view.RowFilter = "CategoryID=" & CategoryID 
        Return view 
    End Function 
    Function GetCategoryHeader(ByVal index As Integer) As String 
        Return "hdrCategory" & index.ToString() 
    End Function 
    Function GetProductHeader(ByVal productID As Integer) As String 
        Return "hdrProduct" & productID.ToString() 
    End Function 
    Function GetHeaders(ByVal item As RepeaterItem, _ 
      ByVal columnHeader As String) As String 
        Dim parent As RepeaterItem = _ 
         item.NamingContainer.NamingContainer 
        Dim categoryHeader As String = _ 
         GetCategoryHeader(parent.ItemIndex) 
        Dim productHeader As String = _ 
         GetProductHeader(item.DataItem("ProductID")) 
        Return String.Format("{0} {1} {2}", categoryHeader, _ 
          productHeader, columnHeader) 
    End Function 
</script> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
        .categoryRow {background-color:yellow} 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:Repeater 
        id="grdCategories" 
        DataSourceId="srcCategories" 
        Runat="server"> 
        <HeaderTemplate> 
        <table> 
            <thead> 
                <th id="hdrID">ID</th> 
                <th id="hdrName">Name</th> 
                <th id="hdrPrice">Price</th> 
            </thead> 
            <tbody> 
        </HeaderTemplate> 
        <ItemTemplate> 
            <tr class="categoryRow"> 
                <th colspan="3"  
                  id='<%# GetCategoryHeader(Container.ItemIndex) %>'> 
                    <%# Eval("CategoryName") %> 
                </th> 
            </tr> 
            <asp:Repeater 
                id="grdProducts" 
                DataSource='<%# GetProducts(Eval("CategoryID")) %>' 
                Runat="server"> 
                <ItemTemplate> 
                <tr> 
                    <th  
                     id='<%# GetProductHeader(Eval("ProductID")) %>'> 
                        <%# Eval("ProductID") %> 
                    </th> 
                    <td  
                     headers='<%# GetHeaders(Container, "hdrName") %>'> 
                        <%#Eval("ProductName")%> 
                    </td> 
                    <td headers= 
                      '<%# GetHeaders(Container, "hdrPrice") %>'> 
                        <%#Eval("UnitPrice", "{0:c}")%> 
                    </td> 
                </tr> 
                </ItemTemplate> 
            </asp:Repeater> 
        </ItemTemplate> 
        <FooterTemplate> 
            </tbody> 
            </table> 
        </FooterTemplate> 
    </asp:Repeater>     
    <asp:SqlDataSource 
        id="srcCategories" 
        ConnectionString= 
         "Server=localhost;Trusted_Connection=true;Database=Northwind" 
        SelectCommand="SELECT * FROM Categories" 
        Runat="server" /> 
    </div> 
    </form> 
</body> 
</html>

在清单 8 中,外层的 Repeater 控件用来列出产品类别,而内层的
Repeater 控件用来排有配合产品。下列两只 Helper 函数用来生成
Category NameProduct ID 标题的 id
值:GetProductHeaderGetCategoryHeader
函数。另外一个独自的称之为也 GetHeaders 的 Helper 函数用来转用于
headers 属性的价值。

清单 8 中的 ASP.NET 页生成如下所出示之 HTML 表。

<table> 
            <thead> 
                <th id="hdrID">ID</th> 
                <th id="hdrName">Name</th> 
                <th id="hdrPrice">Price</th> 
            </thead> 
            <tbody> 
            <tr class="categoryRow"> 
                <th colspan="3" id='hdrCategory0'> 
                    Beverages 
                </th> 
            </tr> 
                <tr> 
                    <th id='hdrProduct1'> 
                        1 
                    </th> 
                    <td headers='hdrCategory0 hdrProduct1 hdrName'> 
                        Chai 2 
                    </td> 
                    <td headers='hdrCategory0 hdrProduct1 hdrPrice'> 
                        $18.55 
                    </td> 
                </tr> 
                <tr> 
                    <th id='hdrProduct2'> 
                        2 
                    </th> 
                    <td headers='hdrCategory0 hdrProduct2 hdrName'> 
                        Chang 
                    </td> 
                    <td headers='hdrCategory0 hdrProduct2 hdrPrice'> 
                        $19.00 
                    </td> 
                </tr> 
                .... remainder of the table

请注意,每个 <td> 标记都包含适当的 headers 属性。

图片 29回页首

开创而看的 XHTML

森而访问性准则共有的一个主题是这么一个概念 — 即,Web
页应当符合标准,这样才能够化可看的页。按照轨道,您当尽力以最新的
W3C 标准(例如,最新版本的 XHTML 和层叠样式表)来扭转 Web 站点。

特意需要指出的是,在计划 Web
页时,您当将文档的组织及它们的代表形式分开。请用标志来表示 Web
页的结构,并且采取层叠样式表来控制 Web 页的外观。

譬如,绝不要就用
<blockquote>素来缩进文本块。<blockquote>
元素的用处是创办原文的引文。如果你要缩进文本,则当改成而采取层叠样式表
margin 属性。

你还应当就在表示数据表时使用 <table> 标记。尽管使
<table> 标记来对 Web
页面进行布局在目前凡均等栽常见的做法,但是,请尽量改设动
<div> 标记。例如,清单 9 中的页具有三列式布局,但是不包含一个
<table> 标记(参见图 12)。

图片 30

12. 非含表的页布局

清单 9. Tableless.aspx

<%@ Page Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Tableless Layout</title> 
    <style type="text/css"> 
    #content 
    { 
        margin-left:auto; 
        margin-right:auto; 
        width:800px; 
    } 
    #leftColumn  
    { 
        float:left; 
        width:150px; 
        border:1px solid black; 
        padding:10px; 
    } 
    #middleColumn 
    { 
        float:left; 
        width:430px; 
        padding:10px; 
    } 
    #rightColumn  
    { 
        float:right; 
        width:150px; 
        border:1px solid black; 
        padding:10px; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="content"> 
    <div id="leftColumn"> 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    Left column contents... 
    </div> 
    <div id="middleColumn"> 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    Middle column contents... 
    </div> 
    <div id="rightColumn"> 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    Right column contents... 
    </div> 
    </div> 
    </form> 
</body> 
</html>

清单 9 中之页含四单 <div> 标记。第一个 <div>
标记(名为 content)用来指定页的情区域的宽窄。其余三个
<div> 标记(分别名叫吧 leftmiddle
right)将内容区域划分为三列。该页可以以 Internet Explorer 6、Firefox
和 Opera 8 中科学显示(要查有勿使 HTML
表创建布局之真帅的页面,请参见
http://csszengarden.com。)

WCAG 准则看,不可能总是避免以 <table>
标记来创造页布局,因为比较旧的浏览器不了支持层叠样式表标准(请参见 WCAG
准则
5)。在无法避免用说明创建布局的情景下,您该肯定这些发明底始末以展开线性化(即,按照表-单元格顺序来阅读)时凡出义的。

盖 ASP.NET 框架必须和旧式和流行浏览器同时配合,所以有 ASP.NET
控件实际上确实下 <table> 标记来创造布局。例如,ASP.NET 2.0
Login 控件使用 <table> 标记来控制用户称及密码输入字段的布局。

图片 31归来页首

创办而看的剧本

WCAG 和 508 节准则受带有的一个良严峻的界定及客户端脚论关于。根据 WCAG
1.0 准则遭到的预级 1 检查点,要求:

6.3
确保页在本子、小程序还是另编程对象关闭或者非给支持时是可用的。如果立刻是免容许的,请于可看的轮换页中提供等模拟信息。[优先级
1]

508 节准则含有类似的渴求:

(l)
当页利用脚本语言来显示内容或创造界面元素时,应该据此而透过辅助性技术看的功能性文本标识由该脚本提供的信息。

问题在,多只 ASP.NET 控件要求有客户端 JavaScript
才能够健康办事。这上面的重要示例是 ASP.NET LinkButton
控件。LinkButton 控件使用 JavaScript 将含有该控件的表单提交给 Web
服务器。

欠问题没有异常好之化解方案。如果需要扭转能够满足所有可访问性准则的 Web
站点,则用分外小心地动客户端脚本。您或许要避免采用一些依赖让
JavaScript 的 ASP.NET 控件,例如 LinkButton 控件。

遗憾之凡,在转变现代 Web 站点时,很为难遵守该则。这种如似乎让 Web
站点再如杂志如非是应用程序。现代 Web
站点倾向被含有动态的客户端内容。例如,很多房地产 Web 站点包含一个
JavaScript 按揭计算器。人们还不明白 JavaScript
按揭计算器的文本等效物应该是什么。

图片 32归来页首

验证页的不过访问性

跟留存 XHTML
的毕自动化验证程序不同,并无在了自动化的而是访问性验证程序。之所以不有不过访问性的自动化验证程序,原因在判断页的可是访问性需要人工解释。

像,为了使 Web
页可看,该页中的每个图像都必须带有有义之更迭文本。目前,没有其余计算机能够规定一段文本是否具和图像相同的意思。可访问性验证程序太多只能提供相应检查的事物的列表。

Visual Studio .NET 2005(但非是 Visual Web
Developer)包含可访问性检查器。可从工具栏中开辟可访问性检查器。还可透过挑选菜单选项
ToolsCheck Accessibility 来打开她(参见图 13)。

图片 33

13. Visual Studio .NET 2005 可是访问性检查器

然而访问性检查器提供了用来按照 WCAG 优先级 1 检查点、WCAG 优先级 2
检查点或 508 节准则验证 Web 站点的选项。可以经过打开“Error
List”(依次选择菜单选项 ViewOther WindowsError
List
)来查 Web 站点的征结果。

Visual Studio .NET 2005
可访问性检查器还提供展示可访问性问题之“手动检查列表”的抉择项。如果选该选择,则以验证
Web 站点的但是访问性时,都见面于 Error List
窗口中显示同一的不过访问性问题静态列表。该检查列表包含无法通过可访问性检查器自动验证的题目。

假如使用 Visual Web Developer 生成 Web 站点,则还得检查 Web
页的但是访问性。为夫,需要利用有联机可访问性检查器。下面的链接指向两独顶盛的一块可访问性检查器:

Bobby

WAVE

图片 34归来页首

演示应用程序:可看的 XHTML ASP.NET Web 站点

在末一节省吃,我们以始终不渝完整地十分成一个 ASP.NET 2.0 Web
站点。本白皮书随附有该示例 Web 站点的源代码。您可以下载该示例 Web
站点的源代码,并且于 Visual Web Developer 或 Visual Studio .NET 2005
中打开该 Web 站点。

俺们的对象是创造一个完全符合标准的 Web 站点。该 Web 站点将经过 XHTML 1.0
Strict(甚至 XHTML 1.1)验证。而且,该 Web
站点还只是供应残疾人士看。它用以满足 508 节和 WCAG(优先级 1 及先期级
2)可访问性要求。

俺们拿好成一个称为吧 Super Super Bookstore Web 站点的网上书店。我们以通过
Amazon 电子商务 Web 服务检索书店的具有书籍清单。Amazon 电子商务 Web
服务呢咱提供了足的免费示例数据,以供我们开展演练(有关 Amazon Web
服务的详细信息,请参阅 http://www.amazon.com/gp/aws/landing.html)。

呢简易起见,我们的 Web 站点就由少数独 ASP.NET 页组成:

Default.aspx — 该页显示指定类别中的书籍的列表。

Search.aspx — 该页使您能够搜索满足特定搜索条件的所有书籍。

每当暗自,该 Web 站点使用了 ASP.NET 2.0 框架的多起新成效。例如,该 Web
站点使用了一个母版页来创造公共页布局,并且动用了一个主题来创造公共页样式。最后,示例站点使用初的
GridViewObjectDataSource 控件进行数量访问。

图片 35返回页首

访问 Amazon Web 服务

Super Super Bookstore 使用一个叫做吧 Amazon 的共用类来针对 Amazon
书目检索书籍信息并施行搜。该类包含在清单 10 中。

清单 10. Amazon.vb

Imports Microsoft.VisualBasic 
Public Class Amazon 
    Const SubscriptionId As String = "1CD1NYF3YQ830DG7AM02" 
'''  
    ''' Attempts to get books in category from cache.  
    ''' If not in cache, call Amazon Web service 
    '''  
    Public Function GetBooks(ByVal CategoryId As String) _ 
      As AmazonServices.Item() 
        Dim context As HttpContext = HttpContext.Current 
        Dim Books As AmazonServices.Item() 
        If IsNothing(context.Cache(CategoryId)) Then 
            Books = GetBooksFromAmazon(CategoryId) 
            context.Cache(CategoryId) = Books 
        Else 
            Books = CType(context.Cache(CategoryId), _ 
              AmazonServices.Item()) 
        End If 
        Return Books 
    End Function 
    '''  
    ''' Retrieves books in certain category from Web service 
    '''  
    Public Function GetBooksFromAmazon(ByVal CategoryId As String) _ 
      As AmazonServices.Item() 
        Dim service As New AmazonServices.AWSECommerceService() 
        ' Initialize Request 
        Dim searchRequest As New AmazonServices.ItemSearchRequest 
        With searchRequest 
            .SearchIndex = "Books" 
            .Sort = "salesrank" 
            .ResponseGroup = New String() {"Medium"} 
            .BrowseNode = CategoryId 
        End With 
        Dim search As New AmazonServices.ItemSearch 
        With search 
            .SubscriptionId = SubscriptionId 
            .Request = New AmazonServices.ItemSearchRequest() _ 
              {searchRequest} 
        End With 
        ' Get Response 
        Dim response As AmazonServices.ItemSearchResponse = Nothing 
        Try 
            service.Timeout = 5000 
            response = service.ItemSearch(search) 
        Catch 
        End Try 
        If IsNothing(response) Then 
            Return Nothing 
        End If 
        Return response.Items(0).Item 
    End Function 
    '''  
    ''' Searches for books by calling Amazon Web service 
    '''  
    Public Function SearchBooksFromAmazon(ByVal Author As String, _ 
      ByVal Title As String, ByVal Keywords As String, _ 
      ByVal PowerSearch As String) As AmazonServices.Item() 
        ' Don't search if nothing to search for 
        If IsNothing(PowerSearch) And IsNothing(Author) And _ 
          IsNothing(Title) And IsNothing(Keywords) Then 
            Return Nothing 
        End If 
        ' Initialize Request 
        Dim service As New AmazonServices.AWSECommerceService() 
        Dim searchRequest As New AmazonServices.ItemSearchRequest 
        With searchRequest 
            .SearchIndex = "Books" 
            .ResponseGroup = New String() {"Medium"} 
            If Not IsNothing(PowerSearch) Then 
                .Power = PowerSearch 
            Else 
                If Not IsNothing(Author) Then 
                    .Author = Author 
                End If 
                If Not IsNothing(Title) Then 
                    .Title = Title 
                End If 
                If Not IsNothing(Keywords) Then 
                    .Keywords = Keywords 
                End If 
            End If 
        End With 
        Dim search As New AmazonServices.ItemSearch 
        With search 
            .SubscriptionId = SubscriptionId 
            .Request = New AmazonServices.ItemSearchRequest() _ 
              {searchRequest} 
        End With 
        ' Get Response 
        Dim response As AmazonServices.ItemSearchResponse 
        Try 
            service.Timeout = 5000 
            response = service.ItemSearch(search) 
        Catch 
        End Try 
        If IsNothing(response) Then 
            Return Nothing 
        End If 
        Return response.Items(0).Item 
    End Function 
    '''  
    ''' The Amazon Author property represents a list of authors. 
    ''' Therefore, we create a comma separated list     
    '''  
    Public Shared Function FormatAuthor(ByVal Authors As String()) _ 
      As String 
        If Not IsNothing(Authors) Then 
            Return String.Join(", ", Authors) 
        Else 
            Return "Not Listed" 
        End If 
    End Function 
    '''  
    ''' Formats Amazon ListPrice into US currency 
    '''  
    Public Shared Function FormatPrice(ByVal Price As String) As String 
        If Not IsNothing(Price) Then 
            Return "$" & Price.Insert(Price.Length - 2, ".") 
        Else 
            Return "Not Listed" 
        End If 
    End Function 
    '''  
    ''' Formats tooltip for the link to the book details 
    '''  
    Public Shared Function _ 
      FormatDetailsTooltip(ByVal Title As String) As String 
        If Not IsNothing(Title) Then 
            Return String.Format("Link to {0} details", Title) 
        Else 
            Return "Link to details" 
        End If 
    End Function 
    '''  
    ''' If there is no book cover, we fall back to displaying our image 
    '''  
    Public Shared Function FormatBookCover(ByVal Url As String) _ 
      As String 
        If Not IsNothing(Url) Then 
            Return Url 
        Else 
            Return "Images/NoBookCover.gif" 
        End If 
    End Function 
End Class

此类中之片个顶重大之函数名吧 GetBooksFromAmazon
SearchBooksFromAmazon。第一独函数从 Default.aspx
页中调用,以便按照项目显示书籍清单。第二单函数从 Search.aspx
页中调用,以便使用户会寻书籍。

当即半独函数都采用名也 AmazonServices 的 Web
服务代理类。该代理类是经逐一选择菜单选项 Web siteAdd Web
Reference
并且输入 URL
http://soap.amazon.com/onca/soap?Service=AWSECommerceService
创建的。这是用来访问美国 Amazon 数据的是的 URL。

图片 36回页首

默认页

Default.aspx
页显示书籍种类的列表,并且出示所选型的匹配书籍的列表(参见图
14)。Default.aspx 页包含在清单 11 中。

图片 37

14. 默认页

清单 11. Default.aspx

<%@ Page Language="VB" MasterPageFile="~/SiteMaster.master"  
  Title="Super Super Books" %> 
<script runat="server"> 
    Sub Page_Load() 
        Dim categoryIndex As Integer = 0 
        If Not IsNothing(Request("index")) Then 
            categoryIndex = Int32.Parse(Request("index")) 
        End If 
        MenuCategories.Items(categoryIndex).Selected = True 
    End Sub 
</script> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentBody"  
  Runat="Server"> 
    <h1>Book Listings</h1> 
    <hr /> 
    <div id="leftColumn"> 
    <asp:Menu 
        id="MenuCategories" 
        ToolTip="Book categories menu" 
        StaticMenuItemStyle-CssClass="menuNormal" 
        StaticSelectedStyle-CssClass="menuSelected" 
        Runat="server"> 
        <Items> 
        <asp:MenuItem  
            Text="Arts and Photography" 
            Value="1" 
            NavigateUrl="~/Default.aspx?index=0" /> 
        <asp:MenuItem  
            Text="Biographies and Memoirs" 
            Value="2" 
            NavigateUrl="~/Default.aspx?index=1" /> 
        <asp:MenuItem  
            Text="Children's Books" 
            Value="4"  
            NavigateUrl="~/Default.aspx?index=2" /> 
        <asp:MenuItem  
            Text="Computers and Internet" 
            Value="5"  
            NavigateUrl="~/Default.aspx?index=3" /> 
        <asp:MenuItem  
            Text="Cooking, Food and Wine" 
            Value="6"  
            NavigateUrl="~/Default.aspx?index=4" /> 
        <asp:MenuItem  
            Text="Science Fiction and Fantasy" 
            Value="25"  
            NavigateUrl="~/Default.aspx?index=5" /> 
        </Items> 
    </asp:Menu>     
    </div> 
    <div id="middleColumn"> 
    <asp:GridView 
        id="grdBooks" 
        DataSourceID="srcBooks" 
        AutoGenerateColumns="false" 
        CssClass="books" 
        HeaderStyle-CssClass="booksHeader" 
        EmptyDataText="No matching results" 
        Runat="server"> 
        <Columns> 
        <asp:TemplateField HeaderText="Book Cover Image"> 
        <ItemTemplate> 
            <asp:Image 
                id="imgBook" 
                ImageUrl='<%#Amazon.FormatBookCover(Eval("SmallImage.Url"))%>' 
                AlternateText="Book cover image" 
                Runat="server" /> 
        </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Book Information"> 
        <ItemTemplate> 
            <h2><%#Server.HtmlEncode(Eval("ItemAttributes.Title"))%></h2> 
            Authors:  
            <%#Amazon.FormatAuthor(Eval("ItemAttributes.Author"))%> 
            <br />Price: 
            <%#Amazon.FormatPrice(Eval("ItemAttributes.ListPrice.Amount"))%> 
            <br />Sales Rank: 
            <%#Eval("SalesRank")%> 
            <br /> 
            <asp:HyperLink  
                id="lnkDetails" 
                NavigateUrl='<%#Eval("DetailPageURL")%>' 
                Text="View Details" 
                Tooltip= 
  '<%#Amazon.FormatDetailsTooltip(Eval("ItemAttributes.Title"))%>' 
                Runat="server" /> 
        </ItemTemplate> 
        </asp:TemplateField> 
        </Columns> 
    </asp:GridView>     
    <asp:ObjectDataSource 
        id="srcBooks" 
        TypeName="Amazon" 
        SelectMethod="GetBooks" 
        Runat="server"> 
        <SelectParameters> 
            <asp:ControlParameter 
                Name="CategoryId" 
                ControlId="menuCategories" 
                DefaultValue="1" /> 
        </SelectParameters> 
    </asp:ObjectDataSource>     
    </div> 
</asp:Content>

该页使用下列两个 ASP.NET 控件来展示书籍清单:Menu 控件和
GridView 控件。Menu 控件用来展示书籍种类的列表,而 GridView
控件用来展示书籍列表。

GridView 控件被绑定到 ObjectDataSource
控件。ObjectDataSource 控件继而调用 Amazon 类中的 GetBooks()
方法来索书籍列表。

图片 38回页首

默认页的 XHTML 功能

以生成 XHTML
页时,目标有是拿文档的组织及该表示形式完全分开。为了达到这无异目标,不克在
Default.aspx 页中之另 ASP.NET
控件上安装格式属性。页格式设置为查封装于经过 ASP.NET
主题与该页相关联的表面体制表中。

ASP.NET 2.0 主题使你得又便于地本 Web
标准,因为它们以有表示内容以及页分开。示例站点包含一个号称也 SiteTheme
的主题,该主题包含单个样式表。该主题活动使用 Web.Config
文件中之下列配置安装与每个页相关联。

<pages  
      styleSheetTheme="SiteTheme" 
      masterPageFile="SiteMaster.master" />

若该小心到,HTML 表没有就此来创造页布局。尽管 XHTML
标准与而访问性标准且尚未禁止你运表来创建页布局,但马上片只专业且建议你避免这样做。在演示站点中,页布局完全是出于外部样式表确定的。页本身由少数独
<div> 元素划分也简单列。外部体制表包含确定就简单单 <div>
元素位置的平整。

末段,示例站点在提供页时使用内容商。当以能够解
application/xhtml+xml MIME 类型的浏览器从 Web 站点请求页时,将坐 MIME
类型提供该页;否则,将因为 text/html 类型提供该页。

情商是故 Global.asax 文件中之以下事件处理程序完成的。

Sub Application_PreSendRequestHeaders(ByVal s As Object, _ 
  ByVal e As EventArgs) 
    If Array.IndexOf(Request.AcceptTypes, _ 
      "application/xhtml+xml") > -1 Then 
            Response.ContentType = "application/xhtml+xml" 
    End If 
End Sub

图片 39返页首

默认页的而是访问性功能

当无法提供 JavaScript 的文本等模拟内容经常,WCAG 和 508
节可访问性准则都禁用客户端 JavaScript。为了满足这些轨道,Default.aspx
页不依赖让客户端 JavaScript。即使你在浏览器被关闭
JavaScript,该页仍然能健康办事。

为满足该要求,在贯彻菜单时得完成额外的劳作。默认情况下,ASP.NET
Menu控件为每个菜单项呈现 JavaScript
以处理客户端单击事件。但是,当为菜单项提供了 NavigateUrl
属性时,该菜单项将不再使用 JavaScript。

当演示站点中,为每个菜单项提供了一个乘回到 Default.aspx 页的
NavigateUrl 属性。当你单击菜单项时,将重新加载 Default.aspx
页。Page_Load
事件处理程序用来检测单击了哪位菜单项,而且该子例程用当下食谱选择翻新菜单。

使用 Menu 控件的好处是,Menu
控件自动生成“跳了导航”链接。如果运用 Tab 键浏览 Default.aspx
页中之每个元素,会注意到(观察浏览器的状态栏)有一个过了菜单内容之隐没链接。Menu
控件使您能活动满足 WCAG 和 508
节准则,该则要求而提供对应的章程为超越了重复性的领航链接。

图片 40归来页首

搜索页

搜页含一个表单,使 Web
站点的用户会由此提供图书作者、书名、书籍关键字或者通过提供复杂查询来寻找书籍(参见图
15)。查询的结果显示在 GridView 控件被。Search.aspx 页包含在清单 12
中。

图片 41

15. 搜索页

清单 12. Search.aspx

<%@ Page Language="VB" MasterPageFile="~/SiteMaster.master"  
    Title="Search Books" %> 
<script runat="server"> 
    Protected Sub btnQuickSearch_Click(ByVal sender As Object, _ 
      ByVal e As System.EventArgs) 
        txtPowerSearch.Text = String.Empty 
    End Sub 
    Protected Sub btnPowerSearch_Click(ByVal sender As Object, _ 
      ByVal e As System.EventArgs) 
        txtAuthor.Text = String.Empty 
        txtTitle.Text = String.Empty 
        txtKeywords.Text = String.Empty 
    End Sub 
</script> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentBody"  
  Runat="Server"> 
    <h1>Search Books</h1> 
    <hr /> 
    <div id="leftColumn"> 
    <fieldset class="quickSearch"> 
    <legend>Quick Search</legend> 
    <asp:Label 
        Text="Author:" 
        AssociatedControlID="txtAuthor" 
        AccessKey="a" 
        Runat="server" /> 
    <asp:TextBox 
        id="txtAuthor" 
        ToolTip="Search by author" 
        Runat="server" /> 
    access key is a 
    <br /> 
    <asp:Label 
        Text="Title:" 
        AssociatedControlID="txtTitle" 
        AccessKey="t" 
        Runat="server" /> 
    <asp:TextBox 
        id="txtTitle" 
        ToolTip="Search by title" 
        Runat="server" /> 
    access key is t 
    <br /> 
    <asp:Label 
        Text="Keywords:" 
        AssociatedControlID="txtKeywords" 
        AccessKey="k" 
        Runat="server" /> 
    <asp:TextBox 
        id="txtKeywords" 
        ToolTip="Search by keywords" 
        Runat="server" /> 
    access key is k 
    <br /> 
    <asp:Button 
        id="btnQuickSearch" 
        Text="Quick Search Now" 
        ToolTip="Peform quick search" 
        AccessKey="s" 
        Runat="server" OnClick="btnQuickSearch_Click" />      
    access key is s 
    </fieldset> 
    <br /> 
    <fieldset class="powerSearch"> 
    <legend>Power Search</legend> 
    <asp:Label 
        Text="Query:" 
        AssociatedControlID="txtPowerSearch" 
        AccessKey="q" 
        Runat="server" /> 
    <asp:TextBox 
        id="txtPowerSearch" 
        ToolTip="Power search query text" 
        TextMode="MultiLine" 
        Columns="20" 
        Rows="3" 
        Runat="server" /> 
    access key is q 
    <br /> 
    <asp:Button 
        id="btnPowerSearch" 
        Text="Power Search Now" 
        ToolTip="Perform power search" 
        AccessKey="p" 
        Runat="server" OnClick="btnPowerSearch_Click" />      
    access key is p 
    </fieldset> 
    </div> 
    <div id="middleColumn"> 
    <asp:GridView 
        id="grdBooks" 
        DataSourceID="srcBooks" 
        AutoGenerateColumns="false" 
        CssClass="books" 
        HeaderStyle-CssClass="booksHeader" 
        EmptyDataText="No matching results" 
        Runat="server"> 
        <Columns> 
        <asp:TemplateField HeaderText="Book Cover Image"> 
        <ItemTemplate> 
            <asp:Image 
                id="imgBook" 
                ImageUrl= 
  '<%#Amazon.FormatBookCover(Eval("SmallImage.Url"))%>' 
                AlternateText="Book cover image" 
                Runat="server" /> 
        </ItemTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Book Information"> 
        <ItemTemplate> 
            <h2><%#Server.HtmlEncode(Eval("ItemAttributes.Title"))%></h2> 
            Authors:  
            <%#Amazon.FormatAuthor(Eval("ItemAttributes.Author"))%> 
            <br />Price: 
            <%#Amazon.FormatPrice(  
                Eval("ItemAttributes.ListPrice.Amount"))%> 
            <br />Sales Rank: 
            <%#Eval("SalesRank")%> 
            <br /> 
            <asp:HyperLink  
                id="lnkDetails" 
                NavigateUrl='<%#Eval("DetailPageURL")%>' 
                Text="View Details" 
                Tooltip= 
       '<%#Amazon.FormatDetailsTooltip(Eval("ItemAttributes.Title"))%>' 
                Runat="server" /> 
        </ItemTemplate> 
        </asp:TemplateField> 
        </Columns> 
    </asp:GridView>     
    <asp:ObjectDataSource 
        id="srcBooks" 
        TypeName="Amazon" 
        SelectMethod="SearchBooksFromAmazon" 
        Runat="server"> 
        <SelectParameters> 
            <asp:ControlParameter  
                Name="Author" 
                ControlId="txtAuthor" 
                ConvertEmptyStringToNull="true" /> 
            <asp:ControlParameter  
                Name="Title" 
                ControlId="txtTitle" 
                ConvertEmptyStringToNull="true" /> 
            <asp:ControlParameter  
                Name="Keywords" 
                ControlId="txtKeywords" 
                ConvertEmptyStringToNull="true" /> 
            <asp:ControlParameter  
                Name="PowerSearch" 
                ControlId="txtPowerSearch" 
                ConvertEmptyStringToNull="true" /> 
        </SelectParameters> 
    </asp:ObjectDataSource>     
    </div>     
</asp:Content>

图片 42返页首

搜索页的 XHTML 功能

不畏像默认页一样,搜索页不包含其他表示性元素或性能。搜索页的体制和布局了封闭装于经
ASP.NET 主题以及该页相关联的标体制表中。

平等,像默认页一样,搜索页使用内容商。如果有人用能分辨
application/xhtml+xml MIME 类型的浏览器请求搜索页,则将坐该 MIME
类型提供该页;否则,将因为 text/html 类型提供该页。

图片 43返页首

搜索页的而访问性功能

搜索页含一个表单。或者,更准确地游说,该页包含被剪切也简单只子表单的么表单。它包含一个“Quick
Search”表单和一个“Power Search”表单。

请留心,该表单用 HTML <fieldset>
标记划分也片独子表单。<fieldset>
标记使您会以逻辑相关的表单元素组合在一起。可访问性准则要求您于处理千头万绪表单时行使
<fieldset> 标记(请参阅 WCAG 12.3)。

与此同时,请留意,每个表单字段还和那标签显式关联。每个 ASP.NET
控件都蕴含一个对该相应表单字段的 AssociatedControlID
属性。标签以及字段之间的这些显式关联好协助屏幕阅读器的用户确定特定表单字段的用途。

末,请留心每个 Label
控件都分配了一个访问键。访问键使你无需下鼠标就可知方便地浏览表单字段。例如,如果仍
ALT+A,则可以输入作者的全名。如果随着循 ALT+S,则会交“Quick
Search”表单,并且在 GridView
中显示结果。换句话说,无需触摸鼠标即可方便地实践搜。

倘仍 ALT 键,则会自行显示访问键(参见图 16)。这通过 JavaScript
实现。请小心,在每个表单字段后面都见面冒出一个 <span>
标记。例如,Title 搜索字段是由此以下代码实现的。

<asp:Label 
        Text="Title:" 
        AssociatedControlID="txtTitle" 
        AccessKey="t" 
        Runat="server" /> 
    <asp:TextBox 
        id="txtTitle" 
        ToolTip="Search by title" 
        Runat="server" /> 
    access key is t

当照 ALT 键时,将执客户端 JavaScript,并且显示 <span>
标记的始末。

图片 44

16. 搜索表单访问键

您或许吧该功能感到担心,因为本可访问性准则,当 JavaScript
和体裁表关闭时,该页必须能够持续做事(WCAG 准则 6)。幸运的凡,当
JavaScript
和体表都被剥夺时,该页确实能够健康工作。在这种情况下,<span>
标记的情节不再隐藏,并且连接显示访问键(参见图 17)。

图片 45

17. 摸表单适度降格

图片 46回去页首

母版页

以身作则 Web 站点在背后使用一个称为也 SiteMaster.master 的 ASP.NET 2.0
母版页。母版页使您能当 Web
站点的大半独页中带有相同的始末,并创造同之布局。母版页通过 Web.Config
文件被的以下配置安装与示范 Web 站点中的每个页相关联。

<pages  
      styleSheetTheme="SiteTheme" 
      masterPageFile="SiteMaster.master" />

母版页的始末涵盖在清单 13 中。

清单 13. SiteMaster.master

<%@ Master Language="VB" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<script runat="server"> 
    ''' <summary> 
    ''' Select style sheet to display 
    ''' </summary> 
    Sub Page_Load() 
        If Not IsNothing(Request("large")) Then 
            Profile.AccessibleStyleSheet = True 
        End If 
        If Not IsNothing(Request("normal")) Then 
            Profile.AccessibleStyleSheet = False 
        End If 
        If Profile.AccessibleStyleSheet Then 
            lnkAccessibleStyle.Visible = True 
            lnkStyle.Text = "Normal Text Version" 
            lnkStyle.NavigateUrl = Request.Path & "?normal=1" 
        Else 
            lnkAccessibleStyle.Visible = False 
            lnkStyle.Text = "Large Text Version" 
            lnkStyle.NavigateUrl = Request.Path & "?large=1" 
        End If 
    End Sub 
</script> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Super Super Books</title> 
    <script type="text/javascript"  
      src="Scripts/AccessKeys.js"></script> 
    <link id="lnkAccessibleStyle"  
        type="text/css"  
        rel="Stylesheet" 
        href="~/Styles/Accessible.css"  
        runat="server" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="content"> 
        <img id="SiteLogo" src="Images/SiteLogo.png"  
          alt="SSB Web site logo image" /> 
        <div id="banner"> 
            <asp:HyperLink 
                id="lnkStyle" 
                ToolTip="Modify the size of all text in this Web site" 
                Runat="server" /> 
            <br /> 
            <asp:Menu 
                id="MenuSite" 
                ToolTip="Web site navigation menu" 
                CssClass="menuSite" 
                Orientation="Horizontal" 
                StaticTopSeparatorImageUrl="Images/bullet.gif" 
                Runat="server"> 
                <Items> 
                <asp:MenuItem 
                    Text="Home" 
                    ToolTip="Navigate to home page" 
                    NavigateUrl="~/Default.aspx" /> 
                <asp:MenuItem 
                    Text="Search" 
                    Tooltip="Navigate to search page" 
                    NavigateUrl="~/search.aspx" />     
                </Items> 
            </asp:Menu> 
        </div> 
        <hr />         
        <asp:contentplaceholder id="ContentBody" runat="server" /> 
        <hr /> 
        <a href="http://validator.w3.org/check?uri=referer" 
            title="Explanation of XHTML 1.0 Conformance"> 
        <img 
          src="http://www.w3.org/Icons/valid-xhtml10" 
          alt="Valid XHTML 1.0 icon" class="icon"/></a> 
        <a href="http://jigsaw.w3.org/css-validator/" 
            title="Explanation of CSS Conformance"> 
        <img  
            src="http://jigsaw.w3.org/css-validatorvcss"  
            alt="Valid CSS icon" class="icon" /></a> 
        <a href="http://www.w3.org/WAI/WCAG1AA-Conformance" 
            title="Explanation of Level Double-A Conformance"> 
        <img height="32" width="88"  
            src="http://www.w3.org/WAI/wcag1AA" 
            alt="Level Double-A conformance icon,  
            W3C-WAI Web Content Accessibility Guidelines 1.0"  
            class="icon" /></a> 
    </div> 
    </form> 
</body> 
</html>

图片 47归来页首

母版页的 XHTML 功能

下母版页,可以便宜地啊 Web 站点中的有页提供不错的
DOCTYPE。SiteMaster.master 页包含 XHTML 1.0 Strict
DOCTYPE。在母版页中指定 DOCTYPE 的补益是:如果您将来欲变更 Web
站点中所有页的
DOCTYPE,那么就需要在一个职务变动它。例如,在不久以后的某某同天,您可能希望迁移至
XHTML 1.1 Web 站点并修改 DOCTYPE 以反映所做的改观。

母版页还蕴藏一多级一致性标识语,它们出现于演示 Web
站点中各个一样页的页脚。一致性标识语通告人们该 Web 站点可 XHTML、CSS 和
WCAG 1.0 Web 标准(参见图 18)。

图片 48

18. 一致性标识语

图片 49回去页首

母版页的但是访问性功能

演示 Web
站点中各个一样页的顶部都蕴含一个链接,可以应用该链接切换用于展示相应页的样式表。每一样页都得就此下列两单本子有进行展示:“普通文书”版本及“大型文本”版本。在挑选“大型文本”版本后,Web
站点中存有文件的高低都见面持有增多为要可读性更胜似(参见图 19)。

图片 50

19. 重型文本大小

用户只需要实行该选择相同赖。如果某个用户选择 Web
站点的“大型文本”版本,那么该首选项会于自动记录下来,并且在该用户返回该
Web 站点时都见面以它们。该功能是经过下 ASP.NET 2.0
框架的另一样宗新力量实现的:配置文件。配置文件要您会存储用户在反复做客
Web 站点时的安装。

布文件于 Web.Config 文件被定义。

<anonymousIdentification enabled="true"/> 
    <profile> 
      <properties> 
        <add  
          name="AccessibleStyleSheet" 
          type="Boolean"  
          defaultValue="false" /> 
      </properties> 
    </profile>

拖欠配置文件定义一个曰也 AccessibleStyleSheet 的布尔型属性。在
Web.Config 文件中定义该属性以后,就足以当其余 ASP.NET 页中,通过由
Page 类公开的 Profile 属性来读取或设置该属性。例如,要拿
AccessibleStyleSheet 属性设置为值 True,并且出示该 Web
站点的“大型文本”版本,可以编制以下代码。

Profile.AccessibleStyleSheet = true

母版页含用于选择 Web
站点的“普通文书”或“大型文本”版本的具备逻辑。HyperLink 控件用于使 Web
站点访问者能够实践该选择。在单击 HyperLink 以后,Page_Load
事件处理程序检测用户之精选并设置 AccessibleStyleSheet Profile 属性。

若果下 LinkButton 控件(而不是 HyperLink
控件),那么这里的代码会更加简约。但是,可访问性准则再同软禁止我们如此做,因为
LinkButton 控件依赖客户端 JavaScript。

以选“大型文本”版本后,将向该页中补充加对附加样式表的援。该样式表包含单个规则。

body 
{ 
    font-size: x-large; 
}

拖欠规则以正文字体大小设置为值 x-large。因为主样式表(包含在 SiteTheme
文件夹中)中指定的装有字体都使用相对大小,所以修改正文元素的字体大小会活动增加
Web 站点中持有因素的字体大小。

图片 51归来页首

小结

Web 标准是一个吓东西。通过本 Web
标准,您能以最好少之行事,让最常见的受众访问您的 Web 站点。您的 Web
站点将与重多的浏览器兼容,并且它们重新发出或以将来前仆后继健康工作。

ASP.NET 2.0 框架旨在使你能轻松地变满足 Web 标准的 Web
站点。该框架而你能够轻松地生成 XHTML Web 站点。在 ASP.NET 2.0
框架中,默认情况下,所有 ASP.NET 控件都表现 XHTML
元素和性能。而且,Visual Studio .NET 2005 和 Visual Web Developer
允许你于生成页的长河遭到自行对 XHTML 标准认证这些页的行。

由此 ASP.NET 2.0 框架,还可以再次易地变化可被残疾人士访问的 Web
站点。ASP.NET 2.0
框架中的控件包含大量每当设计时考虑了但访问性的新属性。例如,每个呈现图像的
ASP.NET
控件都使您会呈现图像的轮换文本。此外,所有新导航控件都蕴含“跳了导航”链接,以要残疾人士可以重新便于地浏览
Web 站点。

有关作者

Stephen Walther 曾经撰写了有关 ASP.NET, ASP.NET
Unleashed
的畅销书。他要 ASP.NET Community Starter Kit(一个由于 Microsoft
开发的示范 ASP.NET 应用程序)的架构师和首席开发人员。他既经过其公司
Superexpert 为美国街头巷尾的铺(包括 NASA
和 Microsoft)提供 ASP.NET 培训。

变更到本英文页面

返回页首
©2005 Microsoft Corporation. 版权所有.  保留所有权利 |商标 |隐私权声明

图片 52

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图