Writing Accessible Dynamic HTML with Internet Explorer 4.0

Writing Accessible Dynamic HTML with Internet Explorer 4.0


Because traditional HTML describes the structure as well as the content of a Web page, it has been easy in the past to create tools that make Web pages largely accessible to people with disabilities. Dynamic HTML gives Web pages many more capabilities, including enhanced support for accessibility. Authors writing interactive Dynamic HTML pages can ensure that their Web pages remain accessible for all people by following a few simple tips.

What Is an Accessible Web Page?

Accessibility problems arise in the interaction between the user and the Web page. The problems involve difficulty either in viewing the content of the page—for example, blindness or low vision—or in providing input to interact with the page—the most common being the inability to maneuver a mouse. Web pages are accessible if they allow alternate methods for both viewing the page and providing input to the page.

The first requirement for accessibility is that the page can be represented nonvisually. Programs called screen readers are used in conjunction with Microsoft® Internet Explorer to represent the page to the user through a sense other than sight, such as sound (voice synthesizer) or touch (Braille). A second requirement for accessibility is that the Web page allows keyboard/alternative-input access to all parts of the page that can be clicked by the mouse.

Internet Explorer, by taking advantage of HTML's structural nature, makes most Web pages accessible automatically. For example, the A tag indicates which areas on the page are clickable, so Internet Explorer automatically allows the user to tab to any A tag using the keyboard. The A tag also encloses text that Internet Explorer can provide to a screen reader, which can in turn use the text to describe the link to the user.

There are some potential difficulties, however, that can hinder the ability of Internet Explorer to expose a Web page in an accessible manner. Implementing the following tips helps avoid these problems.

Tip#1: Use A tags for all areas of the screen that respond to a mouse click

Although you can associate a click event with nearly any HTML element using Dynamic HTML, for accessibility reasons this should be done only on A tags. This allows the keyboard user to navigate to these areas using the keyboard, and also gives hints that allow screen readers to know which parts of the Web page are interactive. An additional benefit to using the A tag to denote areas that can be clicked is that the mouse cursor automatically changes to the "hand" cursor when hovering over these areas.

A tags normally navigate to another Web page or bookmark when clicked. To avoid this, set the "returnValue" property of the window.event object equal to FALSE in the script that runs when the anchor is clicked. This causes the default action (navigating) to be canceled.

To run a specific Visual Basic® Scripting Edition (VBScript) function when an A tag is clicked, use the following syntax:

<A href="" id=anchor1>Click here</A>
<SCRIPT language=vbscript>
function anchor1_onclick

    msgbox "you clicked on anchor1"
    window.event.returnValue=FALSE

end function
</SCRIPT>

Tip #2: Use the LABEL tag to associate text with intrinsic controls

There was no way in the HTML 3.2 specification for an author to associate text with an intrinsic control such as a radio button or text box. Unlike an A tag, which has an accompanying /A tag and encloses text, the INPUT tag does not have an /INPUT tag. Therefore, screen readers have a difficult time finding exactly what text to use to describe the control to the user. HTML 4.0 introduces the LABEL tag, which allows the author to associate text with another HTML element. This is particularly useful for associating text with intrinsic controls. Whenever an intrinsic control is used on a page, it should be accompanied by a LABEL tag containing its associated text. Doing so provides an additional benefit: clicking the label toggles the value of the associate intrinsic control.

To associate a LABEL tag 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>

Tip #3: Always assign values for the TITLE= attribute of items such as AREA or BGSOUND

The HTML 4.0 TITLE attribute allows the author to specify additional descriptive information about an HTML tag. This is particularly important for elements that do not normally have textual information associated with them, such as the AREA tag, which is used to designate a region of an image map, and the BGSOUND tag, which specifies a sound file to play in the background for a Web page. The TITLE attribute should always be used when dealing with these tags.

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

Links to Additional Information on Accessibility

The following links provide additional information on accessibility.

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.