Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WCAG 2.1 update for designers
Andrew Arch Twitter: amja
Sarah Pulis Twitter: sarahtp
creating an inclusive digital world
i...
We’re creating an
inclusive digital world
(from down under!)
We help organisations be more inclusive
and accessible.
Toget...
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 walk...
Today’s session
• Quick introduction to WCAG 2.1
• Deep dive into 8 new WCAG 2.1 requirements
• Hands-on exercises and dis...
WCAG 2.1 is
WCAG 2.0 + 17 new criteria
Quick intro to WCAG
Reminder!
WCAG is necessary but not sufficient for
creating an inclusive user experience
WCAG 2.1 overview for designers
Responsive
Orientation
Reflow on zoom *
Text spacing *
Visual design
Non-text contrast *
I...
Responsive design
Reflow, Text spacing
Enable users to zoom in by 400%
See 1.4.10 Reflow for formal criteria
100 to 400% with reflow
100 to 400 % without reflow
Group activity
Share a website for us to test.
We’ll use the Ctrl + plus keyboard shortcut to zoom in.
Can the page be zoo...
Enable users to increase text spacing
without truncation, overlap or overrun
See 1.4.12 Text Spacing for formal criteria
Text spacing requirements
Property Font size
Lines x 1.5
Paragraphs x 2
Letters x 0.12
Words x 0.16
Example
Normal spacing Increased spacing
Colour
Non-text contrast
Provide good contrast for all
important information
See 1.4.11 Non-text Contrast for formal criteria
UI components - 3:1
For example:
• selected state
• focus state
• borders
Icons - 3:1
Graphical objects - 3:1
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 ...
Interaction
Pointer gestures, content on hover and focus,
touch target
Use simple pointer gestures
See 2.5.1 Pointer Gestures for formal criteria
Activity
Open Google Maps on your phone.
Zoom in and out of the map, noting what gestures you use to
do this.
Simple versus complex gestures
Simple gestures
• One finger tap, double tap, long-press
Complex gestures
• Swipe, tap and ...
Google maps (mobile)
Zoom in:
double tap
(simple gesture)
Zoom out:
● Pinch to zoom, or
● double tap and
hold then drag
up...
Google maps (tablet)
Single tap
to zoom
(simple
gesture)
Pinch
to zoom
(complex
gesture)
Exception
• Essential gestures
• User agent gestures
e.g. swipe to scroll content in a browser
• Assistive technology gest...
Content that appears on hover or
focus such as a tooltip is dismissible,
hoverable and persistent
See 1.4.13: Content on H...
Description from webaim.org/standards/wcag/checklist
Dismissible
The newly revealed
content can be dismissed
(generally vi...
Hoverable
The pointer can be
moved to the new
content without the
content disappearing
Description from webaim.org/standar...
Persistent
The new content must
remain visible until the
pointer or keyboard
focus is moved away
from the triggering
contr...
Live demo
Where going to show you two examples from
bit.ly/a11y-menus2.
Ask yourself:
1. Is the menu dismissable, hoverabl...
Ensure touch target sizes
are big enough
See 2.5.5 Target Size (Level AAA) for exact criteria
Touch target is 44 x 44 CSS pixels
Button example Button with padding example
44 CSS pixels
44 CSS
pixels
30 CSS pixels
30...
Assistive technology
Label in name, Status message
An accessible label for screen readers
includes the visible label on screen
See 2.5.3 Label in Name for exact criteria
Bad practice
Visual button text: Add to cart
Accessible button text: Add
broccoli to cart
Good practice
Visual button text...
Ensure screen reader users know
about important changes in content
See 4.1.3: Status Messages for exact criteria
Status
message via
focus
(WCAG 2.0)
GOV.AU
character
count
(WCAG 2.1)
Roles and responsibilities
Success Criteria UX Design Visual Design Content Design Develop
Reflow  Primary Secondary
Text...
Other WCAG 2.1 requirements for designers*
• Orientation (level A)
• Pointer cancellation (level A)
• Motion actuation (le...
Let’s continue the conversation
Andrew Arch
@amja andrew@intopia.digital
Sarah Pulis
@sarahtp sarah@intopia.digital
creati...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

WCAG 2.1 update for designers

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

WCAG 2.1 update for designers

  1. 1. WCAG 2.1 update for designers Andrew Arch Twitter: amja Sarah Pulis Twitter: sarahtp creating an inclusive digital world intopia.digital @intopiadigital
  2. 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. 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. 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. 5. WCAG 2.1 is WCAG 2.0 + 17 new criteria
  6. 6. Quick intro to WCAG
  7. 7. Reminder! WCAG is necessary but not sufficient for creating an inclusive user experience
  8. 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. 9. Responsive design Reflow, Text spacing
  10. 10. Enable users to zoom in by 400% See 1.4.10 Reflow for formal criteria
  11. 11. 100 to 400% with reflow
  12. 12. 100 to 400 % without reflow
  13. 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. 14. Enable users to increase text spacing without truncation, overlap or overrun See 1.4.12 Text Spacing for formal criteria
  15. 15. Text spacing requirements Property Font size Lines x 1.5 Paragraphs x 2 Letters x 0.12 Words x 0.16
  16. 16. Example Normal spacing Increased spacing
  17. 17. Colour Non-text contrast
  18. 18. Provide good contrast for all important information See 1.4.11 Non-text Contrast for formal criteria
  19. 19. UI components - 3:1 For example: • selected state • focus state • borders
  20. 20. Icons - 3:1
  21. 21. Graphical objects - 3:1
  22. 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. 23. Interaction Pointer gestures, content on hover and focus, touch target
  24. 24. Use simple pointer gestures See 2.5.1 Pointer Gestures for formal criteria
  25. 25. Activity Open Google Maps on your phone. Zoom in and out of the map, noting what gestures you use to do this.
  26. 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. 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. 28. Google maps (tablet) Single tap to zoom (simple gesture) Pinch to zoom (complex gesture)
  29. 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. 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. 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. 32. Hoverable The pointer can be moved to the new content without the content disappearing Description from webaim.org/standards/wcag/checklist
  33. 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. 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. 35. Ensure touch target sizes are big enough See 2.5.5 Target Size (Level AAA) for exact criteria
  36. 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. 37. Assistive technology Label in name, Status message
  38. 38. An accessible label for screen readers includes the visible label on screen See 2.5.3 Label in Name for exact criteria
  39. 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. 40. Ensure screen reader users know about important changes in content See 4.1.3: Status Messages for exact criteria
  41. 41. Status message via focus (WCAG 2.0)
  42. 42. GOV.AU character count (WCAG 2.1)
  43. 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. 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. 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
  • AnneBarrat

    Apr. 12, 2019
  • szantaikaroly

    Mar. 27, 2019
  • webaxe

    Mar. 19, 2019
  • sheribyrne

    Mar. 9, 2019

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.

Views

Total views

2,020

On Slideshare

0

From embeds

0

Number of embeds

42

Actions

Downloads

86

Shares

0

Comments

0

Likes

4

×