Tab Index on div

Question

Please see the form HTML code below

<form method="post" action="register">      
    <div class="email">
        Email   <input type="text" tabindex="1" id="email" value="" name="email">                   </div>
    </div>
    <div class="agreement">
        <div tabindex="2" class="terms_radio">
            <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
                <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
            </div>
        </div> 
    </div>
    <div class="form_submit">
        <input type="button" tabindex="3" value="Cancel" name="cancel">
        <input type="submit" tabindex="4" value="Submit" name="submit">         
    </div>
</form>

Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.

I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,

Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?

Answer 1

DIV elements are not compatible with tabindex in HTML4).

(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Essentially anything you would expect to be able to hold focus; form elements, links, etc.

What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.

Stick this at the bottom of your body tag to grab jQuery from the Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Then something like this would probably do the trick:

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});

Answer 2

Yes! There is a spec for it, its called WAI-ARIA and its for accessibility : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

Answer 3

You could simply change the tabindex value from 2 to 0.

<div tabindex="0" class="terms_radio">

This provides the default focus state that goes with the flow of your code.

https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

Answer 4

You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use

input:focus+label {}

to style the label

Answer 5

jSFiDDLE

$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

setTabindexLimit() function two attribute 10 which is last Tabindex in Div and Selector_With_Where_Tab_Index_You_Want is the class or ID of div In which you want tabindexto repeat.