Multiple Forms On One Html Page: How To Restrict Tabbing To A Single Form?

August 20, 2024 Post a Comment

The site I'm currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute p

Solution 1:

The site I'm currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute positioning and javascript the user "pans" across the site from page to page.

Here's an alternate approach that might side-step this issue, and could end up being more accessible.

I'm assuming you have some elements on that page that you use to trigger the panning from one sub-page to the other?

If so, basic idea here is that when any page is "scrolled off", hide that 'sub-page' (presumably some container DIV) with display:none or visibility:hidden.

The key issue here is that content hidden with either of these two methods is non-tabbable, so the user can't accidentally tab into those hidden pages. Also importantly from an accessibility point of view, screenreaders know to ignore content that's marked up this way, so they will only read the current page (which is consistent with what a sighted user sees), not the entire page.

Solution 2:

Why not increment your tabindex by, say, 100, per form?

So form 1 will have tabindeces running from 100-112, form 2 will have tabindex from 200-234, form 3 will have tabindex running from 300-314...

Solution 3:

Okay, I've decided to write my own solution that works in all major browsers (except Safari, but more on that later). Basically, how it'd work is that you assign a class to the last "tab-able" element in your form, which is usually the submit button, called 'lastInForm'. Simple HTML would look like this:

<formaction="action.php"><fieldset><inputid="input1"name="input1"type="text"placeholder="text here" /></fieldset><fieldset><inputid="input2"name="input2"type="text"placeholder="text here" /></fieldset><fieldset><inputid="input3"name="input3"type="text"placeholder="text here" /></fieldset><buttonclass="lastInForm"type="submit">I'm last</button></form>

Using the latest version of jQuery, I listen to the keydown event for that .lastInForm element and check for the keyCode 9, which corresponds to the tab-key. When I receive that event, I look up the closest form element, look up the first input element in said form, and apply focus to it.

Like so:

$(document).ready(function(evt){

$('.lastInForm').live('keydown', function(evt){
    if(evt.keyCode === 9){
        evt.preventDefault();

        var form = $(this).closest('form');
        var input = $('input:first', form);

        if(input !== undefined){
            input.focus();
        }
    }
});
});

... which results neatly in a form where you can loop through the elements using the tab key.

Now I mentioned earlier that it works on all major browser except Safari. The reason for this is that Safari by default doesn't allow you to tab to any element except textfields. To enable this behavior you have to go and check:

Preferences > Advanced > Universal Access: Press Tab to highlight each item on a webpage.

Why Apple has chosen to disable such a helpful accessibility feature by default is beyond me, but all I know is if a user enables this setting my script will work for them too.

Solution 4:

Use tabindex in your (X)HTML

This works flawlessly in Seamonkey 2.0.11 and Chrome 10.0

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><title>untitled</title><metahttp-equiv="content-type"content="text/html;charset=utf-8" /><styletype="text/css">/* absolute positioning */#form1 { position: absolute; bottom: 0; right: 0; width: 40%; }
        #form2 { position: absolute; top: 100px; left: 30px; width: 40%; }
       /* floats
        #form1 {float: right; width: 40%; }
        #form2 {float: left; width: 40%; } */</style></head><body><formid="form1"action="#"method="get"><fieldset><legend>Form 1</legend><div><labelfor="t1">T1</label><inputtype="text"id="t1"name="t1"tabindex="1" /></div><div><labelfor="t3">T3</label><inputtype="text"id="t3"name="t3"tabindex="3" /></div><div><labelfor="t2">T2</label><inputtype="text"id="t2"name="t2"tabindex="2" /></div><inputtype="submit"tabindex="4" /></fieldset></form><formid="form2"action="#"method="get"><fieldset><legend>Form 2</legend><div><labelfor="t6">T6</label><inputtype="text"id="t6"name="t6"tabindex="6" /></div><div><labelfor="t5">T5</label><inputtype="text"id="t5"name="t5"tabindex="5" /></div><inputtype="submit"tabindex="7" /></fieldset></form></body></html>

javascript nyumon

Multiple Forms On One Html Page: How To Restrict Tabbing To A Single Form?

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Multiple Forms On One Html Page: How To Restrict Tabbing To A Single Form?"