Accessible Javascript Patterns

It is estimated that 20% of the population has a disability of some kind. That’s a lot of users to leave on the curb, if your web app is inaccessible! When talking about web accessibility, we often focus on using the right HTML for the right purpose, setting up the right colour palette. Did you know that the way you write JavaScript also makes or breaks the accessibility of a website ? This talk will show you how great JavaScript can improve the accessibility of your website. We’ll walk through common interaction patterns such as navigation menus, modals, or custom form elements.

Transcript

1. ACCESSIBLE JAVASCRIPT PATTERNS Garance Vallat 1
2. 2 GARANCE FLORE @GaranceVallat Marfeel Web Accessibility
3. TOPICS 3
4. TOPICS 3
5. TOPICS 3
6. TOPICS 3
7. TOPICS 3
24. …AND JAVASCRIPT ? 16
25. …AND JAVASCRIPT ? 17
26. HTML BUTTON <button id="btn_save">Save!</button> <script> function start() { const actionButton = document.querySelector('#btn_save'); actionButton.addEventListener('click', activateActionButton); } function activateActionButton() { alert('Real button clicked!'); } document.addEventListener("DOMContentLoaded", start, false); !</script> 18
27. JAVASCRIPT BUTTON <div id="div_save" tabindex="0" role="button" aria-pressed="false">Save!</div> <script> function start() { const actionButton = document.querySelector('#div_save'); actionButton.addEventListener('click', activateActionButton); actionButton.addEventListener('keydown', actionButtonKeydownHandler); actionButton.addEventListener('keyup', actionButtonKeyupHandler); } function actionButtonKeydownHandler(event) { if (event.keyCode !!=== 32) { event.preventDefault(); } else if (event.keyCode !!=== 13) { event.preventDefault(); activateActionButton(); } } function actionButtonKeyupHandler(event) { if (event.keyCode !!=== 32) { event.preventDefault(); activateActionButton(); } } function activateActionButton() { alert('Fake button clicked!'); } document.addEventListener("DOMContentLoaded", start, false); !</script> 19
28. 20 <form> <input type="number"> !</form>
29. 20 <form> <input type="number"> !</form> .shop { font-size: 18px; }
30. 20 <form> <input type="number"> !</form> .shop { font-size: 18px; }
31. 20 <form> <input type="number"> !</form> .shop { font-size: 18px; }
32. 20 <form> <input type="number"> !</form> .shop { font-size: 18px; }
33. 20 <form> <input type="number"> !</form> .shop { font-size: 18px; }
34. DEMO TIME 21
35. YOUR STANDARD NAVIGATION MENU 22
51. this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this)); this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this)); this.domNode.addEventListener('focus', this.handleFocus.bind(this)); this.domNode.addEventListener('blur', this.handleBlur.bind(this)); 29 MenuBarItem constructor
52. handleMouseover() { this.hasHover = true; this.popupMenu.open(); } handleFocus() { this.menu.hasFocus = true; this.popupMenu.open(); } 30
57. TAKING ADVANTAGE OF THE KEYBOARD 34
59. 36 this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this)); this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this)); this.domNode.addEventListener('focus', this.handleFocus.bind(this)); this.domNode.addEventListener('blur', this.handleBlur.bind(this)); MenuBarItem constructor
60. 37 handleMouseover() { this.hasHover = true; this.popupMenu.open(); } handleFocus() { this.menu.hasFocus = true; }
61. 37 handleMouseover() { this.hasHover = true; this.popupMenu.open(); } handleFocus() { this.menu.hasFocus = true; } this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
62. handleKeydown(event) { let endEvent = false; switch (event.keyCode) { case …: endEvent = true; break; case …: !// spoilers break; } if (endEvent) { event.stopPropagation(); event.preventDefault(); } } 38
63. case KEY_CODES.RETURN: const clickEvent = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true }); event.currentTarget.dispatchEvent(clickEvent); endEvent = true; break; 39
64. case KEY_CODES.SPACE: case KEY_CODES.DOWN: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToFirstItem(); endEvent = true; } break; 40 Opening popup menu 1/4
65. case KEY_CODES.HOME: case KEY_CODES.PAGEUP: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToFirstItem(); endEvent = true; } break; 41 Opening popup menu 2/4
66. case KEY_CODES.UP: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToLastItem(); endEvent = true; } break; 42 Opening popup menu 3/4
67. case KEY_CODES.END: case KEY_CODES.PAGEDOWN: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToLastItem(); endEvent = true; } break; 43 Opening popup menu 4/4
68. case KEY_CODES.LEFT: this.menu.setFocusToPreviousItem(this); endEvent = true; break; case KEY_CODES.RIGHT: this.menu.setFocusToNextItem(this); endEvent = true; break; 44
69. case KEY_CODES.TAB: this.popupMenu.close(true); break; 45 Exit component 1/2
70. case KEY_CODES.ESC: this.popupMenu.close(true); break; 46 Exit component 2/2
71. default: if (isPrintableCharacter(char)) { this.menu.setFocusByFirstCharacter(this, char); endEvent = true; } break; 47
72. handleKeydown(event) { let endEvent = false; switch (event.keyCode) { case KEY_CODES.SPACE: case KEY_CODES.DOWN: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToFirstItem(); endEvent = true; } break; case KEY_CODES.RETURN: !// Create simulated mouse event to mimic the behaviour of ATs !// and let the event handler handleClick do the housekeeping. const clickEvent = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true }); event.currentTarget.dispatchEvent(clickEvent); endEvent = true; break; case KEY_CODES.LEFT: this.menu.setFocusToPreviousItem(this); endEvent = true; break; case KEY_CODES.RIGHT: this.menu.setFocusToNextItem(this); endEvent = true; break; case KEY_CODES.UP: if (this.popupMenu) { this.popupMenu.open(); this.popupMenu.setFocusToLastItem(); endEvent = true; } break; 48 case KEY_CODES.HOME: case KEY_CODES.PAGEUP: this.menu.setFocusToFirstItem(); endEvent = true; break; case KEY_CODES.END: case KEY_CODES.PAGEDOWN: this.menu.setFocusToLastItem(); endEvent = true; break; case KEY_CODES.TAB: this.popupMenu.close(true); break; case KEY_CODES.ESC: this.popupMenu.close(true); break; default: if (isPrintableCharacter(char)) { this.menu.setFocusByFirstCharacter(this, char); endEvent = true; } break; } if (endEvent) { event.stopPropagation(); event.preventDefault(); } }
73. Find the demo on garance.dev & garance.dev/basic Find the code on github.com/garancev/accessible-javascript-patterns 49
74. DEMO TIME 2 50
75. DID YOU SAY FOCUS ? 51
82. document.addEventListener( 'keyup', event !=> this.focus.handleEscape(event) ); 54 AccessibleModal constructor
83. openDialog(dialogId, focusAfterClosed, focusFirst) { new Dialog(dialogId, focusAfterClosed, focusFirst, this.focus); } 55 AccessibleModal
84. openButton.addEventListener('click', )); moreButton.addEventListener('click', )); okButton.addEventListener('click', )); 56 AccessibleModal
85. openButton.addEventListener('click', )); moreButton.addEventListener('click', )); okButton.addEventListener('click', )); 56 event !=> this.openDialog( 'mainDialog', event.target AccessibleModal
86. openButton.addEventListener('click', )); moreButton.addEventListener('click', )); okButton.addEventListener('click', )); 56 event !=> this.openDialog( 'mainDialog', event.target event !=> this.openDialog( 'moreInfoDialog', event.target, ‘more_para_1' AccessibleModal
87. openButton.addEventListener('click', )); moreButton.addEventListener('click', )); okButton.addEventListener('click', )); 56 event !=> this.openDialog( 'mainDialog', event.target event !=> this.openDialog( 'moreInfoDialog', event.target, ‘more_para_1' event !=> this.replaceDialog( 'confirmDialog', undefined, ‘confirm-close’ AccessibleModal
88. 57 replaceDialog(newDialogId, newFocusAfterClosed, newFocusFirst) { const topDialog = this.focus.getCurrentDialog(); if (topDialog.dialogNode.contains(document.activeElement)) { topDialog.replace( newDialogId, newFocusAfterClosed, newFocusFirst ); } } AccessibleModal
91. Find the demo on garance.dev Find the code on github.com/garancev/accessible-javascript-patterns 60
96. THANK YOU! More code examples: 
 www.w3.org/TR/wai-aria-practices/examples @GaranceVallat for links Birds from Audubon’s birds of America All other pictures from unsplash.com 65