ARIA - 如何指示用户可以选中的最大复选框数量

Question

在我的网络应用程序中，我向用户提供了一组选项，允许他们select 一个可变的数字。什么是防止用户 select 购买太多项目的无障碍方式？

我的标记如下所示：

<h3>Option Name</h3>
<p id="xyz">Select up to 3 items</p>
<div role="group" aria-describedby="xyz">
  <div role="checkbox"  aria-checked="true" > ... </div>
  ...
</div>

最初我想在复选框 div 上使用 aria-invalid="true" 如果用户尝试 select 超出最大值的附加选项，但 the spec 表示 aria-invalid 用于已输入的值，而选中或取消选中选项可能不被视为输入值。

我还考虑过在父组 div 上使用 aria-valuemax 属性集，但与 aria-invalid 一样，规范根据输入到元素中的值来定义它，而不是由用户的操作切换的状态。

目前，我的想法是将 aria-disabled="true" 应用于所有非 selected 复选框 div 如果用户已 selected 最大值，但我'我不确定是否有一种方法可以像使用 aria-errormessage.

的 aria-invalid 元素一样指示 aria-disabled 属性的原因

非常感谢任何反馈，感谢大家的宝贵时间。

Answer 1

备注：

将组标签和指令明确关联到分组元素。（您可以使用多个来源来弥补组的可访问名称）。
aria-labelledby 在 role=group 上用作 aria-describedby 没有 acc 名称将不会公布。
选中最大数量的复选框后，将剩余的复选框设置为 aria-disabled=true。

建议代码：

<h3 id="grouplabel">Option Name </h3>
<p id="xyz">Select up to 3 items</p>
<div role="group" aria-labelledby="grouplabel xyz">
  <div role="checkbox"  aria-checked="true" > ... </div>
  ...
</div>

Answer 2

当勾选了3项后，我建议使用aria-readonly（这个属性表示一个元素可以操作，但不能编辑）。 When one or more items of the selection have been unchecked, then all the checkboxes should become editable allowing users to edit or reselect items.我建议您在达到最大选择时也添加一个 javascript 警报，以便用户知道使选项不可编辑的原因。

ARIA - 如何指示用户可以选中的最大复选框数量

ARIA - How to indicate the maximum amount checkboxes the user may check

accessibility

wai-aria