通过

演练：创建具有辅助功能的 Web 应用程序

  • 项目

更新：2007 年 11 月

创建具有辅助功能的网页使您可以吸引到尽可能多的客户。残疾人士并不是仅有的欣赏具有辅助功能的页的用户。纯文本浏览器的用户或解释网页内容的软件的用户也可能要使用辅助功能选项。辅助功能设计使自动化工具（如搜索引擎）可以搜索和处理页上的信息并可以对这些信息编制索引。最后，未来的电信法律可能会要求，Internet 上分布的信息与传统软件一样需要具有辅助功能。有关更多信息，请参见 ASP.NET 中的辅助功能支持 和 ASP.NET 控件和辅助功能。

从 Microsoft 辅助工具网站，可以获得设计具有辅助功能的网页的一些提示：

  • 为所有图形提供良好的备用 (ALT) 文本。

  • 正确使用图像映射。

  • 编写有用的链接文本。

  • 设计良好的键盘导航。

  • 提供不使用框架的备用页。

  • 正确使用表及其备用表。

  • 支持文本阅读器的格式设置选项。

  • 不要求使用样式表。

  • 使用阅读器可以使用的文件格式。

  • 避免使用滚动字幕。

  • 为大多数对象提供标题。

如果无法满足辅助功能目标，请考虑提供备用的纯文本网页。

ASP.NET 控件支持许多辅助功能准则。包括显示键盘焦点和屏幕元素。ASP.NET 控件的属性 (Property) 可用于支持其他辅助功能准则，如下表所示。

控件属性 (Property)

辅助功能注意事项

TabIndex

用于创建一个在窗体中导航的合理路径。没有内部标签的控件（如文本框）必须按 Tab 键顺序紧跟在关联标签之后，这非常重要。如果不可能或不适合这样做，则使用 Label 控件的 AssociatedControlID 属性 (Property) 将控件与文本框相关联。

Text

使用 HTML u 元素来显示控件的键盘快捷键。使用访问键有助于通过键盘访问所有功能并提供键盘使用的详细说明。（使用 AccessKey 属性 (Property) 来启用控件的键盘快捷键。）

Font Size

使用标题标记而不是具体的大小。

AlternateText

为所有对于要解析的网页内容有意义的图像提供备用文本。在某些情况下，不应设置图像（如用于图形格式的图像）的备用文本。若要将图像的 AlternateText 属性 (Property) 呈现为空，请将 Image 控件的 GenerateEmptyAlternateText 属性 (Property) 设置为 true。

AccessKey

用于提供对控件的键盘访问。

先决条件

若要完成本演练，您需要以下各项：

  • Microsoft Visual Web Developer Web 开发工具。

  • .NET Framework。

创建网站和网页

在本演练中，将创建一个代数课网站。用户界面使用以下控件：

  • 用作课程徽标的 Image 控件。

  • 用于讲座的 Panel 控件，其中有一个 HyperLink 控件。

  • GridView 控件，显示包含课程提纲的表。

  • HyperLink 控件，链接到介绍课程教材的页。

本演练的中心是用户界面 (UI) 的辅助功能以及如何使用 Web 服务器控件来支持辅助功能。它演示几个常用控件的辅助功能属性 (Attribute)，这几个控件包括 HyperLink、GridView、Image 和 Label 控件。HyperLink 控件都导航到同一网页，但该网页是空的。

在下面的过程中，将创建文件系统网站并添加一个名为 Lecture.aspx 的页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建网站”。

    “新建网站”对话框随即出现。

  3. 在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

  4. 在“位置”框中输入要保存网站页面的文件夹的名称。

    例如，键入文件夹名“C:\WebSites”。

  5. 在“语言”列表中，单击您想使用的编程语言。

  6. 单击“确定”。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

  7. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

  8. 在“Visual Studio 已安装的模板”下单击“Web 窗体”。

  9. 在“名称”框中，键入“Lecture.aspx”，然后单击“确定”。

创建要显示的数据

要创建的页会显示有关代数课讲座的信息。在本演练中，课程的数据存储在 XML 文件中。

创建 XML 数据文件

  1. 在解决方案资源管理器中，右击“App_Data”文件夹，然后单击“添加新项”。

    说明：

    确保将 XML 文件添加到“App_Data”文件夹中。

  2. 在“添加新项”对话框的“Visual Studio 已安装的模板”下面，单击“XML 文件”。

  3. 在“名称”框中键入“Syllabus”。

  4. 单击“添加”。

  5. 复制下面的 XML 到该文件中，并覆盖默认内容。

    <?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

  6. 保存 XML 文件，然后将其关闭。

向窗体添加控件

将控件添加到本应用程序的窗体中时，请考虑下列准则以便生成具有辅助功能的应用程序：

  • 每个提供用户信息的图像都应具有说明性备用文本。

  • 使用表时，用 Title 属性 (Attribute) 为表的列和行提供名称。同时，确保从左到右、从上到下阅读时表是有意义的。

  • 使用实际的标题标记而不是格式化文本来支持用户选择的格式设置选项。

  • 提供有用的链接文本。例如，如果文本是“单击此处查看讲座 1 笔记”，那么“讲座 1 笔记”就是比“单击此处”更有用的链接文本。

  • 依据特定语言的正常文本顺序，提供在页中导航的合理路径。

  • 对大多数对象使用 Title 属性 (Attribute)。

将具有辅助功能的控件添加到页中

  1. 切换到“设计”视图。

  2. 在“属性”中，设置“DOCUMENT”的下列属性：

    • 将“Title”设置为“代数课”

    • 将“BgColor”设置为“背景”。

  3. 在页的顶部，键入“代数复习课”。

  4. 突出显示要设置其格式的文本以选择该文本，然后在“格式”工具栏上，在最左侧的列表中单击“标题 1”。

  5. 从“标准”组的“工具箱”中，添加下面的控件并按指示设置属性 (Property)。

    说明：

    页的布局并不重要。

    控件

    属性 (Property)

    值

    Image

    AlternateText

    代数等式。

     

    ImageUrl

    图像的 URL。

     

    TabIndex

    0

    Panel

    ID

    Lectures

     

    TabIndex

    0

    HyperLink（添加到“Lectures”面板）

    ID

    Lecture1

     

    Text

    Lecture 1 笔记

     

    AccessKey

    1

     

    href

    ~/Lecture.aspx

     

    TabIndex

    1

    HyperLink（添加到“Lectures”面板）

    ID

    Lecture2

     

    Text

    Lecture 2 笔记

     

    AccessKey

    2

     

    href

    ~/Lecture.aspx

     

    TabIndex

    2

    HyperLink（添加到“Lectures”面板）

    ID

    Lecture3

     

    Text

    Lecture 3 笔记

     

    AccessKey

    3

     

    href

    ~/Lecture.aspx

     

    TabIndex

    3

    Label

    ID

    TextbookLabel

     

    Text

    教材：

     

    AssociatedControlID

    TextbookLink

    Hyperlink

    ID

    TextbookLink

     

    Text

    《代数复习》，J. A. Smith

     

    href

    ~/Lecture.aspx

     

    TabIndex

    4

  6. 单击 Panel 控件，然后将 GroupingText 属性 (Property) 设置为“Lecture 笔记”。

  7. 切换到“源”视图。

  8. 在 HTML 元素内单击，然后在“属性”中将“lang”设置为“en”，指示该页的语言为英语。

    现在标记应如下所示：

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

添加 GridView 控件

讲座的信息显示在 GridView 控件中。GridView 控件从前面部分创建的 XML 文件中检索数据。

添加 GridView 控件并将其绑定到 XML 文件

  1. 切换到“设计”视图。

  2. 从“工具箱”的“数据”组中，将一个 XmlDataSource 控件拖到该页上。

    位置并不重要。

    XmlDataSource 控件读取 XML 文件并向页中的控件提供数据。

  3. 右击“XmlDataSource”，单击“显示智能标记”，然后在“XmlDataSource 任务”菜单上单击“配置数据源”。

    出现“配置数据源”对话框。

  4. 在“数据文件”框中，输入 ~/App_Data/Syllabus.xml，然后单击“确定”。

  5. 从“工具箱”的“数据”组中，将一个 GridView 控件添加到该页上。

  6. 在“属性”中设置属性 (Property)，如下表所示。

    属性 (Property)

    设置

    ID

    SyllabusGrid

    DataSourceId

    XmlDataSource1

    TabIndex

    9

将标题添加到 GridView 控件单元格

辅助功能的一个要求是 HTML 表的列和单元格具有标题。GridView 控件在运行时呈现 HTML 表。因此，必须确保该控件呈现的列具有标题。为了执行此任务，需要编写处理 RowCreated 事件的代码。在事件处理程序中，将向 GridView 控件所创建的表单元格添加 Title 属性 (Attribute)。

将标题添加到 GridView 控件列

  1. 在解决方案资源管理器中，右击页的名称（“Default.aspx”），然后单击“查看代码”。

  2. 添加下列代码。

    Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

    protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

  3. 在“设计”视图中，单击 GridView 控件，然后在“属性”窗口中，将“RowCreated”事件设置为 "SyllabusGrid_RowCreated"。

    这样可将事件连接到事件处理程序。

测试应用程序

Visual Web Developer 提供了辅助功能验证，该验证是检查网页并确定网页是否满足辅助功能准则的工具。该工具在设计时检查页中的 HTML。也可以检查页的输出，即检查 ASP.NET 控件所呈现的标记是否满足辅助功能准则。

测试应用程序的辅助功能

  1. 确保页在“设计”视图中。

  2. 在“工具”菜单中单击“检查辅助功能”。

    出现“辅助功能验证”对话框。

    说明：

    Microsoft Visual Web Developer 速成版中未提供辅助功能检查工具。

  3. 选择要查找的辅助功能标准的复选框，然后单击“验证”。

    Visual Web Developer 检查页，然后显示验证错误的报告（如果有）。注意，辅助功能验证报告不能确定将由 GridView 控件呈现的表是否满足辅助功能准则。

  4. 按 Ctrl+F5 运行该页。

  5. 测试访问键。

    对于此应用程序，为 HyperLink 控件定义了 Alt+1、Alt+2 和 Alt+3 访问键。这些访问键移动到链接。按 Enter 进入链接。

  6. 关闭图形以确保备用文本使页可用。具体方法为：

    1. 在 Microsoft Internet Explorer 6.0 中，单击“工具”菜单上的“Internet 选项”。

    2. 在“高级”选项卡的“多媒体”下，关闭图形选项。

    您必须更新页才能查看备用文本。

  7. 关闭声音以确保不会丢失重要指令。具体方法为：

    1. 在 Internet Explorer 6.0 中，单击“工具”菜单上的“Internet 选项”。

    2. 在“高级”选项卡的“多媒体”下，关闭声音选项。

  8. 在允许关闭样式表的浏览器中查看应用程序，然后关闭样式表以确认页仍然可读。

    1. 在 Internet Explorer 6.0 中，单击“工具”菜单上的“Internet 选项”。

    2. 在“常规”选项卡上，单击“辅助功能”设置样式表选项。

  9. 使用 Microsoft Windows“高对比度”选项，确认页仍然可读。测试“高对比度”选项：

    1. 在 Windows 中，单击“开始”，指向“控制面板”，然后单击“辅助功能选项”。

    2. 在“显示”选项卡上，选择“使用高对比度”复选框。

    3. 移动到所有用户界面元素，确认反映了颜色和字体的更改。同时，确保忽略所有在文本后面绘制的图像或图案。

  10. 使用受支持的最大字体大小（只有选择了“高对比度”时才可用），确保页仍然可读。具体方法为：

    1. 在 Windows 中，单击“开始”，指向“控制面板”，然后单击“显示”。

    2. 在“外观”选项卡的“字体大小”列表中，单击“特大”。

  11. 调整浏览器窗口的大小并检查可读性。

  12. 使用键盘在页中移动，确保导航顺序是合理的（Tab 键可以经过所有链接，并且使用 Ctrl+Tab 可以在窗格或各部分之间移动）。

  13. 选择所有文本并将其复制到剪贴板以确保它是有意义的。

请参见

概念

ASP.NET 中的辅助功能支持

ASP.NET 控件和辅助功能

Web 应用程序安全威胁概述

其他资源

Web 内容辅助功能准则 1.0 (W3C)