Del via

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

  • Artikel

This walkthrough shows how to help make a Web page accessible for people who use screen reader software when the page involves the following:

These techniques can help you meet the following Web Content Accessibility Guidelines (WCAG) 2.0 guidelines:

  • Providing alternate text for images (WCAG guideline 1.1).

  • Separating structure from presentation (WCAG guideline 1.3).

  • Making Web sites navigable (WCAG guideline 2.4).

  • Making Web content readable and understandable (WCAG guideline 3.1).

  • Responding predictably to user input (WCAG guideline 3.2).

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.

The Configuration System Browser Application

This walkthrough is the first in a series that demonstrates techniques that can help an ASP.NET Web site comply with accessibility guidelines. In this series of walkthroughs, you create a Web application that you can use to view ASP.NET configuration settings.

The Web page that you create in this walkthrough is the home page for the Configuration System Browser Web application. The page displays a list of section groups from an ASP.NET configuration file. For more information about configuration files and the section groups, sections, and elements that they contain, see ASP.NET Configuration Files. However, you do not have to be familiar with the ASP.NET configuration file system in order to use these walkthroughs as illustrations of how to create Web pages that comply with accessibility guidelines.

Security noteSecurity Note

The configuration information that is displayed by the application that you create in these walkthroughs is useful for developers. However, for security reasons you should not make these pages available in a production Web site. 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. This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects.

Setting the AlternateText Property of Image Controls

In order to comply with accessibility guidelines, HTML img elements must have alt attributes unless the images are only for decorative purposes. Assistive technology software such as a screen reader can read the text in an alt attribute in order to inform the user about the image's purpose.

In this part of the walkthrough you will create a new Web site by using a template that automatically creates a master page and content pages. You will then add a title bar to the master page. The title bar contains two Image controls that are configured to generate img elements that have appropriate alt attributes.

To create a Web site

  1. Open Visual Studio.

  2. In the File menu, click New, and then click Web Site.

    The New Web Site dialog box is displayed.

  3. Under Installed Templates, click Visual Basic or Visual C#, and then click ASP.NET Web Site.

  4. In the Web Location list, select File System, and then enter a location and name for the Web site.

    This walkthrough assumes that the Web site name is "ConfigBrowser", but you can use any name.

  5. Click OK.

    Visual Studio creates a Web site that has a master page, content pages, and a cascading style sheet (.css) file.

In the following procedure, you will create an Images folder and add images to it that will be used in the title bar. These images are included with ASP.NET 4 in the .NET Framework system folders.

To add images for the title bar

  1. In Solution Explorer, right-click the project name, click New Folder, and name the folder Images.

  2. Right-click the Images folder and then click Add Existing Item.

  3. In the Add Existing Item dialog box, browse the following folder:

    <windows folder>\Microsoft.NET\Framework\<framework 4 folder>\ASP.NETWebAdminFiles\Images

  4. Select the following files and then click Add:

    • ASPdotNET_logo.jpg

    • HelpIcon_solid.gif

    • headerGRADIENT_Tall.gif

    Note

    You might have to change the file type in the list to All Files (*.*).

In the following procedure, you will add a title bar to the master page that was created by the template. The title bar will contain a logo image on one side, a help button image on the other side, and the title "Configuration System Browser" between the images.

To add a title bar

  1. Open the Site.master file and switch to Source view.

  2. Delete the markup that is between the <div class="header"> tag and its corresponding </div> end tag. (This consists of the three div elements that have class values of "title", "loginDisplay", and "hideSkiplink".)

  3. In its place, insert the following markup between the <div class="header"> tag and its corresponding </div> end tag:

    <div class="title-logo">
    <asp:Image ID="Image1" runat="server" 
        ImageUrl="~/Images/ASPdotNET_logo.jpg" 
        AlternateText="ASP.NET Logo">
    </asp:Image>
</div>

    <div class="title-logo">
    <asp:Image ID="Image1" runat="server" 
        ImageUrl="~/Images/ASPdotNET_logo.jpg" 
        AlternateText="ASP.NET Logo">
    </asp:Image>
</div>

    This code creates a div element for the left-hand side of the title bar. This div element contains an Image control that shows the ASP.NET logo. The AlternateText property of this control is set to "ASP.NET Logo" to describe the content of the image for people who cannot see it.

  4. Immediately following the markup that you added in the previous step, insert the following markup:

    <div class="title">
    <h1>Configuration System Browser</h1>
    &nbsp;&nbsp;
    <asp:HyperLink ID="HyperLink1" runat="server" 
        NavigateUrl="~/About.aspx" BorderStyle="None">
        <asp:Image ID="ImageButton2" runat="server" 
            ImageUrl="~/Images/HelpIcon_solid.gif" 
            AlternateText="Help Button">
        </asp:Image>
    </asp:HyperLink>
    &nbsp;&nbsp;
</div>

    <div class="title">
    <h1>Configuration System Browser</h1>
    &nbsp;&nbsp;
    <asp:HyperLink ID="HyperLink1" runat="server" 
        NavigateUrl="~/About.aspx" BorderStyle="None">
        <asp:Image ID="ImageButton2" runat="server" 
            ImageUrl="~/Images/HelpIcon_solid.gif" 
            AlternateText="Help Button">
        </asp:Image>
    </asp:HyperLink>
    &nbsp;&nbsp;
</div>

    This code creates a div element for the right-hand side of the title bar. This div element contains an Image control that is inside a HyperLink control so that the image functions as a hyperlink. The image shows a button that has a question mark on it, and the hyperlink points to the About.aspx page. The AlternateText property is set to "Help Button" to indicate the image's function. (Setting the AlternateText property to "Question mark" would be descriptive but not as helpful as "Help Button" to a person who cannot see the image.)

In the following procedure, you will modify the site's CSS file to specify the appearance and location of visual elements in the title bar.

To modify CSS styles for the title bar

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

  2. In the section of the file that follows the comment PRIMARY LAYOUT ELEMENTS, delete the definitions for the header class and the h1 element that are enclosed in header class.

  3. In their place, insert the following definitions:

    .header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/headerGRADIENT_Tall.gif);
    height: 75px;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
    display: inline;
}

    These definitions set the height and background image for the div element that contains the header. It also removes the background color from h1 elements in the header so that the background color will not conflict with the background image.

  4. In the section of the file that follows the comment MISC, delete the definition of the title class.

  5. In its place, insert the following markup:

    .title
{
    display: block;
    float: right;
    text-align: left;
    width: auto;
}

.title-logo
{
    float: left;
    width: auto;
}

    This markup puts the logo on the left-hand side of the title bar and puts the text on the right-hand side.

  6. Optionally, in the section of the file that follows the comment DEFAULTS, add the following markup below the definition for the body element:

    img
{
    border-style: none;
}

    This markup eliminates a border that would otherwise appear around the help button.

Testing the Title Bar

You can now test to verify that the title bar looks correct and that alt attributes appear as expected.

To test the title bar

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

    The page is displayed in the browser, as shown in the following illustration:

    Configuration browser title bar

    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.

  2. In the browser, view the source of the page.

  3. Examine the alt attributes that are rendered for the img elements.

    The following example shows the alt attributes:

    <div class="header">
  <div class="title-logo">
    <img id="ctl00_Image1" src="Images/ASPdotNET_logo.jpg"
      alt="ASP.NET Logo" />
  </div>
  <div class="title">
    <h1>
      Configuration System Browser&nbsp;&nbsp;
      <a id="ctl00_HyperLink1" href="About.aspx" 
        style="display:inline-block;border-style:None;">
        <img id="ctl00_ImageButton2" src="Images/HelpIcon_solid.gif"
          alt="Help Button" />
       </a>
    </h1>
  </div>
</div>

    Note

    In some browsers, if you hold the mouse pointer over images, you see alt attribute text shown as tooltips. However, according to the HTML standard, the title attribute should be used for this purpose, not the alt attribute. Therefore, Internet Explorer 8 does not show tooltips for alt attributes.

Navigation bars often have many links in them and are shown on every Web page in a site. Because the links usually appear before the main content of the page, a person who uses a screen reader typically would have to listen to the whole sequence of links before reaching the main content. Furthermore, this would be repeated every time that a new page is loaded or the current one is refreshed. To enable people who use screen readers to bypass links that they do not want to hear repeatedly, you can provide skip-navigation links. Skip-navigation links are links that are invisible in a typical graphical browser. However, they are announced by screen readers to give the user an opportunity to skip the menu and go directly to the main content of the page.

In the following procedure, you will add to the master page a Menu control that generates a skip-navigation link.

To add a menu to the master page

  1. Open the Site.master file and switch to Source view.

  2. Just before the main div element, insert the following definition:

    <div class="leftCol">
    <asp:Menu id="Menu1" Runat="server" 
        SkipLinkText="Skip to main content">
        <Items>
          <asp:MenuItem Text="Home" 
            NavigateUrl="Default.aspx" />
          <asp:MenuItem Text="Preferences" 
            NavigateUrl="Preferences.aspx" />
          <asp:MenuItem Text="About" 
            NavigateUrl="About.aspx" />
        </Items>
      </asp:Menu>
</div>

    <div class="leftCol">
    <asp:Menu id="Menu1" Runat="server" 
        SkipLinkText="Skip to main content">
        <Items>
          <asp:MenuItem Text="Home" 
            NavigateUrl="Default.aspx" />
          <asp:MenuItem Text="Preferences" 
            NavigateUrl="Preferences.aspx" />
          <asp:MenuItem Text="About" 
            NavigateUrl="About.aspx" />
        </Items>
      </asp:Menu>
</div>

    This definition creates a div element that holds a navigation bar using a Menu control. In a later step you will add CSS definitions to position the div in a column on the left-hand side of the page. In order to position the columns by using semantically correct HTML, div elements and CSS are used instead of tables. For information about the importance for accessibility of using semantically correct HTML, see Accessibility in Visual Studio and ASP.NET.

    The Menu control will generate a skip-navigation link because its SkipLinkText property is set.

  3. Open or switch to the Site.css file.

  4. In the section of the file that follows the PRIMARY LAYOUT ELEMENTS comment, delete the definitions for the main and leftCol classes.

  5. In their place, insert the following definitions:

    .main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    width: 750px;
    min-height: 420px;
    float: right;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 150px;
    min-height: 200px;
    float: left;
}

    These definitions add float attributes to the leftCol and main classes so that the menu will appear on the left and the main content will appear on the right. This markup also narrows the left-hand column and widens the main content area.

  6. Optionally, add the following definition at the end of the file:

    .level1
{
    font-size: 1.2em;
    font-weight: bold;
}

    Top-level menu hyperlinks have the CSS class level1. This definition improves the visibility of these hyperlinks.

Specifying the Language of the Web Site

In order for a screen reader to be able to read text in a Web page, it must know the language that the text is written in. You can use the lang attribute of the html element to provide this information.

When you create a Web site template by using the ASP.NET Web Site template, the lang attribute is set for you, as shown in the following example:

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

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

However, when you create a new master page by using the Add New Item dialog box, you must remember to set the lang attribute yourself.

Creating Title Elements

People who can see the screen of a graphical browser can immediately absorb a whole Web page. They can determine what the page is about, and go elsewhere if the page is not what was wanted. In contrast, people who are listening to a screen reader might have to listen to all the text on the page in order to determine the purpose of the page. To help people who use screen readers to understand as quickly as possible the purpose of a Web page, you can provide an informative title element for the page.

The Visual Studio template that you used to create the Web site sets the title element of the Default.aspx page to "Home Page". In the following procedure you will set the title element to a more informative value.

To make the title element more informative

  1. Open the Default.aspx file and switch to Source view.

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

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

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

    This title identifies the site and the page in the site.

Testing the Menu

You can now test to verify that the menu looks correct, that a skip-navigation link appears as expected, and that the title element is generated correctly.

To test the menu

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

    The page is displayed. The title bar of the browser contains the value that you provided for the title element, as shown in the following illustration:

    Configuration Browser Home Page with Menu

    Note

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

  2. In the browser, view the source of the page.

    The following example shows the HTML that is rendered for the menu and that includes a skip-navigation link and an anchor that it points to.

    <div class="leftCol">
  <a href="#ctl00_Menu1_SkipLink">
    <img alt="Skip to main content" 
      src="/ConfigBrowser/WebResource.axd?d=ukCdbG4RI1yiZdUKXe1i1w2
        &amp;t=633887827551396577" width="0" height="0"
        style="border-width:0px;" />
  </a>
  <div id="ctl00_Menu1">
    <ul class="level1">
      <li>
        <a class="level1" href="Default.aspx" target="">
          Home
        </a>
      </li>
      <li>
        <a class="level1" href="Preferences.aspx"
          target="">
          Preferences
        </a>
      </li>
      <li>
        <a class="level1" href="About.aspx" target="">
          About
        </a>
      </li>
    </ul>
  </div>
  <a id="ctl00_Menu1_SkipLink"></a>
</div>

Using AutoPostBack Functionality

ASP.NET controls such as the DropDownList and CheckBox controls can be configured to trigger a postback automatically when a user interacts with the control. Postbacks typically cause the browser to refresh the page, which in turn causes a screen reader to start announcing the contents of the screen from the beginning. This can be confusing or annoying for a person who is using a screen reader. To make sure that a Web site does not act in ways that surprise the user, you can add text that explains what to expect.

In this section of the walkthrough you will add a hierarchical list that shows all the section groups and sections in your computer's machine.config configuration file. Because this is a very long list when every level of the hierarchy is shown, the list is initially shown only using top-level section groups. Two check boxes enable the user to display lower-level section groups and to display sections in section groups. When you click a check box, the page is updated immediately, and text above the check boxes alerts the user to that fact.

Between the alert text and the check boxes is an image that is used only as a divider bar. Because it is only for decorative purposes, it should not have an alt attribute. Screen readers ignore images that do not have alt attributes.

In the following procedure, you will add the following features to the content area of the home page:

  • A heading.

  • A Literal control that acts as a placeholder for the list.

  • The check boxes.

  • The alert text for the check boxes.

You will put the list and the check boxes in separate columns by using CSS rules instead of by using tables so that the HTML is semantically correct.

To add a list placeholder and check boxes

  1. Open the Default.aspx file and switch to Source view.

  2. Delete all the markup in the Content element that has the ID BodyContent.

  3. In its place, add the following markup:

    <h2>
    <asp:Label ID="HeadingLabel" runat="server" 
        Text="Section Groups in Machine.config">
    </asp:Label>
</h2> 

    <h2>
    <asp:Label ID="HeadingLabel" runat="server" 
        Text="Section Groups in Machine.config">
    </asp:Label>
</h2>

    This markup adds a heading for the home page. The heading text is in a Label control so that it can be changed programmatically. This functionality will be used only if you run additional walkthroughs in this series and add more pages to the application.

  4. Add the following markup immediately below the heading:

    <div class="listColumn">
    <asp:Literal ID="SectionGroupsLiteral" runat="server" />
</div>
<div class="checkboxColumn">
    <p>
        Click the checkboxes to refresh the screen with the selected 
        options.
    </p>
    <asp:Image ID="Image1" 
        runat="server"
        ImageUrl="~/Images/headerGRADIENT_Tall.gif"
        GenerateEmptyAlternateText="false" Width="100%" Height="4px">
    </asp:Image>
    <asp:CheckBoxList runat="server" AutoPostBack="True" 
        RepeatLayout="UnorderedList" ID="OptionsCheckBoxList">
        <asp:ListItem>Show Sections</asp:ListItem>
        <asp:ListItem>Show Contained Section Groups</asp:ListItem>
    </asp:CheckBoxList>
</div>

    <div class="listColumn">
    <asp:Literal ID="SectionGroupsLiteral" runat="server" />
</div>
<div class="checkboxColumn">
    <p>
        Click the checkboxes to refresh the screen with the selected 
        options.
    </p>
    <asp:Image ID="Image1" 
        runat="server"
        ImageUrl="~/Images/headerGRADIENT_Tall.gif"
        GenerateEmptyAlternateText="false" Width="100%" Height="4px">
    </asp:Image>
    <asp:CheckBoxList runat="server" AutoPostBack="True" 
        RepeatLayout="UnorderedList" ID="OptionsCheckBoxList">
        <asp:ListItem>Show Sections</asp:ListItem>
        <asp:ListItem>Show Contained Section Groups</asp:ListItem>
    </asp:CheckBoxList>
</div>

    This markup creates two columns by using div elements. Later in this walkthrough you will add code to create the list in the left-hand column by setting the Text property of the Literal control.

    The column on the right-hand side contains text, a decorative divider bar, and a CheckBoxList control. These elements are used to specify how much detail to include in the list.

    The AutoPostBack property of the CheckBoxList control is set to true so that the page will respond immediately when a check box value is changed. The RepeatLayout property is set to UnorderedList so that the control generates the check boxes inside a ul element. This is more semantically correct than using table or span elements.

  5. Open or switch to the Site.css file.

  6. Below the definitions for the main and leftCol classes that you modified in a previous procedure, insert the following definitions:

    .listColumn
{
    font-size: 1.4em;
    width: 475px;
    float: left;
}

.checkboxColumn
{
    font-size: 1.1em;
    width: 225px;
    float: left;
}

.checkboxColumn li
{
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.checkboxColumn ul
{
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

    These CSS definitions put the list of section groups in a left-hand column and the check box controls in a right-hand column. They also eliminate the bullet images that would otherwise appear next to the check boxes, because the images are generated in a ul (unordered list) element.

In the following procedure you add code that creates the list. The code retrieves information from the ASP.NET configuration system and reads the check box values to determine how much information to include in the list.

To add code that creates the list

  1. In Solution Explorer, expand the Default.aspx file and open the Default.aspx.cs or Default.aspx.vb file.

  2. At the end of the using statements (Imports in Visual Basic) add the following code:

    Imports System.Configuration
Imports System.Web.Configuration
Imports System.Text

    using System.Configuration;
using System.Web.Configuration;
using System.Text;

    These are using or Imports statements that are needed for classes that you will work with in the following steps.

  3. In the Page_Load method, insert the following code:

    If Session("Heading") IsNot Nothing Then
    HeadingLabel.Text = HeadingLabel.Text.Replace(
        "Machine.config", Session("Heading").ToString())
End If

Dim virtualPath As String = ""
Dim site As String = ""
Dim locationSubPath As String = ""
Dim server As String = ""

If Session("Path") IsNot Nothing Then
    virtualPath = Session("Path").ToString()
End If

If Session("Site") IsNot Nothing Then
    site = Session("Site").ToString()
End If

If Session("SubPath") IsNot Nothing Then
    locationSubPath = Session("SubPath").ToString()
End If

If Session("Server") IsNot Nothing Then
    site = Session("Server").ToString()
End If

    if (Session["Heading"] != null)
{
    HeadingLabel.Text = HeadingLabel.Text.Replace(
        "Machine.config", Session["Heading"].ToString());
}

string virtualPath = "";
string site = "";
string locationSubPath = "";
string server = "";

if (Session["Path"] != null)
{
    virtualPath = Session["Path"].ToString();
}

if (Session["Site"] != null)
{
    site = Session["Site"].ToString();
}

if (Session["SubPath"] != null)
{
    locationSubPath = Session["SubPath"].ToString();
}

if (Session["Server"] != null)
{
    site = Session["Server"].ToString();
}

    This code adds functionality to select other configuration files, such as the application Web.config file. It is used only if you add Web pages that you create in other walkthroughs in this series.

  4. In the Page_Load method, below the code that you inserted in the previous step, insert the following code:

            Dim config As Configuration =
            WebConfigurationManager.OpenWebConfiguration(
                virtualPath, site, locationSubPath, server)

        Dim listString As New StringBuilder("<ul>")
        For Each sectionGroup As ConfigurationSectionGroup _
            In config.SectionGroups

            AddSectionGroupInfo(sectionGroup, listString)
        Next
        listString.Append("</ul>")



            Configuration config =
            WebConfigurationManager.OpenWebConfiguration
            (virtualPath, site, locationSubPath, server);

        StringBuilder listString = new StringBuilder("<ul>");
        foreach (ConfigurationSectionGroup sectionGroup
            in config.SectionGroups)
        {
            AddSectionGroupInfo(sectionGroup, listString);
        }
        listString.Append("</ul>");

        SectionGroupsLiteral.Text = listString.ToString();

    This code retrieves configuration information from the machine.config file and creates a string that contains HTML that represents the information. The HTML consists of ul and li elements. The data for the list is extracted from the Configuration object by the AddSectionGroupInfo method, which you will add in the next step.

  5. Just after the Page_Load method, insert the following method:

    Public Sub AddSectionGroupInfo(ByVal sectionGroup _
                               As ConfigurationSectionGroup,
                               ByVal listString As StringBuilder)
    listString.Append(
        ("<li><a href='SectionGroup.aspx?SectionGroup=" _
            & sectionGroup.SectionGroupName & "'>") _
            + sectionGroup.Name & "</a></li>")

    listString.Append("<ul>")
    If OptionsCheckBoxList.Items(0).Selected Then
        For Each section As ConfigurationSection _
            In sectionGroup.Sections

            listString.Append(
                "<li>" & section.SectionInformation.Name & "</li>")
        Next
    End If
    If OptionsCheckBoxList.Items(1).Selected Then
        For Each s As ConfigurationSectionGroup _
            In sectionGroup.SectionGroups

            AddSectionGroupInfo(s, listString)
        Next
    End If
    listString.Append("</ul>")
End Sub

    public void AddSectionGroupInfo(
    ConfigurationSectionGroup sectionGroup, StringBuilder listString)
{
    listString.Append(
        "<li><a href='SectionGroup.aspx?SectionGroup=" +
        sectionGroup.SectionGroupName + "'>" +
        sectionGroup.Name + "</a></li>");

    listString.Append("<ul>");
    if (OptionsCheckBoxList.Items[0].Selected)
    {
        foreach (ConfigurationSection section
            in sectionGroup.Sections)
        {
            listString.Append(
                "<li>" + section.SectionInformation.Name + "</li>");
        }
    }
    if (OptionsCheckBoxList.Items[1].Selected)
    {
        foreach (ConfigurationSectionGroup s
            in sectionGroup.SectionGroups)
        {
            AddSectionGroupInfo(s, listString);
        }
    }
    listString.Append("</ul>");
}

    This method adds information about a section group to a string and puts it inside HTML elements. The method is called one time by the Page_Load method for each section group that is contained in the machine.config file.

    The name of the section group is added as a hyperlink that is enclosed in an li element. The hyperlinks point to a page that will not exist until you complete one of the other walkthroughs in this series.

    If the section group contains sections, and if the Show Sections check box is selected, section names are added. If the section group contains section groups, and if the Show Section Groups check box is selected, the method calls itself recursively for each section group.

Testing the Web Page

You can now test to verify that the list displays correctly and is changed dynamically when check boxes are selected.

To test the page

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

    The page is displayed in the browser, and section groups are shown as hyperlinks. The hyperlinks point to a page that will not exist until you complete one of the other walkthroughs in this series. The following illustration shows the result.

    Configuration Browser Home Page

  2. In the browser, view the source of the page.

    Notice that the decorative image does not have an alt element, as shown in the following example:

    <img id="ctl00_MainContent_Image1"
  src="Images/headerGRADIENT_Tall.gif"
  style="height:4px;width:100%;" />

  3. In the page, select the Show Contained Section Groups check box.

    Section groups that are contained by other section groups are added to the list, as shown in the following illustration:

    Configuration Browser Home Page expanded

  4. Select the Show Sections check box.

    Sections are added to the list under the section groups that contain them. Sections are not shown as hyperlinks, as shown in the following illustration:

    Configuration System Browser Home Page

Next Steps

In this walkthrough you used Image controls, a Menu control, and AutoPostBack functionality in ways that help make a Web page accessible for people who use screen reader software. Other walkthroughs in this series demonstrate other techniques for helping to make sure that the Web site complies with accessibility guidelines. The next walkthrough is Walkthrough: Accessibility Guidelines for Using the GridView Control. The other walkthroughs are as follows:

See Also

Concepts

Accessibility in Visual Studio and ASP.NET