Front End Design Conference – Amanda Cheung – Styling Forms Semantically & Accessibly

https://twitter.com/acacheung

  • The web was naturally designed to be semantic
  • Web Accessibility
    • Visual: Blindness, poor eyesight, color blindness
    • Motor: difficulty or inability to use hands
    • Auditory: hearing impairment
    • Cognitive: developmental and learning disabilities
  • Example code: http://jsbin.com/wonez/1/edit
  • You can hide labels off the screen if you don’t want a user to see it but that will let the screen-reader read it: http://jsbin.com/dowotuke/17/edit
  • Problem areas
    • Cross-browser styling for checkboxes and radio
    • Dropdown select options