使自定义无线电控件可供屏幕阅读器访问

Question

我需要创建一个无线电控件，以从12个预定义选项中选择1个。用户需要一目了然地概览所有可能的选项，并需要在悬停/焦点/选择上查看每个选项的完整详细信息。每个选项都有很多细节，但是可以轻松地将它们组合在一起（AWS EC2实例类型）。

这是我创建的：

除了tabindex, :hover, :focus, :active以外，其他交互均受JavaScript控制。简化后，标记如下所示：

<div>
  <div>
    <h3>General Purpose</h3>
    <!-- details... -->
    <div>
      <span>1x</span>
      <!-- others... -->
    </div>
  </div>
  <div>
    <h3>Accelerated Computing v2</h3>
    <!-- content... -->
  </div>
  <div>
    <h3>Accelerated Computing</h3>
    <!-- content... -->
  </div>
</div>

它适用于有远见的键盘/鼠标用户，但我不确定如何为屏幕阅读器调整此输入。

另外，在预览用户已经查看过的同一组中的选项时，我们应该只阅读大小和小时价格，我也不知道该怎么做。

注意：您只能单击“ 1x”，“ 2x”等。这些是唯一可选择的元素，类别周围的突出显示只是视觉上的东西。

感谢您的阅读！你能帮忙吗？

Answer 1

按照WAI-ARIA创作规范1.1中的"Radio Group" pattern。基本上，整个容器（您的12个._的父容器）周围都需要一个role="radiogroup"（带有标签），然后每个单选按钮都应具有<div>。 （每个单选按钮上还需要role="radio"，可能还需要aria-checked或aria-label，但这在模式中有解释。）

请注意，指定这些ARIA属性只会将对象的语义传达给屏幕阅读器。它不会不为您提供广播组的任何行为。也就是说，当用户选择一个单选按钮时，由您（大概是通过javascript）取消选择先前选择的按钮。

要回答有关仅读取部分信息的问题，可以对不需要阅读的任何内容使用aria-labelledby，也可以指定aria-hidden或aria-label覆盖子元素中的所有嵌入文本。下面的示例使用aria-labelledby并指向每个单选按钮的标题，以便仅当屏幕阅读器切换至单选按钮时才读取标题。但是，如果可见的用户可以使用这些信息，则从屏幕阅读器中隐藏信息将无法达到可访问性要求（WCAG）。在您的屏幕截图中，如果每小时的成本，GPU和其他信息对可见的用户可见，但对屏幕阅读器用户而言则是隐藏的，则这很糟糕。

还请注意，您需要自己管理键盘焦点（javascript）。仅一个单选按钮应具有aria-labelledby，其他单选按钮应具有tabindex="0"。如果用户按下向下箭头，则以前具有tabindex="-1"的单选按钮现在应具有tabindex="0"，而新聚焦的单选按钮应具有tabindex="-1"。 tabindex="0"属性应与tabindex匹配，以便具有aria-checked的按钮具有tabindex="0"，具有aria-checked="true"的按钮应具有tabindex="-1"。

以下是使用原始代码的粗略示例。请注意，单选按钮使用的是指向标题的aria-checked="false"，但是不建议这样做，因为每小时的成本，GPU等将对屏幕阅读器用户隐藏。

aria-labelledby