Enable all functionality of page available from a keyboard

Enable all functionality of page available from a keyboard

The intent of this resource of HaTeMiLe is provide all functionality of page available from a keyboard interface, to comply the Guideline 2.1.1 Keyboard Accessible of Web Content Accessibility Guidelines (WCAG) 2.0.

To understand the importance of this guideline, read its intention:

When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as by people who must use alternate keyboards or input devices that act as keyboard emulators. Keyboard emulators include speech input software, sip-and-puff software, on-screen keyboards, scanning software and a variety of assistive technologies and alternate keyboards. Individuals with low vision also may have trouble tracking a pointer and find the use of software much easier (or only possible) if they can control it from the keyboard.
Retrieved from Understanding Success Criterion 2.1.1 of WCAG 2.0

How it works?

The library found a inacessible element when it has a mouse event and hasn't a like keyboard event, in JavaScript are two common styles to set a event in element: the generalized addEventListener() and a set of specific on-event handlers. The DOM on-event handlers can be detected by attribute of Document Object Model (DOM) element like element.onclick, element.onmouseover or element.ondrag, but a event added by addEventListener method still not be detected natively, therefore you must add the JavaScript files js/common.js and js/eventlistener.js in page before any JavaScript code, to override the addEventListener method still detect events added.

The following table show the mouse events and your equivalent keyboard events.

Mouse event	Keyboard event	Action of keyboard event
mousedown	keydown	If the key downed is Enter then call the mousedown event.
mouseup	keyup	If the key upped is Enter then call the mouseup event.
click	keypress	If the key pressed is Enter then call the click event.
dblclick	keypress	If the key pressed is Enter then call the dblclick event.
mouseover	focus	Call the mouseover event.
mouseout	blur	Call the mouseout event.
drag	keydown and keyup	If the key pressed is Space then call the dragend event of all dragged elements, unset all dragged elements has dragged, set the element has dragged and call the drag and dragstart events.
dragstart	keydown and keyup	If the key pressed is Space then call the dragend event of all dragged elements, unset all dragged elements has dragged, set the element has dragged and call the drag and dragstart events.
dragenter	focus	If has a element dragged then call the dragenter event.
dragleave	blur	If has a element dragged then call the dragleave event.
dragover	focus	If has a element dragged then call the dragenter event.
dragend	keypress	If the key pressed is Esc then call the dragend event and unset all dragged elements has dragged.
drop	keydown and keyup	If the key pressed is Enter and has a element dragged then call the dragend event of all dragged elements, unset all dragged elements has dragged and call the drop event.

How to use?

1. Add JavaScript files js/common.js and js/eventlistener.js, before any JavaScript code;
2. Add JavaScript files js/hatemile/util/CommonFunctions.js, js/hatemile/util/html/vanilla/VanillaHTMLDOMParser.js (or js/hatemile/util/html/jquery/JQueryHTMLDOMParser.js), js/hatemile/util/html/vanilla/VanillaHTMLDOMTextNode.js, js/hatemile/util/html/vanilla/VanillaHTMLDOMElement.js and js/hatemile/implementation/AccessibleEventImplementation.js;
3. Add a JavaScript file or include the following code before the end of body(</body>):

// Instaciate the HTML Parser.
var htmlParser = new hatemile.util.html.vanilla.VanillaHTMLDOMParser(window.document);

// ...

// Instaciate the hatemile.implementation.AccessibleEventImplementation class to improve the accessibility, making elements events available from a keyboard.
var acessibleEvent = new hatemile.implementation.AccessibleEventImplementation(htmlParser);
// Make all mousedown, mouseup, click and dblclick events of page available from a keyboard.
acessibleEvent.makeAccessibleAllClickEvents();
// Make all mouseover and mouseout events of page available from a keyboard.
acessibleEvent.makeAccessibleAllHoverEvents();
// Make all drag, dragstart, dragenter, dragleave, dragover, dragend and dblclick events of page available from a keyboard.
acessibleEvent.makeAccessibleAllDragandDropEvents();