Even backend developers often find themselves writing frontend code. How can we make sure our websites and web applications work for everyone? And how does this influence the technical choices we make, even on the backend side?

1. MAKING YOUR WEB
APPLICATION
WORK FOR EVERYONE
YAPC::EU:2016, Cluj-Napoca, Romania

2. 👋

3. JOB VAN ACHTERBERG
@DETONITE
PD5JOB

4. 💾

5. 🚀

6. 🚒

7. INCLUSIVE DESIGN

8. UNIVERSAL DESIGN

10. ♿

11. 🚲

12. 👶

13. 👴

14. 🏂

19. 🚦

20. SEE
HEAR
DISTINGUISH
FEEL

21.
MAKE IT USABLE
MAKE IT ACCESSIBLE

23. ❓

24. ❓

25. “ON THE CONTRARY, I
THINK THE BLINK TAG IS
AN EXCELLENT IDEA!”

26. “ON THE CONTRARY, I
THINK THE BLINK TAG IS
AN EXCELLENT IDEA!”

27. “THE POWER OF THE WEB IS
IN ITS UNIVERSALITY.
ACCESS BY EVERYONE
REGARDLESS OF DISABILITY
IS AN ESSENTIAL ASPECT.”

28. “THE POWER OF THE WEB IS
IN ITS UNIVERSALITY.
ACCESS BY EVERYONE
REGARDLESS OF DISABILITY
IS AN ESSENTIAL ASPECT.”

29. HOW?

30. YES WAIHTTPS://WWW.W3.ORG/WAI/

31. WEB ACCESSIBILITY INITIATIVE

32. WCAG
HTTPS://WWW.W3.ORG/TR/WCAG20/

33. WEB
CONTENT
ACCESSIBILITY
GUIDELINES

34. 4 PRINCIPLES OF A11Y
1. PERCEIVABLE
2. OPERABLE
3. UNDERSTANDABLE
4. ROBUST

35. GOOD DESIGN
=
POUR DESIGN

36. “A11Y”

37. WAI-ARIA
HTTPS://WWW.W3.ORG/WAI/INTRO/ARIA

38. 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>

39. NATIVE ROLES
BUTTON BUTTON
ANCHOR LINK
DIV[ROLE=LINK] LINK

40. DEMO TIME!

41. MAKE IT VISIBLE
MAKE IT USABLE
MAKE IT GROKABLE
MAKE IT FLEXIBLE

42. WHY?

43. QUALITY

44. PROFIT

45. INDEPENDENCE

47. CRIPPLE-BUDDY™

49. IT’S JOBOUR

50. 💩

51. USE SEMANTIC HTML
ANCHORS GO PLACES
BUTTONS PERFORM ACTIONS
ARIA IF NECESSARY
INDICATE CUSTOM SEMANTICS
PREFER NATIVE SEMANTICS

52. PROPER CONTRAST

53. PROPER CONTRAST

54. PROPER CONTRAST

55. LIGHT TEXT ON WHITE
BACKGROUND
TINY TINY TINY TEXT

56. IMAGE ALT TEXT

57. 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=“”

58. FORM CONTROL
LABELS

59. <input
type=“text”
id=“name”
name=“name”>
<label for=“name”>
Your name, please.
</label>
<label>
Your name, please.
<input
type=“text”
name=“name”>
</label>

60. NAVIGABLE BY KEYBOARD
SHOW FOCUS OUTLINE
FOLLOW USER FOCUS

61. TABINDEX
-1 MAKE FOCUSABLE
0
>0
NATURAL ORDER
DON’T

62. SECTIONING
header
footer
sectionaside
nav
article
main
search

63. HEADINGS
H1…H6

64. HEADING LEVEL 1
HEADING LEVEL 2
HEADING LEVEL 3
HEADING LEVEL 2
HEADING LEVEL 3
HEADING LEVEL 4

65. SKIP LINKS

66. CAPTCHAS
GUILTY BY DEFAULT. PROVE YOUR INNOCENCE!
HARD TO SEE
HARD TO HEAR
HARD TO UNDERSTAND

67. DON’T DISABLE
VIEWPORT ZOOM

68. <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;
“
>

69. PROGRESSIVE
ENHANCEMENT

70. HTML
CSS
JAVASCRIPT

71. SEPARATION
OF
CONCERNS

72. MAKE IT WORK

73. RESPONSIVE
DESIGN

74. JAVASCRIPT
ANGULARIFY
YOUR REACTIVE
ELECTRON UI
TM

75. HIJACK THE
DOM

76. ASYNC REQS
ROUTING
LINKS -> BUTTONS
LOCALSTORAGE
MODALS
MESSAGES

77. FEATURE
DETECTION

78. MODEL:
COMPOSE
FUNCTIONS

79. VIEW:
COMPOSE
SNIPPETS

80. CONTROLLER:
CONTENT
NEGOTIATION

81. TOOLS

82. DEQUE’S AXE, WAVE
CHROME TOOLS
TENON.IO
TPG CONTRAST CHECKER
FILAMENT GROUP TOOLS
HTTPS://WWW.W3.ORG/WAI/ER/TOOLS/

83. VOICEOVERNVDA
JAWS
DOLPHIN (SUPERNOVA)
ORCA
DRAGON
ASSISTIVE TECHNOLOGY

84. LINKS

85. 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

86. BOOKS

87. “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

88. THANK YOU!
JOB VAN ACHTERBERG @DETONITEPD5JOB
YOU’RE AWESOME.