Designing with Accessibility in Mind

Accessibility isn’t just about blindness and screen readers or running through a typical section 508 checklist. There are many other importance facets of accessibility that could be missed. In this session, we’ll discuss in detail what we mean when we say “accessibility” that includes vision, hearing, motor, and cognitive needs. Bermon will break down basic accessibility guidelines, browser support, and how to best raise awareness on your team.

Five Things Audience Members Will Learn:

1. The core principles of accessible design
2. How to recognize when our designs become exclusive instead of inclusive
3. Understand how to gain diverse insights into the decisions you make
4. Apply constraints that benefit the many
5. Activities to help your teams, stakeholders, or clients better understand accessibility

Transcript

1. DESIGNING WITH ACCESSIBILITY IN MIND @bermonpainter | FITC - UX Spotlight
2. IMAGINE
11. ACCESSIBILITY
12. INCLUSIVE
13. Copyright © 2016 Accenture. All rights reserved. 4 DEMOGRAPHICS • Age: 38 • Education: Business Administration (B.B.A.), Certified Public Accountant • Gender: Female • Income: $60k RESPONSIBILITIES & MOTIVATIONS • Manage Receivables: student payments, fees, tuition + more • Manage Banking: accounts, investments, terminals, online payments + more • Maintain bird’s-eye view of organization’s health GOALS • Meet deadlines during peak times • Streamline workplace processes to minimize wasted resources PAIN POINTS • Can’t run reports by location, has to run reports for all terminals • Trouble running reports, requires help from support rep + slow turn around ONCE A WEEK HOURLY HIGH STRESS CALM NEOPHYTE VERSED FREQUENCY OF USE EMOTIONAL STATE DURING USE DIGITAL ABILITY NEOPHYTE VERSED PAYMENT PROCESSING EXPERTISE WORKPLACE • Size: 10 • Environment: Small Office • Pace: Fairly busy; Peak time during start of terms when tuition/fees due “When I can see them, the numbers clue me into challenges down the road and help me validate recommendations to management.”
14. INCLUSIVE DESIGN
15. USER FOCUSED
16. CONTEXTUAL
17. PERCEIVE 1 UNDERSTAND 2 OPERATE 3
18. PERCEIVE 1 UNDERSTAND 2 OPERATE 3
19. PERCEIVE 1 UNDERSTAND 2 OPERATE 3
20. ACCESSIBILITY Different Sensory, Cognitive and Physical Abilities. HEARING Hard of Hearing Deaf MOTOR Motor Impairment Speech Impediment VISION Colorblind Low Vision Blind Deafblind COGNITIVE Dyslexia Autistic ADHD Learning Difficulty Memory Impairment
21. ACCESSIBILITY Different Sensory, Cognitive and Physical Abilities. Hard of Hearing Deaf Motor Impairment Speech Impediment Colorblind Low Vision Blind Deafblind Dyslexia Autistic ADHD Learning Difficulty Memory Impairment HEARING MOTOR VISION COGNITIVE
22. ACCESSIBILITY Different Sensory, Cognitive and Physical Abilities. Hard of Hearing Deaf Motor Impairment Speech Impediment Colorblind Low Vision Blind Deafblind Dyslexia Autistic ADHD Learning Difficulty Memory Impairment HEARING MOTOR VISION COGNITIVE
23. ACCESSIBILITY Different Sensory, Cognitive and Physical Abilities. Hard of Hearing Deaf Motor Impairment Speech Impediment Colorblind Low Vision Blind Deafblind Dyslexia Autistic ADHD Learning Difficulty Memory Impairment HEARING MOTOR VISION COGNITIVE
24. ACCESSIBILITY Different Sensory, Cognitive and Physical Abilities. Hard of Hearing Deaf Motor Impairment Speech Impediment Colorblind Low Vision Blind Deafblind Dyslexia Autistic ADHD Learning Difficulty Memory Impairment HEARING MOTOR VISION COGNITIVE
25. PRINCIPLES OF ACCESSIBILITY
26. ACCESSIBILITY GUIDELINES
27. COLOR CONTRAST
28. CONVEYING INFORMATION WITH MORE THAN COLOR
29. STRUCTURE & HIERARCHY
30. LABELS & FORMS
31. FOCUS INDICATORS
32. WCAG 2.0
33. (BEGINNER) LEVEL A 1.1.1 – Non-text Content 1.2.1 – Audio-only and Video-only (Pre-recorded) 1.2.2 – Captions (Pre-recorded) 1.2.3 – Audio Description or Media Alternative (Pre-recorded) 1.3.1 – Info and Relationships 1.3.2 – Meaningful Sequence 1.3.3 – Sensory Characteristics 1.4.1 – Use of Colour 1.4.2 – Audio Control 2.1.1 – Keyboard 2.1.2 – No Keyboard Trap 2.2.1 – Timing Adjustable 2.2.2 – Pause, Stop, Hide 2.3.1 – Three Flashes or Below 2.4.1 – Bypass Blocks 2.4.2 – Page Titled 2.4.3 – Focus Order 2.4.4 – Link Purpose (In Context) 3.1.1 – Language of Page 3.2.1 – On Focus 3.2.2 – On Input 3.3.1 – Error Identification 3.3.2 – Labels or Instructions 4.1.1 – Parsing 4.1.2 – Name, Role, Value
34. (INTERMEDIATE) LEVEL AA 1.2.4 – Captions (Live) 1.2.5 – Audio Description (Pre-recorded) 1.4.3 – Contrast (Minimum) 1.4.4 – Resize Text 1.4.5 – Images of Text 2.4.5 – Multiple Ways 2.4.6 – Headings and Labels 2.4.7 – Focus Visible 3.1.2 – Language of Parts 3.2.3 – Consistent Navigation 3.2.4 – Consistent Identification 3.3.3 – Error Suggestion 3.3.4- Error Prevention (Legal, Financial, Data)
35. (ADVANCED) LEVEL AAA 1.2.6 – Sign Language (Pre-recorded) 1.2.7 – Extended Audio description (Pre-recorded) 1.2.8 – Media Alternative (Pre-recorded) 1.2.9 – Audio Only (Live) 1.4.6 – Contrast (Enhanced) 1.4.7 – Low or No Background Audio 1.4.8 – Visual Presentation 1.4.9 – Images of Text (No Exception) 2.1.3 – Keyboard (No Exception) 2.2.3 – No Timing 2.2.4 – Interruptions 2.2.5 – Re-authenticating 2.3.2 – Three Flashes 2.4.8 – Location 2.4.9 – Link Purpose (Link Only) 2.4.10 – Section Headings 3.1.3 – Unusual words 3.1.4 – Abbreviations 3.1.5 – Reading Level 3.1.6 – Pronunciation 3.2.5 – Change on Request 3.3.5 – Help 3.3.6 – Error Prevention (All)
36. INCLUSIVE
37. FIN OPEN OFFICE HOURS Friday mornings: 7am-9am officehours.io/people/bermonpainter TWITTER/SKYPE/EMAIL @bermonpainter KEEP IN TOUCH