Разрыв фокуса клавиатуры с помощью группы радиокнопок

Question

Кажется, все просто, но для меня это было немного головокружением. Учитывая следующий (действительный xhtml переходный) код:

<form action="weird.html">

           <label for="test1">T1</label>
           <input type="radio" id="test1" name="test" value="1" />

           <label for="test2">T2</label>
           <input type="radio" id="test2" name="test" value="2" />

           <label for="test3">T3</label>
           <input type="radio" id="test3" name="test" value="3" />

           <label for="test4">T4</label>
           <input type="radio" id="test4" name="test" value="4" />

           <label for="test5">T5</label>
           <input type="radio" id="test5" name="test" value="5" />

        </form>

Почему я не могу переключаться между переключателями? Эта проблема, по-видимому, связана с тем, что все они имеют один и тот же атрибут имени, но это кажется мне довольно нелогичным в плане доступности. Почему состояние фокуса применяется только к одному? Это потому, что группа рассматривается как один элемент? Являются ли здесь ключи доступа единственным не-Javascript решением?

Answer 1

Вы фактически используете клавиши со стрелками для перемещения внутри переключателей, потому что, как вы сказали, они рассматриваются как один элемент. Это нормальное поведение.

Answer 2

Как сказали Джеймс и Тату, это нормально, я не знаю, использовали ли вы "TABINDEX", это может сработать.

<input type="radio" id="test5" name="test" value="5" tabindex="5" />

Но так как они рассматриваются как один элемент, это может не сработать.

Answer 3

Да, каждая группа переключателей рассматривается как один элемент формы - если вы хотите пропустить элементы группы, используйте клавиши со стрелками. Это имеет смысл; если вы вкладываете длинную форму с группой из 10 переключателей на полпути вниз, вы будете раздражены, если вам придется переходить по всем 10 параметрам радио, прежде чем перейти к следующему элементу формы.

Если они не в одной группе, вы можете переключаться между ними. В приведенном ниже примере T5 получит отдельную фокусировку вкладки для остальных:

<form action="weird.html">

       <label for="test1">T1</label>
       <input type="radio" id="test1" name="test" value="1" />

       <label for="test2">T2</label>
       <input type="radio" id="test2" name="test" value="2" />

       <label for="test3">T3</label>
       <input type="radio" id="test3" name="test" value="3" />

       <label for="test4">T4</label>
       <input type="radio" id="test4" name="test" value="4" />

       <label for="test5">T5</label>
       <input type="radio" id="test5" name="test2" value="5" />

    </form>