<html> <head> <title>ARIA Button</title> <script type="text/javascript"> <!-- // Mouse and keyboard event handlers for controls function buttonEvent(event) { if ((event.type == "click" && event.button == 0) || (event.type == "keydown" && (event.keyCode == 32 || event.keyCode ==13))) { alert("Button pressed"); } }; --> </script> <style type="text/css"> span[role="button"] { background-color: #eeeeee; margin: 1em; border: medium outset white;} fieldset { max-width: 50%; } fieldset > div { margin-top: 1em; } </style> </head> <body> <fieldset aria-describedby="groupdesc1"> <legend> Order tracking </legend> <div role="description" id="groupdesc1"> Order tracking has been enabled for all shipments outside of Texas. For information on orders to Texas, please call 1-555-HELP-NOW for an automated recording. </div> <div> <label for="tracknum">Tracking number</label> <input id="tracknum" type="text"> </div> <div> <span role="button" aria-checked="true" tabindex="0" aria-describedby="buttondesc1" onkeydown="return buttonEvent(event);" onclick="return buttonEvent(event);"> Check Now </span> <span role="description" id="buttondesc1"> Check to see if your order has been shipped. </span> </div> </fieldset> </body> </html>