Question

I have designed a HTML for with the tabindex set to the fieds. There are 3 fieldsets. The lower fieldset contains the submit tab with the proper tabindex specified. But the tab is not pointing to the tag. After fieldset2 it is moving directly to fieldset.

Please find the following code described:

<form action="#" method="post" id="registrationfrm">
            <fieldset id="personalinfo">
            <div class="fieldwrapper">
                <label for="register_firstname">first name</label> 
                <div class="inputwrapper">    
                    <input type="text" tabindex="201" value="" name="register_firstname" id="register_firstname">
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_lastname">last name</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="202" name="register_lastname" id="register_lastname">
                </div>
            </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_industry">industry</label>
                <div class="inputwrapper">

<select  tabindex="203" id="register_industry" name="register$industry">
<option value="">--- please select an industry ---</option>
<option value="adagency">Ad Agency/Public Relations</option>
<option value="other">Other</option>
</select>
</div>
            </div>        
            <div class="fieldwrapper">
                <label for="register_role">role</label>
                <div class="inputwrapper">
                    <select tabindex="204" id="register_role" name="register_role">
<option value="">--- please select a role ---</option>
<option value="Education">Educator/Student</option>
<option value="MktSales">Marketing/Sales</option>
</select>
                </div>
            </div>
            <div class="clear"></div>      
            <div class="fieldwrapper">
                <label for="register_loginname">user name</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="205" name="register_loginname" id="register_loginname">
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_emailaddress">email address</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="206" name="register_emailaddress" id="register_emailaddress">
                </div>
            </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_password">password</label>
                <div class="inputwrapper">
                    <input type="password" value="" tabindex="207" name="register_password" id="register_password">
                </div>
             </div>
            <div class="fieldwrapper">
                <label for="register_passwordconfirm">confirm password</label>
                <div class="inputwrapper">
                    <input type="password" tabindex="208" value="" name="register_passwordconfirm" id="register_passwordconfirm">
                </div>
             </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_securityquestion">security question</label>
                <div class="inputwrapper">
<select tabindex="209" id="register_securityquestion" name="register$securityquestion">
<option value="">--- please select a question ---</option>
<option value="School">What was the name of your elementary school?</option>
</select>
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_securityanswer">security answer</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="210" title="security answer" value="" name="register_securityanswer" id="register_securityanswer">
                </div>
            </div>
            <div class="clear"></div>
        </fieldset>
        <fieldset id="registrationcheckboxes">
            <label for="register_agree"><input type="checkbox" name="register_agree" id="register_agree" class="checkbox {validate:{required:true, messages:{required:'Please review and accept the terms and conditions. If you do not agree to the terms and conditions please use the website as our guest.'}}}" tabindex="211" value="true">&nbsp;I accept Neenah's terms and conditions.</label>
            <div id="register_agreetoterms_exception"></div>
            <label for="register_receiveemails"><input type="checkbox" checked="" name="register_receiveemails" id="register_receiveemails" tabindex="212" value="true">&nbsp;YES, I would like to receive occassional emails about Neenah Paper news and special offers.</label>
        </fieldset>
        <fieldset id="submitsection">
                <a tabindex="213" id="registration_submit" href="#">register account</a>
        </fieldset>
            </form>

CSS

#registration .fieldwrapper {
display:inline;
float:left;
padding:0 3px;
}


.inputwrapper {
display:block;
font-size:12px;
padding-bottom:10px;
}


a#registration_submit {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/global/CreateNewAccountSubmit.png) no-repeat scroll 0 0;
float:left;
height:21px;
position:relative;
text-indent:-9000px;
width:160px;
}

I would be very glad to have your sugestion.

Thanks,
Nirmal

Answer 1

I tried your code, and it does give focus to the registration link. But the registration link isn’t shown due to the text indentation being set to -9000px. In order to do so, you can use the focus pseudo class and remove the text indentation. E.g.

a#registration_submit:focus {
    text-indent:0;
}

Keep in mind that this doesn’t work in the older IE browsers. To fix that, you might have to resort to JavaScript.