Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessible user interface patterns – Orange Bus

Df6d8f8c1cc3ec843969759ee607e79b?s=47 tempertemper
September 07, 2018

Accessible user interface patterns – Orange Bus

Martin shows us some commonly used user interface (UI) patterns that might look great, but can prove inaccessible (or even just inconvenient) to a lot of users. Luckily, he also gives us some advice on how to put them right! 😅

His talk looks at both the design itself and the HTML it's built with, but don't worry – any technical stuff will be light, and explained in a layperson-friendly way.



September 07, 2018


  1. @tempertemper Accessible user interface patterns @tempertemper

  2. I’m Martin Interaction designer at HMRC

  3. @tempertemper A11y is for everyone ♿

  4. @tempertemper Who cares? • Brand designers • UI designers •

    UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders
  5. @tempertemper The social model of disability • Disability is a

    social state • Impairment does not equal disability • Individuals with an impairment are disabled by society, its social structures and it’s failure to build an inclusive environment • Disabled users are just… users!
  6. @tempertemper Not just for pirates ☠

  7. None
  8. Auditory Fine-grain physical ability Gross physical ability Visual Cognitive ability

  9. @tempertemper Who might we disable?

  10. @tempertemper 1. Non sighted people who have a screen reader

    2. Low sighted people who increase the browser’s default text size 3. People with cognitive issues who need to use a keyboard 4. People with cognitive issues who can only use a touch screen 5. Hearing impaired people 6. People with ADHD
  11. @tempertemper Same causes, different users 1. Drivers who have articles

    read to them by their voice assistant 2. People giving a presentation of a web page and use ⌘+ 3. People (like me) who use the keyboard to navigate a UI when possible 4. People using their iPad and don’t have a pointer to hover with 5. People watching a video in 6. People in a rush
  12. @tempertemper Putting things right 1. Semantic HTML 2. Responsive web

    design 3. Semantic HTML 4. Use hover states for decoration only 5. Subtitles/closed captions 6. Fast loading web pages
  13. @tempertemper Who else might we disable? • People with intermittent

    internet connections or low bandwidth (2G) • People using small screens • People who can’t concentrate for kids hanging off them • Colour blind people • Dyslexic people • People who speak English as a second language
  14. @tempertemper Anti-patterns

  15. None
  16. @tempertemper –Some folk on Wikipedia “An anti-pattern is a common

    response to a recurring problem that is usually ineffective and risks being highly counterproductive”
  17. @tempertemper So why do we do it? • Serves some

    functional use, e.g. save some space in the UI • Lack of experience • Looks good • Everyone’s doing it
  18. @tempertemper Forms

  19. @tempertemper Placeholder for labels

  20. @tempertemper Labels that look like placeholders

  21. @tempertemper Hint text as placeholder

  22. @tempertemper Hint text under input

  23. @tempertemper How it should be done

  24. @tempertemper Other form stuff • Place labels above inputs to

    aid readability • Lay form elements out in a single column • Avoid using one big form • Make sure labels have for="" attributes • Avoid <select> elements if possible • Use <fieldset> and <legend> elements properly
  25. @tempertemper Other form stuff continued • Use proper type="" attribute

    • Indicate optional fields rather than required fields • Don’t adjust default behaviours
  26. @tempertemper https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about- effectiveness-than-efficiency-or-satisfaction/ “if auto-tabbing stops just a few people

    from using a service successfully, their needs take priority over the many people who might prefer but don’t need the feature” Example – auto-tab
  27. @tempertemper Images in headers

  28. None
  29. @tempertemper What’s up with that? • Takes time to load

    • Awful, inconsistent contrast for text and buttons • Is there a fall-back background colour?
  30. @tempertemper How can we fix it? • Consider a design

    using SVG instead • Redesign with CSS instead – gradient? • Use nothing
  31. None
  32. @tempertemper Typography ✍

  33. @tempertemper Webfonts – loading times • http requests • Download

    times • Use woff (or even woff2) • Consider number of weights needed
  34. @tempertemper Other stuff • Make sure body text is nice

    and big (at least 18 or 19px or equivalent) • Avoid all-caps • Make sure there’s a good fall-back in the font stack • Choose your font(s) carefully
  35. @tempertemper FS Me by Fontsmith

  36. @tempertemper –Mencap For people with learning disabilities, reading is made

    much harder by certain fonts.
  37. None
  38. @tempertemper General

  39. @tempertemper What’s up with that? • Avoid animation wherever possible

    • Makes sure colour contrast is good • Avoid using colour to communicate meaning
  40. @tempertemper Conclusion

  41. @tempertemper –Loads of people “Aye, but accessibility is a right

    pain, Martin.”
  42. @tempertemper Who cares, again? • Brand designers • UI designers

    • UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders
  43. @tempertemper Start with accessibility • A lot of your design

    decisions make themselves • You reach more users • You don’t test your users’ patience and lose them
  44. None
  45. @tempertemper Thanks