Form Accessibility Enhancements

 <  Day Day Up  >  


One of the most important changes made to forms under HTML 4 and preserved in XHTML is the improved support for accessibility. Some of the accessibility improvements provide more assistance to users who use the keyboard, while others are useful for all comers. Many of the more obscure HTML form elements such as fieldset or label are also concerned primarily with accessibility. We survey a few more of the improvements made in HTML 4 and XHTML in this section.

Keyboard Improvements for Forms

The accesskey attribute for form fields is an important accessibility improvement. Setting the value of the key to a character creates an accelerator key that can activate the form control associated with the element. Generally, the key must be pressed in combination with the ALT or OPTION key to activate the field. An example of how this attribute might be used is shown in the following code:

  <label>  Customer  <u>  N  </u>  ame:  <input type="text" accesskey="N" size="25" />   </label>  

Notice how a <u> tag is used to highlight the letter that will activate the field. This is the common practice to indicate accelerator keys in a Windows GUI. A more CSS-aware approach to indicating accesskey bindings is shown here:

  <label>  Customer  <span class="accesskeyindication">  N  </span>  ame:  <input type="text" accesskey="N" size="25" />   </label>  

From this, you would set the class to indicate the accesskeyindication in whatever manner you wanted. Interestingly enough, neither method should be required because according to the HTML 4 specification, browsers should provide their own form of highlighting for an access key, but in reality this isn't very common.

The HTML and XHTML standard defines the accesskey attribute for the <label> , <input> , <legend> , and <button> tags, although in various versions it leaves off support for <select> and <textarea> . Microsoft supports this attribute for the <select> and <textarea> tags. It seems likely that eventually this will be rolled into future specifications.

While the accesskey attribute can improve a form by making it more keyboard access - friendly, there are certain letters to avoid because they map to browser functions in the two major browsers, as shown in Table 12-1.

Table 12-1: Browser Reserved Accelerator Keys

Key

Description

F

File menu

E

Edit menu

V

View menu

N

Navigation menu (Opera 6)

G

Go menu (Netscape/Mozilla), Messaging menu (Opera 6)

B

Bookmarks menu (Netscape/Mozilla only)

A

Favorites menu (Internet Explorer Only)

T

Tools or Tasks menu

M

E-mail menu (Opera 6)

S

Search menu (Netscape 6), News menu (Opera 6)

W

Window menu (Netscape 7/Mozilla)

A

Favorites menu (Internet Explorer Only)

H

Help

Another accessibility improvement initially introduced in HTML 4.0 is the use of the tabindex attribute for links and form- related elements. This attribute allows the tab order between fields to be defined. In general, elements with tabindex values greater than zero are selected in increasing order. Any elements with a tabindex of are selected in the order they are encountered after the rest of the tabbing controls have been exhausted. Fields with negative tabindex values should be left out of the tabbing order. If a browser supports tabbing through form fields, it is usually by the order in which they are defined, which is often similar to the desired tabbing order. The next markup fragment demonstrates tabindex as the last field gets selected first, then the first, and then the second field is completely skipped over.

Tip  

Page designers are encouraged to set accesskey and tabindex attributes to their documents immediately; they will have no harmful side effects in older browsers, which will simply ignore them.

  <form action="#" method="get">  Field 1:  <input type="text" tabindex="2" /><br />  Field 2:  <input type="text" tabindex="-1" /><br />  Field 3:  <input type="text" tabindex="1" /><br />   </form>  
Note  

Be careful when setting the tabindex value with radio buttons, as the browser might use arrow keys to move among a group of radio buttons rather than the TAB key.

Tooltips and Form Fields

Another accessibility improvement is the use of the title attribute to give users a hint about how to use a form field. Consider this markup:

  <label>  Phone Number:  <input type="text" size="10" name="phone" id="phone"   title="Please enter your phone number here without dashes." />   </label>  

This is fairly well-supported in most browsers that will be encountered; the following rendering is in the Netscape 4.7 browser.

click to expand

Be careful not to put critical information in a Tooltip, in case the user has a browser that doesn't display them. JavaScript can be used in some browsers to simulate a Tooltip, or to display similar information in the browser's status bar.



 <  Day Day Up  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net