
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.
Accessibility problems arise in the interaction between the user and the Web page. The problems involve difficulty either in viewing the content of the pagefor example, blindness or low visionor in providing input to interact with the pagethe 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.
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>
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>
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">
The following links provide additional information on accessibility.
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.