design before code: thinking about accessibility from the ground up
TRANSCRIPT
![Page 1: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/1.jpg)
DESIGN BEFORE CODE
Thinking About Accessibility from the Ground Up
Caitlin Geier
![Page 2: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/2.jpg)
CONTEXT: About MeLive in Ann Arbor, MIUX Designer at Deque SystemsNo disabilities
2 cats
![Page 3: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/3.jpg)
CONTEXT: Where I Work
![Page 4: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/4.jpg)
CONTEXT: My Role
I am a UX designer.
I work on software which helps development teams
test their websites and apps for accessibility.
![Page 5: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/5.jpg)
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
![Page 6: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/6.jpg)
WHAT TO ACTUALLY THINK ABOUTUsability
UsersTeamwork
Tricky Parts
Patterns
![Page 7: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/7.jpg)
KEY #1: Understand Usability
Ask:Is it usable?
Then you’re halfway there already.
![Page 8: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/8.jpg)
Common misconception: accessibility is separate from usability
Accessibility
Usability
![Page 9: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/9.jpg)
Accessibility is a part of usability
Usability
Accessibility
![Page 10: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/10.jpg)
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.
![Page 11: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/11.jpg)
KEY #2: Understand Your Users
Note: Everyone is disabled at some point in their lives.
![Page 12: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/12.jpg)
USER RESEARCH
15-20%of people
have a disability
![Page 13: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/13.jpg)
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
![Page 14: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/14.jpg)
NoCoffee extension for Chrome simulates visual disabilitiesNoCoffee
Plugin for Chrome
![Page 15: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/15.jpg)
KEY #3: Work With Your TeamProduct Manager
ResearcherDesigner
Content CreatorDeveloper
QA
![Page 16: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/16.jpg)
TEAM ROLES - ACCESSIBILITYScope
PMResearch
Prototype
PMDesignerContent
(Developer)(Research)
Build
PMDeveloper
QA(Designer)(Research)
Ship
PMQA
Developer(Research)
![Page 17: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/17.jpg)
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
![Page 18: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/18.jpg)
YOU ARE NOT A SILO
![Page 19: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/19.jpg)
KEY #4: Understand the Tricky Bits
FormsTablesCustom ControlsDynamic Content
![Page 20: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/20.jpg)
FORMS:Labels
Mailchimp pattern library - forms Blizzard's Battlenet sign-up form
Virgin America home page
![Page 21: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/21.jpg)
FORMS:Help Text
Mailchimp pattern library - forms Salesforces Lightning design system - forms
![Page 22: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/22.jpg)
FORMS:Errors
Mailchimp pattern library - Forms
Blizzard's Battlenet sign-up form
![Page 23: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/23.jpg)
FORMS:Does it look like a form?
Google Material Design - forms
Mailchimp pattern library - forms
![Page 24: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/24.jpg)
TABLES
Column Headers
Row Header
s
![Page 25: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/25.jpg)
TABLES:With form controls
Example from: [citation needed]
![Page 26: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/26.jpg)
TABLES:All of the headers!
Example from: Smashing Magazine: Designer User Interfaces for Business Web Applications
![Page 27: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/27.jpg)
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"
![Page 28: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/28.jpg)
CUSTOM CONTROLS:What are they?
Anything that doesn’t use standard HTML control elements.
![Page 29: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/29.jpg)
CUSTOM CONTROLS
Example from: Mailchimp pattern library - forms
![Page 31: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/31.jpg)
CUSTOM CONTROLS = CHIMERAS?
Encyclopedia Britannica: Chimera in Greek mythology
![Page 32: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/32.jpg)
DYNAMIC CONTENT
Blizzard's Battlenet sign-up form
![Page 33: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/33.jpg)
KEY #5: Style Guide / Pattern Library
ColorsTypographyFormsTablesNotificationsIconsContent guidelines
![Page 35: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/35.jpg)
Salesforce “Lighting” Design Systemwww.lightningdesignsystem.com
![Page 36: Design Before Code: Thinking About Accessibility from the Ground Up](https://reader030.vdocuments.mx/reader030/viewer/2022013004/589d14f71a28ab61128b5599/html5/thumbnails/36.jpg)
5 keys: recapUsability
UsersTeamwork
Tricky Parts
Patterns