![Page 1: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/1.jpg)
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
![Page 2: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/2.jpg)
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
![Page 3: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/3.jpg)
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
![Page 4: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/4.jpg)
![Page 5: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/5.jpg)
![Page 6: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/6.jpg)
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
![Page 7: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/7.jpg)
V I S U A L I M PA I R M E N T
![Page 8: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/8.jpg)
F I N E M O T O R I M PA I R M E N T
![Page 9: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/9.jpg)
H E A R I N G I M PA I R M E N T
![Page 10: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/10.jpg)
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
![Page 11: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/11.jpg)
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
![Page 12: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/12.jpg)
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
![Page 13: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/13.jpg)
S C R E E N R E A D E R S
![Page 14: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/14.jpg)
R E F R E S H A B L E B R A I L L E
![Page 15: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/15.jpg)
I N P U T D E V I C E S
![Page 16: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/16.jpg)
O T H E R S U P P O RT S A N D T O O L S
![Page 17: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/17.jpg)
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
![Page 18: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/18.jpg)
P O U R ≠ P O O R
Perceivable
Operable
Understandable
Robust
![Page 19: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/19.jpg)
C O L O R C O N T R A S T
![Page 20: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/20.jpg)
C O L O R + ( C O N ) T E X T
![Page 21: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/21.jpg)
S H O W I N G S TAT E
![Page 22: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/22.jpg)
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
![Page 23: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/23.jpg)
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.
![Page 24: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/24.jpg)
P R O X I M I T Y
![Page 25: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/25.jpg)
I M A G E A LT E R N AT I V E S
![Page 26: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/26.jpg)
C A P T I O N S + T R A N S C R I P T S
![Page 27: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/27.jpg)
L A B E L S + I N S T R U C T I O N S
![Page 28: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/28.jpg)
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
![Page 29: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/29.jpg)
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
✓
![Page 30: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/30.jpg)
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
✓
![Page 31: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/31.jpg)
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 *
![Page 32: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/32.jpg)
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
![Page 33: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/33.jpg)
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
![Page 34: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/34.jpg)
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
![Page 35: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/35.jpg)
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
![Page 36: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/36.jpg)
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
![Page 37: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/37.jpg)
C O N S I S T E N T L O O K + F E E L
![Page 38: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/38.jpg)
– Y O U ( H O P E F U L LY )
“How do I convince my clients that they want an accessible site?”
![Page 39: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/39.jpg)
U N I V E R S A L D E S I G N
![Page 40: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/40.jpg)
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
![Page 41: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/41.jpg)
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
![Page 42: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/42.jpg)
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
![Page 43: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/43.jpg)
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
![Page 44: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/44.jpg)
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
![Page 45: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/45.jpg)
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
![Page 46: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/46.jpg)
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
![Page 47: @DEVONPERSING DESIGNING FOR ACCESSIBILITY · mobile a11y MOBILE-FIRST DESIGN ... Complex processes are broken down into digestible pieces Flexible layout relies on CSS Touch targets](https://reader034.vdocuments.us/reader034/viewer/2022051922/600f54acf8f5862bb42a8e84/html5/thumbnails/47.jpg)
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