Question

正在处理具有某些自定义单选按钮样式的表单，并希望检查我通常的操作方式。

为了避免使用Javascript，我通常将单选输入包装在标签内，并在输入后加上div。然后，根据检查状态设置div的样式。

这是一些示例标记：

label input:checked ~ span {
    background: red;
}

<label for="10000">
        <input type="radio" id="10000" name="coveramount" value="10000">
        <span>&pound;10,000</span>
    </label>

（元素上通常有类）

标签内的跨度是否正确？是否有更好的方法来使用其他标签或类似标签来实现可访问性？

Answer 1

您问题中的HTML很好。这是一种非常简单可靠的样式单选和复选框元素样式。

有一些潜在的可访问性问题值得关注，与CSS相比，与HTML无关。

在设计中，<input>元素本身是否可见？通常会隐藏实际的单选框/复选框输入，并使用CSS背景图像来提供外观精美的选中状态和未选中状态。如果这样做，请记住：

使用label input:focus ~ span
避免使用display:none，visibility:hidden或HTML hidden属性来隐藏真实的单选框/复选框。这些都将阻止仅键盘用户和屏幕阅读器用户（指针用户可以单击<label>元素）进行输入操作。这是因为它们都会导致输入从键盘跳位顺序中删除，并从发送到辅助技术的辅助功能树中删除。如果需要隐藏实际的输入元素，请使用类似Bootstrap的.sr-only类或HTML5Boilerplate的.visuallyhidden类的方法。有关此的更多详细信息，请参见：
- 这个real-world bug report for the Eleven Drupal admin theme
- Short note on the accessibility of styled form controls，其中包括样式收音机的代码演示。

另一个潜在的问题是使用颜色。不要仅仅依靠颜色变化来表示已检查控件，这是WCAG失败。本地收音机和复选框涉及形状更改（即，填充圆圈的子弹）。请注意，使用Windows High Contrast主题时，CSS颜色会被覆盖。如果background: red是选中（或聚焦）单选的唯一线索，则Windows高对比度用户将不知道发生了什么。

Answer 2

引用： 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>

更新：

这不是一个合适的解决方案，因为在input元素上使用伪元素不会在Firefox或Edge中呈现任何内容

使用CSS：checked属性来语义化标签样式的“正确”方法

2 个答案: