/accessible-forms

Examples of things to do and not to do to create accessible forms

Primary LanguageJavaScript

Accessible Forms

10 Tips for Designing Accessible Forms

  1. All inputs should have associated labels
  2. Placeholder text should be used for examples
  3. Formatting expectations should be displayed
  4. Required fields should be identified
  5. Color should not be the only indicator for feedback
  6. Error messages should be helpful and close to the input
  7. Every element should be reachable by the keyboard
  8. Inputs and buttons should have focus indicators
  9. Tab order should make sense
  10. Fieldsets and legends should be used to group inputs

Getting Started

  1. Run npm install to install dependencies
  2. Run npm run storybook to start up the Storybook app locally to view the examples