Web Accessibility

A definition

It looked all well...

  • Screens
  • Screen reader
  • Braille bars
  • Magnified screens
  • High contrast
  • ...
  • Mouse
  • Touchscreens
  • Keyboards
  • Voice commands
  • Switches
  • ...

... and then we built

  • Screens
  • Mouse

We exclude people

who use these modes of browsing.

Not just technology,

design and content

exclude people too.

Excluding people is crap

Accessibility is a human right

Protected by laws

Not your users?

1 in 5 people in the UK

  • 8% Children
  • 18% Working-age adults
  • 44% State pension

It makes business sense

How can we do better?

Involve users with disabilities

They're in the best place
to tell you what works and what doesn't.


Involve your whole team

There's improvements on all fronts.

PM & Sales

Integral to the features

Not a feature!


Size & spacing

  • Big enough
    to read and point at
  • Spaced enough
    to avoid mistakes


  • Not the only indicator
  • Enough contrast to be read

Contrasted doesn't mean ugly

Screenshot of tatianamac.com, a website with good contrast


  • Consistent accross pages
  • Responsive
  • Ready for zoom


  • Meaningful rather than distracting
  • Deactivable
  • Not flashing (> 3/s)


Textual alternative

  • Images & graph descriptions
  • Audio transcripts
  • Closed captions for video

Context matters

A pictue of a red panda


  • Structured and broken down
  • Meaningful links labels
  • Vocabulary (ableism, reading age)


Behind the scene: role, state, value and focus

A screenshot of a screenreader announcing role, state and value of a radio button

Semantic markup

with HTML & ARIA

  • The right HTML element for the right job
  • Good page structure
  • Sprinkle ARIA if/when needed


  • Graphic elements (images, SVGs...)
  • Form fields
  • Table captions

Manage the focus

  • Visible indicator
  • Sensible order
  • Not off screen
  • Not trapped

Provide feedback

  • Update the page title
  • `aria-live` for Javascript updates

Implement accessible designs...accessibly

  • Scalable font size
  • Not shown doesn't mean not there
  • Discuss when needed


Hire users of assistive technology

Automatic testing

Testing in practice

Results of cookieshq.co.uk on the WebAIM Wave too

Manual testing

  • Navigate with keyboard
  • Use a screenreader
    (VoiceOver, NVDA, Orca)
  • Check against WCAG

Accessibility doesn't stop at the website.

In the end

Involve everyone

we all have a part to play.

More accessible
than yesterday

and tomorrow more than today

It's our responsibility

to not break things and exclude people.