<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

CC Image courtesy of zzpza on Flickr

Resources

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

CC Image courtesy of zzpza on Flickr

questions?

contact me

@novie

november.samnee@gmail.com