html - 使屏幕阅读器可以访问自定义 radio 控件

Question

我需要创建一个 radio 控件来选择 12 个预定义选项中的一个。用户需要一目了然地了解所有可能的选项，并在悬停/聚焦/选择时查看每个选项的完整详细信息。每个选项都有很多详细信息，但可以轻松地将它们组合在一起(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

关注"Radio Group" pattern关于 WAI-ARIA 创作实践 1.1。你基本上需要一个 role="radiogroup" (带有标签)围绕整个容器(你的 12 <div> s 的父级)然后每个单选按钮应该有 role="radio" . (您还需要在每个单选按钮上使用 aria-checked，可能还需要 aria-label 或 aria-labelledby，但在模式中对此进行了解释。)

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

要回答关于只阅读部分信息的问题，您可以使用 aria-hidden在任何您不想阅读的内容上，或者您可以指定 aria-label或 aria-labelledby这将覆盖子元素中的任何嵌入文本。下面的示例使用 aria-labelledby并指向每个单选按钮的标题，这样当屏幕阅读器跳转到单选按钮时，只会读取该标题。但是，如果信息对有视力的用户可用，则对屏幕阅读器隐藏信息将无法满足可访问性合规性 (WCAG)。在您的屏幕截图中，如果每小时成本、GPU 和其他信息对有视力的用户可见，但对屏幕阅读器用户隐藏，那就不好了。

另请注意，您需要自己管理键盘焦点 (javascript)。只有 一个 单选按钮应该有 tabindex="0"和其他人应该有tabindex="-1" .如果用户按下向下箭头，以前有 tabindex="0" 的单选按钮现在应该有 tabindex="-1"并且新聚焦的单选按钮应该有 tabindex="0" . aria-checked属性应与 tabindex 匹配，以便带有 tabindex="0" 的按钮有aria-checked="true"和带有 tabindex="-1" 的按钮应该有 aria-checked="false" .

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

<div role="radiogroup" aria-label="your 12 options">
  <div role="radio" aria-labelledby="GeneralPurpose" tabindex="0" aria-checked="true">
    <h3 id="GeneralPurpose">General Purpose</h3>
    <!-- details... -->
    <div>
      <span>1x</span>
      <!-- others... -->
    </div>
  </div>
  <div role="radio" aria-labelledby="AccComputing2" tabindex="-1" aria-checked="false">
    <h3 id="AccComputing2">Accelerated Computing v2</h3>
    <!-- content... -->
  </div>
  <div role="radio" aria-labelledby="AccComputing" tabindex="-1" aria-checked="false">
    <h3 id="AccComputing">Accelerated Computing</h3>
    <!-- content... -->
  </div>
</div>