HTML and CSS Reference
In-Depth Information
group form controls enhances accessibility by organizing the controls both visually and
semantically. The <fieldset> and <legend> tags can be accessed by screen readers and
are useful tools to configure groups of radio buttons and check boxes on Web pages.
The tabindex Attribute
Some of your Web page visitors may have difficulty using the mouse and will access your
form with a keyboard. They may use the
Focus on Accessibility
key to move from one form control to
another. The default action for the
key is to move to the next form control in the
order the form controls are coded in the XHTML. This is usually appropriate. However,
if the tab order needs to be changed for a form, use the tabindex attribute on each
form control. For each form tag ( <input> , <select> , <textarea> ), code a tabindex
attribute with a numeric value, beginning with 1, 2, 3, and so on in numerical order. The
XHTML code to configure the customer e-mail text box as the initial position of the cursor
is: <input type="text" name="CustEmail" id="CustEmail" tabindex="1" /> .
The tabindex attribute is not supported in older browsers such as Netscape 4. If you
configure a form control with tabindex="0" , it will be visited after all other form
controls that are assigned tabindex . If you happen to assign two form controls the same
tabindex value, the one that is coded first in the XHTML will be visited first.
The accesskey Attribute
Another technique that can make your form keyboard-friendly is the use of the
accesskey attribute on form elements. Assigning the accesskey a value of one of the
characters (letter or number) on the keyboard will create a hot key that your Web page
visitor can press to move the cursor immediately to a form control. The method used to
access this hot key varies depending on the operating system. Windows users will press
Focus on Accessibility
key and the character key
for Mac users. For example, if the form shown in Figure 9.18 had the customer e-mail
text coded with an accesskey="E" , the Web page visitor using Windows could press
key and the character key. The combination is the
keys to move the cursor immediately to the e-mail text box. The
XHTML code for this follows:
<input type="text" name="CustEmail" id="CustEmail" accesskey="E" />
The accesskey attribute is not supported in older browsers such as Netscape 4. Even
when browsers do support the accesskey feature, you cannot rely on the browser to
indicate that a character is an access key, also called a hot key. You will have to manu-
ally code information about the hot key. A visual cue may be helpful, such as displaying
the hot key in bold or by placing a message such as (Alt
E) after a form control that
uses a hot key. When choosing accesskey values, avoid combinations that are already
used by the operating system (such as
to display the File menu). Testing hot keys
is crucial.
Accessibility and Forms
Focus on Accessibility
Using the XHTML elements and attributes just discussed— label , fieldset , legend ,
accesskey , and tabindex —will increase the accessibility of your Web forms. This
makes it easier for individuals with vision and mobility challenges to use your form
pages. Often, these accessibility modifications, such as use of the < fieldset> and
Search WWH ::

Custom Search