使用自定义复选框是否需要使用ARIA属性？

Question

我有一个复选框，使用图像叠加层进行修改。添加此覆盖图是否需要使用ARIA属性供屏幕阅读器理解？还是我仍在使用本机HTML复选框的事实使这一点不必要了？

<div class="checkbox-overlay">
  <label>
    <input type="checkbox" value="true">
    <input type="hidden" value="false">
    <span class="overlay"></span>
    <span>Checkbox Label</span>
  </label>
</div>

Here is the working example.

Answer 1

您的叠加层正在使用背景图片，因此可以从屏幕阅读器中隐藏起来，这样就可以了。

但是，您的jsfiddle示例在tabindex="0"上有一个<label>，这会造成混淆。这将允许键盘用户和屏幕阅读器用户 tab 到标签，但您不能选择标签。

下一个选项卡将移动到实际的复选框（位于叠加层的“后面”），在那里他们可以按 space 来选中该复选框。但是问题在于，由于真正的复选框位于叠加层的后面，因此用户看不到可见的焦点指示器。它将被覆盖层覆盖。也许这就是您尝试使用<label tabindex="0">修复的问题。我认为您可以使用:focus-within样式解决此问题。