Accessibility and Usability in Forms Outline
I gave a talk today called Form Accessibility & Usability here's the outline.
What's Usability?
- Intuitive
- Unobtrusive
- Simple
- No master formula
Why Usability?
- Improved user experience
- More conversions (success)
- Over 50% shopping carts abandoned?
What's Accessibility?
- Software that is usable by people with handicaps (for the web typically poor vision, color blindness)
- Section 508 Compatibility - Federal Rehabilitation Act
Why Accessibility?
- You may be required legally
- Nearly 10% color blind
- 3% Blind or Visually Impaired
Section 508
"A text equivalent for every non-text element shall be provided"
Use alt
and longdesc
Captcha Codes are not accessible.
"Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup."
"Documents shall be organized so they are readable without requiring an associated style sheet."
Show web pages with CSS turned off
"Row and column headers shall be identified for data tables."
Use th
tags
"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."
Use label
tag and accesskey
attribute.
"When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology."
"A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes."
If impossible to comply make a text only page - but only if impossible.
"Frames shall be titled with text that facilitates frame identification and navigation."
"Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz."
"When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with section 1194.21(a) through (l)."
Screen Readers
Demo VoiceOver on mac (hit command F5)
Accessible Forms
- Use
label
tag - Use
accesskey
- Use
fieldset
andlegend
tags - Use
tabindex
Example of a Accessible Form
<form action="" method="post"> <fieldset> <legend>Please Login Below</legend> <label for="email" accesskey="E">Email:</label> <input type="text" name="email" id="email" tabindex="1" /> <br /> <label for="password" accesskey="P">Password:</label> <input type="password" name="password" id="password" tabindex="2" /> <br /> <input type="submit" value="login" tabindex="3" accesskey="S"> </fieldset> </form>
Add CSS
See Styling your forms with CSS and Labels.
Form Usability
Start with Accessibility
Forms should have smart backends on the server side that can parse and extract info. Examples:
- 30 Boxes Calendar - add an event in one text box.
- Indeed - seach for jobs with two boxes (no box for city, state, zip, title, position, company, etc)
- Events Search
Let the computer do the formatting
Usability Testing
The 5 second test.
Other usability tips.
Make Friendly URLs.
Make error messages friendly, and don't use technical jargon.
References
Like this? Follow me ↯
Tweet Follow @pfreitagYou might also like:
- Target Sued over Accessibility - September 11, 2006
- Howto Build a Form That Isn't Annoying (Part 2) - May 3, 2006
- Styling Your forms with CSS and Labels - January 11, 2006
- Howto build a form that isn't annoying (Part 1) - January 11, 2006
- Keep in mind that users don't read - August 15, 2005
- CAPTCHA Codes are not Accessible - June 9, 2005
Comments
Thanks for posting the presentation online Pete, good information at the meeting.
Thanks Craig! Good to have you there today.