Accessibility for developers

by Frontend NE

Slide 1

Slide 1 text

Accessibility for developers Alistair Duggin  Head of Accessibility  Government Digital Service  @dugboticus

Slide 2

Slide 2 text

GDS Alistair Duggin Who am I?

Slide 3

Slide 3 text

GDS @dugboticus

Slide 4

Slide 4 text

GDS Lead fronted developer and accessibility champion on London Olympics 2012 Alistair Duggin

Slide 5

Slide 5 text

GDS Alistair Duggin Tech lead on BBC Weather App

Slide 6

Slide 6 text

GDS Alistair Duggin Lead fronted developer and accessibility lead, Money Advice Service

Slide 7

Slide 7 text

GDS Alistair Duggin Frontend developer on Pension Wise, HM Treasury

Slide 8

Slide 8 text

GDS Alistair Duggin What is Government Digital Service?

Slide 9

Slide 9 text

GDS Alistair Duggin

Slide 10

Slide 10 text

GDS Alistair Duggin

Slide 11

Slide 11 text

Slide 12

Slide 12 text

GDS Alistair Duggin

Slide 13

Slide 13 text

Slide 14

Slide 14 text

GDS Alistair Duggin Shared digital platforms - Pay - Verify - Notify

Slide 15

Slide 15 text

GDS Alistair Duggin What is accessibility?

Slide 16

Slide 16 text

GDS Alistair Duggin Accessibility = no barriers The inclusive practice of removing barriers that prevent interaction with, or access to websites and services, by people with disabilities.

Slide 17

Slide 17 text

GDS Alistair Duggin Accessibility is about people Accessibility means designing for the range of abilities your audience has

Slide 18

Slide 18 text

GDS Alistair Duggin Accessibility is dependant on • content • design • code

Slide 19

Slide 19 text

GDS Alistair Duggin Accessibility means ensuring that people can successfully use a service - regardless of impairment or technology

Slide 20

Slide 20 text

GDS Alistair Duggin Accessibility has 4 characteristics • Perceivable • Operable • Understandable • Robust

Slide 21

Slide 21 text

GDS

Slide 22

Slide 22 text

GDS

Slide 23

Slide 23 text

GDS

Slide 24

Slide 24 text

GDS

Slide 25

Slide 25 text

GDS

Slide 26

Slide 26 text

GDS Alistair Duggin Why accessibility matters

Slide 27

Slide 27 text

GDS Alistair Duggin

Slide 28

Slide 28 text

GDS Alistair Duggin This is for everyone We build our digital service for all our citizens. Everyone needs to be able to use them - regardless of ability and technology used to access them.

Slide 29

Slide 29 text

GDS Alistair Duggin 1 in 5 people have a disability

Slide 30

Slide 30 text

GDS Visual impairments 2 million people in the UK have signiﬁcant sight loss 360,000 people are blind or partially sighted

Slide 31

Slide 31 text

GDS Auditory impairments 12 million people in the UK with some kind of hearing loss 900,000 people are severely or profoundly deaf

Slide 32

Slide 32 text

GDS Cognitive impairments 6.4 million in the UK have dyslexia 700,000 are on the autistic spectrum

Slide 33

Slide 33 text

GDS Alistair Duggin “1 in 6 adults struggle to read” The Reading Agency

Slide 34

Slide 34 text

GDS Mobility impairments 577,000 people receive beneﬁts as a result of having problems with mobility

Slide 35

Slide 35 text

GDS The prevalence of disability rises with age 6% of children are disabled 16% of working age adults 45% of adults over State Pension age 1 in 2 people will be disabled at some point in their lifetime

Slide 36

Slide 36 text

GDS Ageing population 12 million people of state pension age The number of people aged 60 or over is projected to rise by over 50 percent in the next 25 years

Slide 37

Slide 37 text

GDS Alistair Duggin Everyone experiences impairments https://www.microsoft.com/en-us/design/practice

Slide 38

Slide 38 text

GDS Alistair Duggin Designing for disability beneﬁts everyone

Slide 39

Slide 39 text

GDS Alistair Duggin If people struggle to use a website they will go elsewhere

Slide 40

Slide 40 text

GDS Alistair Duggin Equality Act 2010 We have a legal obligation to provide equal access to people with disabilities

Slide 41

Slide 41 text

GDS Alistair Duggin Who is everyone?

Slide 42

Slide 42 text

GDS Don’t design for the ﬁctional average user • Good vision • Full hearing • Good mobility (uses a mouse or touch screen) • Good literacy skills

Slide 43

Slide 43 text

Example of people with visual impairments GDS Alistair Duggin

Slide 44

Slide 44 text

I am colour blind and cannot perceive the difference between some colours GDS Alistair Duggin

Slide 45

Slide 45 text

I have low vision and need to increase the text size in my browser GDS Alistair Duggin

Slide 46

Slide 46 text

I have low vision and need to change the appearance using my browser GDS Alistair Duggin

Slide 47

Slide 47 text

I have low vision and need to use a screen magniﬁer to make things bigger and cannot read text that has poor contrast GDS Alistair Duggin

Slide 48

Slide 48 text

I am blind and use a screenreader GDS Alistair Duggin

Slide 49

Slide 49 text

GDS

Slide 50

Slide 50 text

Example of people with hearing impairments GDS Alistair Duggin

Slide 51

Slide 51 text

I am hard of hearing and struggle to hear most things GDS Alistair Duggin

Slide 52

Slide 52 text

I am Deaf; British Sign Language is my ﬁrst language and I ﬁnd English hard to read and write GDS Alistair Duggin

Slide 53

Slide 53 text

Example of people with motor impairments GDS Alistair Duggin

Slide 54

Slide 54 text

I have a mild motor impairment so struggle to use a mouse with ﬁne control GDS Alistair Duggin

Slide 55

Slide 55 text

I have a medium motor impairment so have to use a keyboard instead of a mouse GDS Alistair Duggin

Slide 56

Slide 56 text

I have a motor impairment and am unable to use a mouse or keyboard so use speech recognition software GDS Alistair Duggin

Slide 57

Slide 57 text

Example of people with cognitive impairments GDS Alistair Duggin

Slide 58

Slide 58 text

I have dyslexia and struggle to process written text and spell GDS Alistair Duggin

Slide 59

Slide 59 text

I am on the autistic spectrum and struggle to process information GDS Alistair Duggin

Slide 60

Slide 60 text

I have attention deﬁcit hyperactivity disorder (ADHD) and ﬁnd it hard to concentrate GDS Alistair Duggin

Slide 61

Slide 61 text

I have a learning difﬁculty and need thing to be simple and easy to understand GDS Alistair Duggin

Slide 62

Slide 62 text

I have a poor memory and get easily confused GDS Alistair Duggin

Slide 63

Slide 63 text

GDS Alistair Duggin How do you make a website accessible?

Slide 64

Slide 64 text

The Web Content Accessibility Guidelines (WCAG) 2.0 are inclusive design best practices - code - design - code GDS Alistair Duggin

Slide 65

Slide 65 text

GDS Alistair Duggin The WebAim Checklist is a great introduction to WCAG 2.0 http://webaim.org/standards/wcag/checklist

Slide 66

Slide 66 text

GDS Alistair Duggin

Slide 67

Slide 67 text

Can everyone perceive my content/interface? GDS Alistair Duggin

Slide 68

Slide 68 text

GDS Alistair Duggin Text has good legibility and readability • size • contrast • line height • line length

Slide 69

Slide 69 text

GDS Alistair Duggin Information is not communicated by colour alone

Slide 70

Slide 70 text

Provide text alternatives for images GDS Alistair Duggin

Slide 71

Slide 71 text

GDS Alistair Duggin Provide transcript and captions for video with sound

Slide 72

Slide 72 text

GDS Alistair Duggin Make sure every feature can be used when text size is increased by 200%

Slide 73

Slide 73 text

GDS Alistair Duggin Make sure your content is in a logical order in the code

Slide 74

Slide 74 text

GDS Alistair Duggin Use the most HTML appropriate elements

Slide 75

Slide 75 text

Make dynamic content available to screen readers GDS Alistair Duggin

Slide 76

Slide 76 text

Can everyone operate the interface? GDS Alistair Duggin

Slide 77

Slide 77 text

GDS Alistair Duggin Ensure all content and functionality is available to a keyboard

Slide 78

Slide 78 text

GDS Alistair Duggin Allow people the time they need to complete something

Slide 79

Slide 79 text

GDS Alistair Duggin Ensure link text helps a user know where they will be taken

Slide 80

Slide 80 text

GDS Alistair Duggin Ensure headings are useful and hierarchical

Slide 81

Slide 81 text

GDS Alistair Duggin

Slide 82

Slide 82 text

GDS Alistair Duggin Ensure page titles are unique and descriptive

Slide 83

Slide 83 text

Can everyone understand the content/interface? GDS Alistair Duggin

Slide 84

Slide 84 text

GDS Alistair Duggin Use plain English and keep content short, clear and simple

Slide 85

Slide 85 text

GDS Alistair Duggin Use headings and lists to break content into manageable chunks

Slide 86

Slide 86 text

GDS Alistair Duggin Ensure the language of your content is provided

Slide 87

Slide 87 text

GDS Alistair Duggin All form ﬁelds need associated labels

Slide 88

Slide 88 text

GDS Alistair Duggin Provide helpful error messages

Slide 89

Slide 89 text

Is my interface robust? GDS Alistair Duggin

Slide 90

Slide 90 text

Make sure your HTML is valid GDS Alistair Duggin

Slide 91

Slide 91 text

GDS Alistair Duggin Use WAI-ARIA when needed

Slide 92

Slide 92 text

Following the principles of progressive enhancement makes you get lots of accessibility for free GDS Alistair Duggin

Slide 93

Slide 93 text

Check your website with an automated accessibility testing tool GDS Alistair Duggin

Slide 94

Slide 94 text

GDS Alistair Duggin

Slide 95

Slide 95 text

GDS Alistair Duggin Do manual checks

Slide 96

Slide 96 text

Check your websites in a range of assistive technologies GDS Alistair Duggin

Slide 97

Slide 97 text

GDS Alistair Duggin Technical vs usable accessibility

Slide 98

Slide 98 text

GDS Alistair Duggin

Slide 99

Slide 99 text

GDS Alistair Duggin

Slide 100

Slide 100 text

GDS Alistair Duggin Find out more about accessibility

Slide 101

Slide 101 text

We have an accessibility blog https://accessibility.blog.gov.uk/ GDS Alistair Duggin

Slide 102

Slide 102 text

GDS Alistair Duggin

Slide 103

Slide 103 text

GDS Alistair Duggin

Slide 104

Slide 104 text

GDS Alistair Duggin

Slide 105

Slide 105 text

Thanks! Alistair Duggin  Head of Accessibility  Government Digital Service  @dugboticus