Enable keyboard navigation
Making widgets accessible for keyboard navigation is an important part of every widget. Keyboard navigation lets the user control the widget with arrow keys or custom keys.
The foundation of keyboard navigation is the tabIndex attribute. This attribute tells the browser how to navigate through the document.
To enable keyboard navigation on the
accordion, add a tabIndex attribute to the accordion
container tag, as follows:
<div id="Acc1" class="Accordion" tabIndex="0">
If the tabIndex attribute has a value of zero (0), the browser determines the order, and includes the widget in the tab flow of the page. If the tabIndex attribute has a positive integer value, that widget will receive focus according to the specified place in the tab order.
Note: Using tabIndex on
a div tag is not XHTML 1.0 W3C compliant.
You can also set custom keys for keyboard navigation. Custom keys are set as arguments of the accordion constructor script:
<script type="text/javascript">
var acc3= new Spry.Widget.Accordion("Accordion3", { nextPanelKeyCode: 78 /* n key */, previousPanelKeyCode: 80 /* p key */ });
</script>