MAKING YOUR WEB APPLICATION
WORK FOR EVERYONEYAPC::EU:2016, Cluj-Napoca, Romania
👋
JOB VAN ACHTERBERG
@DETONITE
PD5JOB
💾
🚀
🚒
INCLUSIVE DESIGN
UNIVERSAL DESIGN
♿
🚲
👶
👴
🏂
🚦
SEEHEAR
DISTINGUISHFEEL
MAKE IT USABLE
MAKE IT ACCESSIBLE
❓
❓
“ON THE CONTRARY, I THINK THE BLINK TAG IS AN EXCELLENT IDEA!”
“ON THE CONTRARY, I THINK THE BLINK TAG IS AN EXCELLENT IDEA!”
“THE POWER OF THE WEB IS IN ITS UNIVERSALITY. ACCESS BY EVERYONE
REGARDLESS OF DISABILITY IS AN ESSENTIAL ASPECT.”
“THE POWER OF THE WEB IS IN ITS UNIVERSALITY. ACCESS BY EVERYONE
REGARDLESS OF DISABILITY IS AN ESSENTIAL ASPECT.”
HOW?
YES WAIHTTPS://WWW.W3.ORG/WAI/
WEB ACCESSIBILITY INITIATIVE
WCAGHTTPS://WWW.W3.ORG/TR/WCAG20/
WEB CONTENT ACCESSIBILITY GUIDELINES
4 PRINCIPLES OF A11Y1. PERCEIVABLE 2. OPERABLE 3. UNDERSTANDABLE 4. ROBUST
GOOD DESIGN =
POUR DESIGN
“A11Y”
WAI-ARIAHTTPS://WWW.W3.ORG/WAI/INTRO/ARIA
SEMANTICS<h2 class=“story-title”>Undead Perl</h2>
<button aria-expanded=“true” aria-controls=“story”>Read more!</button>
<div id=“story”> Why won’t it die()!</div>
NATIVE ROLESBUTTON BUTTON
ANCHOR LINK
DIV[ROLE=LINK] LINK
DEMO TIME!
MAKE IT VISIBLE MAKE IT USABLE MAKE IT GROKABLE MAKE IT FLEXIBLE
WHY?
QUALITY
PROFIT
INDEPENDENCE
CRIPPLE-BUDDY™
IT’S JOBOUR
💩
USE SEMANTIC HTMLANCHORS GO PLACESBUTTONS PERFORM ACTIONS
ARIA IF NECESSARYINDICATE CUSTOM SEMANTICSPREFER NATIVE SEMANTICS
PROPER CONTRAST
PROPER CONTRAST
PROPER CONTRAST
LIGHT TEXT ON WHITE BACKGROUND
TINY TINY TINY TEXT
IMAGE ALT TEXT
CONTAINS TEXT? USE ALT.
CONTEXT RELEVANT? USE ALT.
PRESENTATIONAL? USE ALT.
alt=“Perl is very much alive!”
alt=“Larry Wall giving a thumbs-up”
alt=“”
FORM CONTROL LABELS
<input type=“text” id=“name” name=“name”><label for=“name”> Your name, please.</label>
<label> Your name, please. <input type=“text” name=“name”></label>
NAVIGABLE BY KEYBOARD
SHOW FOCUS OUTLINE
FOLLOW USER FOCUS
TABINDEX-1 MAKE FOCUSABLE0>0
NATURAL ORDERDON’T
SECTIONINGheader
footer
sectionaside
nav
article
main
search
HEADINGSH1…H6
HEADING LEVEL 1
HEADING LEVEL 2 HEADING LEVEL 3
HEADING LEVEL 2 HEADING LEVEL 3 HEADING LEVEL 4
SKIP LINKS
CAPTCHASGUILTY BY DEFAULT. PROVE YOUR INNOCENCE!
HARD TO SEE
HARD TO HEAR
HARD TO UNDERSTAND
DON’T DISABLE VIEWPORT ZOOM
<meta name=“viewport” content=“ width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1; ” >
<meta name=“viewport” content=“ user-scalable=no; “ >
PROGRESSIVE ENHANCEMENT
HTML
CSS
JAVASCRIPT
SEPARATION OF
CONCERNS
MAKE IT WORK
RESPONSIVE DESIGN
JAVASCRIPT ANGULARIFY
YOUR REACTIVE ELECTRON UI
TM
HIJACK THE DOM
ASYNC REQS ROUTING LINKS -> BUTTONS LOCALSTORAGE MODALS MESSAGES
FEATURE DETECTION
MODEL: COMPOSE
FUNCTIONS
VIEW: COMPOSE SNIPPETS
CONTROLLER: CONTENT
NEGOTIATION
TOOLS
DEQUE’S AXE, WAVE CHROME TOOLS TENON.IO TPG CONTRAST CHECKER FILAMENT GROUP TOOLS
HTTPS://WWW.W3.ORG/WAI/ER/TOOLS/
VOICEOVERNVDAJAWS
DOLPHIN (SUPERNOVA)
ORCADRAGON
ASSISTIVE TECHNOLOGY
LINKS
WAI: HTTP://WWW.W3.ORG/WAI/
WCAG: HTTP://WWW.W3.ORG/WCAG/
WCAG QUICKREF: HTTPS://WWW.W3.ORG/WAI/WCAG20/QUICKREF/
WUHCAG: HTTP://WUHCAG.ORG
BOOKS
“APPS FOR ALL”, H. PICKERING
“ADAPTIVE WEB DESIGN”, GUSTAFFSON
“A WEB FOR EVERYONE”, HORTON
“DESIGNING WITH PROGR. ENH.”, FILAMENT GROUP
“A BOOK APART” SERIES
NORMAN/NIELSEN GROUP PUBLICATIONS
“THE DESIGN OF EVERYDAY THINGS”, NORMAN
THANK YOU!
JOB VAN ACHTERBERG @DETONITEPD5JOB
YOU’RE AWESOME.