Slides which focuses on 8 of the WCAG 2.1 requirements for designers: reflow, text spacing, non-text contrast, content on hover or focus, pointer gesture, target size, label in name, status message.

1. WCAG 2.1 update for designers
Andrew Arch Twitter: amja
Sarah Pulis Twitter: sarahtp
creating an inclusive digital world
intopia.digital @intopiadigital

2. We’re creating an
inclusive digital world
(from down under!)
We help organisations be more inclusive
and accessible.
Together, we create enjoyable, efficient
digital experiences for everyone.
Let’s go on an accessibility adventure
together.

3. Quick poll
What do you know about WCAG 2.1?
1. WCAG 2.1 what?
2. Yeah, I know a bit but would like know more
3. I’m a walking WCAG 2.1 genius

4. Today’s session
• Quick introduction to WCAG 2.1
• Deep dive into 8 new WCAG 2.1 requirements
• Hands-on exercises and discussion
• Roles and responsibilities table

5. WCAG 2.1 is
WCAG 2.0 + 17 new criteria

6. Quick intro to WCAG

7. Reminder!
WCAG is necessary but not sufficient for
creating an inclusive user experience

8. WCAG 2.1 overview for designers
Responsive
Orientation
Reflow on zoom *
Text spacing *
Visual design
Non-text contrast *
Interaction
Content on hover or focus *
Pointer gestures *
Pointer cancellation
Motion actuation
Keyboard shortcuts
Target size *
Assistive
technology
Label in name *
Status message *

9. Responsive design
Reflow, Text spacing

10. Enable users to zoom in by 400%
See 1.4.10 Reflow for formal criteria

11. 100 to 400% with reflow

12. 100 to 400 % without reflow

13. Group activity
Share a website for us to test.
We’ll use the Ctrl + plus keyboard shortcut to zoom in.
Can the page be zoomed in to 400% and still be used.
• Was any information missing?
• Did you need to scroll in both directions?

14. Enable users to increase text spacing
without truncation, overlap or overrun
See 1.4.12 Text Spacing for formal criteria

15. Text spacing requirements
Property Font size
Lines x 1.5
Paragraphs x 2
Letters x 0.12
Words x 0.16

16. Example
Normal spacing Increased spacing

17. Colour
Non-text contrast

18. Provide good contrast for all
important information
See 1.4.11 Non-text Contrast for formal criteria

19. UI components - 3:1
For example:
• selected state
• focus state
• borders

20. Icons - 3:1

21. Graphical objects - 3:1

22. Activity
Open your a website in a web browser.
Are there any things on the page that are difficult to see and
may need to be more clearly differentiated?

23. Interaction
Pointer gestures, content on hover and focus,
touch target

24. Use simple pointer gestures
See 2.5.1 Pointer Gestures for formal criteria

25. Activity
Open Google Maps on your phone.
Zoom in and out of the map, noting what gestures you use to
do this.

26. Simple versus complex gestures
Simple gestures
• One finger tap, double tap, long-press
Complex gestures
• Swipe, tap and drag, tracing a path, pinch to zoom, one finger
hold and second finger tap

27. Google maps (mobile)
Zoom in:
double tap
(simple gesture)
Zoom out:
● Pinch to zoom, or
● double tap and
hold then drag
up to zoom out
(complex
gesture)
There is no simple
way to zoom out

28. Google maps (tablet)
Single tap
to zoom
(simple
gesture)
Pinch
to zoom
(complex
gesture)

29. Exception
• Essential gestures
• User agent gestures
e.g. swipe to scroll content in a browser
• Assistive technology gestures
e.g. when screen readers such as VoiceOver or TalkBack are on

30. Content that appears on hover or
focus such as a tooltip is dismissible,
hoverable and persistent
See 1.4.13: Content on Hover or Focus for exact criteria

31. Description from webaim.org/standards/wcag/checklist
Dismissible
The newly revealed
content can be dismissed
(generally via the Esc key
OR close button) without
moving the pointer or
keyboard focus, unless
the content presents an
input error or does not
obscure or interfere with
other page content.

32. Hoverable
The pointer can be
moved to the new
content without the
content disappearing
Description from webaim.org/standards/wcag/checklist

33. Persistent
The new content must
remain visible until the
pointer or keyboard
focus is moved away
from the triggering
control, the new
content is dismissed, or
the new content is no
longer relevant.
Description from webaim.org/standards/wcag/checklist

34. Live demo
Where going to show you two examples from
bit.ly/a11y-menus2.
Ask yourself:
1. Is the menu dismissable, hoverable and
persistent?
2. Is the tooltip dismissable, hoverable and
persistent?

35. Ensure touch target sizes
are big enough
See 2.5.5 Target Size (Level AAA) for exact criteria

36. Touch target is 44 x 44 CSS pixels
Button example Button with padding example
44 CSS pixels
44 CSS
pixels
30 CSS pixels
30 CSS
pixels
44 CSS pixels
44 CSS
pixels

37. Assistive technology
Label in name, Status message

38. An accessible label for screen readers
includes the visible label on screen
See 2.5.3 Label in Name for exact criteria

39. Bad practice
Visual button text: Add to cart
Accessible button text: Add
broccoli to cart
Good practice
Visual button text: Add to cart
Accessible button text: Add to cart,
broccoli
Add to cart Add to cart
Dragon user says:
“Click Add to cart button”
Screen reader user hears:
“Add broccoli to cart”
Dragon user says:
“Click Add to cart button”
Screen reader user hears:
“Add to cart, broccoli”

40. Ensure screen reader users know
about important changes in content
See 4.1.3: Status Messages for exact criteria

41. Status
message via
focus
(WCAG 2.0)

42. GOV.AU
character
count
(WCAG 2.1)

43. Roles and responsibilities
Success Criteria UX Design Visual Design Content Design Develop
Reflow  Primary Secondary
Text spacing Secondary  Primary
Non-text contrast  Primary Secondary
Content on hover
or focus
 Primary Secondary
Pointer gestures  Primary Secondary
Target size  Primary Secondary
Label in name Secondary  Primary Secondary
Status message  Primary Secondary Secondary

44. Other WCAG 2.1 requirements for designers*
• Orientation (level A)
• Pointer cancellation (level A)
• Motion actuation (level A)
• Keyboard shortcuts (level A)
*level A and AA only

45. Let’s continue the conversation
Andrew Arch
@amja andrew@intopia.digital
Sarah Pulis
@sarahtp sarah@intopia.digital
creating an inclusive digital world
intopia.digital @intopiadigital