Digital Accessibility Sensei, Allison Ravenhall, presenting at DDD Melbourne on 15 September 2018. Twitter handles: @RavenAlly @Intopia #DDDMelb2018 #DDDMelb

1. @RavenAlly
Inclusive front-end
development with
WCAG 2.1
Allison Ravenhall
@RavenAlly
Digital Accessibility
Sensei@Intopia

2. @RavenAlly
W3C
Web Content
Accessibility Guidelines
1999 2008
2018
v1.0 v2.0 v2.1

3. @RavenAlly
WCAG 2.1 =
WCAG 2.0 + new stuff

4. @RavenAlly
Don’tmake
usersread
likethis*

5. @RavenAlly



6. @RavenAlly



7. @RavenAlly
*unless it’s
necessary

8. @RavenAlly
Add metadata to forms
to enable autofill

9. @RavenAlly
<input type="email"
autocomplete="home email" />
<input type="password"
autocomplete="off" />

10. @RavenAlly
 Keystrokes 
 Cognitive load 
 Errors 
 Time 
#winning

11. @RavenAlly
Build responsive sites

12. @RavenAlly
Fixed-width
desktop site
100% zoom
One scrollbar

13. @RavenAlly
Fixed-width
desktop site
400% zoom
Two scrollbars


14. @RavenAlly
Responsive
mobile site
400% zoom
One scrollbar


15. @RavenAlly
Make graphics
and UI elements
really pop

16. @RavenAlly
 = 2.4 : 1
 = 4.6 : 1
   = 4.6 : 1
 = 1.2 : 1

17. @RavenAlly
Minimum contrast ratios
Body text = 4.5 : 1
Headings = 3 : 1
Control borders = 3 : 1
Graphics/icons = 3 : 1

18. @RavenAlly
Text shouldn’t truncate,
overlap, or overrun when
users increase spacing

19. @RavenAlly
Paragraphs
Letters
Words
Lines

20. @RavenAlly
Test your site:
bit.ly/a11ytextspacing

21. @RavenAlly
Make tooltips
and submenus
more usable

22. @RavenAlly
Dismissable

23. @RavenAlly
Hoverable

24. @RavenAlly
Persistent      

25. @RavenAlly
Prevent keyboard shortcut
clashes with screen readers

26. @RavenAlly
A: Next radio button
B: Next button
C: Next combobox
D: Next diff. element
E: Next edit box
F: Next form control
G: Next graphic
H: Next heading
I: Next list item
J: Jump to line
K: Next PlaceMarker
L: Next list
M: Next frame
N: Skip past links
O: Next object tag
P: Next paragraph
Q: Go to main region
R: Next region
S: Next same element
T: Next table
U: Next unvisited link
V: Next visited link
X: Next checkbox
Z: Next division

27. @RavenAlly
Define simple
pointer gestures

28. @RavenAlly
Pinch =
complex
Tap =
simple

29. @RavenAlly
Enable users to cancel
pointer gestures

30. @RavenAlly
No down-event Abort or undo
Up reversal Essential



31. @RavenAlly
Use on-screen content
for element labels

32. @RavenAlly
StewartAdem
Carpal tunnel syndrome
Uses speech-recognition
Legally blind
Uses a screen reader
 

33. @RavenAlly


 


WYSIWYG label

34. @RavenAlly










WYSIWYG labels

35. @RavenAlly









 
Custom labels

36. @RavenAlly





WYSIWYG+ labels





37. @RavenAlly
<button>
<span aria-hidden="true"
class="fas fa-shopping-basket">
</span>
Add to cart
<span class="sr-only">
world domination</span>
</button>

38. @RavenAlly
Provide alternatives
to motion functions

39. @RavenAlly
 Tilt maze – No alternative

40. @RavenAlly
 Steering – Tilt optional

41. @RavenAlly
Exception – Essential function

42. @RavenAlly
Mark up status
messages

43. @RavenAlly
<span role="status">
Loading, please
wait…</span>

44. @RavenAlly
Bootstrap uses role="alert" 

45. @RavenAlly
Orientation

Text spacing

Pointer
cancellation

Speech-friendly,
contextual labels

Motion
alternative

Hover/focus
behaviour

Keyboard
shortcuts

Mark up status
messages

Simple
gestures

Non-text
contrast

Responsive

Metadata


46. @RavenAlly
Allison Ravenhall
@RavenAlly
Digital Accessibility
Sensei@Intopia
WCAG 2.1: https://www.w3.org/TR/WCAG21/
Get accessible!