统计在线人数...

使用 Web 标准生成 ASP.NET 2.0 Web 站点(11)

[ 来源:转载 | 作者:佚名 | 时间:2006-5-29 上午 10:57:30 | 浏览:统计中... ]

而且,请注意,每个表单字段都与其标签显式关联。每个 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" />  
    <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 站点的

[1] [2]  下一页

共有0人参与评价,平均得分:0分
评论内容只代表网友观点,与本站立场无关! 查看完整内容
   

当前在线人数
QQ:748838 MSN:allen_xia#msn.com E-mail:allenxia666#126.com QQ群:站长联盟北方区-北京(28200145) 站长联盟南方区-上海(67713522)