Export (0) Print
Expand All

Walkthrough: Creating an Accessible Web Application

Creating accessible Web pages allows you to reach as many customers as possible. People with disabilities are not the only users that appreciate accessible pages. Users with slow connections or text-only browsers also rely on accessibility options. Accessible design allows automation tools such as search engines to search, index, and manipulate the information on your pages. Finally, future telecommunications laws may require information distributed over the Internet to be accessible in the same manner as traditional software.

For more information, see Accessibility Design Guidelines for the Web.

From Microsoft's Accessibility Web site, here are the "12 Tips for Designing Accessible Web Pages":

  • Good alternative(ALT) text for all graphics.
  • Proper use of image maps.
  • Useful link text.
  • Good keyboard navigation.
  • Alternates to all controls and applets.
  • Alternate pages that do not use frames.
  • Proper use of tables and their alternatives.
  • Support the reader's formatting options.
  • Do not require the use of style sheets.
  • File formats the reader can use.
  • Avoid using scrolling marquees.
  • Provide titles for most objects.

If you are unable to meet accessibility goals, consider providing alternate text-only Web pages.

Planning Ahead for Accessibility

Controls on the standard toolbox for Web Forms support many of the accessibility guidelines, including exposing the keyboard focus and exposing the screen elements. The controls' properties can be used to support other accessibility guidelines as shown in the following table.

Control PropertyAccessibility Considerations
TabIndexUse the TabIndex property to create a sensible navigational path through the form. It is important for controls without intrinsic labels, such as text boxes, to have their associated label immediately precede them in the tab order.
TextUse the HTML <u> tag to display the access key for a control. Using access keys contributes to providing documented keyboard access to all features. (Use the AccessKey property to enable an access key for a control.)
Font SizeUse heading tags rather than specific sizes.
AlternateTextSupply alternate text for all images.
AccessKeyUse this property to provide keyboard access to controls.

Creating the Project

This walkthrough creates a Web site for an algebra class. The user interface consists of an Image for the class logo, a Panel with a few HyperLinks for lectures, a DataGrid to display a table containing the class syllabus, and a HyperLink to a page describing the class textbook.

The focus of this walkthrough is the accessibility of the user interface, and how to code against the Web Server controls to support accessibility. It demonstrates the accessibility features of several frequently used controls, including the Link, DataGrid, Image, and Label controls. The HyperLinks will all navigate to the same Web page, but that Web page will be blank.

To begin making the application

  1. Create a new ASP.NET Web Application in either Visual Basic or Visual C#. Name the project AlgebraClass. (For details see Creating New Solutions and Projects.)

    The start-up form, WebForm1.aspx, appears in the Web Forms Designer.

  2. On the Project menu, click Add Web Form. The Add New Item dialog box appears. Name the new Web Form Lecture.aspx and click Open. This form will be used to provide the NavigationUrl for the HyperLink examples on WebForm1.
  3. Close the form named Lecture.aspx, saving the changes.

Adding the Controls to the Form

When adding the controls to the form for this application, keep in mind the following guidelines in order to make an accessible application:

  • When using tables, use the TITLE attribute to provide names for the columns and rows of a table. Also, make sure that tables make sense if read left-to-right, top-to-bottom.
  • Use real heading tags, for example, H1, H2, and so on, rather than 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 normal flow of text for the given language.
  • Use the TITLE attribute for most objects.

To add accessible controls to your page

  1. In the Properties window, select Document, and set the following properties:
    • Set the title property to "Algebra Class"
    • Set the bgColor to the Background color of the System Colors set.

      To do this, click the ellipses button (3has1x30.vbellipsesbutton(en-us,VS.71).gif) to open the Color Picker dialog box, choose the System Colors tab, and click Background.

    • Seth the pageLayout property to GridLayout.
  2. Add the controls to the form from the Web Forms tab of the Toolbox. In the Properties window, set the properties as described below. See the picture at the end of the table for a model of how to arrange the controls on the form. For more information about adding controls to Web Forms pages, see Adding Web Server Controls to a Web Forms Page.

    To correctly position the HyperLink controls on the Panel control, you will need to select the Panel control and then position your pointer in the Panel. The HyperLink will be added at the pointer position. You will need to add a carriage return at the end of the first hyperlink to vertically align the second hyperlink.

    ObjectPropertyValue
    ImageAlternateTextAlgebra equations.
     ImageUrlAny bitmap
     TabIndex0
    LabelIDClassName
     ForeColor"Control" on the System Tab of the color palette. Click (3has1x30.vbellipsesbutton(en-us,VS.71).gif) to access the color palette.
     TextAlgebra Review Class
     Font SizeXX-Large
     TabIndex1
    PanelIDLectures
     TabIndex2
    HyperLink (add to Lectures panel)IDLecture1
     TextLecture 1
     AccessKey1
     NavigateUrlLecture.aspx
     TabIndex3
    HyperLink (add to Lectures panel)IDLecture2
     TextLecture 2
     AccessKey2
     NavigateUrlLecture.aspx
     TabIndex4
    HyperLink (add to Lectures panel)IDLecture3
     TextLecture 3
     AccessKey3
     NavigateUrlLecture.aspx
     TabIndex5
    LabelIDTextbookLabel
     TextText:
     TabIndex6
    HyperlinkIDTextbookLink
     TextAlgebra Review, J. A. Smith
     NavigateUrlLecture.aspx
     TabIndex7
    LabelIDSyllabusTitle
     TextSyllabus
     TabIndex8
    DataGridIDSyllabusGrid
     TabIndex9
  3. In the designer, select the Panel control. In the designer, change the text of the panel to Lecture Notes.
  4. In the designer, click the HTML tab. Modify the HTML tag to indicate that the language of the page is English.
    <HTML lang="en">
    

Your form will look something like the following at run time:

3has1x30.vbaccessiblewebapplication(en-us,VS.71).gif

To add functionality to the form and its controls

  1. Add the following function to create data for the DataGrid. In most applications, you would retrieve your data from a database, but for this application, the following method is sufficient.
    ' Visual Basic
    Function CreateSyllabusEntries() As DataTable
       Dim syllabus As New DataTable()
       syllabus.Columns.Add("Meeting Date", GetType(String))
       syllabus.Columns.Add("Topic", GetType(String))
       syllabus.Rows.Add(New Object() {"4/2/2001", _
          "Integers and Rational Numbers"})
       syllabus.Rows.Add(New Object() {"4/4/2001", _
          "Equations and Polynomials"})
       syllabus.Rows.Add(New Object() {"4/6/2001", _
          "Roots and Irrational Numbers"})
       Return syllabus
    End Function
    
    // C#
    protected DataTable CreateSyllabusEntries()
    {
       DataTable syllabus = new DataTable();
       syllabus.Columns.Add("Meeting Date", 
          System.Type.GetType("System.String"));
       syllabus.Columns.Add("Topic", System.Type.GetType("System.String"));
       syllabus.Rows.Add(new object[] { "4/2/2001", 
          "Integers and Rational Numbers" } );
       syllabus.Rows.Add(new object[] { "4/6/2001", 
          "Equations and Polynomials" } );
       syllabus.Rows.Add(new object[] { "4/8/2001", 
          "Roots and Irrational Numbers" } );
       return syllabus;
    }
    
  2. Edit the Page_Load method to bind the syllabus data to the DataGrid.
    ' Visual Basic
    Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
       Dim syllabus As DataTable = CreateSyllabusEntries()
       SyllabusGrid.DataSource = syllabus
       SyllabusGrid.DataBind()
    End Sub
    
    // C#
    private void Page_Load(object sender, System.EventArgs e)
    {
       DataTable syllabus = CreateSyllabusEntries();
       SyllabusGrid.DataSource = syllabus;
       SyllabusGrid.DataBind();
    }
    
  3. Use the ItemCreated event of the DataGrid to add TITLE attributes to the table cells created by the DataGrid. At a minimum, you should set the TITLE for the column headers. You may also want to set the TITLE for rows. For information on event handlers, see Creating Event Handlers in Web Forms Pages.
    ' Visual Basic
    Private Sub SyllabusGrid_ItemCreated(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
    Handles SyllabusGrid.ItemCreated
       Dim cells As TableCellCollection = e.Item.Cells
       If e.Item.ItemType = ListItemType.Header Then
          ' Add TITLE attributes to the column headers.
          cells.Item(0).Attributes.Item("TITLE") = "Date"
          cells.Item(1).Attributes.Item("TITLE") = "Topic"
       ElseIf (e.Item.ItemType = ListItemType.Item) _
          Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
          ' Add descriptive titles to individual cells.
          Dim rowView As DataRowView = _
             CType(e.Item.DataItem, DataRowView)
          cells.Item(0).Attributes.Item("TITLE") = _
             rowView.Row.ItemArray(0).ToString()
          cells.Item(1).Attributes.Item("TITLE") = _
             rowView.Row.ItemArray(1).ToString()
       End If
    End Sub
    
    // C#
    private void SyllabusGrid_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
       TableCellCollection cells = e.Item.Cells;
       if (e.Item.ItemType == ListItemType.Header)
       {
          // Add TITLE attributes to the column headers.
          cells[0].Attributes["TITLE"] = "Date";
          cells[1].Attributes["TITLE"] = "Topic";
       }
       else if ((e.Item.ItemType == ListItemType.Item) ||
          (e.Item.ItemType == ListItemType.AlternatingItem))
       {
          // Add descriptive titles to individual cells.
          DataRowView rowView = (DataRowView)e.Item.DataItem;
          cells[0].Attributes["TITLE"] = 
             rowView.Row.ItemArray[0].ToString();
          cells[1].Attributes["TITLE"] = 
             rowView.Row.ItemArray[1].ToString();
       }
    }
    
  4. Run the application.

Testing the Application

Use the following checklist to test the accessibility of the application.

  • 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 will take you to the links. Press ENTER to follow the links.
  • Turn off graphics to make sure that the ALT text displayed makes the page usable. In Internet Explorer version 6, click the Tools menu and choose the Internet Options command. In the Advanced tab, turn off the graphics options in the Multimedia section. You must refresh the page to see the ALT text.
  • Turn off sounds to make sure that no important instructions are lost. In Internet Explorer, version 6, click the Tools menu and choose the Internet Options command. In the Advanced tab, turn off the graphics options in the Multimedia section.
  • View the application in a browser that allows you to turn off style sheets. Turn off the style sheets to make sure the page is still readable.
  • Use the High Contrast option and make sure the page is still readable. To test support of High Contrast, choose the Accessibility Options icon in Control Panel. Click the Display tab and select the Use High Contrast check box. Navigate through all user interface elements to ensure that the color and font changes are reflected. Also, ensure that images or patterns drawn behind text are omitted.
    Note   Windows NT 4 does not have an Accessibility Options icon in Control Panel. Thus, this procedure for changing the SystemInformation.HighContrast setting does not work in Windows NT 4.
  • Use custom font sizes in the Display section of the Control Panel.
  • Use the largest font size supported (available only when High Contrast is selected) to make sure the page is still readable.
  • Resize the browser window and check the readability.
  • Navigate using the keyboard to make sure 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.
  • See the Bobby Web site for an analysis tool you can use to examine your pages (http://www.cast.org/bobby/).

See Also

Accessibility Design Guidelines for the Web

Show:
© 2014 Microsoft