Skip to navigation content (Press Enter).

Operable Guidelines

Lesson 6 of Section 3


User interface components and navigation must be operable.

Keyboard Functionality

Make all functionality available from a keyboard.

All webpages require this. Not all users have a mouse to navigate through your page. With this in mind, you must always provide a proper marked up page so that keyboards may navigate your page with ease.

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

The best strategy for this section is to provide a webpage that uses <a> tags properly as well as proper Javascript. If you can navigate the page entirely by using the "Tab" key on your keyboard, then your page is compliant. Note that if you're unable to perform certain functions on the keyboard that you could do with a mouse, then you need to revise your page.

Sometimes web designers will make use of the "hover" functionality in both CSS and Javascript. This is discouraged because this feature is associated with the mouse only. If you are providing a mouse-only function, you must ensure that an alternate keyboard method is available to the user. The best approach is to use the onclick attribute. onfocus can also be used, but only if it doesn't force the user into jumping to another part of the page. This can be disorientating to the user.

<a href="#" onclick="doStuff();">Do Stuff</a>

For a list of the proper HTML interactive elements that can be used for keyboard functionality, refer to Technique H91: Using HTML form controls and links.

No Keyboard Trap

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

This section should be self-explanatory. If you simply can't tab your way through an entire web page (from top all the way to the bottom), then it means your web page has a keyboard trap. Check to see if you have hidden <a> elements as well as "applets" that make use of the keyboard in an interactive way. If an applet exists, you should make a tool in the applet that allows the keyboard to escape the applet. This instruction should be described in the applet and perhaps before the applet in text as well!

Test your knowledge!

Take the test or continue to the next lesson.


Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at

Service Desk

Client Self Service:
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Location: Main Campus BSB Rm. 245
Service Catalogue:

Great Idea Site

Great Idea