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

624 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×