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

• Don't want labels? Hide the text so screen readers can read it
• Relying on placeholders? Is there prepopulated data?
• Don't like the glowy blue outline? Replace it with :focus

Problem areas

• Cross-browser styling for checkboxes and radio
• Dropdown select options :(

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!