design before code: thinking about accessibility from the ground up

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

Example from: 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

ColorsTypographyFormsTablesNotificationsIconsContent guidelines

U.S. Web Design Standards

standards.usa.gov

Salesforce “Lighting” Design Systemwww.lightningdesignsystem.com

5 keys: recapUsability

UsersTeamwork

Tricky Parts

Patterns

QUESTIONS@CaitlinGeier

geier.ac@gmail.com