Walkthrough: Accessibility Guidelines for Using Label Controls, Validator Controls, and Panel Controls

This walkthrough shows how to use ASP.NET Label, Panel, and validator controls in ways that help make an input form accessible for people who use screen reader software. These techniques can help you meet the following Web Content Accessibility Guidelines (WCAG) 2.0 guidelines:

• Separating structure from presentation (WCAG guideline 1.3).

• Making Web sites navigable (WCAG guideline 2.4).

• Helping users avoid and correct mistakes (WCAG guideline 3.1).

The walkthrough also demonstrates how to use the Visual Studio accessibility checker tool. For more information about accessibility and WCAG 2.0, see Accessibility in Visual Studio and ASP.NET.

Prerequisites

In order to run this walkthrough, you must have the following:

• Visual Studio 2010 or a later version.

• An ASP.NET 4 Web site to which you can add a new Web page.

  If you are building the Configuration System Browser application, this will be the Web site that you created in Walkthrough: Accessibility Guidelines for Using Image Controls, Menu Controls, and AutoPostBack.

The Configuration System Browser Application

This walkthrough is the fifth in a series that demonstrates techniques that can help an ASP.NET Web site conform to WCAG 2.0 accessibility guidelines. This series of walkthroughs creates a Web application that you can use to view ASP.NET configuration settings. If you want to do all of the walkthroughs, start with Walkthrough: Accessibility Guidelines for Using Image Controls, Menu Controls, and AutoPostBack. If you do not want to complete other walkthroughs in the series, follow the alternate instructions that are provided for a few of the steps. The same accessibility features are illustrated whether you choose to complete the walkthrough as part of the series or independently.

The Web page that you create in this walkthrough contains an input form in which you enter data that will be used by other pages in the Configuration System Browser. The data in the form is used to select a specific configuration file and to modify the home page header to reflect that selection. For more information about configuration files and the section groups, sections, and elements that they contain, see ASP.NET Configuration Files. However, it is not necessary to be familiar with the ASP.NET configuration file system to use these walkthroughs as illustrations of how to create Web pages that comply with accessibility guidelines.

Security Note
The configuration information that is displayed by the application that you create in these walkthroughs is useful for developers, but you should not display it in a production Web site for security reasons. Configuration settings might include sensitive information that should be shown only to authorized users.

A Visual Studio Web site project with source code is available to accompany this topic: Download.

Creating a Web Page that Uses Panel, Label, and Validator Controls

In this section you create a Web page that contains an input form. The form includes the following features that make it more accessible for people who use screen reader software:

• The form is divided into sections by using Panel controls.

• The AssociatedControlID properties of Label controls tie them to the input controls that they provide captions for.

• Helpful error messages are provided for validator controls, and required fields are clearly marked.

To create a Web page that contains an input form

1. In Solution Explorer, right-click the project name and then click Add New Item.

   The Add New Item dialog box appears.

2. Under Installed Templates, click Visual Basic or Visual C#, and then click Web Form.

3. In the Name text box, enter Preferences.aspx.

4. Make sure that the Place code in separate file check box is checked.

5. If you are adding this page to the Configuration System Browser application, make sure that the Select master page check box is checked. (If you are not adding this page to the Web site that you create in Walkthrough: Accessibility Guidelines for Using Image Controls, Menu Controls, and AutoPostBack, there might not be a master page.)

6. When the Select a Master Page dialog box appears, click OK. There is only one master page, and it will already be selected.

7. In the Add New Item dialog box,click OK.

   The Preferences.aspx file opens in Source view.

8. In the @ Page directive, set the Title property to Configuration System Browser - Preferences, as shown in the following example:

   <%@ Page  Language="VB" AutoEventWireup="true" 
       Title="Configuration System Browser - Preferences"
       CodeFile="Preferences.aspx.vb"  MasterPageFile="~/Site.master" 
       Inherits="Preferences" %>
   

   <%@ Page  Language="C#" AutoEventWireup="true" 
       Title="Configuration System Browser - Preferences"
       CodeFile="Preferences.aspx.cs"  MasterPageFile="~/Site.master" 
       Inherits="Preferences" %>
   

   This title identifies the site and the page in the site. Setting the page title is required by accessibility guidelines.

9. Inside the Content element that is for the MainContent ContentPlaceHolder control, insert the following markup:

   <h2>
       Preferences
   </h2>
   
   <asp:Panel ID="Panel2" runat="server" 
       GroupingText="Specify Heading Text">
       <asp:Label ID="Label1" runat="server" 
           AssociatedControlID="HeadingTextBox" 
           Text="* Heading" class="bold">
       </asp:Label>
       <asp:TextBox ID="HeadingTextBox" runat="server">
       </asp:TextBox>
       <asp:HyperLink ID="HyperLink1" runat="server"
           NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
           Configuration File Hierarchy Documentation
           </asp:HyperLink>
       <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
           runat="server" 
           ControlToValidate="HeadingTextBox" 
           CssClass="errorMessage" 
           ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
       </asp:RequiredFieldValidator>
   </asp:Panel>
   

   <h2>
       Preferences
   </h2>
   
   <asp:Panel ID="Panel2" runat="server" 
       GroupingText="Headings">
       <asp:Label ID="Label1" runat="server" 
           AssociatedControlID="HeadingTextBox" 
           Text="* Heading" class="bold">
       </asp:Label>
       <asp:TextBox ID="HeadingTextBox" runat="server">
       </asp:TextBox>
       <asp:HyperLink ID="HyperLink1" runat="server"
           NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
           Configuration File Hierarchy Documentation
           </asp:HyperLink>
       <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
           runat="server" 
           ControlToValidate="HeadingTextBox" 
           CssClass="errorMessage" 
           ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
       </asp:RequiredFieldValidator>
   </asp:Panel>
   

   (If you creating a Web page that is not part of the Configuration System Browser application, insert the markup between the <div> and </div> tags.)

   This markup adds a page heading and a text box in which the user can specify a part of the heading that will be displayed on the home page of the Configuration System Browser application. This markup contains the following features that relate to accessibility:

   • The input field is in a Panel control, which generates a div element to set apart a section of the form. The GroupingText property of the Panel control is set so that fieldset and legend elements will be generated.

     Typically, fieldset elements are used only with long forms. However, they are used in this walkthrough to demonstrate what can be done in a longer form.

   • The AssociatedControlID property of the Label control is set to the ID of the TextBox control. This causes label elements that have for attributes to be generated. (Otherwise the Label control generates a span element and no for attribute.)

   • The label for the required field is marked using an asterisk. That is, validation errors are not indicated only by displaying the field label in a bold font or in a different color, because these methods alone might not be perceivable to someone who uses a screen reader.

   • The error message for the RequiredFieldValidator clearly explains what must be entered in the text box.

10. Below the markup that was added in the preceding step, insert the following markup:

    <asp:Panel ID="Panel1" runat="server" 
        GroupingText="Select Configuration File">
        <asp:Label ID="Label5" runat="server" 
            AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
        </asp:Label>
        <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
        </asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" 
            AssociatedControlID="SiteNameTextBox" Text="Site Name">
        </asp:Label>
        <asp:TextBox ID="SiteNameTextBox" runat="server">
        </asp:TextBox>
        <br />
    
        <asp:Label ID="Label3" runat="server" 
            AssociatedControlID="SubPathTextBox" Text="Sub Path">
        </asp:Label>
        <asp:TextBox ID="SubPathTextBox" runat="server">
        </asp:TextBox>
        <br />
    
        <asp:Label ID="Label4" runat="server" 
            AssociatedControlID="ServerTextBox" Text="Server">
        </asp:Label>
        <asp:TextBox ID="ServerTextBox" runat="server">
        </asp:TextBox>
        <br />
    </asp:Panel>
    

    <asp:Panel ID="Panel1" runat="server" 
        GroupingText="Select Configuration File">
        <asp:Label ID="Label5" runat="server" 
            AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
        </asp:Label>
        <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
        </asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" 
            AssociatedControlID="SiteNameTextBox" Text="Site Name">
        </asp:Label>
        <asp:TextBox ID="SiteNameTextBox" runat="server">
        </asp:TextBox>
        <br />
    
        <asp:Label ID="Label3" runat="server" 
            AssociatedControlID="SubPathTextBox" Text="Sub Path">
        </asp:Label>
        <asp:TextBox ID="SubPathTextBox" runat="server">
        </asp:TextBox>
        <br />
    
        <asp:Label ID="Label4" runat="server" 
            AssociatedControlID="ServerTextBox" Text="Server">
        </asp:Label>
        <asp:TextBox ID="ServerTextBox" runat="server">
        </asp:TextBox>
        <br />
    </asp:Panel>
    

    This markup adds four text boxes in which the user can enter the specific configuration file to retrieve configuration information from. This markup contains the following features that relate to accessibility:

    • The input fields are in a Panel control.

    • The AssociatedControlID properties of the Label controls are set appropriately.

    The ways in which these features make the Web page more accessible are explained in earlier steps.

11. Below the markup that was added in the preceding step, insert the following markup:

    * indicates required field.
    <br />
    <br />
    <asp:Button ID="SaveButton" runat="server" Text="Save" 
        TabIndex="6" onclick="SaveButton_Click" />&nbsp;
    <asp:Button ID="CancelButton" runat="server" Text="Cancel"
        CausesValidation="false" 
        TabIndex="7" onclick="CancelButton_Click" />
    

    * indicates required field.
    <br />
    <br />
    <asp:Button ID="SaveButton" runat="server" Text="Save" 
        TabIndex="6" onclick="SaveButton_Click" />&nbsp;
    <asp:Button ID="CancelButton" runat="server" Text="Cancel"
        CausesValidation="false" 
        TabIndex="7" onclick="CancelButton_Click" />
    

    This markup adds a Save button, a Cancel button, and footnote text for the required-field asterisk. The feature in this markup that relates to accessibility is the explanation of what the asterisk means.

    The following example shows the Element.aspx page.

    <%@ Page  Language="VB" AutoEventWireup="true" 
        Title="Configuration System Browser - Preferences"
        CodeFile="Preferences.aspx.vb"  MasterPageFile="~/Site.master" 
        Inherits="Preferences" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <h2>
            Preferences
        </h2>
    
        <asp:Panel ID="Panel2" runat="server" 
            GroupingText="Specify Heading Text">
            <asp:Label ID="Label1" runat="server" 
                AssociatedControlID="HeadingTextBox" 
                Text="* Heading" class="bold">
            </asp:Label>
            <asp:TextBox ID="HeadingTextBox" runat="server">
            </asp:TextBox>
            <asp:HyperLink ID="HyperLink1" runat="server"
                NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
                Configuration File Hierarchy Documentation
                </asp:HyperLink>
            <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
                runat="server" 
                ControlToValidate="HeadingTextBox" 
                CssClass="errorMessage" 
                ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
            </asp:RequiredFieldValidator>
        </asp:Panel>
    
        <asp:Panel ID="Panel1" runat="server" 
            GroupingText="Select Configuration File">
            <asp:Label ID="Label5" runat="server" 
                AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
            </asp:Label>
            <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
            </asp:TextBox>
            <br />
            <asp:Label ID="Label2" runat="server" 
                AssociatedControlID="SiteNameTextBox" Text="Site Name">
            </asp:Label>
            <asp:TextBox ID="SiteNameTextBox" runat="server">
            </asp:TextBox>
            <br />
    
            <asp:Label ID="Label3" runat="server" 
                AssociatedControlID="SubPathTextBox" Text="Sub Path">
            </asp:Label>
            <asp:TextBox ID="SubPathTextBox" runat="server">
            </asp:TextBox>
            <br />
    
            <asp:Label ID="Label4" runat="server" 
                AssociatedControlID="ServerTextBox" Text="Server">
            </asp:Label>
            <asp:TextBox ID="ServerTextBox" runat="server">
            </asp:TextBox>
            <br />
        </asp:Panel>
        * indicates required field.
        <br />
        <br />
        <asp:Button ID="SaveButton" runat="server" Text="Save" 
            TabIndex="6" onclick="SaveButton_Click" />&nbsp;
        <asp:Button ID="CancelButton" runat="server" Text="Cancel"
            CausesValidation="false" 
            TabIndex="7" onclick="CancelButton_Click" />
    
    </asp:Content>
    

    <%@ Page  Language="C#" AutoEventWireup="true" 
        Title="Configuration System Browser - Preferences"
        CodeFile="Preferences.aspx.cs"  MasterPageFile="~/Site.master" 
        Inherits="Preferences" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <h2>
            Preferences
        </h2>
    
        <asp:Panel ID="Panel2" runat="server" 
            GroupingText="Headings">
            <asp:Label ID="Label1" runat="server" 
                AssociatedControlID="HeadingTextBox" 
                Text="* Heading" class="bold">
            </asp:Label>
            <asp:TextBox ID="HeadingTextBox" runat="server">
            </asp:TextBox>
            <asp:HyperLink ID="HyperLink1" runat="server"
                NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
                Configuration File Hierarchy Documentation
                </asp:HyperLink>
            <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
                runat="server" 
                ControlToValidate="HeadingTextBox" 
                CssClass="errorMessage" 
                ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
            </asp:RequiredFieldValidator>
        </asp:Panel>
    
        <asp:Panel ID="Panel1" runat="server" 
            GroupingText="Select Configuration File">
            <asp:Label ID="Label5" runat="server" 
                AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
            </asp:Label>
            <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
            </asp:TextBox>
            <br />
            <asp:Label ID="Label2" runat="server" 
                AssociatedControlID="SiteNameTextBox" Text="Site Name">
            </asp:Label>
            <asp:TextBox ID="SiteNameTextBox" runat="server">
            </asp:TextBox>
            <br />
    
            <asp:Label ID="Label3" runat="server" 
                AssociatedControlID="SubPathTextBox" Text="Sub Path">
            </asp:Label>
            <asp:TextBox ID="SubPathTextBox" runat="server">
            </asp:TextBox>
            <br />
    
            <asp:Label ID="Label4" runat="server" 
                AssociatedControlID="ServerTextBox" Text="Server">
            </asp:Label>
            <asp:TextBox ID="ServerTextBox" runat="server">
            </asp:TextBox>
            <br />
        </asp:Panel>
        * indicates required field.
        <br />
        <br />
        <asp:Button ID="SaveButton" runat="server" Text="Save" 
            TabIndex="6" onclick="SaveButton_Click" />&nbsp;
        <asp:Button ID="CancelButton" runat="server" Text="Cancel"
            CausesValidation="false" 
            TabIndex="7" onclick="CancelButton_Click" />
    
    </asp:Content>
    

Adding Code to Initialize Text Boxes and Handle Button Events

In the following procedure you will add code that performs the following functions:

• Initializes the text boxes using the values that are currently in session state.

• Saves the text box values in session state when the Save button is clicked. Other pages in the Configuration Browser application will use the values in session state to determine which configuration file you want to retrieve information from.

• Transfers control to the home page when Cancel is clicked.

To initialize text boxes and handle the Save and Cancel buttons

1. Open the Preferences.aspx.vb or Preferences.aspx.cs file.

2. Delete the Page_Load method.

3. In its place, add the following code:

   Protected Sub Page_Load(ByVal sender As Object,
                           ByVal e As EventArgs)
   
       If Session("Heading") IsNot Nothing Then
           HeadingTextBox.Text = Session("Heading").ToString()
       End If 
   
       If Session("Path") IsNot Nothing Then
           VirtualPathTextBox.Text = Session("Path").ToString()
       End If 
   
       If Session("Site") IsNot Nothing Then
           SiteNameTextBox.Text = Session("Site").ToString()
       End If 
   
       If Session("SubPath") IsNot Nothing Then
           SubPathTextBox.Text = Session("SubPath").ToString()
       End If 
   
       If Session("Server") IsNot Nothing Then
           ServerTextBox.Text = Session("Server").ToString()
       End If 
   End Sub 
   
   Protected Sub SaveButton_Click(ByVal sender As Object,
                                  ByVal e As EventArgs)
   
       If Page.IsValid <> True Then
           ConfigFileRequiredFieldValidator.Visible = True 
       Else
           Session("Heading") = HeadingTextBox.Text
           Session("Path") = VirtualPathTextBox.Text
           Session("Site") = SiteNameTextBox.Text
           Session("SubPath") = SubPathTextBox.Text
           Session("Server") = ServerTextBox.Text
           Server.Transfer("~/Default.aspx")
       End If 
   End Sub 
   Protected Sub CancelButton_Click(ByVal sender As Object,
                                    ByVal e As EventArgs)
   
       Server.Transfer("~/Default.aspx")
   End Sub
   

   protected void Page_Load(object sender, EventArgs e)
   {
       if (Session["Heading"] != null)
       {
           HeadingTextBox.Text = Session["Heading"].ToString();
       }
   
       if (Session["Path"] != null)
       {
           VirtualPathTextBox.Text = Session["Path"].ToString();
       }
   
       if (Session["Site"] != null)
       {
           SiteNameTextBox.Text = Session["Site"].ToString();
       }
   
       if (Session["SubPath"] != null)
       {
           SubPathTextBox.Text = Session["SubPath"].ToString();
       }
   
       if (Session["Server"] != null)
       {
           ServerTextBox.Text = Session["Server"].ToString();
       }
   }
   
   protected void SaveButton_Click(object sender, EventArgs e)
   {
       if (Page.IsValid != true)
       {
           ConfigFileRequiredFieldValidator.Visible = true;
       }
       else
       {
           Session["Heading"] = HeadingTextBox.Text;
           Session["Path"] = VirtualPathTextBox.Text;
           Session["Site"] = SiteNameTextBox.Text;
           Session["SubPath"] = SubPathTextBox.Text;
           Session["Server"] = ServerTextBox.Text;
           Server.Transfer("~/Default.aspx");
       }
   }
   protected void CancelButton_Click(object sender, EventArgs e)
   {
       Server.Transfer("~/Default.aspx");
   }
   

   For each text box, the Page_Load method checks if there is a value in session state. If there is, the value is loaded into the text box. (This is not related to accessibility, it just keeps track of what you entered when you go from page to page in the Configuration Browser application.)

   The SaveButton_Click method checks whether the user input in the page is valid. It then saves values in session state and links to the home page. The validation check is required because client script might be turned off in the browser. In that case, the page could have been submitted without being validated on the client, which is a potential security issue.

   The CancelButton_Click method transfers control to the home page without making any changes to session state.

Adding CSS Styles to Enhance the Visual Appearance of the Page

If you are creating this Web page as part of the Configuration System Browser application, use this procedure to modify the site's CSS file. The CSS definitions that you add in this procedure are not required for accessibility. However, they enhance the visual appearance of the page in the following ways:

• The label for the required field is displayed in a bold font.

• Any validation error message is displayed in a bold font and in red.

• The text boxes line up because the labels for the text boxes are all the same length.

To modify CSS styles for the title bar

1. In Solution Explorer, expand the Styles folder and then open the Site.css file.

2. Below the FORM ELEMENTS comment line, add the following definition:

   fieldset label
   {
       display: block;
       float:left;
       width: 10em;
   }
   

   This definition gives label elements that are in fieldset elements a standard length.

3. At the end of the file, insert the following CSS definitions:

   .errorMessage
   {
       font-weight: bold;
       color: Red;
   }
   
   .bold
   {
       font-weight: bold;
   }
   

   These definitions are used to make the required-field label bold, and to make the error message bold and red.

Testing the Web Page

You can now test to verify that the page displays correctly and that accessible HTML is generated for it.

To test the page

1. In Solution Explorer, right-click Preferences.aspx and then click View in Browser.

   The following illustration shows the input form that has empty text boxes.

   

   Note

   You might have to click your browser's Reload or Refresh button to see the result of the new CSS settings that you added in the preceding procedure.

   If you created the Web page as an independent page instead of as part of the Configuration System Browser application, there is no title bar or menu bar.

2. In the browser, view the page source.

   The following example shows how table sections are identified by fieldset elements, and how input field labels are identified by label elements that have for attributes.

   <fieldset>
     <legend>Headings</legend>
     <label for="MainContent_HeadingTextBox" id="MainContent_Label1"
         class="bold">
         * Heading
     </label>
     <input name="ctl00$MainContent$HeadingTextBox" type="text"
         id="MainContent_HeadingTextBox" />
     <a id="MainContent_HyperLink1" href=...>
         Configuration File Hierarchy Documentation
     </a>
     <!-- Additional markup -->
   </fieldset>
   

3. On the Web page, click the Save button.

   The error message is displayed that tells you that a required field is missing, as shown in the following illustration:

   

   If you have completed the other walkthroughs in this series, the Configuration Browser Application is now complete. You can browse through section groups, sections, and elements by going to the Home page and clicking on links in the various lists and tables that are displayed.

   On the Preferences page you can enter values in the Select Configuration File panel to select a configuration file other than the machine.config file, which is the default. For example, if your Web site is named ConfigBrowser, you might enter /ConfigBrowser in the Virtual Path field. In that case, the other Web pages in the application will display information from the application's Web.config file instead of from the machine.config file. For more information about the values that you can enter, see the OpenWebConfiguration method.

Validating Accessibility

In this section you use the Visual Studio accessibility checker tool to help find accessibility problems in a Web page. The accessibility checker can remind you about issues that you might otherwise overlook. However, you should be aware of its limitations. The absence of error messages does not necessarily mean a Web site is completely compatible with accessibility guidelines. In addition, error messages that it reports might not apply to your Web site because they might be out of date.

The accessibility checker has the following limitations:

• Many accessibility guidelines require human judgment and cannot be verified automatically. For example, an automated tool can verify that an alt attribute is present on an img tag. However, it cannot verify that the text in the alt attribute is appropriate for the image.

• The accessibility checker validates against WCAG 1.0 guidelines, not WCAG 2.0. WCAG 1.0 is more than ten years old and many accessibility guidelines have changed. Some sites might be legally required to follow older guidelines. However, you must be aware of the newer guidelines and decide what to do about accessibility checker messages that pertain to the older guidelines. For more information, see Accessibility in Visual Studio and ASP.NET.

• The accessibility checker validates only HTML. It does not validate ASP.NET markup. For example, it will report a missing alt attribute on an img element. But it will not report a missing AlternateText property on an Image control.

To run the accessibility checker

1. Open Preferences.aspx file and switch to Source view.

2. Below the h2 element that contains the Preferences heading, insert the following markup:

   <asp:image ID="Image1" runat="server" 
       ImageUrl="~/Images/ASPdotNET_logo.jpg"></asp:image>
   <img src="~/Images/ASPdotNET_logo.jpg"/>
   

   This markup contains accessibility errors so that you can see how the accessibility checker reports errors.

3. Save the Preferences.aspx file.

4. In the Tools menu, click Check Accessibility.

   The Accessibility Validation dialog box appears, as shown in the following illustration:

   

5. Click Validate.

   Errors and warnings appear in the Error list window, as shown in the following illustration:

   

   You see both error messages and informational messages. Accessibility errors are identified by the WCAG 1.0 checkpoint number.

   Notice that you see an error for the HTML img element but not for the ASP.NET Image control, even though both controls are missing alt attributes. (The Image control does not have either its AlternateText property or its GenerateEmptyAlternateText property set.) The accessibility checker validates only HTML. It does not validate ASP.NET markup. If you want to use the accessibility checker on an .aspx page in order to test markup that is generated dynamically, one way to do so is to perform the following steps:

   1. View the page in a browser.

   2. In the browser, view the page's HTML source.

   3. Save the source in an .html file and run the accessibility checker on that file.

6. Remove the img element and the Image control that you added in a preceding step.

7. Save the Preferences.aspx file.

Next Steps

In this walkthrough you used Label, Panel, and validator controls in ways that help make a Web page accessible for people who use screen reader software. Other walkthroughs in this series demonstrate other techniques that help your Web site conform to accessibility guidelines. This is the last walkthrough in the series. The other walkthroughs are the following:

• Walkthrough: Accessibility Guidelines for Using Image Controls, Menu Controls, and AutoPostBack

• Walkthrough: Accessibility Guidelines for Using the GridView Control

• Walkthrough: Accessibility Guidelines for Using the ListView Control

• Walkthrough: Accessibility Guidelines for Using Label Controls, Validator Controls, and Panel Controls

See Also

Concepts

Accessibility in Visual Studio and ASP.NET