Walkthrough: Creating an Accessible Web Application

Article
11/16/2012

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.

Control property	Accessibility considerations
TabIndex	Use to create a sensible navigational path through the form. It is important for controls without intrinsic labels, such as text boxes, to have the associated label immediately precede the control in the tab order. In cases when this is not possible or desirable, use the AssociatedControlID property of a Label control to associate it with a text box.
Text	Use the HTML u element to display the keyboard shortcut for a control. Using access keys contributes to providing documented keyboard access to all features. (Use the AccessKey property to enable a keyboard shortcut for a control.)
Font Size	Use heading tags instead of specific sizes.
AlternateText	Supply alternative text for all images that are meaningful for the content of the Web page to be understood. In some instances, not setting an image's alternate text is appropriate, as in the case of images used for graphical formatting. To render the AlternateText property of an image as empty, set the GenerateEmptyAlternateText property to true for the Image control.
AccessKey	Use to provide keyboard access to controls.

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

Open Visual Web Developer.
On the File menu, click New Web Site.

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
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.
In the Language list, click the programming language that you prefer to work in.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.
In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
Under Visual Studio installed templates, click Web Form.
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

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.
In the Add New Item dialog box, under Visual Studio installed templates, click XML File.
In the Name box, type Syllabus.
Click Add.

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>

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

Switch to Design View.
In Properties, set the following properties for DOCUMENT:
- Set Title to "Algebra Class"
- Set BgColor to Background.
At the top of the page, type Algebra Review Class.
Highlight the text to format to select it, and then on the Format toolbar, in the left-most list, click Heading 1.

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

Click the Panel control, and then set the GroupingText property to Lecture Notes.
Switch to Source view.
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

Switch to Design view.
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.
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.
In the Data file box, enter ~/App_Data/Syllabus.xml, and then click OK.
From the Data group of the Toolbox, add a GridView control to the page.
In Properties, set the properties as shown in the following table.

Property

Setting

ID

SyllabusGrid

DataSourceId

XmlDataSource1

TabIndex

9

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

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

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();
        }
    }

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

Make sure the page is in Design view.
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.
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.
Press CTRL+F5 to run the page.
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.
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.
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.
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.
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.
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.
Resize the browser window and examine the readability.
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.
Select all text and copy it to the Clipboard to make sure that it makes sense.

Share via