@DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes...

D E S I G N I N G F O R A C C E S S I B I L I T Y

@ D E V O N P E R S I N G

W H AT W E ’ L L C O V E R

• Understanding your audience

• Overview of assistive technologies

• Accessible visual and user experience design

• Tools and resources

U N D E R S TA N D I N G Y O U R A U D I E N C E

R E T H I N K I N G W H A T D I S A B I L I T Y M E A N S

M A J O R U S E C A S E S

• Visual impairment

• Mobility and fine motor impairment

• Hearing impairment

• Learning and cognitive disabilities

• Seizure and vestibular disorders

V I S U A L I M PA I R M E N T

F I N E M O T O R I M PA I R M E N T

H E A R I N G I M PA I R M E N T

L E A R N I N G + C O G N I T I V E D I S A B I L I T I E S

S E I Z U R E + V E S T I B U L A R D I S O R D E R S

A S S I S T I V E T E C H N O L O G Y O V E R V I E W

S O F T W A R E , H A R D W A R E , S E T T I N G S

S C R E E N R E A D E R S

R E F R E S H A B L E B R A I L L E

I N P U T D E V I C E S

O T H E R S U P P O RT S A N D T O O L S

A C C E S S I B L E D E S I G N P R I N C I P L E S

C O L O R , S T R U C T U R E , C O N T E N T, I N T E R A C T I O N

P O U R ≠ P O O R

Perceivable

Operable

Understandable

Robust

C O L O R C O N T R A S T

C O L O R + ( C O N ) T E X T

S H O W I N G S TAT E

C O N T E N T O R D E R + O U T L I N E

A

B

C

I. Welcome II. About Us

III. Our Company III. Our Work III. Our Philosophy

II. About You III. Your Brand III. Your Vision

C O N T E N T O R D E R + O U T L I N E

A

C

D

B

I. Your Trip Results III. Filter your Results III. Sort Your Results

II. Search Results III. Result 1 III. Result 2 III. Etc.

P R O X I M I T Y

I M A G E A LT E R N AT I V E S

C A P T I O N S + T R A N S C R I P T S

L A B E L S + I N S T R U C T I O N S

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

P H O N E *

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

P H O N E * (555) 555-5555

U S E R P R O F I L E

Please enter a phone number in 555-555-5555 format.

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

P H O N E * (555) 555-5555

U S E R P R O F I L E

Please enter a phone number in 555-555-5555 format.

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

P H O N E * 555-555-5555

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

555-555-5555

U S E R P R O F I L E

A D D R E S S *

P E T T Y P E D O G C AT B I R D

N O T I F I C AT I O N S + WA R N I N G S

N A M E *

P H O N E *

S AV E

Jane Doe

123 Pet Street

✓

555-555-5555

✓ C H A N G E S S AV E D

C O N S I S T E N T L O O K + F E E L

– Y O U ( H O P E F U L LY )

“How do I convince my clients that they want an accessible site?”

U N I V E R S A L D E S I G N

a11ym

obile

M O B I L E - F I R S T D E S I G N

Content is ordered by importance

Complex processes are broken down into digestible pieces

Flexible layout relies on CSS

Touch targets are large and obvious/friendly

T O O L S + R E S O U R C E ST E S T I N G T O O L S , G U I D E L I N E S , A N D T E C H N I Q U E S

T E S T I N G C O L O R

• Contrast Ratio browser tool for color contrast

• Color Oracle desktop tool for color blindness

• Photoshop proofing for color blindness

C A P T I O N S + T R A N S C R I P T S

• YouTube captions and transcripts

• Vimeo captions and transcripts

O S X + I O S D O C U M E N TAT I O N

• Apple accessibility settings and supports

• iOS app accessibility guidelines

• Using VoiceOver on OSX and iOS

G U I D E L I N E S + S P E C I F I C AT I O N S

• WCAG 2.0 for accessible UX and development

• a11yTips blog for WCAG in plainer language

• WAI-ARIA for building complex, custom widgets

T H A N K Y O U !Y O U ’ V E B E E N V E R Y K I N D

P H O T O C R E D I T S

• Title slide

• What we’ll cover

• “Who is disabled?”

• Kenguru

• Major use cases

• Visual impairment

• Fine motor impairment

• Hearing impairment

• Learning and cognitive disabilities

• Seizure and vestibular disorders

• Screen readers

• Refreshable braille

• Input devices

• Color contrast

• Color and (con)text

• Showing state

• Proximity

• Image alternatives

• Captions and transcripts

• Labels and instructions

• Consistent look and feel

• Universal design

• Thank you slide