Friday, February 27, 2015

Lab 6 - Accessibility in Web Forms


Logical Format

  • Logical order of form fields 
    • Order of fields should follow an easy logical format, both visually and with keyboard access.
    • Check the linearised order of items using WAVE accessibility tool
  • Clear instructions on what information is needed


Labelling Form Controls
  • Required fields are labelled as such - ideally using the word Required as part of the label. 
  • Use <label for=''> tag to ensure screen readers can interpret your form fields correctly. Example here 
  • Link labels and input fields together using matching values in <label for='' > and <input id='' > tags. 
  • When using tables to layout forms, be sure to use 'scope' attribute to attribute headers to column/row contents where appropriate. 
  • When using checkboxes, use the <fieldset> tag to create a <legend> for the options. 
  • Use invisible labels where appropriate - <title> attribute will cause help-text to appear on hover. 
Keyboard Accessible Navigation 

  • Ensure your form can be completed using a keyboard only. 
    • JavaScript can be problematic - always test when using scripts 
    • Radio buttons are not universally supported across browsers and screen readers. 
      • Select menu is preferable for 'choose only one' situations. 
      • Be sure to include explanatory text in the first option - sometimes screen readers will not associate the label with the select menu. 
    • Avoid use of selections that automatically redirect - use a normal submit button. 

Test your Forms 

  • Use the WAVE accessibility tool 
  • Test the forms for full keyboard navigation
  • Test with screen readers to ensure users get the needed information


Sources:
Web AIM
American Foundation for the Blind
Getting your forms in Shape

No comments:

Post a Comment