Keyboard Focus Breaking with Radio Button Group

Question

Кажется простым, но для меня это было немного для меня. Учитывая следующее (Valid 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>