逐步解說：建立可及性 Web 應用程式
更新：2007 年 11 月
建立可及性的 Web 網頁可以讓您盡可能接觸更多的客戶。行動不便人士並不是唯一感激有可及性網頁的使用者，純文字瀏覽器的使用者或解譯 Web 網頁內容之軟體的使用者也可能會依賴協助工具選項。網頁可及性的設計可讓自動化工具 (例如搜尋引擎) 搜尋、索引和處理網頁上的資訊。最後，未來的電信法規可能會明訂透過網際網路散發的資訊必須比照傳統軟體，必須要有可及性。如需詳細資訊，請參閱 ASP.NET 中的網頁可及性支援和 ASP.NET 控制項和網頁可及性。
您可以從 Microsoft Accessibility 網站獲得設計可及性網頁的提示：
所有圖形都有理想的替代 (ALT) 文字。
正確使用影像對應。
撰寫有用的連結文字。
設計良好的鍵盤巡覽。
提供不使用框架的替代網頁。
正確使用表格及其替代項目。
支援用於文字讀取器的格式化選項。
不需使用樣式表。
使用讀取器可以使用的檔案格式。
避免捲動的跑馬燈。
為大部分物件提供標題。
如果您無法符合網頁可及性目標，可以考慮提供替代的純文字 Web 網頁。
ASP.NET 控制項支援許多網頁可及性方針，這包括顯示鍵盤焦點和螢幕項目。ASP.NET 控制項的屬性可用於支援其他網頁可及性方針，如下表內容：
控制項屬性 |
網頁可及性考量 |
|---|---|
TabIndex |
用於在表單中建立直覺式巡覽路徑。必須讓沒有內建 (Intrinsic) 標籤的控制項 (例如文字方塊)，具有恰好位於定位順序中控制項前面的關聯標籤。如果無法執行或不需要這樣做，請使用 Label 控制項的 AssociatedControlID 屬性將該控制項與文字方塊建立關聯。 |
Text |
使用 HTML u 項目顯示控制項的鍵盤快速鍵。使用便捷鍵 (Access Key) 可為所有功能提供有說明的鍵盤存取 (使用 AccessKey 屬性啟用控制項的鍵盤快速鍵)。 |
Font Size |
使用標題標記，而非特定大小。 |
AlternateText |
提供所有影像的替代文字，這些影像對了解 Web 網頁的內容是非常有意義的。但在某些執行個體中，不設定影像的替代文字是適當的，例如在影像用於圖形格式化的這種情況下。若要讓影像的 AlternateText 屬性呈現為空白，請將 Image 控制項的 GenerateEmptyAlternateText 屬性設定為 true。 |
AccessKey |
用於提供控制項的鍵盤存取。 |
必要條件
若要完成這個逐步解說，您必須進行下列步驟：
Microsoft Visual Web Developer Web 開發工具。
.NET Framework。
建立網站和 Web 網頁
在此逐步解說中，您會建立一個代數課程的網站，網頁上的使用者介面會使用下列控制項：
此逐步解說的重點在於使用者介面 (UI) 的可及性，以及如何使用 Web 伺服器控制項以支援可及性。它示範了數種常用控制項的可及性功能，包括 HyperLink、GridView、Image 和 Label 控制項。HyperLink 控制項都會巡覽至相同的 Web 網頁，但該 Web 網頁是空白的。
在下列程序中，您將建立檔案系統網站並會加入命名為 Lecture.aspx 的頁面。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來儲存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。
在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後再按一下 [加入新項目]。
請在 [Visual Studio 安裝的範本] 下方，按一下 [Web Form]。
在 [名稱] 方塊中，輸入 Lecture.aspx，然後按一下 [確定]。
建立要顯示的資料
您正在建立的頁面會顯示與代數課程解說相關的資訊。在此逐步解說中，課程資料會儲存在 XML 檔案中。
若要建立 XML 資料檔案
在 [方案總管] 中，以滑鼠右鍵按一下 [App_Data] 資料夾，然後按一下 [加入新項目]。
.gif "注意事項")
注意事項：確定將 XML 檔案加入至 [App_Data] 資料夾。
在 [加入新項目] 對話方塊中的 [Visual Studio 安裝的範本] 下，按一下 [XML 檔]。
在 [名稱] 方塊中輸入 Syllabus。
按一下 [加入]。
將下列 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>儲存並且關閉該 XML 檔案。
將控制項加入到表單中
在這個應用程式的表單中加入控制項時，請考慮下列方針以產生可及性應用程式：
每個提供使用者資訊的影像都應該具有描述性替代文字。
使用表格時，請使用 Title 屬性來分別指定表格的列名稱與欄名稱。並且確定使用者可以在表格中由左至右、由上而下的進行閱讀。
使用實際標題標記而不是格式化的文字，以支援使用者所選取的格式化選項。
提供有用的連結文字。例如，如果文字為 "Click here for Lecture 1 notes" (按這裡取得第 1 課大綱)，則 "Lecture 1 notes" (第 1 課大綱) 連結文字會比 "Click here" (按一下這裡) 更為有用。
在網頁中提供直覺式巡覽路徑，遵循特定語言的一般流程。
對大部分的物件使用 Title 屬性。
若要在網頁中加入可及性控制項
切換至 [設計] 檢視。
在 [屬性] 中為 [DOCUMENT] 設定下列屬性：
將 [Title] 設定為 "Algebra Class"。
將 [BgColor] 設定為 [背景]。
在頁面頂部，輸入 Algebra Review Class。
反白顯示要格式化的文字以將其選取，然後在 [格式] 工具列最左邊的清單中，按一下 [標題 1]。
從 [工具箱] 的 [標準] 群組中，加入下列控制項並根據指示設定屬性。
注意事項：頁面的配置並不重要。
控制項
屬性
值
Image
AlternateText
Algebra equations.
ImageUrl
連接到影像的 URL。
TabIndex
0
Panel
ID
Lectures
TabIndex
0
HyperLink (加入到 [Lectures] 面板)
ID
Lecture1
Text
Lecture 1 notes
AccessKey
1
href
~/Lecture.aspx
TabIndex
1
HyperLink (加入到 [Lectures] 面板)
ID
Lecture2
Text
Lecture 2 notes
AccessKey
2
href
~/Lecture.aspx
TabIndex
2
HyperLink (加入到 [Lectures] 面板)
ID
Lecture3
Text
Lecture 3 notes
AccessKey
3
href
~/Lecture.aspx
TabIndex
3
Label
ID
TextbookLabel
Text
Textbook:
AssociatedControlID
TextbookLink
Hyperlink
ID
TextbookLink
Text
Algebra Review, J. A. Smith
href
~/Lecture.aspx
TabIndex
4
按一下 Panel 控制項，然後將 GroupingText 屬性設定為 Lecture Notes。
切換至原始碼檢視。
在 HTML 項目內按一下，然後在 [屬性] 中將 [lang] 設定為 [en]，表示頁面的語言為英文。
標記現在看起來的樣子會是：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
加入 GridView 控制項
有關解說的資訊顯示在 GridView 控制項中。GridView 控制項會從您在先前章節中建立的 XML 檔案中擷取資料。
若要加入 GridView 控制項並將其繫結至 XML 檔案
切換至 [設計] 檢視。
從 [工具箱] 的 [資料] 群組中，將 XmlDataSource 控制項拖曳到頁面上。
放置的位置並不重要。
XmlDataSource 控制項會讀取 XML 檔案並且讓頁面上的控制項都可以使用資料。
以滑鼠右鍵按一下 [XmlDataSource]，然後按一下 [顯示智慧標籤]，再在 [XmlDataSource 工作] 功能表上按一下 [設定資料來源]。
[設定資料來源] 對話方塊便會出現。
在 [資料檔案] 方塊中，輸入 ~/App_Data/Syllabus.xml，然後按一下 [確定]。
從 [工具箱] 的 [資料] 群組，將 GridView 控制項加入至頁面。
在 [屬性] 中，設定下表所示的屬性。
屬性
設定
ID
SyllabusGrid
DataSourceId
XmlDataSource1
TabIndex
9
將標題加入至 GridView 控制項儲存格
根據網頁可及性的要求，HTML 表格欄以及儲存格都一定要有標題。GridView 控制項會在執行階段呈現 HTML 表格，因此，您必須確定由控制項呈現的表格欄確實具有標題。您將撰寫處理 RowCreated 事件的程式碼，來執行這項工作。在事件處理常式中，您會將 Title 屬性加入到由 GridView 控制項所建立的表格儲存格。
若要將標題加入至 GridView 控制項行
在 [方案總管] 中，以滑鼠右鍵按一下頁面名稱 (Default.aspx)，然後按一下 [檢視程式碼]。
加入下列程式碼。
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 Subprotected 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(); } }在 [設計] 檢視中，按一下 GridView 控制項，然後在 [屬性] 視窗中，將 [RowCreated] 事件設為 "SyllabusGrid_RowCreated"。
這會將事件連接到事件處理常式。
測試應用程式
Visual Web Developer 包含網頁可及性驗證，這是一個可以檢閱 Web 網頁並且判斷該網頁是否符合可及性方針的工具，該工具還可以在設計階段檢閱網頁中的 HTML。您也可以檢閱網頁的輸出，檢查 ASP.NET 控制項呈現的標記是否符合可及性方針。
若要測試應用程式的網頁可及性
確定網頁處於 [設計] 檢視模式。
在 [工具] 功能表上，按一下 [檢查網頁可及性]。
[網頁可及性驗證] 對話方塊隨即出現。
注意事項：在 Microsoft Visual Web Developer Express 版中無法使用網頁可及性檢查工具。
選取您想尋找之網頁可及性標準的核取方塊，然後按一下 [驗證]。
Visual Web Developer 會檢閱網頁，然後顯示驗證錯誤的報告 (如果有的話)。請注意，網頁可及性驗證報告不能判斷 GridView 控制項所呈現的表格是否符合可及性方針。
按 CTRL+F5 執行頁面。
測試便捷鍵。
在這個應用程式中，您已經為 HyperLink 控制項定義了 ALT+1、ALT+2 和 ALT+3 這幾組便捷鍵，便捷鍵會移到連結上，只要按 ENTER 鍵，遵循連結的內容即可。
關閉圖形以確定替代文字可以網頁能夠使用；如要完成這項工作：
在 Microsoft Internet Explorer 6.0 中，按一下 [工具] 功能表上的 [網際網路選項]。
在 [進階] 索引標籤上的 [多媒體] 下，關閉圖形選項。
您必須更新頁面才會看到替代文字。
關閉音效以確保不會遺失重要指令；如要完成這項工作：
在 Internet Explorer 6.0 中，按一下 [工具] 功能表上的 [網際網路選項]。
在 [進階] 索引標籤上的 [多媒體] 下，關閉聲音選項。
在允許您關閉樣式表的瀏覽器中檢視應用程式，然後關閉樣式表以確定頁面仍然可以讀取。
在 Internet Explorer 6.0 中，按一下 [工具] 功能表上的 [網際網路選項]。
在 [一般] 索引標籤上按一下 [存取設定]，設定樣式表選項。
使用 Microsoft Windows [高對比] 選項，以確定頁面仍然可以讀取。若要測試 [高對比] 選項：
在 Windows 中，按一下 [開始]，指向 [控制台]，然後再按 [協助工具選項]。
在 [畫面] 索引標籤上，選取 [使用高對比] 核取方塊。
巡覽所有的 UI 項目，確定色彩和字型已適切反映變更結果，同時確定文字後方繪製的影像或圖樣已被省略。
使用支援的最大字型 (僅適用於選取 [高對比] 選項時)，以確定網頁仍然可以讀取。如要完成這項工作：
在 Windows 中，按一下 [開始]，指向 [控制台]，然後再按 [顯示]。
在 [外觀] 索引標籤的 [字型大小] 清單中，按一下 [超大型字]。
調整瀏覽器視窗大小並檢查可讀性。
使用鍵盤瀏覽 Web 網頁，以確定巡覽順序具有直覺性、使用 TAB 鍵可周遊於所有的連結，而且使用 CTRL+TAB 鍵可以在窗格或區段之間移動。
選取所有的文字並將其複製至 [剪貼簿]，確定可以正常使用。