处理一个具有自定义单选按钮样式的表单,并希望检查我通常执行此操作的方式。
为了避免Javascript,我通常在标签中包装一个单选输入,并在输入后面加上一个div。然后,我根据选中状态设置div的样式。
下面是一些示例标记:
label input:checked ~ span {
background: red;
}
<label for="10000">
<input type="radio" id="10000" name="coveramount" value="10000">
<span>£10,000</span>
</label>
(元素上通常有类)
标签内的跨度是否正确?为了可访问性,有没有更好的方法用另一个标签或类似的标签来做到这一点?
发布于 2018-08-15 07:48:51
您问题中的HTML没有问题。这是设置单选和复选框元素样式的一种非常简单和可靠的方法。
有一些潜在的可访问性问题需要注意,这更多地与CSS有关,而不是HTML。
在您的设计中,<input>
元素本身是否可见?隐藏实际的单选/复选框输入,并使用CSS背景图像来提供选中和未选中状态的漂亮版本,这是很常见的。如果执行此操作,请记住:
HTML为有视力的键盘用户提供了焦点样式,使用类似label input:focus ~ span
display:none
、visibility:hidden
或hidden
属性来隐藏真正的无线电/复选框。这些都将阻止只使用键盘的用户和屏幕阅读器用户(指针用户可以单击<label>
元素)对输入进行操作。这是因为它们都会导致输入从键盘跳转顺序中删除,并从发送给辅助技术的可访问性树中删除。如果需要隐藏实际的输入元素,可以使用像Bootstrap的.sr-only
类或HTML5Boilerplate的.visuallyhidden
类这样的方法。有关这方面的更多详细信息,请参阅:包含样式设置radios.的代码演示的
另一个潜在的问题是颜色的使用。不要仅仅依靠颜色的变化来指示选中的控件,这是WCAG失败。本机单选和复选框涉及形状更改(即填充圆圈的项目符号)。请注意,当使用Windows高对比度主题时,CSS颜色会被覆盖。如果background: red
是选中(或聚焦)单选选项的唯一线索,Windows高对比度用户将不知道发生了什么。
发布于 2018-08-14 15:38:53
使用::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>
更新:
在
中呈现任何内容,这是一个好的、适当的解决方案
https://stackoverflow.com/questions/51835950
复制相似问题