DESIGN BEFORE CODE
Thinking About Accessibility from the Ground Up
Caitlin Geier
CONTEXT: About MeLive in Ann Arbor, MIUX Designer at Deque SystemsNo disabilities
2 cats
CONTEXT: Where I Work
CONTEXT: My Role
I am a UX designer.
I work on software which helps development teams
test their websites and apps for accessibility.
WHAT TO THINK ABOUT
Images
Audio and video
Icons
Colors
Visual cues
HeadingsLandmarks
Skip links
Keyboard focus
Information architecture
Navigation
ConsistencyReadability
Reading orderLinks
TypographyData tables
Forms
Custom controls
Error prevention
Dynamic content
Touch
Lots of stuff.
Session timeouts
Valid code
Duplicate IDs
Programmatic association
Keyboard operability
Screen reader compatability
Name, role, value
Pause, stop, hide
Links vs buttons
Error association
WHAT TO ACTUALLY THINK ABOUTUsability
UsersTeamwork
Tricky Parts
Patterns
KEY #1: Understand Usability
Ask:Is it usable?
Then you’re halfway there already.
Common misconception: accessibility is separate from usability
Accessibility
Usability
Accessibility is a part of usability
Usability
Accessibility
NIELSEN’S 10 HEURISTICS1. Visibility of system
status2. Match between system and real world
3. User control and freedom4. Error prevention
5. Help users recognize, diagnose, and recover from errors
6. Consistency and standardsRecognition over recall7.Flexibility and efficiency of use
8.
Aesthetic and minimalist design
9.
Help and documentation10.
KEY #2: Understand Your Users
Note: Everyone is disabled at some point in their lives.
USER RESEARCH
15-20%of people
have a disability
WEAR THEIR SHOESSimulating disabilities
Work outside on a sunny day Ditch the mouse, use a keyboard Think like your mom (or test with
her!) NoCoffee extension
NoCoffee extension for Chrome simulates visual disabilitiesNoCoffee
Plugin for Chrome
KEY #3: Work With Your TeamProduct Manager
ResearcherDesigner
Content CreatorDeveloper
QA
TEAM ROLES - ACCESSIBILITYScope
PMResearch
Prototype
PMDesignerContent
(Developer)(Research)
Build
PMDeveloper
QA(Designer)(Research)
Ship
PMQA
Developer(Research)
DESIGN COSTScope Prototype Build Ship
State of Design
Ideas Wireframes, prototypes
Product under development
Product released to public
Effort Very low effort to change
Low effort to change Medium-high effort to change
Very high effort to changeSHIFT
LEFT
YOU ARE NOT A SILO
KEY #4: Understand the Tricky Bits
FormsTablesCustom ControlsDynamic Content
FORMS:Labels
Mailchimp pattern library - forms Blizzard's Battlenet sign-up form
Virgin America home page
FORMS:Help Text
Mailchimp pattern library - forms Salesforces Lightning design system - forms
FORMS:Errors
Mailchimp pattern library - Forms
Blizzard's Battlenet sign-up form
FORMS:Does it look like a form?
Google Material Design - forms
Mailchimp pattern library - forms
TABLES
Column Headers
Row Header
s
TABLES:With form controls
Example from: [citation needed]
TABLES:All of the headers!
Example from: Smashing Magazine: Designer User Interfaces for Business Web Applications
TABLES:
Should it be a
table?Example from oneworld’s Where We Fly tool; screenshot featured in: Well Traveled Mile: "Ultimate Guide to Booking American Airline Awards: Part 2"
CUSTOM CONTROLS:What are they?
Anything that doesn’t use standard HTML control elements.
CUSTOM CONTROLS
Example from: Mailchimp pattern library - forms
CUSTOM CONTROLS = CHIMERAS?
Encyclopedia Britannica: Chimera in Greek mythology
DYNAMIC CONTENT
Blizzard's Battlenet sign-up form
KEY #5: Style Guide / Pattern Library
ColorsTypographyFormsTablesNotificationsIconsContent guidelines
Salesforce “Lighting” Design Systemwww.lightningdesignsystem.com
5 keys: recapUsability
UsersTeamwork
Tricky Parts
Patterns
QUESTIONS@CaitlinGeier
Top Related