design before code: thinking about accessibility from the ground up

37
DESIGN BEFORE CODE Thinking About Accessibility from the Ground Up Caitlin Geier

Upload: caitlin-geier

Post on 10-Feb-2017

61 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Design Before Code: Thinking About Accessibility from the Ground Up

DESIGN BEFORE CODE

Thinking About Accessibility from the Ground Up

Caitlin Geier

Page 2: Design Before Code: Thinking About Accessibility from the Ground Up

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

CONTEXT: Where I Work

Page 4: Design Before Code: Thinking About Accessibility from the Ground Up

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

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

WHAT TO ACTUALLY THINK ABOUTUsability

UsersTeamwork

Tricky Parts

Patterns

Page 7: Design Before Code: Thinking About Accessibility from the Ground Up

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

Common misconception: accessibility is separate from usability

Accessibility

Usability

Page 9: Design Before Code: Thinking About Accessibility from the Ground Up

Accessibility is a part of usability

Usability

Accessibility

Page 10: Design Before Code: Thinking About Accessibility from the Ground Up

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

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

USER RESEARCH

15-20%of people

have a disability

Page 13: Design Before Code: Thinking About Accessibility from the Ground Up

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

NoCoffee extension for Chrome simulates visual disabilitiesNoCoffee

Plugin for Chrome

Page 15: Design Before Code: Thinking About Accessibility from the Ground Up

KEY #3: Work With Your TeamProduct Manager

ResearcherDesigner

Content CreatorDeveloper

QA

Page 16: Design Before Code: Thinking About Accessibility from the Ground Up

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

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

YOU ARE NOT A SILO

Page 19: Design Before Code: Thinking About Accessibility from the Ground Up

KEY #4: Understand the Tricky Bits

FormsTablesCustom ControlsDynamic Content

Page 21: Design Before Code: Thinking About Accessibility from the Ground Up

FORMS:Help Text

Mailchimp pattern library - forms Salesforces Lightning design system - forms

Page 23: Design Before Code: Thinking About Accessibility from the Ground Up

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

TABLES

Column Headers

Row Header

s

Page 25: Design Before Code: Thinking About Accessibility from the Ground Up

TABLES:With form controls

Example from: [citation needed]

Page 27: Design Before Code: Thinking About Accessibility from the Ground Up

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

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

CUSTOM CONTROLS

Example from: Mailchimp pattern library - forms

Page 30: Design Before Code: Thinking About Accessibility from the Ground Up

CUSTOM CONTROLS

Example from: Virgin America home page

Page 31: Design Before Code: Thinking About Accessibility from the Ground Up

CUSTOM CONTROLS = CHIMERAS?

Encyclopedia Britannica: Chimera in Greek mythology

Page 33: Design Before Code: Thinking About Accessibility from the Ground Up

KEY #5: Style Guide / Pattern Library

ColorsTypographyFormsTablesNotificationsIconsContent guidelines

Page 34: Design Before Code: Thinking About Accessibility from the Ground Up

U.S. Web Design Standards

standards.usa.gov

Page 35: Design Before Code: Thinking About Accessibility from the Ground Up

Salesforce “Lighting” Design Systemwww.lightningdesignsystem.com

Page 36: Design Before Code: Thinking About Accessibility from the Ground Up

5 keys: recapUsability

UsersTeamwork

Tricky Parts

Patterns

Page 37: Design Before Code: Thinking About Accessibility from the Ground Up

QUESTIONS@CaitlinGeier

[email protected]