html - 嵌套Radio元素的处理方式就像它们在DOM上都处于同一级别一样

我有一个可访问性难题。我制作了自己的自定义单选按钮，并且试图使它们易于访问。

我有嵌套的单选按钮。有一个父母，您可以在其中选择所需的宠物类型，然后在子无线电部分中选择所有宠物配件，并选择第三种配件颜色。

问题在于，当您使用箭头键进行导航时，它会自动开始遍历子选项。没有办法浏览。

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

最佳答案

也许尝试将tabindex="0"添加到您的主要广播输入中