Styling forms
semantically & accessibly

Hi, I'm Amanda.

Lead UX Developer at DockYard

@acacheung

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?

http://jsbin.com/lowubaxayu/2/edit

• 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? http://jsbin.com/wonez/1/edit

Things to keep in mind

• Don't want labels? Hide the text so screen readers can read it
http://jsbin.com/reyogevugi/2/edit

• 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!

http://jsbin.com/sicos/1/edit

• 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

Overview

Write semantic HTML
Test
Add styles
Test again!

Thanks!