1. Accessible Design Course by Intopia
February 2018
WCAG 2.1 for designers
Andrew Arch
Senior Digital Accessibility Consultant
creating an inclusive digital world
intopia.digital

2. WCAG 2.0 + 17 new success criteria=
WCAG 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
Reflow (AA)
Non-Text Contrast (AA)
Text Spacing (AA)
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:

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
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
Reflow (AA)
Design for different widths
Specifying the order of interaction
Non-Text Contrast (AA)
Colour & pattern choices
Text Spacing (AA)
Typeface choices
Content on Hover or Focus (AA)
Behaviour of pop-up content
1.3.4 orientation - Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential
1.3.5 Input purpose - The purpose of each input field collecting information about the user can be programmatically determined
1.3.6 Identify purpose – In content implemented using markup languages, the purpose of User Interface Components , icons, and regions can be programmatically determined
Reflow – In content implemented using markup languages, the purpose of User Interface Components , icons, and regions can be programmatically determined
non-text contrast – User interface components / graphical objects
Text spacing – line height, para spacing, letter spacing, word spacing [ReciteMe]
Hover or Focus - Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden – dismissible, hoverable, persistent

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
2.1.4 Shortcuts – turn off or remap or context sensitive
2.2.6 Timeouts - Users are warned of the duration of any user inactivity that could cause data loss
2.3.3 Animations - Motion animation triggered by interaction can be disabled
4.1.3 Status messages - In content implemented using markup languages, status messages  can be programmatically determined 

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
2.5.1 Pointer gestures – All functionality  that uses multipoint or path-based gestures for operation can be operated with a single pointer  without a path-based gesture
2.5.2 Pointer cancelation – For functionality  that can be operated using a single pointer – no down event / up reversal / abort or undo
2.5.3 Label in name – For user interface components  with labels  that include text  or images of text , the name contains the text that is presented visually
2.5.4 Motion actuation – Functionality  that can be operated by device motion or user motion can also be operated by user interface components  and responding to the motion can be disabled to prevent accidental actuation
2.5.5 Target size - at least 44 by 44 CSS pixels
2.5.6 Concurrent input mechanisms - Web content does not restrict use of input modalities available on a platform 

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
Personas
– Sarah Horton and Whitney Quesenbury
- Barklays Bank

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

11. Let’s continue the conversation
Accessible Design Course by Intopia
February 2018
Let’s continue the conversation
 Intopia  amja 
creating an inclusive digital world
intopia.digital