DESIGN BEFORE CODE
Thinking About Accessibility from the Ground Up
Caitlin Geier
CONTEXT: About Me
 UX Designer at Deque Systems
 Live in Ann Arbor, MI
 No disabilities………yet.
CONTEXT: My Role at Deque
Skip links
WHAT TO THINK ABOUT
Icons
Screen reader compatability
Audio and video
Landmarks
Reading order
Duplicate IDs
Headings
Links
Information architecture
Keyboard operability
Forms
Dynamic content
Lots of stuff. Pause, stop, hide
Custom controls
Valid code
Visual cues
Data tables
Navigation Links vs buttons
Typography
Colors
Name, role, value
Session timeouts
Readability
Consistency
Images
Touch Programmatic association
Error association
Keyboard focus
Error prevention
WHAT TO ACTUALLY THINK ABOUT
Usability
Users
Teamwork
Tricky Parts
Patterns
KEY #1: Understand Usability
Ask:
Is it usable?
Then you’re halfway there already.
Accessibility
Usability
Accessibility
Usability
NIELSEN’S 10 HEURISTICS
1. Visibility of system status
6. Consistency and standards
2. Match between system
7. Recognition over recall
and real world
3.
User control and freedom
4. Error prevention
5. Help users recognize,
diagnose, and recover
from errors
8. Flexibility and efficiency
of use
9. Aesthetic and minimalist
design
10. Help and documentation
KEY #2: Understand Your Users
Everyone is disabled at some point in their lives.
USER RESEARCH
15-20%
of people
have a disability
WEAR THEIR SHOES
Simulating disabilities
 Work outside on a sunny day
 Ditch the mouse, use a keyboard
 Test with your mother
 NoCoffee extension
NoCoffee
Plugin for Chrome
KEY #3: Work With Your Team
Product Manager
Researcher
Designer
Content Creator
Developer
QA
TEAM ROLES - ACCESSIBILITY
Scope
Prototype
Build
Ship
PM
Research
PM
Designer
Content
(Developer)
(Research)
PM
Developer
QA
(Designer)
(Research)
PM
QA
Developer
(Research)
DESIGN COST
Scope
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-highSHIFT
Very high
effort
LEFT
effort to change
to change
YOU ARE NOT A SILO
KEY #4: Understand the Tricky Bits
 Forms
 Tables
 Custom Controls
 Dynamic 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
Headers
TABLES:
With form
controls
Example from: [citation needed]
TABLES:
All of the
headers!
Smashing Magazine: Designer User Interfaces
for Business Web Applications
TABLES:
Should it be
a table?
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
Mailchimp pattern library - forms
CUSTOM CONTROLS
Virgin America home page
CUSTOM CONTROLS = CHIMERAS?
Encyclopedia Britannica: Chimera in Greek mythology
DYNAMIC CONTENT
Blizzard's Battlenet sign-up form
KEY #5: Style Guide / Pattern Library







Colors
Typography
Forms
Tables
Notifications
Icons
Content guidelines
U.S. Web
Design
Standards
standards.usa.gov
Salesforce
“Lighting”
Design
System
www.lightningdesignsystem.com
Usability
Users
Teamwork
Tricky Parts
Patterns
QUESTIONS
@CaitlinGeier
[email protected]
Sign up to receive
presentation slides:
www.deque.com/csun17
Deque’s full CSUN schedule:
www.deque.com/info
@dequesystems
aXe Hackathon
th
Saturday, March 4
9am-12pm
Solana Beach AB Room