多重角色="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

您可以解决它的另一种方法是使用 Javascript 和 if 语句，例如如果检查了这个，则 value = such and such。那可能行得通。我还是不明白为什么你需要两种形式而不使用一种？

Answer 2

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

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

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

目前您的列表项没有可以被检查。

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

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

这与被检查不相同。 aria-checked 属性不会改变。

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

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

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

（可能还有其他一些事情，我不想在这里写一个详尽的列表）。

---

一般来说，使用 real 单选按钮是一种更好（也更容易）的方法，然后使用带有 CSS、JS 和 ARIA 的非单选按钮来使它们表现得像真正的单选按钮.