Accessible user interface patterns – Orange Bus

Slide 1

Slide 1 text

@tempertemper Accessible user interface patterns @tempertemper

Slide 2

Slide 2 text

I’m Martin Interaction designer at HMRC

Slide 3

Slide 3 text

@tempertemper A11y is for everyone ♿

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@tempertemper Not just for pirates ☠

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@tempertemper Who might we disable?

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@tempertemper Anti-patterns

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@tempertemper Forms

Slide 19

Slide 19 text

@tempertemper Placeholder for labels

Slide 20

Slide 20 text

@tempertemper Labels that look like placeholders

Slide 21

Slide 21 text

@tempertemper Hint text as placeholder

Slide 22

Slide 22 text

@tempertemper Hint text under input

Slide 23

Slide 23 text

@tempertemper How it should be done

Slide 24

Slide 24 text

@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 elements if possible • Use and elements properly

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@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

Slide 27

Slide 27 text

@tempertemper Images in headers

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

@tempertemper Typography ✍

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@tempertemper FS Me by Fontsmith

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

@tempertemper General

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@tempertemper Conclusion

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@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