Accessibility ABC: critical thinking

DaFED#40
Speaker: Tamaš Tot
Ukoliko imate nedoumice da li je vašem markup-u potreban Schema.org; ako niste sigurni kako da pravilno primenite WAI-ARIA i u čemu se on razlikuje od WCAG 2.0; ako vas interesuje sprega između UX, performanse i accessibility-ja i zašto je ovo goruća tema danas, onda je ovo predavanje za vas.

Transcript

1. Accessibility ABC critical thinking 1/125
2. hello! I am Tamás Tóth My Flappy Bird score is 566. I am here because I love to give presentations. 2/125
3. Table of contents WCAG 2.0 WAI-ARIA Schema.org UX Performance 3/125 © Jela
4. Table of contents WCAG 2.0 WAI-ARIA Schema.org UX Performance 4/125 Why?
5. 5/125 MOV AX, BX Instead of...
6. 6/125 Cogito ergo sum © José Luis Gómez Merino
7. 1. WCAG 2.0 7/125
8. WCAG 2.0 Wikipedia quote goes here… 8/125 “
9. Web Content Accessibility Guidelines 2.0 9/125
10. Web Content Accessibility Guidelines 2.0 boring 10/125
11. WCAG 2.0 ~ Microsoft Word 11/125 © tt
12. WCAG 2.0 ~ Microsoft Word 12/125
13. The Dawn of the Internet Age 13/125
14. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 14/125 } Word
15. “Genius” mouse not working 15/125
16. BBS 16/125
17. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 17/125 } Word
18. 18/125 “alt” text
19. 19/125 “alt” text
20. 20/125 “alt” text
21. 21/125 “alt” text
22. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 22/125 } Word
23. 23/125 Always label
24. 24/125 Always label
25. 25/125 Native validation
26. 26/125 Native validation: l10n
27. 27/125
28. 28/125 Forms Done right?
29. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 29/125 } Word
30. 30/125 Never use maximum-scale!
31. 31/125 Never use maximum-scale!
32. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 32/125 } Word
33. 33/125 Skip navigation
34. Bootstrap and screen readers 34/125
35. Bootstrap and screen readers 35/125
36. WCAG 2.0 examples Page title Heading structure Don’t auto play video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 36/125 } Word
37. 37/125 Never remove the “dotted lines”
38. 38/125 Never remove the “dotted lines”
39. 39/125 Provide alternative
40. Use case: Smashing magazine 40/125
41. Link vs. button 41/125
42. Button vs. role=”button” 42/125
43. Button vs. role=”button” 43/125
44. Button vs. role=”button” 44/125
45. Button vs. role=”button” 45/125
46. A11y and Bootstrap 46/125
47. 47/125 Icons in Bootstrap 2
48. 48/125 <i> for icons?
49. 49/125 <i> The <i> element represents a span of text that offset from the normal prose. “
50. 50/125 Icons in Bootstrap 2
51. 51/125 Icons in Bootstrap 3
52. Material icons 52/125
53. Icons: ligatures 53/125
54. 54/125 <i> for icons!
55. ...or SVG icons 55/125
56. ...or SVG icons 56/125
57. ...or SVG icons 57/125
58. Use case: AChecker 58/125
59. 59/125 2. WAI-ARIA
60. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications 60/125 “
61. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications 61/125 boring “
62. WAI-ARIA ~ Ai Weiwei 62/125 © humanrightslogo.net + photomontage
63. WAI-ARIA excuse for bad (non-semantic) markup role=”” custom components tabindex Voiceover, NVDA, JAWS, … 63/125
64. To WAI-ARIA or not to WAI-ARIA? 64/125
65. To WAI-ARIA or not to WAI-ARIA? 65/125
66. To WAI-ARIA or not to WAI-ARIA? 66/125
67. WAI-ARIA roles: List 67/125
68. WAI-ARIA roles: List 68/125
69. HTML equivalent? 69/125
70. 70/125
71. 71/125 3. Schema.org
72. semantic markup Schema. org SEO UX 72/125 3 in 1
73. semantic markup Schema. org SEO UX 73/125 3 in 1
74. Schema.org 74/125
75. Schema.org 75/125
76. 76/125
77. 77/125
78. Schema.org/PostalAddress 78/125
79. 79/125 4. UX
80. UX gray (like dark) patterns: don’t annoy users FAQ pages with hidden email disable right click (inspect element) it’s ok to hate IE8 but hate it with style (fallback) fb overlay, popups animation lar pour lar (good example Material design) parallax Hyperbole and a Half: be honest and unobtrusive 80/125
81. 81/125 Gray (like dark) patterns: “Do not annoy the users”
82. 82/125 Bootstrap “as”
83. Bootstrap “as” 83/125
84. Motion provides meaning (Material design) 84/125 “
85. 85/125
86. 86/125 Parallax © Disney
87. 87/125 Parallax != Scrolljacking (but it’s ok sometimes) © Robby Leonardi
88. 88/125 The long journey © Boulet
89. 89/125 5. Performance
90. Performance 90/125 Google 10 things: fast is better than slow PageSpeed Insights, WebPagetest, YSlow, ... above the fold/critical CSS async vs. defer minify HTML? SASS mess 3D, FOIT/FOUT/FOFT - always patching browser issues? 60 fps (e.g. parallax) . . .
91. 91/125 Google 10 things: fast is better than slow
92. 92/125 Pagespeed Insights, Webpagetest, YSlow, …
93. 93/125 async vs. defer
94. 94/125 Above the fold/critical CSS, lazy loading...
95. 95/125 SASS mess
96. 96/125 Specificity
97. 97/125
98. Why? 98/125
99. Mission critical 99/125 © tt
100. Just create me a ticket and i’ll fix it. 100/125 “
101. Just create me a ticket and i’ll fix it. 101/125 “
102. I care. 102/125
103. 103/125 Baker vs. programmer
104. 104/125 © Varljivo leto ‘68 Jagodinka Simonović Baker vs. programmer problem
105. 105/125 © ZojaKu STARTIT.RS: Muškarci vladaju svetom zato što žene misle da to ne zaslužuju – Hajde da to promenimo Baker vs. programmer problem
106. A nation's greatness is measured by how it treats its weakest members. 106/125 “ © Kenneth Anderson
107. Comply or explain 107/125 “
108. 2h to fix vs. 2h to discard educate your clients separate your hacks fight browser behaviors? brand identity vs. clean code 108/125 Pixel perfect vs. generic?
109. 109/125 Naming is important ?
110. Delegation of the core problem 110/125 wireframes in Balsamiq/Visio/by hand/…? BEM/SMACSS/OOCSS/…? use personas/don’t use personas? chicken/egg? . . .
111. 111/125 Process customer designer frontend backend
112. 112/125 Process customer designer frontend backend
113. Lesser people have done greater things. 113/125 “
114. The customer is always right 114/125 “
115. 115/125 ? The customer is always right “
116. 116/125 © Chris Stain
117. 117/125 © Neradnik The word spreads out. - “Neradnik” “
118. 118/125 Be honest © Hyperbole and a Half
119. 119/125 {placekitten}
120. 120/125 {placekitten}
121. 121/125 {placekitten}
122. 122/125 © Duncan Hull
123. 123/125
124. thanks! Questions? @talpitoo 124/125
125. Credits Special thanks to all the people who made and released these awesome resources for free: Presentation template by SlidesCarnival 125/125