Slide 1

Slide 1 text

Access all screens Laura Kalbag @laurakalbag laurakalbag.com

Slide 2

Slide 2 text

designing for accessibility isn’t just for “designers”

Slide 3

Slide 3 text

What is accessibility?

Slide 4

Slide 4 text

Accessibility is the degree to which an app or website is available to as many people as possible.

Slide 5

Slide 5 text

accessibility isn’t just about screen readers

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Is it because we don’t understand who we’re trying to help?

Slide 8

Slide 8 text

Is it because we just don’t know what to do?

Slide 9

Slide 9 text

Is it because it’s too hard, and there’s too much to think about?

Slide 10

Slide 10 text

I’ve not got the answers

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

The business case £€$

Slide 13

Slide 13 text

http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility doubled Legal and General’s life insurance sales online

Slide 14

Slide 14 text

http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Tesco’s grocery home delivery sales by £13M in 2005

Slide 15

Slide 15 text

http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Virgin.net sales by 68%

Slide 16

Slide 16 text

€€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€

Slide 17

Slide 17 text

The four (main) types of disability that affect use of the web and mobile devices

Slide 18

Slide 18 text

Visual

Slide 19

Slide 19 text

Hearing

Slide 20

Slide 20 text

Motor

Slide 21

Slide 21 text

Cognitive

Slide 22

Slide 22 text

None of these disabilities are completely black and white

Slide 23

Slide 23 text

mild moderate moderately severe severe profound astigmatism sensitivity colour blindness akinetopsia blindness hearing eyesight

Slide 24

Slide 24 text

Visual make it easy to read

Slide 25

Slide 25 text

Hearing make it easy to hear

Slide 26

Slide 26 text

Motor make it easy to interact

Slide 27

Slide 27 text

make it easy to understand and focus Cognitive

Slide 28

Slide 28 text

Good accessibility is good usability

Slide 29

Slide 29 text

Design decisions made in the name of accessibility will largely benefit everyone.

Slide 30

Slide 30 text

Examples

Slide 31

Slide 31 text

Disclaimer

Slide 32

Slide 32 text

Text

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Squinting does not make an enjoyable reading experience

Slide 40

Slide 40 text

1. Make text content easy to read. 2. Ensure sensible font sizes. 3. Don’t prevent the user from resizing the fonts themselves in the browser.

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

1. Good copy is a part of good accessibility. Keep your text simple and your meaning clear.

Slide 47

Slide 47 text

Colour

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

The screens you test on aren’t always the same as everybody else’s screens

Slide 52

Slide 52 text

1. Use colour contrast tools to ensure your text is high-contrast enough. 2. Beware of super-high contrast too.

Slide 53

Slide 53 text

Content hierarchy

Slide 54

Slide 54 text

This is a top-level heading This is a paragraph. It has some text in it. It’s a few sentences long. A lot of paragraphs look like this. This is a second level heading. This is a paragraph which has some links to other content and a button that allows you to take action.

Slide 55

Slide 55 text

This is a top-level heading This is a paragraph. It has some text in it. It’s a few sentences long. A lot of paragraphs look like this. This is a second level heading. This is a paragraph which has some links to other content and a button that allows you to take action

Slide 56

Slide 56 text

Randomly enlarging and colouring text does not make a hierarchy.

Slide 57

Slide 57 text

1. Make the content structure clear and consistent. 2. Use semantic headings, labels, lists and other relevant elements for your HTML or native controls.

Slide 58

Slide 58 text

Buttons and links

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Sometimes the links are the same colour and style as the rest of the text and you only find out it’s a link when you hover over it.

Slide 61

Slide 61 text

Sometimes the links are the same colour and style as the rest of the text and you only find out it’s a link when you hover over it.

Slide 62

Slide 62 text

Finding interactive elements should not be a game.

Slide 63

Slide 63 text

1. Make buttons and interactive elements easyily distinguishable from non-interactive elements. 2. Make links easy to recognise by using an underline.

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Why should I click there?

Slide 69

Slide 69 text

1. Use button and link text that makes sense out of context. Don’t use “click here”. 2. Remember that not all your users are clicking. Inputs wary across different devices.

Slide 70

Slide 70 text

Media

Slide 71

Slide 71 text

No, I don’t want to listen to your podcast or watch your video tutorial. Give me text!

Slide 72

Slide 72 text

1. Provide text alternatives for images that helps a user understand the context of the image.

Slide 73

Slide 73 text

1. Provide text transcripts for audio. 2. Provide subtitles for video.

Slide 74

Slide 74 text

Animations

Slide 75

Slide 75 text

Wait for me!

Slide 76

Slide 76 text

1. Give users enough time to read and use content

Slide 77

Slide 77 text

JavaScript

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

1. Use JavaScript with care and load it in a sensible place. 2. If your web site or app needs JavaScript, ensure you use WAI ARIA to guide assistive technologies.

Slide 82

Slide 82 text

Navigation and way-finding

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

The days of flash are over, stop punishing me with your artsy navigation.

Slide 86

Slide 86 text

1. Provide consistent ways to help users navigate, find content, and determine where they are.

Slide 87

Slide 87 text

Forms

Slide 88

Slide 88 text

First name Last name Email address Laura Kalbag [email protected]

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Don’t make me guess what and where the error is.

Slide 92

Slide 92 text

1. Help users correct and avoid mistakes in their input.

Slide 93

Slide 93 text

Resources

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

Consider accessibility at every point of planning. It is functionality, content hierarchy, copy, visual design and code.

Slide 106

Slide 106 text

Accessibility as default

Slide 107

Slide 107 text

Accessibility is easy to consider once you start caring about it.

Slide 108

Slide 108 text

Laura Kalbag @laurakalbag laurakalbag.com