Доступность - порядок фокусировки для выбора радио с подсказками

Question

У меня есть группа из 3 радиоприемников, у каждого радиоприемника есть всплывающая подсказка. Я не уверен, в каком порядке каждый из них должен получить фокус клавиатуры?

Должно ли это быть ... 1. Первый выбор радио 2. Первый соответствующий наконечник 3. Второй радио 3. Второй наконечник и т. Д.

Answer 1

Как правило, всплывающая подсказка не подходит для нормальной фокусировки, поскольку вы никогда не будете напрямую с ней взаимодействовать.

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

Вы можете использовать aria-live, чтобы текст всплывающей подсказки произносился программами чтения с экрана, когда он появляется на экране.

Answer 2

У вас действительно нет выбора, если вы используете нативный <input type='radio'>. Даже если ваш код выглядит так:

<input type="radio" name="pet" id="r1" value="dog"><label for="r1">Dog</label> <a href='#'>tooltip 1</a><br>
<input type="radio" name="pet" id="r2" value="cat"><label for="r2">Cat</label> <a href='#'>tooltip 2</a><br>
<input type="radio" name="pet" id="r3" value="fish"><label for="r3">Fish</label> <a href='#'>tooltip 3</a><br>

После выбора переключателя группа переключателей действует как одна вкладка. Активная кнопка определяет, где в порядке вкладок она находится. В приведенном выше случае, когда выбрано «Cat», порядок вкладок будет «tooltip 1», радиогруппа, «tooltip 2», «tooltip 3». Если был выбран «Собака», порядок был бы радиогруппой, «подсказка 1», «подсказка 2», «подсказка 3».