Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images ›...
Transcript of Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images ›...
![Page 1: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/1.jpg)
Building Apps
for Accessibility
and Inclusive Design
Nick Di Stefano
![Page 2: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/2.jpg)
What is the goal of this presentation?
![Page 3: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/3.jpg)
Agenda
• What is Accessibility and Inclusive Design?
• Why do they matter?
• What are compliance regulations?
• How do they apply to what I’m building?
• How can I build apps for Accessibility and Inclusive Design?
![Page 4: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/4.jpg)
What is accessibility?
![Page 5: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/5.jpg)
![Page 6: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/6.jpg)
![Page 7: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/7.jpg)
![Page 8: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/8.jpg)
![Page 9: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/9.jpg)
![Page 10: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/10.jpg)
![Page 11: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/11.jpg)
Definition Accessibility
The practice of making your products and services usable by as many people as possible.
![Page 12: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/12.jpg)
![Page 13: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/13.jpg)
Focusing on
People with disabilities(age-related as well)
• Visually impaired(Color) blindness
• Hearing impairment(Partially) deaf
• Mobility impairmentParalyzed, RSI, Wheelchair
• Cognitive impairmentSeizures / Learning
People facing situational barriers
• Multitasking
• Cultural / social differences
• Language differences
Focusing on
People with disabilities(age-related as well)
• Visually impaired(Color) blindness
• Hearing impairment(Partially) deaf
• Mobility impairmentParalyzed, RSI, Wheelchair
• Cognitive impairmentSeizures / Learning
People facing situational barriers
• Multitasking
• Cultural / social differences
• Language differences
![Page 14: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/14.jpg)
The Problem with ”Good Design”
![Page 15: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/15.jpg)
What is Inclusive Design?
Involves designing products and services to be usable by everyone to the greatest extent possible, without the need for adaptation
![Page 16: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/16.jpg)
How are they related?
![Page 17: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/17.jpg)
Why does it matter?
![Page 18: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/18.jpg)
Digital Innovation
![Page 19: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/19.jpg)
Brand Growth
![Page 20: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/20.jpg)
Increased Market Reach
![Page 21: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/21.jpg)
Minimize Legal Risk
![Page 22: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/22.jpg)
Everyone of us is only temporary fully enabled…
![Page 23: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/23.jpg)
WCAG, ATAG, 508, ADA, EN 301 549
What do they all mean?
![Page 24: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/24.jpg)
What are compliance regulations?
All these standards have the same goal:
To make your products and services usable by as many people as possible.
![Page 25: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/25.jpg)
What is WCAG?
WCAG 2.0 is the technical standard featuring 12 guidelines under four principles:
Image Source: Mightybytes
![Page 26: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/26.jpg)
What is WCAG?
Level A
We must satisfy these
requirements,
otherwise it will be
impossible for one or
more groups to access
the web content
Level AA
We should satisfy
these requirements,
otherwise some groups
will find it difficult to
access the web content
Level AAA
We may satisfy these
requirements, in order
to make it easier for
some groups to access
the web content
![Page 27: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/27.jpg)
How does it apply to what I’m building?
Image Source: Mightybytes
![Page 28: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/28.jpg)
How does it apply to what I’m building?
Image Source: Mightybytes
![Page 29: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/29.jpg)
How does it apply to what I’m building?
Image Source: Mightybytes
![Page 30: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/30.jpg)
How does it apply to what I’m building?
Image Source: Mightybytes
![Page 31: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/31.jpg)
Applying it in your app
Examples and Best Practices
![Page 32: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/32.jpg)
Adhering to color contrast ratios
Image Source: http://accessible-colors.com/
![Page 33: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/33.jpg)
Not relying on color alone for critical information
Image Source: Trello
![Page 34: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/34.jpg)
Clear & Consistent Layouts
Image Source: Gov.uk
![Page 35: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/35.jpg)
Consistent Navigation
![Page 36: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/36.jpg)
Consistent use of icons & imagery
Image Source: MacOS
![Page 37: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/37.jpg)
Create a typography hierarchy
![Page 38: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/38.jpg)
Labels, captions, & transcriptions
Image Source: Invision
![Page 39: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/39.jpg)
Designing usable focus states
Image Source: Gov.uk
![Page 40: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/40.jpg)
Helping users recover from errors
Image Source: Gov.uk
![Page 41: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/41.jpg)
Present content in a meaningful order
Image Source: Gov.uk
![Page 42: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/42.jpg)
Avoid high rates of blinking/flashing
![Page 43: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/43.jpg)
Set Attribute Widget
Image Source: https://github.com/cdcharlebois/SetAttribute
![Page 44: Building Apps for Accessibility and Inclusive Design › rs › 729-ZYH-434 › images › Building...Digital Innovation Brand Growth Increased Market Reach Minimize Legal Risk Everyone](https://reader034.fdocuments.in/reader034/viewer/2022052612/5f0ffc607e708231d446df5c/html5/thumbnails/44.jpg)
Thank you
Any questions?