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.
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
WCAG 2.1 update for designers
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
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
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?
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
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
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
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
Notes de l'éditeur
When UX doesn't consider ALL users, shouldn't it be known as "SOME User Experience" or... SUX?
349 retweets, 342 like
Use your mobile phone or laptop to complete the exercise
Team up with a buddy if you need to
Meeting WCAG 2.1 will provide a better, more inclusive experience
By meeting WCAG 2.1, you still meet your WCAG 2.0 obligations
only 10 new criteria for A and AA
As a reminder:
4 Principles
13 Guidelines (1 new in WCAG 2.1)
78 Success Criteria (17 new in WCAG 2.1)
For a website to be WCAG 2 Level AA conformant, it must meet all Level A and AA success criteria.
Text isn’t the only important information - what other elements are important?