Доступность HTML-формы: возможно ли изменить порядок 'next-focus-field'? - PullRequest
Новая
       14

Доступность HTML-формы: возможно ли изменить порядок 'next-focus-field'?

1 голос
/ 21 января 2011

Извините за плохой заголовок, я постараюсь объяснить как можно яснее;)

Предположим, у нас есть такая форма: 

<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>

Доступность браузера по умолчанию говорит, чтоесли я фокусируюсь на поле code-1 и нажимаю <Tab>, фокус переходит к title-1, затем к price-1, code-2, title-2 и т. д., следуя порядку ячейки таблицы.

Моя цель состоит в том, чтобы изменить это поведение, чтобы «сгруппировать» поля цен вместе: сосредоточив внимание на price-1 и нажав <Tab>, следует указать на price-2.

Я знаю, что это можетможно разделить таблицу, как 

<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>

Но если возможно, я бы хотел избежать разделения таблицы.

Кто-нибудь знает решение для кросс-браузерного не-взлома?

1 Ответ

4 голосов
/ 21 января 2011

Вы хотите использовать атрибут tabindex : 

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