我正在编写一个
HTML表单,其中某些字段的必要性取决于其他字段的值,因此会动态更改.我想通过在每个必填字段之前的标签上添加星号来呈现该必要性的视觉提示.由于它是纯粹的可视化,并且相应标签中的必需属性很好地表达了情境的语义,我希望将星号添加为CSS定义中的内容,而不是直接或通过脚本将其插入HTML中.
然而,将视觉内容添加到必需字段之前的元素是具有挑战性的,因为CSS选择器组合器似乎向前(朝向儿童和兄弟姐妹)但不向后(朝向父母或以前的兄弟姐妹).@H_301_3@
我当然可以在相同的代码中切换标签中的类名,我改变了输入字段的必要性,但是这会将内容添加与必要性更改分成两个不同的指令,我必须记住它们一起调用,现在和一年后,这是一个我想避免的约束;我更愿意切换输入字段的必要性,并让CSS对此更改作出反应而不需要我进一步参与.@H_301_3@
所以我使用了反转每个标签及其输入字段的顺序,然后将它们包装在显示器中：flex; flex-direction：column-reverse元素,使标签文本在其相应的字段之前呈现,尽管在其之后声明.这样,我可以使用next-sibling combinator在每个必填字段的标签文本中添加星号：@H_301_3@
label {
display:inline-flex;
flex-direction:column-reverse;
}
label>input[required]+span:after
{
content:"*";
color:#a21;
}
<label> <input type="text" required> <span>Field 1</span> </label> <label> <input type="text"> <span>Field 2</span> </label>
然而,我的问题是屏幕阅读器将如何解释双重反转(一次在HTML中,一次在CSS中).他们会在期待用户输入之前读出文本吗？@H_301_3@
谢谢,我总是需要坐下来,安装一个屏幕阅读器并自己找出这些东西,但我似乎没有时间去做:-(@H_301_3@
解决方法
屏幕阅读器通常不关心CSS.他们阅读DOM并不关心你是否用CSS移动东西.如果我有一个水平的链接列表与浮动：右,视觉上,它们将从右到左显示,但当我打开一个屏幕阅读器对话框,显示页面上的所有链接,它们将在顺序不管CSS把它们放在页面上的哪个DOM.
我说屏幕阅读器“通常”不关心CSS的原因是大多数读者会阅读通过内容属性添加的文本,即使这些文本是通过CSS添加的.但我不会指望这种行为.在你的例子中,我在使用下颚,nvda和画外音时听到“标记一颗星”,但在过去,我只会听到“标签一”.随着屏幕阅读器或浏览器的下一个版本的发布,它可能会再次发生变化.只要您拥有所需的属性集,那就是重要的部分.@H_301_3@
