Creating Accessible Web Pages With DHTML

  • Article

This article explains how to create accessible Web pages using Dynamic HTML (DHTML) with Windows Internet Explorer. Accessible Web pages offer alternative methods for viewing and providing input to a Web page. Traditional HTML represents content as a hierarchy, making it easy to develop tools that make Web pages accessible to users who have special needs. DHTML offers additional capabilities, including enhanced support for accessibility.

This article includes the following sections, which explain the requirements for authoring accessible Web pages.

  • What is an Accessible Web Page? 
  • Tips for Creating Accessible Web Pages 
  • Accessible HTML Elements 
  • Related Topics

What is an Accessible Web Page?

Accessibility problems can occur when a user interacts with a Web page. For example, a user might not be able to view the content of the page due to blindness or limited vision, or the user might not be able to interact with the page due to an inability to maneuver the mouse. Accessible Web pages provide alternatives for accomplishing these tasks.

The first accessibility requirement of a Web page is that its content can be represented visually and nonvisually. Programs called screen readers are used with Internet Explorer to represent the page to the user through a sense other than sight, such as sound (voice synthesizer) or touch (Braille). The second requirement is that the user must be able to access all parts of the Web page using something other than the mouse, such as with keyboard input.

Internet Explorer takes advantage of HTML's hierarchical structure and automatically makes most Web pages accessible. For example, the a object indicates which areas on the page the user can click, so Internet Explorer automatically allows the user to tab to any a object and press ENTER to follow the link. The a element also encloses text that Internet Explorer provides to a screen reader, which in turn translates the text into an audible description of the link.

Tips for Creating Accessible Web Pages

While creating accessible Web pages, you might encounter difficulties that can prevent Internet Explorer from exposing your Web page in an accessible manner. Implementing the tips in this section can help you avoid these difficulties.

  • Use anchors for all textual areas on the page that respond to a mouse click.

    Although you can use DHTML to associate a click event with nearly any text element, for accessibility reasons you might want to associate this event only with a elements. Anchors enable the keyboard user to navigate to an area on the page using the keyboard. You can also use anchors to provide hints that can be read by the screen readers to identify which parts of the Web page are interactive. Another benefit to using anchors to denote areas that can be clicked is that the mouse cursor automatically changes to the "hand" cursor when the user hovers over these areas.

    Note  Anchors normally navigate to another Web page or bookmark when clicked. To prevent the anchor from automatically navigating to another location, set the returnValue property of the window.event object to false in the script that runs when the anchor is clicked.

  • Use the label object to associate text with intrinsic controls.

    The HTML 3.2 specification does not provide you with the means to associate text with an intrinsic control, such as a radio button or text box. Unlike an a element, which has an accompanying end element (/a) and encloses text, the input element does not have an end element. The lack of an end element makes it difficult for screen readers to locate the text used to describe the control to the user. HTML 4.0 introduced the label object, which you can use to associate text with another HTML element, such as an intrinsic control. Another benefit of including the label object is that it causes the same effect to occur regardless of whether the user clicks the label or the associated control directly.

    To associate a label object with a radio button, use the following HTML syntax:

    <form>
<input type=radio ID=FirstButton name=radio1>
  <label for=FirstButton>I'm the text for the first radio button</label><br>
<input type=radio id=SecondButton name=radio1>
  <label for=SecondButton>I'm the text for the second radio button</label>
</form>

  • Always assign values for the TITLE attribute.

    You can use the HTML 4.0 TITLE attribute to describe an HTML tag. This capability is particularly important for elements that do not normally have textual information associated with them, such as the area object, which is used to designate a region of an image map, and the bgSound object, which specifies a sound file to play in the background of a Web page.

    The following example uses the TITLE attribute with the bgSound object to describe the background sound.

    <bgsound src="soundfile.mid" title="Sound of falling water">

  • When using positioning with Cascading Style Sheets (CSS), specify your coordinates in "em" units.

    You can use CSS positioning in Internet Explorer to place elements exactly where you want them on a Web page. However, problems can arise if the user changes the default font size or overrides the font sizes on the page. If absolutely positioned objects are not created properly, they can increase in size and overlap one another. To prevent this problem, specify the coordinates of the positioned objects in "em" units.

    Ems are measurement units like inches or pixels, except that they change based upon the default font size. In other words, when the default font size increases, the value of one em also increases. Ems are larger than pixels. One em is roughly equivalent to 10 pixels for the standard font size. Content that is correctly positioned and sized in ems will adjust for the increase in font size.

    Use the following syntax to specify a div element that is absolutely positioned.

    <div style="position: absolute; left: 10em;top: 12em;height: 5em; width: 5em">Here is some positioned text!</div>

  • Test positioned HTML code for accessibility.

    This section provides an example situation for testing the accessibility of a positioned object. For instance, when you create pages that use HTML elements positioned in ems, try switching between the Windows display settings for Small Fonts and Large Fonts. Also, go to the Accessibility options in the Internet Options dialog box and select "Ignore Font sizes specified on web pages." Next, set the Internet Explorer font size on the View menu to Largest. A final test is to turn on High Contrast mode on the Display tab of the Windows Accessibility options in the Control Panel. Each of these settings should change the font size of elements on your Web page in ways that are commonly used by people who have disabilities.

  • Use client-side image maps to simplify keyboard navigation.

    Client-side image maps are more accessible than server-side image maps, because the user can tab to each of the defined areas. To further simplify keyboard navigation, add anchors to each of the defined areas in the image map. This way all the user has to do is tab to the desired link and press ENTER.

Accessible HTML Elements

Some HTML elements—images, text, and links—are accessible, and some are not. Each accessible element (tag) in an HTML document is represented in the document's accessibility hierarchy. For more information about the accessibility hierarchy, see About Active Accessibility Support.

The following elements are accessible:

You can make nonaccessible elements accessible by specifying a value for the element's TABINDEX attribute. The following elements are nonaccessible:

  • b
  • div
  • i
  • span
  • u
  • Any custom elements that are not part of the HTML standard.