问使用CSS :checked属性设置标签样式的语义上“正确”的方法

EN

您问题中的HTML没有问题。这是设置单选和复选框元素样式的一种非常简单和可靠的方法。

有一些潜在的可访问性问题需要注意，这更多地与CSS有关，而不是HTML。

在您的设计中，<input>元素本身是否可见？隐藏实际的单选/复选框输入，并使用CSS背景图像来提供选中和未选中状态的漂亮版本，这是很常见的。如果执行此操作，请记住：

HTML为有视力的键盘用户提供了焦点样式，使用类似label input:focus ~ span

• Avoid的东西使用display:none、visibility:hidden或hidden属性来隐藏真正的无线电/复选框。这些都将阻止只使用键盘的用户和屏幕阅读器用户(指针用户可以单击<label>元素)对输入进行操作。这是因为它们都会导致输入从键盘跳转顺序中删除，并从发送给辅助技术的可访问性树中删除。如果需要隐藏实际的输入元素，可以使用像Bootstrap的.sr-only类或HTML5Boilerplate的.visuallyhidden类这样的方法。有关这方面的更多详细信息，请参阅:包含样式设置radios.

的代码演示的

• this real-world bug report for the Eleven Drupal admin theme
• Short note on the accessibility of styled form controls，

​

另一个潜在的问题是颜色的使用。不要仅仅依靠颜色的变化来指示选中的控件，这是WCAG失败。本机单选和复选框涉及形状更改(即填充圆圈的项目符号)。请注意，当使用Windows高对比度主题时，CSS颜色会被覆盖。如果background: red是选中(或聚焦)单选选项的唯一线索，Windows高对比度用户将不知道发生了什么。

参考: After Pseudo Element

使用::after或::before pseudo-elements，并相应地调整内容。

​

label input:after {
  content: '10,000';
  font-size: 20px;
  height: 1em;
  position: relative;
  left: 20px;
}
label input:checked::after {
  background-color: red;
}

<label for="10000">
    <input type="radio" id="10000" name="coveramount" value="10000">
</label>

​

更新:

在

• Not元素上使用伪元素不会在Firefox或

中呈现任何内容，这是一个好的、适当的解决方案