 |
|
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
Living Examples - Electronic Forms |
(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field
elements, and functionality required for completion and submission of the form, including all directions and cues.
Any mechanism that submits user-entered data through a website is considered an electronic form.
Developers will often use tables to align an electronic form in a way they believe makes sense to sighted users. If necessary, you can check to see if the
form elements are inside a table by reading through the page's source code.
Those using assistive technology must be able to determine which form element goes with the text reference that describes its purpose. Not all assistive
technologies handle forms inside a table the same way, so the brief code samples below will illustrate the best approach to alleviate disorientation-related
issues until assistive technology has caught up with the standards.
In the following example, a web browser will render the text references in the left column, and the form fields in the right column. A sighted user would
notice that each text reference is lined up horizontally with its intended form field.
<table>
<tr>
<td>First Name</td>
<td> <input type="text" name="firstname" size="6"></td>
</tr>
<tr>
<td>Last Name</td>
<td> <input type="text" name="lastname" size="6"></td>
</tr>
</table>
Assistive technology will read aloud: "First Name," then the first name form field, then "Last Name," then the last name form field.
This next example is how NOT to place a form inside a table.
<table>
<tr>
<td>
First Name<br> Last Name
</td>
<td>
<input type="text" name="firstname" size="6"><br>
<input type="text" name="lastname" size="6">
</td>
</tr>
</table>
To a sighted user, the screen layout appears identical to the first example, but assistive technology will read aloud the text references of "First Name"
and "Last name" before it even gets to any of the form fields; by the time focus is placed on the form fields, a visually impaired user will have lost
track of which field is for what.
The W3C page contains more detailed examples of
Working with forms information on the W3C web site..
This checkpoint is an advancement of linking text references with their related form elements, but is not meant as a substitution for proper layout practices
when forms are placed inside tables.
Assistive technology (e.g. screen reader) is the ideal tool to test this checkpoint.
Each form element should contain an id attribute within the <input> tag. Its related text reference should be surrounded by the <label> tag, which must
contain a for attribute that is identical to the <input> tag's id attribute.
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname">
The W3C page contains more detailed examples of using
Label attributes information on the W3C web site..
Users who rely on assistive technologies, or who cannot use a mouse, must be able to tab from one form element to another in order to successfully make
use of electronic forms.
Place a tabindex attribute inside each <input>,
<textarea>, <select>, and <button> tag, then number them in the order which you want the user to access
them.
<input type="text" name="firstname" id="fname" tabindex="1">
<input type="text" name="lastname" id="lname" tabindex="2">
<select name="state" id="state" tabindex="3">
<optionÙ>
Ù
<optionÙ>
<textarea name="comments" rows="20" cols="80" tabindex="4"></ textarea >
In the above example, tabbing will change the focus from the first name field, to the last name field, then to the state dropdown list, then to the comments
text area.
Radio buttons and checkboxes that have more than one option, as well as multiple form fields that are related to only one text reference (e.g. a field that
is split into 'first name,' 'middle initial,' and 'last name,' but is only listed as: User's Name) can be considered as having multiple input elements.
For a form input field where several inputs are related to one text reference (e.g. a User's Name field that is split into 'first name,' 'middle initial,'
and 'last name'), each <input> tag must contain a title attribute that explains the specific information that should be entered, making sure that the text
reference is not merely assumed.
For a radio button or checkbox where several options are given (e.g. a question about compliance to a corporate standard that has 'yes,' 'no,' and 'n/a'
as possible answers), the tag must contain a title attribute that tells what the option is in reference to and fully explains what checking that option
means.
Electronic forms generally have some type of instructions; a "required field" indicator is a type of instruction, as is showing the proper format for entering
dates.
However, some organizations might need to place more detailed (and more lengthy) instructions next to one or more form element. A sighted person can handle
lengthy instructions that are on the same page as the form because they can move their view back and forth at any time. However, those who use assistive
technology, or those who cannot use a mouse, must backwards tab their way back through the form to reread an instruction, then tab their way back to the
form element they left off at.
For forms with lengthy policy or instruction verbiage that is not apart of a specific form element but instead relates to the entire electron form in general,
place these instructions above the form, not below it.
Brief individual form element instructions, such as a "required field" indicator or a date format, must be placed above or to the left of its related form
element, but not below.
For forms in which more than one input element has a unique set of lengthy instructions, consider placing an anchor link next to the element (or using the
text reference itself as the link) that leads to the relevant verbiage, and an anchor link on the verbiage page that leads back to the related form element.
However, since sending the user to a different page within the same browser window will cause assistive technology to lose the user's place when they return
to the form, it is strongly recommended that such instructions be displayed in a new browser window. Keep in mind, however, that, even if you anchor the
instruction page's Close Window link directly to the related form element, some assistive technologies will still lose the user's place by returning to
the beginning of the forms page.
|
|
|
|
|
|
|
|
|
 |
Curator:
Responsible NASA Official:
Last Updated: March 6, 2009
|
|
|
|
|
|
|
|
|
|
