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.
Browser support
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.
Examples
Place the following code in the <head> of your XHTML document.
Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.keyboard-focus.js"></script>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 :focus pseudo-selector).
Working example
A complete demonstration of the keyboard focus plugin is available.
Download
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.
Package
Download the complete keyboard focus 0.3 example package (.zip)
By Following Web Content Accessibility Guidelines (WACG 2.0) in WordPress | WordpressIntegration.Com - Blog December 30, 2011 - 10:42 pm
[…] If your theme does not show the keyboard focus then you can make use of Irama Keyboard Focus jQuery Plugin. […]
By Managing :focus styles without breaking accessibility | Articles in IT and more July 10, 2014 - 1:28 am
[…] to this problem, but I found a perfectly simple solution by Andrew Ramsden over on his site at irama.org. Andrew’s script uses jQuery to watch the body for the mousedown and keydown events and saves […]
By Managing :focus styles without breaking accessibility | WordPress Coders - Articles July 10, 2014 - 2:09 am
[…] to this problem, but I found a perfectly simple solution by Andrew Ramsden over on his site at irama.org. Andrew’s script uses jQuery to watch the body for the mousedown and keydown events and saves […]