DESIGNING WITH ACCESSIBILITY IN MIND @bermonpainter | FITC - UX Spotlight

IMAGINE

No content

No content

No content

No content

No content

No content

No content

No content

ACCESSIBILITY

INCLUSIVE

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.”

INCLUSIVE DESIGN

USER FOCUSED

CONTEXTUAL

PERCEIVE 1 UNDERSTAND 2 OPERATE 3

PERCEIVE 1 UNDERSTAND 2 OPERATE 3

PERCEIVE 1 UNDERSTAND 2 OPERATE 3

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

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

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

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

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

PRINCIPLES OF ACCESSIBILITY

ACCESSIBILITY GUIDELINES

COLOR CONTRAST

CONVEYING INFORMATION WITH MORE THAN COLOR

STRUCTURE & HIERARCHY

LABELS & FORMS

FOCUS INDICATORS

WCAG 2.0

(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

(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)

(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)

INCLUSIVE

FIN OPEN OFFICE HOURS Friday mornings: 7am-9am officehours.io/people/bermonpainter TWITTER/SKYPE/EMAIL @bermonpainter KEEP IN TOUCH