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.