使用自定义复选框是否需要使用 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

您的叠加层正在使用背景图片，因此它会在屏幕上隐藏起来reader，没关系。

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

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

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

Does using a custom checkbox require the use of ARIA attributes?

html

wai-aria