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

Accessible user interface patterns – Orange Bus

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.

tempertemper

September 07, 2018
Tweet

More Decks by tempertemper

Other Decks in Design

Transcript

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

    UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders
  2. @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!
  3. @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
  4. @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
  5. @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
  6. @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
  7. @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”
  8. @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
  9. @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
  10. @tempertemper Other form stuff continued • Use proper type="" attribute

    • Indicate optional fields rather than required fields • Don’t adjust default behaviours
  11. @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
  12. @tempertemper What’s up with that? • Takes time to load

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

    using SVG instead • Redesign with CSS instead – gradient? • Use nothing
  14. @tempertemper Webfonts – loading times • http requests • Download

    times • Use woff (or even woff2) • Consider number of weights needed
  15. @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
  16. @tempertemper What’s up with that? • Avoid animation wherever possible

    • Makes sure colour contrast is good • Avoid using colour to communicate meaning
  17. @tempertemper Who cares, again? • Brand designers • UI designers

    • UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders
  18. @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