設定協助工具

網站的協助工具 (Accessibility, VisualStudio 中翻成「網頁可及性」) 指的就是無障礙網頁的設計。 它的目的是協助使用非傳統I/O介面的使用者，也可以很方便地使用網站。 例如：有些使用者使用特殊的滑鼠，或者使用螢幕助讀器 (screen readers) 存取網站內容，而不是傳統的螢幕。

ASP.NET 控制項對 Accessibility 的支援

ASP.NET controls are designed to be accessible by default. For example, login controls such as Login, ChangePassword, PasswordRecovery, and CreateUserWizard use text boxes with associated labels to help a user who uses a screen reader or who does not use a mouse.

Another way some ASP.NET controls support accessibility is by allowing users to skip link text. Screen readers typically read the text of links from the top to the bottom of a page, enabling users to choose a specific link. ASP.NET controls that include navigation links provide the SkipLinkText property, which is enabled by default and allows users to skip past the link text. Such as CreateUserWizard, Menu, SiteMapPath, TreeView, and Wizard support skipping links.

在視覺上提供協助

幾種提供視覺協助的設計原則：

• 使用 AlternateText 屬性描述 Image
• 使用 Table.Caption 屬性描述 Table
• 避免指定字型大小
• 避免使用 Scripts
• 背景色使用 Solid Colors ，文字使用 Contrasting Colors .

Table

Image

關於 Image 標籤有幾個屬性是針對視覺障礙使用者設計的，它只會在特殊的瀏覽器，例如螢幕助讀器 (screen readers) 產生作用。 關於更多「無障礙網頁」的需求可參閱 無障礙網頁開發規範

• AlternateText ：取得或設定當沒有影像時，要顯示於 Image 控制項的替代文字。
• DescriptionUrl ：
  通常我們會使用 ToolTip 屬性來設定圖片的說明文字，但這是給一般瀏覽器使用的，它會 render 成 <img> 標籤的 Title 屬性。 針對螢幕助讀器，必須使用 AlternateText 屬性，它會 render 成 <img> 標籤的 Alt 屬性。 如果一個說明文字的內容大長，超過 AlternateText 屬性限制，你也可以將說明文字放在檔案中，再使用 DescriptionUrl 屬性指定，它會 render 成 <img> 標籤的 LongDesc 屬性。
• GenerateEmptyAlternateText ：
  若圖片的說明內容不重要，例如一些邊框的圖片，你就可以使用這個屬性，讓螢幕助讀器忽略這個說明文字。 如果只是設定 AlternateText="" ，將不會產生 alt 屬性。

<asp:Image ID="Image1" runat="server" 
    ImageUrl        = "~/Images/ad1.jpg" 
    ToolTip         = "this is ToolTip" 
    AlternateText   = "this is AlternateText"
    DescriptionUrl  = "Img1Desc.html"
    GenerateEmptyAlternateText="True" />

<--Render 後的結果-->

<img id="Image1" 
    src     = "../Images/ad1.jpg" 
    title   = "this is ToolTip" 
    alt     = "this is AlternateText"
    longdesc= "Img1Desc.html"  />     

在表單輸入上提供協助

To make your application as accessible as possible using a keyboard, follow these guidelines :

• 在表單中設定 DefaultFouce 屬性
• 定義 tab 鍵的移動順序
• 使用 DefaultButton 屬性設定預設按鈕。
• 使用有意義的連結文字。
• 使用 AccessKey 屬性設定按鈕的快速鍵。
  

  因為 TextBox 控制項沒有 description 的區域，所以可以在前面放置 Label 來協助 screen readers 理解。 雖然 TextBox 就可以直接設定快速鍵，你也可以將快速鍵設定在 Label 控制項上， 並指定 AccessKey 和 AssociatedControlID 屬性，將 Label 和指定的控制項建立關連。

  <asp:Label ID="Label6" runat="server" Text="<u>N</u>ame:"/>
  <asp:TextBox ID="txtName" runat="server" TabIndex="8" AccessKey="N" /><br />
              
  <asp:Label ID="Label7" runat="server" Text="<u>A</u>ddress:" AssociatedControlID="txtAddress" AccessKey="A" />
  <asp:TextBox ID="txtAddress" runat="server" TabIndex="9" />
  

  偵側瀏灠器支援的快速鍵

• 使用 Label 控制項的 AccessKey 和 AssociatedControlID 屬性，協助定義 TextBox 的快速鍵。
• Use the Panel control to create subdivisions.

  &nbsp;<asp:Panel ID="Panel1" runat="server" GroupingText="Profile" >
      ....
  </asp:Panel>
      <br />
      <pre>

• specify meaningful error messages in the Text and ErrorMessage properties of validator controls

Testing Accessibility

Visual Studio can test Web pages or entire Web applications for compliance with WCAG and Section 508 standards.

• WCAG Priority 1 ： WCAG 1.0 版中的標準檢查，定義必要的功能
• WCAG Priority 2 ： WCAG 2.0 版中的指定檢查，定義建議的功能
• Access Board Section 508 ： 美國聯邦政府復健法案第 508 條中建立的標準

Checking the Accessibility of a Single Page

To use Visual Studio to test the accessibility of a Web page, follow these steps:

1. In Visual Studio, open the page you wish to check.
2. From the View menu, select Error List to display the Error List window.

   

3. From the Tools menu, select Check Accessibility.
   

   

   It will show the Accessibility Validation dialog box .

   

4. Select the check boxes for the type and level of accessibility checking that you want to perform

Checking the Accessibility of a Web Application

You can use Visual Studio to automatically test the accessibility of an entire Web application when you build it. To do so, follow these steps :

1. In Solution Explorer, right-click your Web site and select Property Pages.
2. Click the Accessibility node.

   

3. Select the check boxes for the type and level of accessibility checking that you want to perform, and then click Apply.
4. Next, select the Build node of the Property Pages dialog box.
5. Checked the options in the Accessibility Validation group .

   

6. Click OK to close the Property Pages dialog box.

Now, when you build your Web application, Visual Studio automatically generates a list of accessibility warnings. Accessibility warnings won't prevent a successful build. You will have to manually view the Error List to examine any accessibility issues.

• 網頁可及性驗證對話方塊