DHTML AccessibilityDHTML Accessibility*
*Contents  *Index  *Topic Contents
*Previous Topic: Cross-Frame Scripting and Security
*Next Topic: DHTML References

DHTML Accessibility


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 can be clicked, so Internet Explorer automatically allows the user to tab to any A tag. 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 textual areas on the page that respond to a mouse click

Although you can associate a click event with nearly any text 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

In the HTML 3.2 specification, there was no way 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 associated 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 capability 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. For example: 

<BGSOUND SRC="soundfile.mid" TITLE="Sound of falling water">

Tip #4: When using CSS positioning, be sure to specify your coordinates in "em" units

An important part of IE 4.0's Dynamic HTML, CSS positioning allows you to specify exactly where you want an HTML element to appear on the screen. Problems can arise, however, if the user changes the default font size or overrides the font sizes on a Web page. In that case, absolutely positioned elements can increase in size and overlap unless they are created properly. Specifying the position of objects using "em" units helps to solve this problem. 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 goes up, the value of one em increases as well. Content positioned and sized in ems correctly adjusts for the increased font size.

For example, to specify a <DIV> tag that is absolutely positioned, you can use the following syntax: 

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

Ems tend to be quite large units compared to something like pixels. A good rule of thumb is that 1 em is roughly equivalent to 10 pixels for the standard font size.

Tip #5: Test positioned HTML for accessibility

Here are some test cases for the accessibility of positioned objects. When creating pages that use HTML elements positioned in ems, try changing between the Windows display settings for font size to both "Small Fonts" and "Large Fonts." Also, go to the Accessibility options in the Internet Options dialog and choose "Ignore Font sizes specified on web pages." Then set IE's 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 page in ways that are commonly used by people with disabilities.

Tip #6: Use client-side image maps to make pages keyboard navigable

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 enhance 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 hit ENTER.

Links to Additional Information on Accessibility

The following links provide additional information on accessibility.

Up Top of Page
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.