Question

Sorry for the bad title, i’ll try to explain as clear as i can 😉

Assume we have a form like:

<form>
    <table>
        <tr>
            <td><input type="text" name="code-1" /></td>
            <td><input type="text" name="title-1" /></td>
            <td><input type="text" name="price-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="code-2" /></td>
            <td><input type="text" name="title-2" /></td>
            <td><input type="text" name="price-2" /></td>
        </tr>
        <tr>
            <td colspan="2">Total:</td>
            <td colspan="2"><input type="text" name="total" /></td>
        </tr>
    </table>
</form>

The default browser’s accessibility say that if i focus on the field code-1 and press <Tab>, the focus pass to title-1, then to price-1, code-2, title-2 and so on, following the table cell’s order.

My goal is to change this behavior, in order to ‘group’ the prices fields together: focusing on price-1 and pressing <Tab> should point the focus on price-2.

I know this can be done splitting the table like

<form>
    <table>
        <tr>
            <td><input type="text" name="code-1" /></td>
            <td><input type="text" name="title-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="code-2" /></td>
            <td><input type="text" name="title-2" /></td>
        </tr>
        <tr>
            <td colspan="2">Total:</td>
        </tr>
    </table>
    <table>
        <tr>
            <td><input type="text" name="price-1" /></td>
        </tr>
        <tr>
            <td><input type="text" name="price-2" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="total" /></td>
        </tr>
    </table>
</form>

But if possible i’ll like to avoid splitting the table.

Anyone know a cross-browser not-hack solution?

Answer 1

You want to use the tabindex attribute:

<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="3" type="text" name="field2">
<INPUT tabindex="2" type="submit" name="submit">