Accessible user interface patterns – NUX

@tempertemper Accessible user interface patterns

I’m Martin Interaction designer at Orange Bus

@tempertemper • What is accessibility • Who should care and
why • Some examples

@tempertemper A11y is for everyone

@tempertemper ♿

@tempertemper The social model of disability

@tempertemper Disability is a social state

@tempertemper Impairment does not equal disability

@tempertemper Individuals with an impairment are disabled by society, its
social structures and it’s failure to build an inclusive environment

@tempertemper Disabled users are just… users!

@tempertemper Who might we disable?

@tempertemper Permanent

@tempertemper Temporary

@tempertemper Situational

@tempertemper https://www.microsoft.com/design/inclusive/

@tempertemper Who cares?

@tempertemper Brand designers

@tempertemper Graphic designers

@tempertemper UX designers

@tempertemper Front-end developers

@tempertemper Back-end developers

@tempertemper Server wizards '

@tempertemper Marketers

@tempertemper Sales people

@tempertemper Stakeholders

@tempertemper Why should we care?

@tempertemper Being a good human being

@tempertemper Legal obligation

@tempertemper Money

@tempertemper People with impairments

@tempertemper More than 10m people were limited in daily activities
in England and Wales in 2011 https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/disability/articles/disabilityinenglandandwales/2013-01-30

@tempertemper Older people

@tempertemper At age 65, the average person will have a
disability https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/healthandlifeexpectancies/bulletins/ disabilityfreelifeexpectancybyuppertierlocalauthorityengland/2014-07-24

@tempertemper Nearly 12m UK residents aged 65 years and over
https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/bulletins/ annualmidyearpopulationestimates/mid2017#nearly-12-million-uk-residents-aged-65-years-and-over

@tempertemper Parents

@tempertemper 679,106 live births in England and Wales in 2017
https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/livebirths/bulletins/ birthsummarytablesenglandandwales/2017

@tempertemper 679,106 × 5 = Just over 3m

@tempertemper Drivers

@tempertemper 31.7m cars on the road in 2017 https://www.statista.com/statistics/299972/average-age-of-cars-on-the-road-in-the-united-kingdom/

@tempertemper Scottish people

@tempertemper

@tempertemper Scots are also more likely to leave their homeland
and settle elsewhere than any other English-speaking peoples https://www.scotsman.com/news/the-scottish-diaspora-how-scots-spread-across-the-globe-1-4011012

@tempertemper Other stuff is a bit trickier

@tempertemper People who read their phone at night

@tempertemper People on dodgy phone connections

@tempertemper Commuters

@tempertemper Anti-patterns

@tempertemper https://en.wikipedia.org/wiki/Anti-pattern An anti-pattern is a common response to a
recurring problem that is usually ineffective and risks being highly counterproductive

@tempertemper Expensive

@tempertemper Expensive (see above )

@tempertemper Serves some functional use

@tempertemper Lack of experience

@tempertemper Looks good

@tempertemper Everyone’s doing it

@tempertemper Examples

@tempertemper Forms

@tempertemper Placeholders for labels

@tempertemper

@tempertemper Labels that look like placeholders

@tempertemper

@tempertemper Hint text as placeholder

@tempertemper

@tempertemper Source order

@tempertemper Hint text after input

@tempertemper

@tempertemper Parts of the form after the submit button

@tempertemper

@tempertemper More form best practices

@tempertemper Make sure labels have for="" attributes

@tempertemper Use proper type="" attributes

@tempertemper Try to avoid <select>

@tempertemper

@tempertemper Use <fieldset> and <legend> elements properly

@tempertemper

@tempertemper Place labels above inputs to aid readability

@tempertemper

@tempertemper Split large form up onto multiple pages

@tempertemper Indicate optional ﬁelds rather than required ﬁelds

@tempertemper Only ask for information you need

@tempertemper Auto tabbing

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

@tempertemper Hamburger menus

@tempertemper http://www.kukastudios.com/blog/uncategorized/hamburger-icon

@tempertemper What even is it?

@tempertemper Difﬁcult to reach

@tempertemper https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

@tempertemper Saves space

@tempertemper Hamburgers on bigger-than- mobile screens

@tempertemper What can we do instead?

@tempertemper Pair/replace it with ‘Menu’

@tempertemper Put the nav on the page

@tempertemper Images in headers

@tempertemper Takes time to load

@tempertemper Awful, inconsistent contrast for text and buttons

@tempertemper Is there a fall-back background colour?

@tempertemper How can we ﬁx it?

@tempertemper Consider a design using SVG instead

@tempertemper Redesign with CSS instead – gradient?

@tempertemper Use nothing

@tempertemper General

@tempertemper Typography ✍

@tempertemper Nice, big body font

@tempertemper Avoid all-caps

@tempertemper Font stack for system-font fall-backs

@tempertemper 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 Web fonts

@tempertemper Loading times ⏱

@tempertemper http requests

@tempertemper Download time

@tempertemper Use woff

@tempertemper Or, even better, use woff2

@tempertemper Consider number of weights needed

@tempertemper Avoid animation wherever possible

@tempertemper Makes sure colour contrast is good

@tempertemper Avoid using colour to communicate meaning

@tempertemper Putting things right ⭐

@tempertemper Semantic HTML

@tempertemper Thoughtful HTML

@tempertemper Responsive web design

@tempertemper Subtitles/closed captions

@tempertemper Performant websites

@tempertemper Don’t override default browser behaviour

@tempertemper Use common UI conventions

@tempertemper Consider a11y from the start

@tempertemper A lot of your design decisions make themselves

@tempertemper Think of all those users

@tempertemper You don’t test your users’ patience

@tempertemper Thanks

@tempertemper

Accessible user interface patterns – NUX

Accessible user interface patterns – NUX

More Decks by tempertemper

Other Decks in Design

Featured

Transcript