Skip to navigation content (Press Enter).

JavaScript and JQuery Keyboard Events

Lesson 1 of Section 4

At this point, you've learned all the content necessary for Administrators, Web Contributors, and Web Designers. Most people with this training along with proper conventional web design techniques will be able to create a WCAG 2.0 AA compliant web page, however there are additional techniques if you plan on creating special widgets and dynamic content systems on either a front end (jQuery, Javascript) or back end (PHP, CFML, ASP, etc.) scripting language. If not done correctly, you can break an otherwise compliant web template. Please continue with the training if you plan on going into custom code and widget development.

The use of JavaScript and JQuery bring the ability to respond to User Interface (UI) events and create dynamic web applications. This allows web developers create a rich user experience and reduce the steps that an end user needs to take to complete a task. However, it is important to be aware that not all users interface with a webpage in the same way.

To be considered accessible, a webpage needs to allow both the mouse and keyboard to perform any action (as discussed in Section 3.2). All functionality should be accessible by both the keyboard and mouse. When developing with JavaScript and JQuery, it is essential to also track keyboard events whenever you track mouse events.

Keyboard Events

The majority of mouse events have an equivalent keyboard event that it should be paired with to ensure accessibility. The following tables are a list of the most common JavaScript and JQuery events.

Javascript Events

Mouse Event Keyboard Event
mousedownkeydown
mouseupkeyup
click1keypress
mouseoverfocus
mouseoutblur

1 - Most browsers enable keyboard accessibility by applying the click event when an element is activated. Therefore it is usually safe to assume that keyboard users can activate any element that they can navigate to.

JQuery Events

Mouse Event Keyboard Event
click()1keypress()
dblclick()2
mouseup()keypup()
mousedown()keydown()
mousemove()3
mouseover()focus()
mouseout()blur()
mouseenter()focusin()
mouseleave()focusout()
hover()3

1 - Most browsers enable keyboard accessibility by applying the click event when an element is activated. Therefore it is usually safe to assume that keyboard users can activate any element that they can navigate to.

2 - There is no equivalent keyboard event to dblclick. Unless there is already a keypress event, the best practice here is to not create a double key press event, but to have a keypress event call the dblclick event.

3 - No equivalent keyboard events exist for the mousemove or hover events. In most cases mouseover/mouseenter or mouseout/mouseleave should be preferred for accessibility.

jQuery Techniques

The common Javascript API that McMaster uses is jQuery. Many developers will create slick interfaces and simplified browsing techniques that make browsing web pages within the McMaster domain a more rewarding and interactive experience, however many designs only account for mouse-only interaction. The goal of this lesson is to challenge you to think more about keyboard-based interaction and accessibility.

The following quotes are no longer referenced to the WCAG 2.0 guidelines, but instead are common tips and practices in order to make a proper jQuery page with web accessibility in mind.

Avoid using non-focusable items like <div> to capture $.click() actions. Instead use focusable items like <a> to allow keyboard focus.

It is common to see jQuery plugins and pages use <div> elements to capture actions for accordions and other similar widgets. While this is great for a mouse user who can click on anything, the keyboard user cannot actually focus on these types of elements unless extra attributes are defined (the "tabindex" attribute), and using these extra attributes is bad practice. Instead, <a> elements will provide keyboard focus while also sending a non-visual user to a proper section by using anchor links. Make sure that you have the href attribute set to an anchor and not simply a "#" or else a keyboard user will be sent back to the start of the page (an undesirable action).

Avoid using the $.hover() action capture plugin.

Some designers like to user mouse hovers to create overviews or splash landings that give the user an synopsis of information. The hover action can display information but once the mouse is removed from the actionable item, the information will disappear. This will happen to a keyboard user too, and a keyboard user will only be able to read what they are focused on. For example, if a section named "Welcome" has a header that expands information when the header has a mouse hovering over it,

Examples

Here is an example of an inaccessible feature. The button here has a tooltip that only appears on mouse events. A user with a keyboard can 'click' the button by activating the element, but an accessible tool should allow users access to all functionality including this tooltip.

<button id='button'>Hello</button> 
<span id='tooltip'></span> 
 
$(function(){ 
        $("#button").mouseover(function(){ 
                $( "#tooltip" ).text("I'm a tooltip!"); 
        }); 
        $("#button").mouseout(function(){ 
                $("#tooltip").text(""); 
        }); 
});

To add access to the same functionality via keyboard input, simply call the mouse events from within the equivalent keyboard events.

$(function(){ 
        $("#button").mouseover(function(){ 
                $( "#tooltip" ).text("I'm an accessible tooltip!"); 
        }); 
        $("#button").mouseout(function(){ 
                $("#tooltip").text(""); 
        }); 
        $("#button").focus(function(){ 
                $(this).mouseover(); 
        }); 
        $("#button").blur(function(){ 
                $(this).mouseout(); 
        }); 
});

Alternatively, separate the logic into a function and call it from within the events.

$(function(){ 
       $("#button").mouseover(function(){ 
            tooltip(); 
        }); 
        $("#button").mouseout(function(){ 
            tooltipClear(); 
        }); 
        $("#button").focus(function(){ 
            tooltip(); 
        }); 
        $("#button").blur(function(){ 
            tooltipClear(); 
        }); 
}); 
 
function tooltip() { 
        $( "#tooltip" ).text("I'm an accessible tooltip!"); 
} 
 
function tooltipClear() { 
        $("#tooltip").text(""); 
} 

Test Your Knowledge

Take the test or continue to the next lesson

Sources

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at www.mcmaster.ca/uts/macid

Service Desk

Client Self Service:
https://servicedesk.mcmaster.ca
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Email: uts@mcmaster.ca
Location: Main Campus BSB Rm. 245
Service Catalogue:
http://www.mcmaster.ca/uts

Great Idea Site

Great Idea