Creating Accessible Forms
Andrew Stevens
Why accessibility
- Section 508 of the Rehabilitation Act
- State Accessibility laws
http://www.ittatc.org/laws/stateLawAtGlance.cfm
- Canadian Charter of Rights and Freedoms
- Policies Relating to Web Accessibility
http://www.w3.org/WAI/Policy/
Why accessibility
- Encourages good development practices and adherence to W3C recommendations
- Poor accessibility can make content "invisible"
- "Unspiderable" content (multimedia, etc.)
- "Unspiderable" navigation
- "Forward compatibility"
Form layout
- Table-based layout
- Screen readers often linearize labels
- Can cause form inputs to be disassociated with their labels
- Although not all tables are bad
- Grouping labels and inputs in the same cell help greatly
Form layout
- CSS layout helps
- Can keep labels and inputs closer together
- Laying out forms with CSS can be quirky, but it isn’t too hard
- Place descriptive text to the left of controls
- This is the conventional layout
- Some screen readers will be confused by other layouts
Labeling forms
- Explicit labels
- Adds a good, added layer of accessibility
- For screen readers
- Explicitly links a form control with its label.
- And users with reduced motor function
Labeling forms
- They improve usability for sighted users, too
- Increases clickable area
- Fitt's law
- "The time to acquire a target is a function of the distance to and size of the target."
- Adding a cursor style to the label makes this even better
Labeling forms
- Give inputs a title
- Can provide more verbose information about an input than just a label
- For example, associating header information with a field
- Provide alternate text for image buttons
Use of color
- Don't use color to exclusively identify errors
- Not good for the color blind, monochrome monitors, or those using user stylesheets
- Some uses of color can be useful, though
- Color onfocus
- Easy way of showing which form field is selected
Grouping form items
- Fieldsets
- Lets you bind a group of form controls together
- Good for "chucking up" large forms
- Legends
- Option groups (<optgroup>)
- Allows you to chunk and label dropdowns
Scripts and Accessibility
- Have forms function without scripts
- Although scripts can add good functionality
- Can provide instant error correction without requiring another hit to the server or speed form functionality
- Some scripts are just not good
- JavaScript drop-down navigation