<inclusive coding> caring for how people with disabilities use your code Coder Girl, August 2015 november samnee @novie
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
<inclusive coding> caring for how people with
disabilities use your code
Coder Girl, August 2015
november samnee
@novie
my story
• accidental career path
• what code I do know is self-taught
• used to being one of the few girls around
(except at my latest job)
CC Image courtesy of eszter on Flickr
why should you care?
statistics – U.S.
20% of US
pop have
reading
difficulties
27 Million
Disabled
5 Million
Disabled
employed
4
financial impact
5
US disabled spend
$1 trillion each year
$200B of that is
discretionary
spending
CC Image courtesy of 401K 2012 on Flickr
risks & opportunities
• Risks:
– Inability to sell to federal/state agencies, academic markets
– Lawsuits
– Bad PR
• Opportunities
– Ethical obligation to be inclusive
– Enhancements for disabled often enhance experience for everyone
6
CC Image courtesy of avyfain on Flickr
retrofit
vs. accessibility from the start
• In the beginning accessibility increases
development costs by no more than 10%
• Retrofitting accessibility may cost 2 to 3
times more
7 CC Image courtesy of verseguru on Flickr
all of these were enough
reasons for me to care…
…until I spent time talking to people with
disabilities who used the product I
developed
how people with disabilities access the web
CC Image courtesy of UNAMID Photo on Flickr
types of disabilities
that impact web use
visual Includes vision loss, blindness, color blindness
hearing Includes diminished or partial hearing, Deafness
mobility Includes paralysis, fine motor control, muscle fatigue, limb loss
cognitive Includes dyslexia, autism, ADD/ADHD
situational disabilities
we all use our devices in different ways
with different constraints
assistive/adaptive technologies
visual screen reader, screen magnifer, high contrast mode, Zoom, enlarged text
hearing flashing light for system sounds
mobility voice recognition software, different mouse or no mouse at all
cognitive can use any combination of the above
assistive tech demos
CC Image courtesy of saechang on Flickr
how it works: screen readers
• Interacts with the DOM & API, reading the source code in order, starting with page title
• If using native, semantic code:
– Automatically identifies images, links, form fields, ordered/unordered lists (and sometimes state)
– Support navigation for tables, headings, landmarks
• If not using native, semantic code JAWS will try to guess (sometimes quite well), other AT will not
visual
screen reader user behavior
• Screen reader users only use a keyboard and never a mouse (but can interact with a touch screen)
• Frequently navigate by links, form fields, headings – unlikely to listen to an entire page top to bottom
• By default, screen readers don’t read all punctuation and may pronounce words incorrectly
visual
VoiceOver demo
visual
how it works: screen magnifiers
(and other low vision settings)
• Screen magnifiers simply magnify the
entire computer screen, can also enlarge
cursor
– Some also have screen-reader-like text to
speech
• High contrast mode & other font
type/size/color changes
visual
Zoom demo
visual
how it works: speech recognition
• Analyzes the HTML elements on a web
page (takes a while before page is ready)
• OS-based, not browser-based
• Needs mouse interactions for some
actions
• If coded properly, support navigation for
form elements, links, scroll
mobility
speech recognition user behavior
• Two ways of navigating:
– Direct command – i.e. by speaking form label, link text, button text, focusable elements
• If duplicates on the page, Dragon will put numbers next to all instances
– Grid mode – telling the mouse where to point based on the number in a grid overlay on the page
mobility
CC Image courtesy of Rolling F-Stop on Flickr
implementing accessibility
guidelines
22
Internet access is a human right.
How do we implement accessibility?
WCAG* 2.0
(Web Content Accessibility Guidelines)
- Model Accessibility Guideline from the World
Wide Web Consortium (W3C). Current version;
replaces WCAG 1.0.
ADA
(Americans with Disabilities Act)
- DOJ uses WCAG 2.0 AA in enforcement
actions, recently held out that it already is a part
of legal requirements even though there isn’t a
regulation in place
it doesn’t have to be difficult
• 80% of accessibility is standards-
compliant, semantic code
• If you can use a native HTML element with
semantics/behavior already build in, do
that!
• If you can’t, look into WAI-ARIA (W3C
standard)
use a checklist!
• WebAIM’s WCAG 2.0 checklist
http://webaim.org/standards/wcag/WCAG2
Checklist.pdf
test with assistive tech
• Windows
– NVDA
– Windows Magnifier & High Contrast mode
• Apple
– VoiceOver
– Zoom & High Contrast
• Unplug your mouse!
code techniques
• Web Accessibility Initiative (WAI)*
• WebAim – resources and e-mail
discussion list**
• The Paciello Group’s Resources***
• Simply Accessible****
• Deque*****
* http://www.w3.org/WAI/
** http://webaim.org
*** http://www.paciellogroup.com
**** http://simplyaccessible.com
***** http://deque.com
development tools
• WAVE Firefox toolbar / Chrome extension
(code checkers)
• NoCoffee Chrome extension
• Color Contrast Analyzer Firefox toolbar
• Magpie for video captioning
