Many of the new WCAG 2.1 criteria have implications for designers: graphics, content and UX. In this presentation from the 2018 OZeWAI Conference, Senior Digital Accessibility Consultant Andrew Arch will discuss relevant criteria from a design perspective and identify who needs to take responsibility for what.

1. WCAG 2.1 for designers
Andrew Arch  @amja
andrew@intopia.digital
Senior Digital Accessibility Consultant
creating an inclusive digital world
intopia.digital  @Intopia

2. WCAG 2.1
=
WCAG 2.0
+
17 new success criteria

3. New Success Criteria in WCAG 2.1
• Guideline 1.3 Adaptable
• 1.3.4 Orientation (AA)
• 1.3.5 Identify Input Purpose (AA)
• 1.3.6 Identify Purpose (AAA)
• Guideline 1.4 Distinguishable
• 1.4.10 Reflow (AA)
• 1.4.11 Non-Text Contrast (AA)
• 1.4.12 Text Spacing (AA)
• 1.4.13 Content on Hover or Focus (AA)
• Guideline 2.1 Keyboard Accessible
• 2.1.4 Character Key Shortcuts (A)
• Guideline 2.2 Enough Time
• 2.2.6 Timeouts (AAA)
• Guideline 2.3 Seizures and Physical
Reactions
• 2.3.3 Animation from Interactions (AAA)
• Guideline 2.5 Input Modalities
• 2.5.1 Pointer Gestures (A)
• 2.5.2 Pointer Cancellation (A)
• 2.5.3 Label in Name (A)
• 2.5.4 Motion Actuation (A)
• 2.5.5 Target Size (AAA)
• 2.5.6 Concurrent Input Mechanisms
(AAA)
• Guideline 4.1 Compatible
• 4.1.3 Status Messages (AA)
Ref: https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/

4. Who are designers?
• Visual designers / graphic designers
• Concerned with how a website looks and feels to the user
• Look to combine colours, shapes and typography fonts to improve
user experience
• UX / Interaction designers
• Responsible for the user-facing aspects of the website or app
• Concerned with how a website looks and feels to the user
• Content designers
• Presenting the user with the best information possible in the
context of their current needs

5. Who looks after what criteria?

6. Who has primary responsibility?
Criteria Visual Designer Interaction designer Content designer
1.3.4 Orientation (AA) Design for portrait and
landscape layout
1.3.5 Identify Input Purpose (AA) Specifying the matching
input type for
autocompete
1.3.6 Identify Purpose (AAA) associating user-
interface components
and icons
1.4.10 Reflow (AA) Design for different
widths
Specifying the order of
interaction
1.4.11 Non-Text Contrast (AA) Colour & pattern
choices
1.4.12 Text Spacing (AA) Typeface choices
1.4.13 Content on Hover or
Focus (AA)
Behaviour of pop-up
content

7. Who has primary responsibility? (2)
Criteria Visual Designer Interaction designer Content designer
2.1.4 Character Key
Shortcuts (A)
Keyboard shortcut
specification, so
interaction modes too
2.2.6 Timeouts (AAA) Warning message
placement
Timing of warning
message
Warning message content
2.3.3 Animation from
Interactions (AAA)
Animation interaction and
controls
4.1.3 Status Messages
(AA)
Specifying which content
need to be presented
Understandable and
meaningful messages

8. Guideline 2.5 Input Modalities Who is responsible?
Criteria Visual Designer Interaction designer Content designer
2.5.1 Pointer Gestures (A) Specification of gestures
2.5.2 Pointer Cancellation (A) Specification of pointer
functionality
2.5.3 Label in Name (A) Design of clear and
meaningful labels
2.5.4 Motion Actuation (A) Motion activation /
triggering and disabling
2.5.5 Target Size (AAA) Responsible for screen
design and object sizes
2.5.6 Concurrent Input
Mechanisms (AAA)
Specification of input
modalities

9. Create user stories
Base these on the (fictitious) people featured on
the W3C/WAI ‘Stories of Web Users’ page or
other personas with disability

10. Lots of design specification, but developers
still need to implement correctly!

11. Let’s continue the conversation
 Intopia
 amja
 andrew@intopia.digital
creating an inclusive digital world
intopia.digital