Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Prochain SlideShare
Chargement dans…5
×

sur

WCAG 2.1 update for designers Slide 1 WCAG 2.1 update for designers Slide 2 WCAG 2.1 update for designers Slide 3 WCAG 2.1 update for designers Slide 4 WCAG 2.1 update for designers Slide 5 WCAG 2.1 update for designers Slide 6 WCAG 2.1 update for designers Slide 7 WCAG 2.1 update for designers Slide 8 WCAG 2.1 update for designers Slide 9 WCAG 2.1 update for designers Slide 10 WCAG 2.1 update for designers Slide 11 WCAG 2.1 update for designers Slide 12 WCAG 2.1 update for designers Slide 13 WCAG 2.1 update for designers Slide 14 WCAG 2.1 update for designers Slide 15 WCAG 2.1 update for designers Slide 16 WCAG 2.1 update for designers Slide 17 WCAG 2.1 update for designers Slide 18 WCAG 2.1 update for designers Slide 19 WCAG 2.1 update for designers Slide 20 WCAG 2.1 update for designers Slide 21 WCAG 2.1 update for designers Slide 22 WCAG 2.1 update for designers Slide 23 WCAG 2.1 update for designers Slide 24 WCAG 2.1 update for designers Slide 25 WCAG 2.1 update for designers Slide 26 WCAG 2.1 update for designers Slide 27 WCAG 2.1 update for designers Slide 28 WCAG 2.1 update for designers Slide 29 WCAG 2.1 update for designers Slide 30 WCAG 2.1 update for designers Slide 31 WCAG 2.1 update for designers Slide 32 WCAG 2.1 update for designers Slide 33 WCAG 2.1 update for designers Slide 34 WCAG 2.1 update for designers Slide 35 WCAG 2.1 update for designers Slide 36 WCAG 2.1 update for designers Slide 37 WCAG 2.1 update for designers Slide 38 WCAG 2.1 update for designers Slide 39 WCAG 2.1 update for designers Slide 40 WCAG 2.1 update for designers Slide 41 WCAG 2.1 update for designers Slide 42 WCAG 2.1 update for designers Slide 43 WCAG 2.1 update for designers Slide 44 WCAG 2.1 update for designers Slide 45
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

4 j’aime

Partager

Télécharger pour lire hors ligne

WCAG 2.1 update for designers

Télécharger pour lire hors ligne

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.

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.

Vues

Nombre de vues

2 047

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

42

Actions

Téléchargements

86

Partages

0

Commentaires

0

Mentions J'aime

4

×