yapc::eu::2016, how to make your web application work for everyone
TRANSCRIPT
![Page 1: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/1.jpg)
MAKING YOUR WEB APPLICATION
WORK FOR EVERYONEYAPC::EU:2016, Cluj-Napoca, Romania
![Page 2: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/2.jpg)
👋
![Page 3: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/3.jpg)
JOB VAN ACHTERBERG
@DETONITE
PD5JOB
![Page 4: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/4.jpg)
💾
![Page 5: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/5.jpg)
🚀
![Page 6: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/6.jpg)
🚒
![Page 7: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/7.jpg)
INCLUSIVE DESIGN
![Page 8: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/8.jpg)
UNIVERSAL DESIGN
![Page 9: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/9.jpg)
![Page 10: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/10.jpg)
♿
![Page 11: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/11.jpg)
🚲
![Page 12: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/12.jpg)
👶
![Page 13: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/13.jpg)
👴
![Page 14: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/14.jpg)
🏂
![Page 15: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/15.jpg)
![Page 16: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/16.jpg)
![Page 17: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/17.jpg)
![Page 18: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/18.jpg)
![Page 19: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/19.jpg)
🚦
![Page 20: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/20.jpg)
SEEHEAR
DISTINGUISHFEEL
![Page 21: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/21.jpg)
MAKE IT USABLE
MAKE IT ACCESSIBLE
![Page 22: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/22.jpg)
![Page 23: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/23.jpg)
❓
![Page 24: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/24.jpg)
❓
![Page 25: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/25.jpg)
“ON THE CONTRARY, I THINK THE BLINK TAG IS AN EXCELLENT IDEA!”
![Page 26: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/26.jpg)
“ON THE CONTRARY, I THINK THE BLINK TAG IS AN EXCELLENT IDEA!”
![Page 27: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/27.jpg)
“THE POWER OF THE WEB IS IN ITS UNIVERSALITY. ACCESS BY EVERYONE
REGARDLESS OF DISABILITY IS AN ESSENTIAL ASPECT.”
![Page 28: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/28.jpg)
“THE POWER OF THE WEB IS IN ITS UNIVERSALITY. ACCESS BY EVERYONE
REGARDLESS OF DISABILITY IS AN ESSENTIAL ASPECT.”
![Page 29: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/29.jpg)
HOW?
![Page 30: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/30.jpg)
YES WAIHTTPS://WWW.W3.ORG/WAI/
![Page 31: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/31.jpg)
WEB ACCESSIBILITY INITIATIVE
![Page 32: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/32.jpg)
WCAGHTTPS://WWW.W3.ORG/TR/WCAG20/
![Page 33: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/33.jpg)
WEB CONTENT ACCESSIBILITY GUIDELINES
![Page 34: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/34.jpg)
4 PRINCIPLES OF A11Y1. PERCEIVABLE 2. OPERABLE 3. UNDERSTANDABLE 4. ROBUST
![Page 35: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/35.jpg)
GOOD DESIGN =
POUR DESIGN
![Page 36: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/36.jpg)
“A11Y”
![Page 38: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/38.jpg)
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>
![Page 39: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/39.jpg)
NATIVE ROLESBUTTON BUTTON
ANCHOR LINK
DIV[ROLE=LINK] LINK
![Page 40: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/40.jpg)
DEMO TIME!
![Page 41: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/41.jpg)
MAKE IT VISIBLE MAKE IT USABLE MAKE IT GROKABLE MAKE IT FLEXIBLE
![Page 42: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/42.jpg)
WHY?
![Page 43: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/43.jpg)
QUALITY
![Page 44: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/44.jpg)
PROFIT
![Page 45: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/45.jpg)
INDEPENDENCE
![Page 46: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/46.jpg)
![Page 47: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/47.jpg)
CRIPPLE-BUDDY™
![Page 48: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/48.jpg)
![Page 49: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/49.jpg)
IT’S JOBOUR
![Page 50: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/50.jpg)
💩
![Page 51: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/51.jpg)
USE SEMANTIC HTMLANCHORS GO PLACESBUTTONS PERFORM ACTIONS
ARIA IF NECESSARYINDICATE CUSTOM SEMANTICSPREFER NATIVE SEMANTICS
![Page 52: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/52.jpg)
PROPER CONTRAST
![Page 53: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/53.jpg)
PROPER CONTRAST
![Page 54: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/54.jpg)
PROPER CONTRAST
![Page 55: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/55.jpg)
LIGHT TEXT ON WHITE BACKGROUND
TINY TINY TINY TEXT
![Page 56: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/56.jpg)
IMAGE ALT TEXT
![Page 57: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/57.jpg)
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=“”
![Page 58: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/58.jpg)
FORM CONTROL LABELS
![Page 59: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/59.jpg)
<input type=“text” id=“name” name=“name”><label for=“name”> Your name, please.</label>
<label> Your name, please. <input type=“text” name=“name”></label>
![Page 60: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/60.jpg)
NAVIGABLE BY KEYBOARD
SHOW FOCUS OUTLINE
FOLLOW USER FOCUS
![Page 61: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/61.jpg)
TABINDEX-1 MAKE FOCUSABLE0>0
NATURAL ORDERDON’T
![Page 62: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/62.jpg)
SECTIONINGheader
footer
sectionaside
nav
article
main
search
![Page 63: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/63.jpg)
HEADINGSH1…H6
![Page 64: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/64.jpg)
HEADING LEVEL 1
HEADING LEVEL 2 HEADING LEVEL 3
HEADING LEVEL 2 HEADING LEVEL 3 HEADING LEVEL 4
![Page 65: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/65.jpg)
SKIP LINKS
![Page 66: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/66.jpg)
CAPTCHASGUILTY BY DEFAULT. PROVE YOUR INNOCENCE!
HARD TO SEE
HARD TO HEAR
HARD TO UNDERSTAND
![Page 67: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/67.jpg)
DON’T DISABLE VIEWPORT ZOOM
![Page 68: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/68.jpg)
<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; “ >
![Page 69: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/69.jpg)
PROGRESSIVE ENHANCEMENT
![Page 70: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/70.jpg)
HTML
CSS
JAVASCRIPT
![Page 71: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/71.jpg)
SEPARATION OF
CONCERNS
![Page 72: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/72.jpg)
MAKE IT WORK
![Page 73: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/73.jpg)
RESPONSIVE DESIGN
![Page 74: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/74.jpg)
JAVASCRIPT ANGULARIFY
YOUR REACTIVE ELECTRON UI
TM
![Page 75: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/75.jpg)
HIJACK THE DOM
![Page 76: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/76.jpg)
ASYNC REQS ROUTING LINKS -> BUTTONS LOCALSTORAGE MODALS MESSAGES
![Page 77: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/77.jpg)
FEATURE DETECTION
![Page 78: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/78.jpg)
MODEL: COMPOSE
FUNCTIONS
![Page 79: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/79.jpg)
VIEW: COMPOSE SNIPPETS
![Page 80: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/80.jpg)
CONTROLLER: CONTENT
NEGOTIATION
![Page 81: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/81.jpg)
TOOLS
![Page 82: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/82.jpg)
DEQUE’S AXE, WAVE CHROME TOOLS TENON.IO TPG CONTRAST CHECKER FILAMENT GROUP TOOLS
HTTPS://WWW.W3.ORG/WAI/ER/TOOLS/
![Page 83: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/83.jpg)
VOICEOVERNVDAJAWS
DOLPHIN (SUPERNOVA)
ORCADRAGON
ASSISTIVE TECHNOLOGY
![Page 84: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/84.jpg)
LINKS
![Page 85: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/85.jpg)
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
![Page 86: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/86.jpg)
BOOKS
![Page 87: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/87.jpg)
“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
![Page 88: YAPC::EU::2016, How to make your web application work for everyone](https://reader031.vdocuments.mx/reader031/viewer/2022021923/58edaecf1a28abcc468b4709/html5/thumbnails/88.jpg)
THANK YOU!
JOB VAN ACHTERBERG @DETONITEPD5JOB
YOU’RE AWESOME.