View comments | RSS feed

Dreamweaver CS3  |  Go to CS4 Help

Create accessible HTML forms

When you insert an HTML form object, you can make the form object accessible, and change the accessibility attributes later.

Add an accessible form object

  1. The first time you add accessible form objects, activate the Accessibility dialog box for form objects (see Optimizing the workspace for visual development).

    This is a one-time-only step.

  2. In the document, place the insertion point where you want the form object to appear.
  3. Select Insert > Form, and select a form object to insert.

    The Input Tag Accessibility Attributes dialog box appears.

  4. Complete the dialog box, and click OK. Here is a partial list of options:
    Note: The screen reader reads the name you enter as the Label attribute for the object.
    ID
    assigns an ID to the form field. This value can be used to refer to the field from JavaScript; it's also used as the value of the for attribute if you choose the Attach Label Tag Using For option under the Style options.

    Wrap With Label Tag
    Wraps a label tag around the form item, as follows:
    <label>
    <input type="radio" name="radiobutton" value="radiobutton">
    RadioButton1</label>

    Attach Label Tag Using For
    Uses the for attribute to wrap a label tag around the form item, as follows:
    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
    <label for="radiobutton">RadioButton2</label>

    This choice causes the browser to render text associated with a check box and radio button with a focus rectangle, and enables the user to select the check box and radio button by clicking anywhere in the associated text instead of just the check box or radio button control.

    Note: This is the preferred option for accessibility; however, the functionality may vary depending on the browser.

    No Label Tag
    Does not use a label tag, as follows:
    <input type="radio" name="radiobutton" value="radiobutton">
    RadioButton3

    Access Key
    Uses a keyboard equivalent (one letter) and the Alt key (Windows) or the Control key (Macintosh) to select the form object in the browser. For example, if you enter B as the Access Key, users with a Macintosh browser could type Control+B to select the form object.

    Tab Index
    Specifies a tab order for the form objects. If you set tab order for one object, you must set the tab order for all objects.

    Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order.

  5. Click Yes to insert a form tag.

    The form object appears in the document.

    Note: If you press Cancel, the form object appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

Edit accessibility values for a form object

  1. In the Document window, select the object.
  2. Do one of the following:
    • Edit the appropriate attributes in Code view.

    • Right-click (Windows) or Control‑click (Macintosh), and then select Edit Tag.


Comments

Comments are no longer accepted for Dreamweaver CS3. Dreamweaver CS4 is the current version. To discuss Dreamweaver CS3, please use the Adobe forum.

Comments


whatalotofrubbish said on Nov 12, 2007 at 2:29 PM :
I got to this page after looking for tab index and again looking for tab order.
Nowhere does the help state what exactly the tab index or tab order is.
I have assumed that the tab order of an item is the number of times one would have to press the tab button from the top of the page to get to the item concerned.
Perhaps I am right - Perhaps not? The definitive answer would be nice.
kinblas said on Nov 12, 2007 at 10:37 PM :
You can find out more information about the tabindex attribute from the HTML 4.01 spec, which you can find here:

http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#tabbing-navigation
No screen name said on Feb 12, 2008 at 1:04 AM :
What is an ACCESSIBLE form? Your documentation seems to assume everybody knows what that means, but I have no idea.
jonmichael said on Feb 12, 2008 at 11:16 AM :
An accessible form is a form that users with disabilities can easily use. For example, some users who can only use a keyboard need to press keys to access form fields. You can specify a key on the keyboard that will select a form field so that users don't have to click inside the form field with a mouse.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/en_US/Dreamweaver/9.0/WSc78c5058ca073340dcda9110b1f693f21-7920.html