jump 
to contentjump to text navigation at bottom
Web Savvy
 Home Services Resources Sitemap Standards

Resources

(home : resources :examples and techniques : device independence)

Device Independence

To ensure device independence, pages must be designed so that, when rendered by user agents (browsers), the user's preferred input and output devices are supported. A user may prefer any combination of mouse, standard and non-standard keyboards, voice input or output, head wand, standard and non-standard pointing devices, or Braille devices. The document must be able to support any of these choices.

The use of alternative input devices allow the visitor to a Web page to control their access to the information with the device best suited for their needs. For Example, not all user agents or their users can make use of a graphical interface and for these individuals, use of the standard mouse as a pointing device is not possible. Generally, pages that use keyboard access techniques also tend to be more accessible to speech or command line interfaces, as well as being more "usable" in general. A Web designer's main goal should be to ensure that users can interact with a page using devices other than those used for pointing.

The following techniques may be implemented to ensure device independence:

1. ALT Attribute

The simplest way to increase a page's keyboard accessibility and navigability to use text equivalents for image maps or linked images. The text equivalent, using the HTML ALT attribute, makes selection without a pointing device possible.

2. Tabbing order

"Tabbing order" refers to the linear sequence in which users accessing a site via keyboard may navigate through links or form controls on a Web page. The navigation through the page using the TAB key is important for individuals who cannot use a pointing device. Review your Web page using the TAB key to ensure that a logical sequence is presented, with the most important items accessed first.

3. Keyboard shortcuts

The use of "keyboard shortcuts" allows users to combine keystrokes to easily navigate links or forms on a page without the use of a mouse. There are two other shortcut features, which make pages more keyboard-accessible.

ACCESSKEY:
The ACCESSKEY attribute is used for defining custom shortcuts. Using and defining the ACCESSKEY attribute in one of the elements that supports it, allows a user to access that element directly via the associated shortcut in combination with the ALT key in Windows or the Apple key on a Macintosh. It is recommended to use the number keys with ACCESSKEY as not to override an operating system's pre-set shortcuts. It must also be noted that different user agents may use shortcuts slightly differently.

In this example the "6" key has been set as a shortcut using ACCESSKEY. Press ALT 6 to highlight the link to the Web Savvy homepage. The text navigation links at the bottom of the page use the ACCESSKEYS 1 through 5. ACCESSKEYS are currently supported by Internet Explorer 4 or higher.

<a HREF="/index.php" ACCESSKEY="6" TITLE="Web Savvy homepage">Web Savvy homepage</a>

TABINDEX:
The TABINDEX attribute, used to specify a particular tabbing order within a given page, can also be used to improve accessibility and usability in general. Associating each element with a numbered TABINDEX, creates the tabbing order. When tabbing through the page, the numbered elements are then accessed in ascending order.

The use of TABINDEX in this example assigns a tabbing order through box2, box1, then finally to the submit button. This feature requires Internet Explorer version 4 or higher, or Netscape 6.0 or higher.

<form> <input TABINDEX="2" TYPE="text" NAME="box1" value="tabindex 2 example"> <input TABINDEX="1" TYPE="text" NAME="box2" value="tabindex 1 example"> <input TABINDEX="3" TYPE="button" NAME="submit" value="Don't Submit" onclick="alert('This is just an example')"> </form>

Web Resources



| Home | Services | Resources | Sitemap | Standards |

ATRC
Adaptive Technology Resource Centre Adaptive Technology Resource Centre