The keyboard focus plugin makes it easy to detect keyboard focus (as opposed to mouse focus).
Strong/clear focus highlighting for links and UI elements has great accessibility benefits, but it can also detract from the appeal of a site/application or distract users who are not used to this type of UI feedback. It is keyboard and alternate input device users that benefit most from strong/clear focus highlighting. This plugin allows you to style elements focused via keyboard navigation clearly while leaving elements focused via mouse events with default highlighting (or at least less dramatic highlighting).
This plugin replicates the default behaviour of the Chrome browser (as of version 4) across all browsers. Chrome gives strong yellow/orange highlighting to links/inputs that have received focus via the keyboard.
The plugin has been tested under the following browsers
- Firefox (3.6)
- Internet Explorer (6, 7, 8 )
- Opera (10.5)
- Safari (4)
- Chrome (4)
The plugin currently has no visible effect in browsers that don’t support the CSS
outline property (for example: Internet Explorer 6 and 7). You may however use the classes applied by this plugin to add your own focus styles for these browsers.
Place the following code in the
The plugin will be initialised automatically once the DOM is ready.
By default the plugin will add a class of
mouse-focus to all elements that gain focus using the mouse.
The plugin will also add a class of
focus to all elements that gain focus (this is useful for styling for browsers like IE6 that don’t support the
A complete demonstration of the keyboard focus plugin is available.
keyboard focus is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.
Download the complete keyboard focus 0.3 example package (.zip)