Вложенные элементы Radio обрабатываются так, как будто все они находятся на одном уровне в DOM - PullRequest
Новая
       95

Вложенные элементы Radio обрабатываются так, как будто все они находятся на одном уровне в DOM

1 голос
/ 18 октября 2019

У меня есть проблема доступности. Я сделал свои собственные радио кнопки, и я пытаюсь сделать их доступными дружественным.

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

Проблема в том, что когда вы используете клавиши со стрелками для навигации, он автоматически начинает проходить через подопции. Нет способа пролистать. 

<fieldset>
<form role="radiogroup">
    <div role="radio" aria-checked={selected} checked="selected">
        <div>
          <label>
            <input role="radio" type="radio">
            <div class="icon">
                icon here
            </div>
          </label>
        <div>
        <label>
          Cat
        </label>
      </div>
      <div role="radiogroup">
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="collar">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Collar</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="leash">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Leash</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="Toy">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Toy</div>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div role="radio" aria-checked={selected} checked="selected">
        <div>
          <label>
            <input role="radio" type="radio">
            <div class="icon">
                icon here
            </div>
          </label>
        <div>
        <label>
          Cat
        </label>
      </div>
      <div role="radiogroup">
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="collar">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Collar</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="leash">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Leash</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="Toy">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Toy</div>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    
    <div role="radio" aria-checked={selected} checked="selected">
        <div>
          <label>
            <input role="radio" type="radio">
            <div class="icon">
                icon here
            </div>
          </label>
        <div>
        <label>
          Dog
        </label>
      </div>
      <div role="radiogroup">
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="collar">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Collar</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="leash">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Leash</div>
              </label>
            </div>
          </div>
        </div>
        
        <div aria-checked={selected} checked={selected} role="radio">
          <div aria-label="Toy">
            <div>
              <label>
                <input role="radio" type="radio"/>
                <div>Toy</div>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    
   </div>
 </form>
 </fieldset>

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

Для простоты я остановил цветовой аспект, потому что проблема все еще появляется только с одним из вложенных элементов.

https://whatsock.com/training/matrices/

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

Думая о попытках владеть арией и ареа-активных потомков, но после долгой борьбы там тоже не повезло. https://tink.uk/using-the-aria-owns-attribute/ https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-activedescendant

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

Поэтому, когда вы переходите к первому родительскому параметру, открывается подопция, и по мере навигации вам нужно перемещаться по всем дочерним элементам. чтобы перейти ко второму родительскому варианту.

Мне не обязательно нужно решение, совет для этой ситуации или что-то, что нужно искать, было бы полезно.

Вот как я хочу, чтобы это работало: http://jsfiddle.net/15y2tb0L/2/

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Здесь есть JSFiddle, у которого есть вложенные переключатели: http://jsfiddle.net/15y2tb0L/2/

Взглянув на скрипку и сравнив с моим решением, я понял, что элемент name является ключевым. Когда я сопоставил разные уровни опций с конкретными именами, это решило проблему ADA.

См. Fiddle, но основной вывод заключается в том, что родители имеют одно и то же имя, как name0, дети - name1и дети дети делятся name2.

0 голосов
/ 18 октября 2019

Возможно, попробуйте добавить tabindex="0" к вашим основным радиовходам

...