Add accessible keyboard navigation to a page, easily. Entirely configurable.
The emphasised letters are hotkeys for quick accessible keyboard navigation.
Pressing the "Keys" button, the list of shortcuts opens:
Open Administrator, Extension, Plugins then search for "Simple AccessKeys", this is the main configuration:
Debug will print to the developers console all information as it searches the menu items
Menu selector is the jQuery selector that points to the A elements of your menu.
UL LI A
Note: this is the most important item of configuration: it is necessary to identify the menu items. If you get no menu items: try using the following jQuery selectors:
a(match any link. Try this only if you get no accessKeys)
nav a, .nav a(match any link inside a nav container, i.e.
nav > ul > li > a(only match top-level a inside a nav ul, i.e.
<nav><ul class='menu'><li class='active'><a href=...)
nav a, aside a, footer a(match top, side, footer menus)
The selectors used here are standard jQuery selectors which are very similar to CSS1-3 selectors: read more about it on jQuery.com.
Exclude Tags is a list of those tags that allow input, and must therefore be excluded from quick navigation
Reserved Letters is a comma separated list of letters which must not be used as shortcuts
Forced assignments will ensure that
a) the menu item with such title will get that letter and
b) no other menu items can have it
Decoration is the markup we'll put around the accessKey. It can be styled from your template style, or you can choose from available classes.
Shows the Legend button.
The Legend button is created automatically. If you however wish to use your own button, simply insert its jQuery selector in the Legend Selector, and it will be used instead.
Simple AccessKeys requires a little bit of styling, we strongly encourage to include this snippet in your template and save your users one download.
- Enable: First of all, have you enabled the plugin? Go to admin - extensions - plugin, find Simple AccessKeys (in system), and enable it.
- Debug: You can trace what the plugin is doing by enabling Debug in its configuration. Then open the developer console (press F12 or CTRL-Shift-I in most browsers) to see what it is doing
- Hover: If you hover over any label in the configuration, an explanation will popup.
- My page exploded: disable the plugin. If you let us know what went wrong, we'll see if we can address it in a future release. We like improving our product!
Keys button doesn't display / doesn't work
- I see the "Keys" button, but nothing happens when I click on it: Check the configuration option "Show Legend" and empty the "Legend selector" field below.
- I don't see the Keys button: Check the configuration option "Show Legend"
- The shortcuts work, but the letters are not coloured: do the items identified with the selector you provided in the configuration contain additional selectors or plain text?
- The shortcuts don't work: is there another plugin on the page listening to keydown events?
No Items / The wrong items are picked up
Usually this happens because the selector does not match your menu items.
- Read the Menu selector section above in the Configuration chapter
- Try working your way out from A to a more precise selector until you find what suits you. You can right click on a menu item, choose "Inspect" or "Analyze", and you will be brought to the DOM. Some browsers even build it for you. For example in Firefox right click in the DOM view on the
<a href="/...tag of a menu item and choose copy->css path)
The show copyright can't be toggled
- The show copyright is only changeable in the paid (commercial) version.
Still lost? Write us! We're always happy to help.