Walkthrough: Creating an Accessible Web Application

Creating accessible Web pages lets you reach as many customers as possible. People with disabilities are not the only users who appreciate accessible pages. Users of text-only browsers or users of software that interprets Web page content might also rely on accessibility options. Accessible design enables automation tools, such as search engines, to search, index, and work with the information on your pages. Finally, future telecommunications laws might require information that is distributed over the Internet to be accessible, just like traditional software. For more information, see Accessibility Support in ASP.NET and ASP.NET Controls and Accessibility.

From the Microsoft Accessibility Web site, here are tips for designing accessible Web pages:

• Provide good alternative (ALT) text for all graphics.

• Make correct use of image maps.

• Write useful link text.

• Design good keyboard navigation.

• Provide alternative pages that do not use frames.

• Use tables and their alternatives correctly.

• Support the formatting options for the text reader.

• Do not require the use of style sheets.

• Use file formats that the reader can use.

• Avoid using scrolling marquees.

• Provide titles for most objects.

If you cannot meet accessibility goals, consider providing alternative text-only Web pages.

ASP.NET controls support many of the accessibility guidelines. This includes revealing the keyboard focus and screen elements. The properties for ASP.NET controls can be used to support other accessibility guidelines as shown in the following table.

Prerequisites

In order to complete this walkthrough, you will need the following:

• Microsoft Visual Web Developer Web development tool.

• The .NET Framework.

Creating a Web Site and Page

In this walkthrough, you will create a Web site for an algebra class. The user interface uses the following controls:

• An Image control for the class logo.

• A Panel control with HyperLink controls for the lectures.

• A GridView control that displays a table that contains the class syllabus.

• A HyperLink control that links to a page describing the class textbook.

The focus of this walkthrough is the accessibility of the user interface (UI), and how to use Web server controls to support accessibility. It demonstrates the accessibility features of several frequently used controls, including the HyperLink, GridView, Image, and Label controls. The HyperLink controls all navigate to the same Web page, but that Web page is blank.

In the following procedure, you will create the file system Web site and add a page named Lecture.aspx.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, click New Web Site.

   The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, enter the name of the folder where you want to keep the pages of the Web site.

   For example, type the folder name C:\WebSites.

5. In the Language list, click the programming language that you prefer to work in.

6. Click OK.

   Visual Web Developer creates the folder and a new page named Default.aspx.

7. In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

8. Under Visual Studio installed templates, click Web Form.

9. In the Name box, type Lecture.aspx, and then click OK.

Creating Data to Display

The page that you are creating displays information about lectures for an algebra class. For this walkthrough, the data for the class is stored in an XML file.

To create an XML data file

1. In Solution Explorer, right-click the App_Data folder, and then click Add New Item.

   Note

   Be sure that you add the XML file to the App_Data folder.

2. In the Add New Item dialog box, under Visual Studio installed templates, click XML File.

3. In the Name box, type Syllabus.

4. Click Add.

5. Copy the following XML into the file, overwriting the default content.

   <?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. Save the XML file, and then close it.

Adding Controls to the Form

When you add the controls to the form for this application, consider the following guidelines in order to make an accessible application:

• Every image that provides user information should have descriptive alternative text.

• When you are using tables, use the Title attribute to provide names for the columns and rows of the table. Also, make sure that tables make sense, if read from left-to-right, top-to-bottom.

• Use real heading tags instead of formatted text, to support the user's selected formatting options.

• Provide useful link text. For example, if the text is "Click here for Lecture 1 notes", "Lecture 1 notes" is more useful link text than "Click here".

• Provide a sensible navigational path through the page, following the ordinary flow of text for the specific language.

• Use the Title attribute for most objects.

To add accessible controls to your page

1. Switch to Design View.

2. In Properties, set the following properties for DOCUMENT:

   • Set Title to "Algebra Class"

   • Set BgColor to Background.

3. At the top of the page, type Algebra Review Class.

4. Highlight the text to format to select it, and then on the Format toolbar, in the left-most list, click Heading 1.

5. From the Toolbox, in the Standard group, add the following controls and set the properties as indicated.

   Note

   The layout of the page is not important.

   Control	Property	Value
   Image	AlternateText	Algebra equations.
   	ImageUrl	A URL to an image.
   	TabIndex	0
   Panel	ID	Lectures
   	TabIndex	0
   HyperLink (add to Lectures panel)	ID	Lecture1
   	Text	Lecture 1 notes
   	AccessKey	1
   	href	~/Lecture.aspx
   	TabIndex	1
   HyperLink (add to Lectures panel)	ID	Lecture2
   	Text	Lecture 2 notes
   	AccessKey	2
   	href	~/Lecture.aspx
   	TabIndex	2
   HyperLink (add to Lectures panel)	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

6. Click the Panel control, and then set the GroupingText property to Lecture Notes.

7. Switch to Source view.

8. Click inside the HTML element, and then in Properties, set lang to en to indicate that the language of the page is English.

   The tag should now read as follows:

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

Adding a GridView Control

Information about the lectures is displayed in a GridView control. The GridView control retrieves data from the XML file that you created in the preceding section.

To add a GridView control and bind it to the XML file

1. Switch to Design view.

2. From the Data group in the Toolbox, drag an XmlDataSource control onto the page.

   The placement is not important.

   The XmlDataSource control reads an XML file and makes the data available to controls on the page.

3. Right-click XmlDataSource, click Show Smart Tag, and then on the XmlDataSource Tasks menu, click Configure Data Source.

   The Configure Data Source dialog box appears.

4. In the Data file box, enter ~/App_Data/Syllabus.xml, and then click OK.

5. From the Data group of the Toolbox, add a GridView control to the page.

6. In Properties, set the properties as shown in the following table.

   Property	Setting
   ID	SyllabusGrid
   DataSourceId	XmlDataSource1
   TabIndex	9

Adding Titles to the GridView Control Cells

A requirement for accessibility is that HTML table columns and cells have titles. The GridView control renders an HTML table at run time. Therefore, you must make sure that the columns that are rendered by the control include titles. To perform this task, you will write code that handles the RowCreated event. In the event handler, you will add Title attributes to the table cells that are created by the GridView control.

To add titles to the GridView control columns

1. In Solution Explorer, right-click the name of the page (Default.aspx) and then click View Code.

2. Add the following code.

   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. In Design view, click the GridView control, and then in the Properties window, set the RowCreated event to "SyllabusGrid_RowCreated".

   This connects the event to the event handler.

Testing the Application

Visual Web Developer includes accessibility validation, which is a tool that reviews the Web page and determines whether it meets accessibility guidelines. The tool reviews the HTML in the page at design time. You can also review the output of the page, which checks that the markup that is rendered by ASP.NET controls meets accessibility guidelines.

To test the application for accessibility

1. Make sure the page is in Design view.

2. On the Tools menu, click Check Accessibility.

   The Accessibility Validation dialog box appears.

   Note

   The accessibility checking tool is not available in the Microsoft Visual Web Developer Express edition.

3. Select the check boxes for the accessibility standards that you want to look for, and then click Validate.

   Visual Web Developer reviews the page, and then displays a report of validation errors, if any. Notice that the accessibility validation report cannot determine whether the table that will be rendered by the GridView control meets accessibility guidelines.

4. Press CTRL+F5 to run the page.

5. Test the access keys.

   For this application, you defined the access keys ALT+1, ALT+2, and ALT+3 for the HyperLink controls. The access keys move to the links. Press ENTER to follow the links.

6. Turn off graphics to make sure that the alternative text makes the page usable. To do this:

   1. In Microsoft Internet Explorer 6.0, on the Tools menu, click Internet Options.

   2. On the Advanced tab, under Multimedia, turn off the graphics options.

   You must update the page to see the alternative text.

7. Turn off sounds to make sure that no important instructions are lost. To do this:

   1. In Internet Explorer 6.0, on the Tools menu, click Internet Options.

   2. On the Advanced tab, under Multimedia, turn off the sound options.

8. View the application in a browser that allows you to turn off style sheets, and then turn off the style sheets to make sure the page is still readable.

   1. In Internet Explorer 6.0, on the Tools menu, click Internet Options.

   2. On the General tab, click Accessibility to set style sheet options.

9. Use the Microsoft Windows High Contrast option to make sure that the page is still readable. To test the High Contrast option:

   1. In Windows, click Start, point to Control Panel, and then click Accessibility Options.

   2. On the Display tab, select the Use High Contrast check box.

   3. Move through all UI elements to ensure that the color and font changes are reflected. Also, ensure that images or patterns that are drawn behind the text are omitted.

10. Use the largest font size that is supported, which is available only when High Contrast is selected, to make sure the page is still readable. To do this:

    1. In Windows, click Start, point to Control Panel, and then click Display.

    2. On the Appearance tab, in the Font Size list, click Extra Large.

11. Resize the browser window and examine the readability.

12. Use the keyboard to move through the Web page to make sure that the navigational order is sensible, that the TAB key traverses all links, and that CTRL+TAB moves between panes or sections.

13. Select all text and copy it to the Clipboard to make sure that it makes sense.

See Also

Concepts

Accessibility Support in ASP.NET

ASP.NET Controls and Accessibility

Overview of Web Application Security Threats

Other Resources

Web Content Accessibility Guidelines 1.0 (W3C)