Caring for how people with disabilities use your code

1. <inclusive coding>
caring for how people with
disabilities use your code
Coder Girl, August 2015
november samnee
@novie

2. 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)

3. CC Image courtesy of eszter on Flickr
why should you care?

4. statistics – U.S.
20% of US
pop have
reading
difficulties
27 Million
Disabled
5 Million
Disabled
employed
4

5. financial impact
5
US disabled spend
$1 trillion each year
$200B of that is
discretionary
spending
CC Image courtesy of 401K 2012 on Flickr

6. 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

7. 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

8. 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

9. how people with disabilities
access the web
CC Image courtesy of UNAMID Photo on Flickr

10. 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

11. situational disabilities
we all use our devices in different ways
with different constraints

12. 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

13. assistive tech demos
CC Image courtesy of saechang on Flickr

14. 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

15. 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

16. VoiceOver demo
visual

17. 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

18. Zoom demo
visual

19. 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

20. 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

21. CC Image courtesy of Rolling F-Stop on Flickr
implementing accessibility

22. 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

23. 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)

24. use a checklist!
• WebAIM’s WCAG 2.0 checklist
http://webaim.org/standards/wcag/WCAG2
Checklist.pdf

25. CC Image courtesy of zzpza on Flickr
Resources

26. test with assistive tech
• Windows
– NVDA
– Windows Magnifier & High Contrast mode
• Apple
– VoiceOver
– Zoom & High Contrast
• Unplug your mouse!

27. 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

28. development tools
• WAVE Firefox toolbar / Chrome extension
(code checkers)
• NoCoffee Chrome extension
• Color Contrast Analyzer Firefox toolbar
• Magpie for video captioning

29. CC Image courtesy of zzpza on Flickr
questions?

30. contact me
@novie
november.samnee@gmail.com