嵌套的 Radio 元素被视为在 DOM 上都处于同一级别

Question

我有一个无障碍难题。我制作了自己的自定义单选按钮，并试图让它们易于访问。

我有嵌套的单选按钮。有一个 parent，您可以在其中 select 选择您想要的宠物类型，然后是一个 sub-radio 部分，其中包含所有可供选择的宠物配件，第三个 selection对于配件的颜色。

问题是当您使用箭头键导航时，它会自动开始遍历 sub-options。没有办法通过选项卡。

<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，每个 div 上都有特定的样式，这对布局至关重要。

为了简单起见，我省略了颜色方面，因为问题仍然出现在其中一个嵌套元素上。

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

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

想尝试 aria-owns 和 aria-activedecendents，但经过多次角力后也没有运气。 https://tink.uk/using-the-aria-owns-attribute/ https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-activedescendant

屏幕 reader 正确地宣布了标签，但我希望您需要浏览 parent 个单选按钮，select 一个，然后导航到 children 收音机，但它的作用就好像所有收音机都在同一层上一样。

因此，当您到达第一个 parent 选项时，子选项会打开，在您导航时，您需要浏览所有 children 才能到达第二个 parent选项。

我不一定需要解决方案，针对这种情况的建议或要寻找的东西会有所帮助。

这就是我希望它的工作方式： http://jsfiddle.net/15y2tb0L/2/

Answer 1

也许可以尝试将 tabindex="0" 添加到您的主要收音机输入

Answer 2

这里有一个嵌套单选按钮的 JSFiddle：http://jsfiddle.net/15y2tb0L/2/

通过查看 fiddle 并与我的解决方案进行比较，我意识到 name 元素是关键。当我将不同级别的选项映射到特定名称时，它解决了 ADA 问题。

参见 Fiddle，但基本要点是 parents 与 name0 共享相同的名称，children 共享 name1 和 children 的 children 分享 name2.

嵌套的 Radio 元素被视为在 DOM 上都处于同一级别

Nested Radio elements are treated like they are all on the same level on the DOM

html

css

accessibility

radio-button

web-accessibility