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.

Web
Content
Accessibility
Guidelines

Involve your whole team

There's improvements on all fronts.

PM & Sales

Integral to the features

Not a feature!

Design

Size & spacing

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

Colours

  • Not the only indicator
  • Enough contrast to be read

Contrasted doesn't mean ugly

Screenshot of tatianamac.com, a website with good contrast

Layout

  • Consistent accross pages
  • Responsive
  • Ready for zoom

Animations

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

Content

Textual alternative

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

Context matters

A pictue of a red panda

Text

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

Development

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

Labelling

  • 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

Testing

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.