最后,请注意每个 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" />
<span class="accessKey">access key is t</span>
当按 ALT 键时,将执行客户端 JavaScript,并且显示 <span> 标记的内容。
图 16. 搜索表单访问键
您可能为该功能感到担心,因为按照可访问性准则,当 JavaScript 和样式表关闭时,该页必须能够继续工作(WCAG 准则 6)。幸运的是,当 JavaScript 和样式表都被禁用时,该页确实能够正常工作。在这种情况下,<span> 标记的内容不再隐藏,并且总是显示访问键(参见图 17)。
图 17. 搜索表单适度降格
返回页首
母版页
示例 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=http://www.wapdes.com/"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-validator/images/vcss"
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>
返回页首
母版页的 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)。
图 18. 一致性标识语
返回页首
母版页的可访问性功能
示例 Web 站点中每一页的顶部都包含一个链接,可以使用该链接切换用于显示相应页的样式表。每一页都可以用下列两个版本之一进行显示:“普通文本”版本和“大型文本”版本。在选择“大型文本”版本以后,Web 站点中所有文本的大小都会有所增加以使可读性更强(参见图 19)。
图 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 站点的







