Accessible Design Course by Intopia February 2018 WCAG 2.1 for designers Andrew Arch  @amja andrew@intopia.digital Senior Digital Accessibility Consultant creating an inclusive digital world intopia.digital  @Intopia http://intopia.digital

WCAG 2.0 + 17 new success criteria = WCAG 2.0 + 17 new success criteria

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/

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

Who looks after what criteria?

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 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 1.4.10 Reflow – In content implemented using markup languages, the purpose of User Interface Components , icons, and regions can be programmatically determined 1.4.11 non-text contrast – User interface components / graphical objects 1.4.12 Text spacing – line height, para spacing, letter spacing, word spacing [ReciteMe] 1.4.13 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

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 

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 

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

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

Let’s continue the conversation Accessible Design Course by Intopia February 2018 Let’s continue the conversation  Intopia  amja  andrew@intopia.digital creating an inclusive digital world intopia.digital http://intopia.digital