The document outlines best practices for creating inclusive front-end web development that adheres to WCAG 2.1 standards. Key topics include improving user interactions through accessible forms, adjusting contrast ratios, enhancing usable tooltips, and preventing keyboard shortcut clashes. It emphasizes the importance of testing sites for accessibility and providing alternatives for motion functions.

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!