Presented at: All Things Open 2019 Presented by: Christiana Unaeze

1. Guidelines on Designing for
Accessibility in UX Design
Christiana Unaeze
@Vibrant_Eagle

2. Design for the
diverse set of users
who will interact
with your products
Image courtesy of medium
@Vibrant_Eagle

3. • Identify user needs and pain points, and remove
barriers
• Better SEO and search results | Larger Audience
• Faster download times
• 1053 web site accessibility lawsuits in within the
first 6 months of 2018
@Vibrant_Eagle
Why Design for Accessibility

4. @Vibrant_Eagle

5. WCAG 2.x
@Vibrant_Eagle
Web Content Accessibility Guideline (WCAG) Principles
Perceivable
Operable
Understandable
RobustImage courtesy of StackOverflow

6. @Vibrant_Eagle
Don’t use color as the only visual
means of conveying information
Guidelines on Use of Color
image courtesy of UXPlanet
Adequate Contrast-Ratio
4.5:1 for normal text
3:1 for large text
3:1 for graphics and gui

7. @Vibrant_Eagle
Guidelines for Images and Non-Text Elements
image courtesy of Yoast

8. • Captions
• Synchronous text of the spoken
words in the video content
• Intended for users who cannot
access the audio, but can see
the video
@Vibrant_Eagle
Guidelines for Audio, Video & Multimedia
image courtesy of YouTube
Text Transcripts
• Allow multimedia content to be indexed on the web
• Useful for hearing, visual, and cognitive disabilities

9. • WAVE – Website Accessibility Evaluation Tool
• SortSite – desktop and web app
• Axe – The Accessibility Engine
• Pa11y – Customized Accessibility Testing
• Tota11y – by developers from Khan Academy
@Vibrant_Eagle
Resources for Checking Accessibility

10. •Make accessibility an early part of your
workflow process
•WCAG 2.x and it’s Principles
•Provide accessible alternatives for users
• Make site keyboard accessible
• Consistent layout and navigation
• Use Accessibility tools to audit sites
@Vibrant_Eagle
Best Practices to Follow

11. Christiana Unaeze
@Vibrant_Eagle
/Christiana-Unaeze
image courtesy of LooneyTunes Wiki
Rate this presentation and leave
comments/feedback