Accessible Forms – Access U
Slides at: www.10sharpdesign.com/accessibility/forms
(as illustration of the different levels of comfort of attendees, someone didnt know to go to a web browser to access the link above…)
– if inputs are not coded correctly, finds the closest element — reads “last name” for first input
checkbox is more usable and accessible before the label.
Implicit label: <label>Dog’s breed <input type=”checkbox” name=”breed” /><label>
does not work in IE6.
Hybrid
<label for="breed">Dog's Breed
<input type="text" size="30" id="breed" /></label>
“just plain wrong”. Instructor feels that nesting stuff makes it a child, and the input is not a child of label.
Luke W — usability form guy, but he’s a little behind the times re: accessibility. www.lukew.com
Required Fields
Everytime you ‘require’ a field, ask yourself why it’s required. The flipside, if it’s not required, why are you asking?
- use the term “required” rather than just an asterisk
- use an image within the label with alt text “Required”.
–Unless there’s a really good reason for it, you may not want to use legends, as its repeated every time.
Someone had a question about their privacy statement — how to ensure a reader gets to it. They said to put it at the top of the screen before they get into FORMS mode. Not sure I agree 
**ZIP Code should be capital “ZIP”, used to stand for something.
ZIP code example (http://www.10sharpdesign.com/accessibility/forms/7-title-attribute.html)
– they advocate using one box, not two.
When using a form in a table, he uses title rather than labels. Web accessibility checkers may ‘ding’ you if you don’t have a label, but this is perfectly accessible and acceptable. Don’t code to checker, but to actually achieve accessibility.
Top 10 Form Usability Tips
- select pulls users eyes more than anything else
- if you have yes/no option, use a single checkbox rather than radio buttons.
levenger.com a good example of checkout
check out http://particletree.com/
FORMS: What not to do
1. Automatic form focus
2. Default values in text fields
3. Auto-tab
4. Tab-index
5. Access keys
(also — maxlength)
** what’s interesting is that in the session this morning, he said #1 and #5 were ok.
(this wasn’t from the session, but from the PC I was working on, FF extension: http://karmatics.com/aardvark/)
