Accessible user interface patterns – Orange Bus

@tempertemper Accessible user interface patterns @tempertemper

I’m Martin Interaction designer at HMRC

@tempertemper A11y is for everyone ♿

@tempertemper Who cares? • Brand designers • UI designers •
UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders

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

@tempertemper Not just for pirates ☠

Auditory Fine-grain physical ability Gross physical ability Visual Cognitive ability

@tempertemper Who might we disable?

@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

@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

@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

@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

@tempertemper Anti-patterns

@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”

@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

@tempertemper Forms

@tempertemper Placeholder for labels

@tempertemper Labels that look like placeholders

@tempertemper Hint text as placeholder

@tempertemper Hint text under input

@tempertemper How it should be done

@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

@tempertemper Other form stuff continued • Use proper type="" attribute
• Indicate optional ﬁelds rather than required ﬁelds • Don’t adjust default behaviours

@tempertemper https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about- effectiveness-than-efﬁciency-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

@tempertemper Images in headers

@tempertemper What’s up with that? • Takes time to load
• Awful, inconsistent contrast for text and buttons • Is there a fall-back background colour?

@tempertemper How can we ﬁx it? • Consider a design
using SVG instead • Redesign with CSS instead – gradient? • Use nothing

@tempertemper Typography ✍

@tempertemper Webfonts – loading times • http requests • Download
times • Use woff (or even woff2) • Consider number of weights needed

@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

@tempertemper FS Me by Fontsmith

@tempertemper –Mencap For people with learning disabilities, reading is made
much harder by certain fonts.

@tempertemper General

@tempertemper What’s up with that? • Avoid animation wherever possible
• Makes sure colour contrast is good • Avoid using colour to communicate meaning

@tempertemper Conclusion

@tempertemper –Loads of people “Aye, but accessibility is a right
pain, Martin.”

@tempertemper Who cares, again? • Brand designers • UI designers
• UX designers • Frontend developers • Backend developers • Server wizards % • Marketers • Sales people • Stakeholders

@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

@tempertemper Thanks

Accessible user interface patterns – Orange Bus

Accessible user interface patterns – Orange Bus

More Decks by tempertemper

Other Decks in Design

Featured

Transcript