Accessibility

back To Overview of Resources

Read also...

 

Links & More

Print version Print version
   

Related Links
Accessibility Competence Center

Background Links
document Edition 9: Accessibility

Making Web Pages Accessible – Questions and HTML Examples

By Gerd Waloszek, Product Design Center, SAP AG – Last update: 31 January 2007

Your Questions, Please | Examples for Selected Page Elements | References

I compiled this article for developers and designers who want to create accessible Web pages. It demonstrates some of the techniques for making HTML pages accessible – most of them build on new attributes that have been introduced with HTML 3.2 or 4.0.

This article consists of two parts:

The examples are based on HTML 4.0.1 as defined by the W3C.

 

Your Questions, Please

First, I present some frequently asked accessibility questions because they cover typical problems and apply to most of the examples. The questions are:

ID, Name, and Title, There Are so Many Attributes – Which One Do I Use for What Purpose?

ID

The id is a document-wide unique identifier for page elements. For example, it is used in the label element's for attribute for establishing the connection to the screen element that is described by the label (see below).

Name

Depending on the tag in which it appears, the attribute name has different uses, such as: name of form (form) or image (img) for scripting, name of frame for targeting (frame, iframe), field name (select), named link target (a).

While name should be no longer used for forms (form tag) to be referred to from style sheets or scripts (use id instead), it is still used inside the select statement for input fields, checkboxes, and radiobuttons as a control name. Several checkboxes or radiobuttons in a form may share the same control name and form a group. If several radiobuttons share the same control name, they are mutually exclusive.

Title

The title attribute offers advisory information about a page element. Unlike the title tag in the header, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. The text of the title attribute can, for example, be displayed as a tooltip or read by a screen reader. See below for more information.

How Do I Establish a Connection Between a Label and the Corresponding Screen Element?

Some page elements, such as input fields, checkboxes, radiobuttons, or dropdown listboxes are typically described by a text label next to it. With HTML 3.2 the W3C introduced the label element for this purpose. The label's attribute for explicitly associates the label with another control. Set its value to the id of the corresponding screen element to establish the connection. Screen readers will then be able to read the label whenever the element gets the focus.

Example

<label for="search">Search</label>
<input … id="search" … >

Code 1: A label is connected to a corresponding input field with the for attribute

Below I will present examples showing screen elements with and without the connection. So you can click and see the difference. The examples are supplemented by the respective code.

How Can I Describe Page Elements?

In HTML 4.0, every page element can have a tooltip that is displayed when the mouse rests over it; it can be read to blind people while an element is focused by screen reader software. You can set the tooltip text with the title attribute, which is available for most page elements. Also check whether that element is included in the accessibility hierarchy so that it can be read to blind users - if not, you have to add it manually to the accessibility hierarchy (see below for details).

Note: For images use the alt tag for the description.

Example

<label for="search"
       title="Input field Search">
       Search</label>  
<input … id="search" name="Input">

Code 2: Descriptions, which appear in tooltips and can be read by a screen reader, are added using the title attribute

How Can Blind Users Recognize the Type and Status of Page Elements?

Blind users cannot extract the type and status of page elements solely from the text contained in that element. For example, they cannot tell from the text that is read to them, whether it belongs to a button, link, or image, or whether an input field is read-only, or a button is disabled. Therefore, add type (e.g. button, link) and status (e.g. disabled, active, ...) of an element to the text description (in the title attribute).

How Can I Add Language Information to Page Elements?

You can use the lang attribute to define the main language of a page. If there exists also text in a different language, set the Lang attribute for that specific element, accordingly. The following example assumes that the default language English is set in the body tag. In addition, the Lang attribute is used inside a specific element to temporarily set a different language. In this case, a result list contains a link to a document, which has a German title. Therefore, the Lang attribute is set inside the link (a = anchor) tag to "de".

Example

<body Lang="en">
Search results:<br>
<a href="the_oldage_german.doc" Lang="de"> 
   Die Geschichte des Mittelalters</a> 
<a href="us_history.doc">
   American History</a>

Code 3: Setting the language of an element using the Lang attribute

Keyboard Access via Tab Chain – Which Elements Are Included in the Accessibility Hierarchy By Default – How Can I Add Manually Screen Elements to the Accessibility Hierarchy?

Certain page elements can be accessed via keyboard by pressing the tab key or an arrow key. These elements are included in the accessibility hierarchy, also called tab chain. Some elements are included in the accessibility hierarchy by default: Anchors, input fields, checkboxes and radiobuttons, dropdown lists, lists, buttons, frames and iframes, objects, text areas, images, and the document body.

Other elements are not included in the tab chain and have to be added manually. In this case, you have to use an element that allows to set the tabIndex attribute; it has been introduced with HTML 4.0. Elements that provide the tabIndex attribute in addition to the default elements are the div, span, table, td, applet, and frameset tags. (Note that these additional elements are only supported by Microsoft's Internet Explorer version 4 and newer.)

To add page elements to the accessibility hierarchy, set the value of the tabIndex attribute as follows:

Setting the tabIndex to a negative value will remove an element from the hierarchy.

Often it is impossible to manage a sequence that includes every active element of a page. Therefore, a tabIndex of zero is the best solution to make all elements accessible with the keyboard.

Example

<span tabindex="0" onClick="doExpand();">
Expand part of page</span>

Code 4: Adding an element to the tab chain by setting its tabIndex to zero (valid only for MS Internet Explorer 4 or newer)

How Can I Make Page Elements Accessible by the Keyboard via Shortcuts?

With HTML 4.0, the W3C introduced the accessKey attribute that makes an element accessible by pressing an accelerator key; these are Alt+"Key" combinations. Set the value of accessKey to the key (without ALT) that you would like to connect to the element. Underline the access key in a corresponding label or text of the element to indicate to users that they can use the accelerator key (see the code example below and a screen example further down). Like the accessibility hierarchy, shortcuts are managed pagewise.

The following example demonstrates how to use the accessKey attribute.

Example

<label for="search" accesskey="S"><u>S</u>earch</label>
<input … id="search" name="Input">

Code 5: Adding a shortcut to an element

The label in the example is connected to an input field through the id. The label is accessible with the shortcut Alt+"S". The shortcut character S is underlined using the u tag so that users can easily recognize it.

 

Examples for Selected Page Elements

In this section, I cover the following often-used screen elements: the form elements checkbox, radiobutton, dropdown listbox, listbox, input field, and the data table.

Checkbox

Checkboxes are used for selecting choices or options; in contrast to radiobuttons, a checkbox can be used as a single element.

A checkbox is created as an input element with type=checkbox; it is included in the accessibility hierarchy by default.

Figure 1: Checkbox with label that is connected to it via the label element - clicking the label checks or unchecks the box

Adding a Description to a Checkbox

Add a corresponding label element to the checkbox for describing it. An additional description about the checkbox can be added in its title attribute.

Example

<input type="checkbox" name="check1" id="check1" value="checkbox" 
       title="Demo checkbox" checked>
<label for="check1" title="This is the label for the demo checkbox">
Checkbox</label>

Code 6: HTML code for a checkbox (the code used in figure 1)

Note that if the descriptor of the checkbox does not have a label element, there is no connection between the checkbox and its descriptor. Thus, if the user clicks the text the checkbox is not checked or unchecked (see figure 2).

Checkbox where the descriptor does not have a label element

Figure 2: Checkbox without label element for the descriptor – clicking the label does not have any effect

Note: Contrary to the input field, the value attribute of the checkbox (which is sent after submit) does not reflect the state or "value" of the checkbox. Instead, there is an additional "checked" element in the code (XHTML: checked="checked").

Radiobutton

Radiobuttons are used for selecting from alternative choices or options. Radiobuttons must not be used as single elements.

A radiobutton is created as an input element with type=radio; it is included in the accessibility hierarchy by default.

Figure 3: Example of a radiobutton group – as the labels are connected with the radiobuttons you can click the labels to alter the choice

Adding a Description to a Radiobutton

Ensure that the radiobutton has a corresponding label control for correct screen reader support. An additional description about the radiobutton can be added in its title attribute.

Example

<input type="radio" name="radio_a" id="radio1" value="radiobutton" 
       title="Demo radiobutton 1" checked>
<label for="radio1" title="This is the label for demo radiobutton 1">
Choice 1</label>

Code 7: HTML code for a radiobutton (this is the code used in figure 3 for the first radiobutton)

Note that the radiobuttons in figure 3 form a group; this is achieved by giving all three radiobuttons the same name "radio_a"; however, they must have different id's "radio1" to "radio3" for establishing the connections to the different labels using the label's for attribute.

If the radiobutton descriptors do not have label elements, there is no connection between the radiobuttons and their descriptors. Thus, if the user clicks the text label, the corresponding radiobutton is not checked or unchecked (see figure 4).

Choice 1 (no label element)
Choice 2 (no label element)
Choice 3 (no label element)

Figure 4: Radiobuttons without label element for the descriptors

Note: Contrary to the input field, the value attribute of the radiobutton (which is sent after submit) does not reflect the state or "value" of the radiobutton. Instead, there is an additional "checked" element in the code (XHTML: checked="checked").

Dropdown Listbox

Dropdown listboxes are used to select one item from a list; they save space as they display only the currently selected item.

Dropdown listboxes are implemented as select elements. They are in the tab chain by default.

  

Figure 5: Dropdown listbox with a connected label – click the label to activate the list

Adding a Description to a Dropdown Listbox

Connect the element to a label element so that the screen reader will be able to read it. An additional description of the content of the dropdown listbox can be added in its title attribute.

Example

<label for="sel1" 
   title="Demo dropdown listbox">Demo dropdown listbox</label>  
   <select name="select" id="sel1" title="Demo dropdown listbox">
           <option selected>Item 1</option>
           <option>Item 2</option>
           <option>Item 3</option>
           <option>Item 4</option>
           <option>Item 5</option>
   </select>

Code 8: HTML code for a dropdown listbox (the code used in figure 5)

Note that if the descriptor of the dropdown listbox does not have a label element, there is no connection between the listbox and its descriptor. Thus, if the user clicks the text label the listbox does not get the focus (see figure 6).

  Dropdown listbox (no label element)  

Figure 6: Dropdown listbox without label element for the descriptor – clicking the label has no effect

Note: The only difference between the HTML code of a dropdown listbox and a listbox is that the first lacks the size attribute.

Listbox

Listboxes are used to select one item from a list; if there are more items in the list than are visible, a scrollbar is displayed.

Listboxes are implemented as select elements. They are in the tab chain by default.

Figure 7: Listbox with a connected label – click the label to activate the list and the first item (for better demonstration of the label connection no item is selected initially)

Adding a Description to a Listbox

Connect the element to a label element so that the screen reader will be able to read it. An additional description of the content of the listbox can be added in its title attribute.

Example

<label for="sel11" 
   title="Demo listbox">Demo listbox</label>  
   <select name="select4" id="sel11" title="Demo listbox" size="5">
           <option>Item 1</option>
           <option>Item 2</option>
           <option>Item 3</option>
           <option>Item 4</option>
           ...
           <option>Item 8</option>
   </select>

Code 9: HTML code for a listbox (the code used in figure 7)

Note that if the descriptor of the listbox does not have a label element, there is no connection between the listbox and its descriptor. Thus, if the user clicks the text label, the listbox does not get the focus (see figure 8).

  Listbox (no label element)

Figure 8: Listbox without label element for the descriptor – clicking the label has no effect (no item is selected initially)

Note: The only difference between the HTML code of a listbox and a dropdown listbox is that the first has a size attribute, which tells the number of visible items.

Input Field

With respect to accessibility, the input field is one of the most complex page elements. They often require that users enter data in a specific format. For example, an input for a date field may have to be entered in the DD/MM/YYYY format. The input format may also depend on the language used or the country where the software is used.

Input fields are by default included in the accessibility hierarchy. If a connected label is provided, screen reader support is also available. Shortcuts to access input fields can be directed to the label by using the accessKey attribute (see example below).

  

Figure 9: Input field with a connected label – click the label to move the cursor into the input field

Note: The input field has a value attribute, which holds the data that the user has entered into the fields. Developers should use this attribute to specify default values in order to provide users with a context, for example, by displaying data that the user has entered previously.

Adding a Description to an Input Field

In addition to the label text, different types of status information for an input field are important for blind users, such as whether the field requires an input or is read-only. If the input field expects a special data entry format, add this information to the input field's description, too.

An additional status invalid may be required for invalid data, for example in case the user committed an error. If the entry in the input field is limited to a certain length, also add this information to the description.

It is advisable to specify description rules for these different cases. Currently, there are no such generally accepted rules.

Example

<label for="fd1"
       title="Input field Search" accesskey="S">
       <u>S</u>earch</label>
<input type="text" name="textfield1" id="fd1" title="Input field Search">

Code 10: HTML code for a simple input field with shortcut for the label (the code used in figure 9)

If the descriptor of the input field does not have a label element, there is no connection between the input field and its descriptor. Thus, if the user clicks the text label the cursor does not move into the input field (see figure 10).

  Search  

Figure 10: Input field with HTML text as label – clicking the label does not move the cursor into the input field

Data Table

Complex application data are stored and presented in tables. The HTML table can be used to display tabular data.

The table element belongs to those elements that are not included in the accessibility hierarchy by default; it can be added to it manually by setting the tabIndex of the table tag. Most of the elements used in tables are text elements that are not in the accessibility hierarchy by default. Any cell can be added to it by setting the tabIndex of its td tag. Images, such as icons, are included in the tab chain if they are included in a link (a screen reader reads the respective alt descriptions by default).

Remember that screen readers are able to read tables sufficiently without adding every element to the tab chain. There are dedicated shortcuts for blind users that allow them to move a virtual cursor through the table.

Adding Descriptions to the Table and its Data

The table tag provides an additional summary attribute that can be displayed as tooltip or read by a screen reader. Set this attribute to describe the table's content in a general way. The caption attribute, on the other hand, presents a description on the screen. When using special fields, such as totals, add descriptions to the respective cells' title attribute in the td tag.

Example

As tables can become very complex, I present only a simple example from the HTML 4.0 specification. It satisfies the basic accessibility requirements by providing a summary and using th tags for the column headers.

Cups of coffee consumed by each senator
Name Cups Type of Coffee Sugar?
T. Sexton 10 Espresso No
J. Dinnen 5 Decaf Yes

Figure 11: A simple table with caption and summary; the column headers use the th tag (from W3C's HTML 4.0 spec)

<table summary="This table charts the number of cups
                of coffee consumed by each senator, the type
                of coffee (decaf or regular), and whether
                taken with sugar.">
       <caption>Cups of coffee consumed by each senator</caption>
  <tr>
    <th>Name</th>
    <th>Cups</th>
    <th>Type of Coffee</th>
    <th>Sugar?</th>
  <tr>
    <td>T. Sexton</td>
    <td>10</td>
    <td>Espresso</td>
    <td>No</td>
  <tr>
    <td>J. Dinnen</td>
    <td>5</td>
    <td>Decaf</td>
    <td>Yes</td>
</table>

Code 11: HTML code for the simple table with caption and summary; the column headers use the th tag (from W3C's HTML 4.0 spec)

 

References

 

top top