Accessibility By Design

Slide 1

Slide 1 text

Accessibility By Design 1 Laura Kalbag @laurakalbag Ind.ie @indie

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 ★ we don’t understand who we’re trying to help ★ we’re not sure what to do ★ it’s hard, and there’s too much to think about

Slide 5

Slide 5 text

Slide 6

Slide 6 text

6 EASY HARD my work

Slide 7

Slide 7 text

7 EASY HARD our project

Slide 8

Slide 8 text

8 EASY HARD our project

Slide 9

Slide 9 text

9 EASY HARD our project everything else

Slide 10

Slide 10 text

10 EASY HARD Developer A Developer B

Slide 11

Slide 11 text

11 EASY HARD Content Strategist A Content Strategist B

Slide 12

Slide 12 text

12 EASY HARD Designer A Designer B

Slide 13

Slide 13 text

13 EASY HARD

Slide 14

Slide 14 text

14 EASY HARD

Slide 15

Slide 15 text

Give a copy writer an alt attribute and they’ll have a more accessible image. Teach a copy writer how write alt attributes, and they’ll have accessible images for a lifetime. 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Aesthetics are often even the enemy of accessibility, how can we change that? 18

Slide 19

Slide 19 text

Differences between design, decoration and aesthetics 19

Slide 20

Slide 20 text

Designer 20

Slide 21

Slide 21 text

“Visual Designer” 21

Slide 22

Slide 22 text

Aesthetics 22

Slide 23

Slide 23 text

Aesthetics isn’t just decoration 23

Slide 24

Slide 24 text

Adding pretty bits to a site won't make it a better experience. It’ll just make it an awful experience with bells on. 24

Slide 25

Slide 25 text

Person who designs ≠ Designer 25

Slide 26

Slide 26 text

Design is a problem-solving practice 26

Slide 27

Slide 27 text

Every decision we make that has an impact on the ﬁnal product is design. 27

Slide 28

Slide 28 text

What makes the difference between pretty effective and just pretty? 28

Slide 29

Slide 29 text

Visual communication: ★ draws people in ★ assists understanding ★ encourages response 29

Slide 30

Slide 30 text

Aesthetics 30 typography colour layout form

Slide 31

Slide 31 text

Aesthetics 31 typography colour layout form

Slide 32

Slide 32 text

Superﬁcial design 32

Slide 33

Slide 33 text

Anti-accessibility aesthetic trends 33

Slide 34

Slide 34 text

34 Four Years of Trends in Web Design

Slide 35

Slide 35 text

2012 35

Slide 36

Slide 36 text

2012 Year of the Grid System 36

Slide 37

Slide 37 text

37 2012: grid frameworks

Slide 38

Slide 38 text

2012 Year of the Sliders 38

Slide 39

Slide 39 text

39 2012: “sliders”

Slide 40

Slide 40 text

2013 40

Slide 41

Slide 41 text

2013 Year of Parallax 41

Slide 42

Slide 42 text

42 2013: parallax sites

Slide 43

Slide 43 text

2013 Year of Flat Design 43

Slide 44

Slide 44 text

44 2013: ﬂat design

Slide 45

Slide 45 text

2014 45

Slide 46

Slide 46 text

2014 Year of the Video Background 46

Slide 47

Slide 47 text

47 2014: video backgrounds

Slide 48

Slide 48 text

2015 ?? 48

Slide 49

Slide 49 text

Constraints 49

Slide 50

Slide 50 text

“Design depends largely on constraints” 50 — Charles Eames Photograph by Rama, Wikimedia Commons, Cc-by-sa-2.0-fr

Slide 51

Slide 51 text

51 Eames House by IK's World Trip on Flickr

Slide 52

Slide 52 text

Project Constraints 52

Slide 53

Slide 53 text

Medium/Technology Constraints 53

Slide 54

Slide 54 text

Audience Constraints 54

Slide 55

Slide 55 text

Audience Constraints/ constraints through convention 55

Slide 56

Slide 56 text

Time Constraints 56

Slide 57

Slide 57 text

Budget Constraints 57

Slide 58

Slide 58 text

“We don’t have enough time/money to make our site accessible” 58

Slide 59

Slide 59 text

Accessibility as a core constraint 59

Slide 60

Slide 60 text

Accessibility vs web performance 60

Slide 61

Slide 61 text

61 Core constraints: ★ Project constraints ★ Medium/technology constraints ★ Audience constraints ★ Time constraints ★ Budget constraints ★ Accessibility constraints

Slide 62

Slide 62 text

Designers understand constraints 62

Slide 63

Slide 63 text

Aesthetic design and the accessibility constraints 63

Slide 64

Slide 64 text

Typography 64

Slide 65

Slide 65 text

The technical 65

Slide 66

Slide 66 text

66 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outﬁt called In The Pink. Following an altercation between the rival groups over communal dressing rooms, the four decided to form a new band together. Typeface: Museo Sans

Slide 67

Slide 67 text

67 Typeface: Museo Sans

Slide 68

Slide 68 text

The practical 68

Slide 69

Slide 69 text

Remember that typography exists to represent content 69

Slide 70

Slide 70 text

70 Extreme was formed in Malden, Massachusetts, in 1985. V ocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Typeface top: Blackoak Std. Typeface bottom: Heinemann

Slide 71

Slide 71 text

71 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Typeface: Brandon Text at 10px, 12px, 18px and 24px Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful.

Slide 72

Slide 72 text

72 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream (“Extreme” is a derivation of Cherone and Geary's former band “The Dream”, meaning “Ex-Dream”). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outfit called In The Pink. Typeface: Trade Gothic

Slide 73

Slide 73 text

73 Post-breakup (1997–2003) Gary Cherone: Van Halen and other projects On the recommendation of former Extreme manager Ray Danniels, in 1996, Gary Cherone joined one of the world's most successful rock acts, Van Halen. During 1996, Van Halen's fan-base weathered the acrimonious departures of two of rock's most successful lead singers: first Sammy Hagar, who had fronted Van Halen since 1985, and then David Lee Roth, the band's original frontman, (1974-1985). Into this fractious, and very public situation entered Cherone, whom guitarist Eddie Van Halen later called a “musical soulmate.” In 1998, the Cherone-fronted Van Halen released Van Halen III. Typeface: Trade Gothic

Slide 74

Slide 74 text

74 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. In July 2007 Bettencourt quit Satellite Party for the deﬁnite Extreme reunion with Gary Cherone and Pat Badger. On November 26, 2007, the band announced plans for a world tour in the summer of 2008 with King's X as well as a release date for their new album, Saudades de Rock, produced by Bettencourt. Kevin Figueiredo, who played with Bettencourt in DramaGods and Satellite Party, took over drum duties for the band. Original drummer Paul Geary would still remain involved with the band, albeit in a management position. Typeface: Brandon Text

Slide 75

Slide 75 text

Mon Plaisir Restaurant 75 Coco The Clown

Slide 76

Slide 76 text

Readability 76

Slide 77

Slide 77 text

77 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornografﬁtti line-up to do a small, three-show reunion tour through New England. Uniform texture Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograﬃtti line-up to do a small, three-show reunion tour through New England. Irregular texture Typeface top: Foundation Sans. Typeface bottom: Big Caslon

Slide 78

Slide 78 text

78 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Not too light Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Not too heavy Typeface top: Freight Sans Light. Typeface bottom: Freight Sans Black

Slide 79

Slide 79 text

Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. 79 Too much contrast Typeface: Freight Display Black

Slide 80

Slide 80 text

80 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornografﬁtti line-up to do a small, three-show reunion tour through New England. Too many complex details Typeface: Giddyup Std

Slide 81

Slide 81 text

81 After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon Fairly closed counters Open counters After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograﬃtti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon Typeface top: Embrionic. Typeface bottom: Museo Sans

Slide 82

Slide 82 text

Typefaces for cognition 82

Slide 83

Slide 83 text

83 myfonts.com/fonts/fw-heinemann/heinemann/

Slide 84

Slide 84 text

Comic Sans 84 abcdefghijklmnopqrstuvwxyz myfonts.com/fonts/ascender/comic-sans/

Slide 85

Slide 85 text

85 readregular.com/english/regular.html

Slide 86

Slide 86 text

86 dyslexiefont.com/en/dyslexia-font/ gumroad.com/l/OpenDyslexic

Slide 87

Slide 87 text

Colour 87

Slide 88

Slide 88 text

88 colour wheel hue brightness saturation colour spectrum

Slide 89

Slide 89 text

Mixing colour 89

Slide 90

Slide 90 text

Primary colours 90

Slide 91

Slide 91 text

Secondary colours 91

Slide 92

Slide 92 text

Tertiary colours 92

Slide 93

Slide 93 text

Looking at the colour wheel 93

Slide 94

Slide 94 text

Mapping colours to the colour wheel 94

Slide 95

Slide 95 text

95 Mapping colours to the colour wheel

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Picking colour palettes 97

Slide 98

Slide 98 text

analogous 98 complementary

Slide 99

Slide 99 text

Analogous 99

Slide 100

Slide 100 text

Complementary 100

Slide 101

Slide 101 text

Analogous + Complementary 101

Slide 102

Slide 102 text

Accessible Colours 102

Slide 103

Slide 103 text

The key to accessible colours is CONTRAST 103

Slide 104

Slide 104 text

104 brightness saturation

Slide 105

Slide 105 text

105 brightness Low contrast Low contrast High contrast High contrast 1.29:1 ✖ 1.29:1 ✖ 6.65:1 ✔ 8.53:1 ✔

Slide 106

Slide 106 text

106 Low contrast Low contrast High contrast High contrast 1.27:1 ✖ 1.35:1 ✖ 6.41:1 ✔ 8.66:1 ✔ saturation

Slide 107

Slide 107 text

107 Low contrast Low contrast 1.17:1 ✖ 1.51:1 ✖ saturation brightness High contrast High contrast 5.90:1 ✔ 12.53:1 ✔

Slide 108

Slide 108 text

108 Extreme high contrast 15.24:1 ✔ Extreme high contrast 19.74:1 ✔

Slide 109

Slide 109 text

109 High contrast 13.11:1 ✔ High contrast 13.97:1 ✔ brightness saturation

Slide 110

Slide 110 text

Accessibility and Branding 110

Slide 111

Slide 111 text

111

Slide 112

Slide 112 text

112

Slide 113

Slide 113 text

113

Slide 114

Slide 114 text

114

Slide 115

Slide 115 text

The earlier designers learn to consider accessibility, the less likely their work will be discarded in the future 115

Slide 116

Slide 116 text

Strategies for involving accessibility from the beginning of the design process 116

Slide 117

Slide 117 text

Understanding accessibility 117

Slide 118

Slide 118 text

Constraints 118

Slide 119

Slide 119 text

Sitting in on testing and focus groups 119

Slide 120

Slide 120 text

Being involved in human research 120

Slide 121

Slide 121 text

we need to encourage an ethical holistic approach to design 121

Slide 122

Slide 122 text

design without ethics is manipulation 122

Slide 123

Slide 123 text

123 physiological safety love/belonging esteem self- actualization functional reliable usable pleasurable Tuesday, December 13, 11 blog.teamtreehouse.com/emotional-interface-design-the-gateway-to-passionate-users Aaron Walter’s remapping of Mazlow’s hierarchy of needs

Slide 124

Slide 124 text

decoration perpetuates the status quo; design alters it 124

Slide 125

Slide 125 text

private, secure, accessible and sustainable 125 respects human rights The 3 Rs of Ethical Design

Slide 126

Slide 126 text

functional, convenient and reliable private, secure, accessible and sustainable 126 respects human effort respects human rights The 3 Rs of Ethical Design

Slide 127

Slide 127 text

functional, convenient and reliable private, secure, accessible and sustainable 127 delightful respects human rights respects human effort respects human experience The 3 Rs of Ethical Design

Slide 128

Slide 128 text

NOT private, secure, accessible and sustainable 128 functional, convenient and reliable delightful respects human effort respects human experience does not respect human rights The 3 Rs of Ethical Design

Slide 129

Slide 129 text

Make accessibility more accessible 129

Slide 130

Slide 130 text

Accessibility as a constraint 130

Slide 131

Slide 131 text

Neither user experience nor accessibility can be ticked off using a checklist 131

Slide 132

Slide 132 text

132 Laura Kalbag laurakalbag.com @laurakalbag ind.ie @indie