多重角色="radiogroup"

Question

我正在尝试在同一页面上实现多个 radiogroups。尽管单独的 name 和 form 单选按钮表现为一组 - 如果您在一个组中单击它会在另一组中取消选择。

<form id="rg1_label">

  <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
    <li id="r1" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 1
    </li>
    <li id="r2" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 2
    </li>
  </ul>
</form>
<form id="rg2_label">
  <ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
    <li id="r3" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 3
    </li>
    <li id="r4" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 4
    </li>
  </ul>
</form>

Answer 1

我想我找到了解决您问题的方法。如果它不起作用或者如果它不是您要找的东西，请告诉我，我会尝试找到其他东西。

<form id="rg1_label">

        <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
            <li id="r1" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 1
            </li>
            <li id="r2" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 2
            </li>
        </ul>
        <ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
            <li id="r3" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 3
            </li>
            <li id="r4" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 4
            </li>
        </ul>
    </form>

在这里，我没有将列表放入 2 个表单中，而是将其放入一个列表中，而是放入 2 个列表中。如果您能以 2 形式告诉我为什么需要它，那将会有所帮助。

Answer 2

你误解了这里的问题。首先，让我们省略术语 selected，它适用于 <option> 个元素。单选按钮可以选中或不选中。

目前 none 个列表项完全可以检查。

当你点击一个时，因为他们有 tabindex="-1"，他们获得焦点。

这意味着它们是用户当前正在与之交互的元素。如果用户按下一个键，那么 keydown 和 keyup（以及已弃用的 keypress）事件将在该元素上触发。如果他们按下 Tab 键，那么焦点将移动到下一个元素。为了表明该元素具有焦点，在大多数浏览器中都会对其进行视觉突出显示。

这不和检查一样。 aria-checked 属性不变。

tabindex 允许键盘交互，aria- 允许您将有关元素的用途和当前状态的信息传达给屏幕阅读器和其他辅助技术。他们不会将元素变成真正的复选框。

您需要自己处理 JavaScript 各种事情，包括：

存储检查状态
在选中另一个元素时取消选中当前选中的元素
当您想将数据用于某些用途时读取数据（例如作为表单数据提交给服务器）
更改 aria- 属性以反映更新后的状态

（可能还有一些其他的东西，我不想在这里写一个详尽的清单）。

一般来说，使用 real 单选按钮比使用带有 CSS、JS 和ARIA 使它们表现得像真正的单选按钮。

Answer 3

另一种修复它的方法是使用 Javascript 和 if 语句，例如如果选中此语句，则 value = 如此等等。那可能行得通。我还是不明白为什么你需要两种形式而不是使用一种？

多重角色="radiogroup"

Multiple role="radiogroup"

html

forms

radio-group

radio-button