Search code examples
javascripthtmljsptabindex

Tab Ordering for Javascript "Buttons"

I'm trying to create an HTML form (using JSP) which contains Javascript buttons (rather than actual HTML buttons). Everything works great except that I'm unable to tab to the -based Javascript button after the last tabindex.

For example:

<li class="lineItem">
<f:label path="ownerPostalCode">Postal Code<em>*</em> </f:label><br />
<f:input path="ownerPostalCode" type="text" id="ownerPostalCode"
   class="required" size="15" maxlength="5" value="" tabindex="16" />
</li>
<li class="lineItem">
  <f:label path="ownerPostalCodeFour">+4</f:label><br />
  <f:input path="ownerPostalCodeFour" type="text" 
   id="ownerPostalCodeFour" size="5" maxlength="5" value="" tabindex="17"/>
</li>
<span class="buttonRow">
  <span class="clearButton" onclick="resetFields
    ('registrationForm', 'ownerInfoSection')">Clear Fields</span>
  <span id="continueButton" class="greenButton" tabindex="18" 
    onclick="stepOneToStepTwo()">Continue</span>
  </span>
</span>

I understand that tabindex only works with certain input fields (A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA)--as such, the specification of "tabindex='18'" for the #continueButton doesn't work. The desired behavior is that after tabbing to the "ownerPostalCodeFour" field, the user can tab to the #continueButton as one would with a normal button.

Is this at all possible or am I forced to utilize standard HTML buttons to achieve this behavior?

Thanks.

Solution

  • Not sure what browsers you are supporting, but tabindex="0" works in latest webkit/Firefox/IE. From an accessibility standpoint, using spans is less than optimal though. Why not at least use an <a> tag?