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，每个 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

屏幕阅读器正确地宣布标签，但我希望您需要浏览父单选按钮，选择一个，然后导航到子单选集，但它的作用就像它们都在同一级别.

因此，当您到达第一个父选项时，子选项会打开，当您导航时，您需要浏览所有子选项以到达第二个父选项。

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

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

标签： htmlcssradio-buttonaccessibilityweb-accessibility

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

问题描述

解决方案

推荐阅读