Styling forms
semantically & accessibly

Hi, I'm Amanda.

Lead UX Developer at DockYard

Web accessibility

• Visual: blindness, poor eyesight, color blindness
• Motor: difficulty or inability to use hands
• Auditory: hearing impairment
• Cognitive: developmental and learning disabilities

Example: Closed Captioning

Example: The Bradley Watch

User experience

Effectiveness, efficiency and satisfaction

Basics: does it behave as expected?

• Click on label for its related field?
tab through inputs?
•        to choose radio button?
space to select checkbox?
• Dropdown functionality?

Bonus: is it visually engaging? 

Things to keep in mind

• Relying on placeholders? Is there prepopulated data?

Problem areas

• Cross-browser styling for checkboxes and radio

New things!

• New input types
• Datalists
Currently in the W3C recommentation:
text, password, checkbox, radio, submit,
reset, file, image, button, hidden
What has been added to the working draft:
telephone, url, email, date, time, number, range, color

Mobile / table keyboards


  • Write semantic HTML
  • Test
  • Add styles
  • Test again!



Styling forms semantically and accessibly

By Amanda Cheung

Styling forms semantically and accessibly

Front End Design Conf 2014, Boston Front End Developers February Meetup 2015

  • 3,802