your website is not accessible

"The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect."

- Tim Berners-Lee

Why?

Basic human right

Good for you

My users have:

Perfect sight
Sight
Hearing
Mouse input
Keyboard input

Common assumptions

Keyboard navigation

Screen readers

How?

P

O

U

R

How?

Perceivable

Operable

Understandable

Robust

Perceivable

Images - Alt text
Audio - Transcripts
Video - Captions, Transcripts
Forms & Input - Labels
Contrast
No CAPTCHAs

<img src="cat_cat_cat_dfhwohfiurgergv123r34vsasxasd.jpg"/>
<input type="text" placeholder="username">
<input type="text" placeholder="password">
<button>Send</button>

Example: Images & Forms

Operable

Pause moving, scrolling, auto-updating
Skip navigation
Links
Headings
Semantic HTML

Understandable

Language
Avoid/explain jargon
Images & Graphics

Robust

Browsers
OS
Mobile

P

O

U

R

Perceivable

Operable

Understandable

Robust

Tools

ChromeVox
Accessibility checkers (wave.webaim.org)
Libraries: Quail (npmjs.org/package/quail)

Learn more

@alexqin

slides.com/alexandraqin/y our-website-is-not-accessible

CascadiaJS 2014 talk