In this article (which is divided into two parts), I'll demonstrate the main changes to the server controls provided with ASP.NET in comparison to those in ASP.NET 1.x, concentrating almost solely on accessibility issues. I've provided four example pages that you can experiment with and that show the various new controls and properties in use.
- Example 1, in this part of the article, demonstrates the new HtmlLink control, the AssociatedControlID property of the Label control and the use of a hotkey, plus the use of table captions and table row and column headers.
- Example 2, which is the first of the three examples in part two of this article, demonstrates the use of the AssociatedHeaderCellID property and the use of headers and scope attributes when generating HTML tables dynamically.
- Example 3 demonstrates the improved support for the alt attribute for images.
- Example 4 demonstrates the new LabelAttributes and InputAttributes properties of the CheckBox control.
You can download the examples from http://www.daveandal.net/articles/v2accessibility/.
Example 1: Accessibility with HtmlLink and GridView Controls
The first example demonstrates some useful features (as concerns accessibility) of two new controls, as well as additional properties for some existing controls:
- The new HtmlLink control is used automatically (instead of the HtmlGenericControl) when ASP.NET sees a <link> element that contains the runat="server" attribute in the page. The HtmlLink control exposes the Href property, allowing the href attribute of the resulting <link> element to be set programmatically. However, to set other attributes (for example rel and type when linking a CSS stylesheet), you have to resort to using the Attributes collection.
- The Caption property, and the associated CaptionAlign property, can be used to display a descriptive caption above, below, or to the left or right of a table. These properties are available on the Calendar, DetailsView, FormView, GridView, Table, DataList and DataGrid controls.
- The UseAccessibleHeader property, when set to True, causes a control that generates an HTML table to add a scope attribute to each header cell. Non-visual user agents can use this attribute to determine how the header relates to the cells within the table -- in other words if it is a column header (scope="col") or a row header (scope="row"). This makes it easier for the user to understand what the contents of a table represent. This property is available on the Calendar, GridView, DataList and DataGrid controls.
- The AccessibleHeaderText property is used to specify text that explains what each column header means in more detail, without being visible in the normal output (and therefore not disturbing the layout of the table). This property is available on controls that are used to generate columns or rows in a GridView and DetailsView control, namely BoundField, AutoGeneratedField, ButtonField, CommandField, CheckBoxField, HyperlinkField, ImageField, and TemplateField.
- The RowHeaderColumn property is set to the name of the column in a GridView control that contains the value that most readily identifies each row (for example the product name column in a list of products). The values in this row are then displayed in <th> elements, rather than the usual <td> elements, and the scope="row" attribute is added to each one. This property is available only on the GridView control.
- The AssociatedControlID property causes the Label control to generate a <label> element (rather than the usual <span> element). It also adds a for attribute to the <label> element, so that the browser will link it to the specified interactive control (such as a text box, check box or list control). This allows a hotkey to be defined for the Label control that will move the input focus directly to the associated control. This property is available only on the Label control.
Linking a CSS Stylesheet with the New HtmlLink Control
Although you can achieve the same effects with an HtmlGenericControl in ASP.NET 1.x, the new HtmlLink control makes it easier to declaratively or dynamically insert <link> elements into your pages and then manipulate the properties of these elements. A prime use for the <link> element, especially when maximizing accessibility, is to specify one or more stylesheets for your page(s). For example:
<link id="MyLink" runat="server" href="style.css" rel="stylesheet"
type="text/css" />
The HtmlLink element exposes a property named Href that sets the href attribute of the resulting <link> element, and so the URL of the stylesheet can be manipulated at runtime by reading and setting the value of this property. The remaining attributes in the declaration do not correspond to properties of the control. However, the ASP.NET server controls simply copy any unrecognized attributes in the declaration directly onto the element that they generate.
An alternative approach is to dynamically generate the HtmlLink elements for a page. The declaration of the first part of the example page listed below (example1.aspx) contains no <link> elements:
example1.aspx
<html>
<head id="elemHead" runat="server">
<!-- link elements will be inserted here -->
<title>DataGrid Control Enhancements</title>
</head>
<body>
...
However, the server-side code contains a Page_Load event handler that creates new instances of the HtmlLink control, sets their properties, and inserts them into the page. It sets the Href property of each one to the URL of the stylesheet, but the remaining attributes can only be set dynamically by accessing the Attributes collection of the control directly.
The first section of the Page_Load event handler (shown below) is not relevant to this part of the discussion. It simply sets the ConnectionString property of a SqlDataSource control declared later in the page, which is used to populate the GridView control you'll meet in a while.
<script runat="server">
Sub Page_Load()
ds1.ConnectionString = ConfigurationSettings. _
ConnectionStrings("nwind").ConnectionString
' generate new HtmlLink control for "Standard" stylesheet
Dim oLink1 As New HtmlLink()
With oLink1
' set properties and add required attributes
.Href = "style.css"
.Attributes.Add("rel", "stylesheet")
.Attributes.Add("type", "text/css")
.Attributes.Add("title", "Default")
End With
' insert into <head> section as a child control
elemHead.Controls.Add(oLink1)
' repeat for "Large Text" alternate stylesheet link
Dim oLink2 As New HtmlLink()
With oLink2
.Href = "style-large.css"
.Attributes.Add("rel", "alternate stylesheet")
.Attributes.Add("type", "text/css")
.Attributes.Add("title", "Large Text")
End With
elemHead.Controls.Add(oLink2)
End Sub
</script>
Notice that both stylesheet links have a title attribute added. This attribute specifies the text that users will see for each one in the list of stylesheets, if their browser allows them to choose the stylesheet to use. This option is not available in Internet Explorer 6, which uses the last <link> element that contains the attribute rel="stylesheet". The usual approach is to use the title Default for the default stylesheet, and then rel="alternate stylesheet" and a descriptive value for the title attribute in all alternative stylesheet links. Internet Explorer will ignore stylesheet links that contain a rel="alternate stylesheet" attribute in the <link> element.
The new HtmlLink controls are inserted into the control tree of the page as children of the <head> element. The <head> element is declared as a server control (with the runat="server" attribute - see the listing above), and so it is represented in the control tree by an instance of the new HtmlHead control that is added to ASP.NET in version 2.0. The HtmlHead control (like almost all ASP.NET server controls) has a Controls collection for its child controls. The Add method of this collection adds the specified control, in this case the new HtmlLink controls, to the end of the Controls collection.
The output that is generated from the code shown above is:
<link href="style.css" rel="stylesheet" type="text/css" title="Default" />
<link href="style-large.css" rel="alternate stylesheet" type="text/css"
title="Large Text" />
Figure 1 shows the page displayed in Mozilla 1.5, which allows the style sheet to be selected. You can see the effects of choosing the "Large Text" stylesheet in this screenshot.
Figure 1 - Choosing a stylesheet for example1.aspx in Mozilla
Connecting a Label Control and Specifying a HotKey
The next section of control declarations in the example1.aspx page demonstrates the use of the new AssociatedControlID property of the Label control, along with a couple of other properties that were available in ASP.NET 1.x. When you build pages that contain interactive controls, a useful feature for all users, not just those with special accessibility requirements, is to provide hotkeys that move the input focus directly to a specific control.
By using a combination of the AssociatedControlID, AccessKey and TabIndex properties, you can make forms or other pages containing interactive controls much easier for all your visitors to use. Setting the TabIndex allows you to control the order that the input focus moves from one control to the next. By default, the browser uses the order of the control declarations within the page. In complex forms, you can use the TabIndex property to make the input focus move down the columns of a table, rather than the default of moving across the rows, or force it to follow whatever path through the controls you require. Of course, the path you choose should be an "obvious" one, so as not to confuse users who will wonder where the input focus went if it jumps from control to control in some non-intuitive way!
The AccessKey property specifies the key that, when pressed in conjunction with the Alt key, will move the focus to that control on the page (there are some keys you can't use, such as Alt-T, which opens the Tools menu in Internet Explorer). It's also useful to indicate the hotkey to the user by underlining that letter in the caption of the control - it works well with most controls, although it doesn't work with the ASP.NET Button control. The listing below demonstrates the use of the TabIndex and AccessKey properties, along with underlining the corresponding letter in the Label control that acts as the caption of the TextBox:
...
<asp:Label id="lblProduct" runat="server"
Text="<u>P</u>roduct Name:"
AccessKey="P"
AssociatedControlID="txtProduct"
TabIndex="0" />
<asp:TextBox id="txtProduct" runat="server"
TabIndex="1"
Text="A" />
<asp:Button runat="server" id="bntGo" Text="Go"
ToolTip="Start search for matching products"
TabIndex="2" />
...
Because a Label control can't receive the focus in the browser, the focus will move to the next control in the declarative or tabbing order of the page. So, in the code above, the TextBox will automatically get the focus when Alt-P is pressed. However, there is no external indication that this will happen, especially for users who depend on aural page readers or other specialist devices. The new AssociatedControlID property solves the problem by connecting the Label control to the interactive control that it refers to, by adding the for attribute to it. For example, the code listed above generates the following HTML when rendered to the client:
Figure 2 shows the appearance of the controls in Internet Explorer. Bear in mind, however, that not all graphical browsers fully support hotkeys and the use of associated labels.
Figure 2 - Using a combination of the AssociatedControlID, AccessKey and TabIndex properties
<< Introduction • • Captions, scope, and headers Attributes in the GridView Control >>
