A jQuery plugin for making clickable elements more accessible. Buttonlike.js…
- Defines elements as buttons with role="button"
- Gives them tabindex="0" so they are focusable
- While focused, triggers the faux buttons' click events on ENTER and SPACE keydown events
- Allows you to optionally define relationships between the "button" and the element(s) it affects using aria-controls
- Allows you to optionally make the button a "toggle" using aria-pressed (true / false)
Let's turn a span with a class of .controller-span into a workable button. In this example, the span is a "toggle" (exists in on or off states) and is used to control the state of a <div> with an ID of "contolled-div". One would include the plugin, then write the following initialization code:
$('.contoller-span').buttonlike({'pressed': false, 'controls':'controlled-div'});
Since we are using aria-pressed (via the "pressed" option) we must choose an initial state. In the above example, this is set to false. If the button is not a "toggle", simply leave this option to default to null. This example button only controls the one element (#controlled-div) but it is possible to control multiple elements by entering a value for the "controls" option as a space separated list.
The generated markup for our <span> will look like the following. Naturally, the aria-pressed attribute toggles between true and false per click.
<span role="button" aria-controls="controlled-div" aria-pressed="false">click me!</span>
For more examples, refer to my blog post on the plugin: Accessible Buttons JQuery Plugin.
There are only two options. All "buttonlike" buttons receive focus and keyboard control as standard. These options both default to null:
pressed: null,
controls: null
Some elements really shouldn't be made into "buttons" at all. Of these, the most obvious are the grouping elements ul, ol, menu, dl and table. If you try to use buttonlike.js with these, it will refuse and write an error to the console. So there.