Spry

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 the Space bar or the Enter key.

The foundation of keyboard navigation is the tabIndex attribute. This attribute tells the browser how to use the tabs to navigate through the document.

 To enable keyboard navigation on the collapsible panel, add a tabIndex attribute to the collapsible panel tab tag, as follows: 
<div id="CollapsiblePanel1" class="CollapsiblePanel">
	<div class="CollapsiblePanelTab" tabIndex="0">Tab</div>
	<div class="CollapsiblePanelContent">Content</div>
</div>

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.