Question

我正在编写一个HTML表单，其中某些字段的必要性取决于其他字段的值，因此会动态更改。我想通过在每个必填字段前面的标签上添加星号来呈现该必要性的视觉提示。由于它是纯粹的可视化，并且相应标签中的required属性很好地表达了情境的语义，我希望将星号添加为CSS定义中的内容，而不是直接将其插入HTML或通过脚本。

然而，将视觉内容添加到前面所需字段的元素是具有挑战性的，因为CSS选择器组合器似乎向前（朝向儿童和兄弟姐妹）但不向后（朝向父母或以前的兄弟姐妹）

我当然可以在相同的代码中切换标签中的类名，我改变了输入字段的必要性，但这会将内容添加与必要性更改分成两个不同的指令，我必须记住这些指令。现在和一年后一起打电话，这是我想避免的约束;我更愿意切换输入字段的必要性，并让CSS对此更改作出反应而不需要我进一步参与。

所以我使用了反转每个标签及其输入字段的顺序，然后将它们包装在display:flex; flex-direction:column-reverse元素中，使标签文本在其相应的字段之前呈现，尽管在它之后被声明。这样，我可以使用next-sibling combinator在每个必填字段的标签文本中添加星号：

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中）。他们会在期待用户输入之前读出文本吗？

谢谢，我总是需要坐下来，安装一个屏幕阅读器并自己找出这些东西，但我似乎没有时间去做： - （

Answer 1

屏幕阅读器通常不关心CSS。如果你用CSS移动东西，他们会读DOM并且不在乎。如果我在视觉上有float:right的水平链接列表，那么它们将从右到左显示，但是当我打开一个显示页面上所有链接的屏幕阅读器对话框时，他们会＃39 ;无论CSS将它们放在页面上的哪个位置，都将按DOM的顺序排列。

我说屏幕阅读器＆＃34;通常＆＃34;不关心CSS的是大多数读者将读取通过content属性添加的文本，即使该文本是通过CSS添加的。但我不会指望这种行为。在你的例子中，我听到＆＃34;标记一颗星＆＃34;当使用下巴，nvda和配音时，但在过去，我会听到＆＃34;标记一个＆＃34;。随着屏幕阅读器或浏览器的下一个版本的发布，它可能会再次发生变化。只要您设置了required属性，那就是重要的部分。

Answer 2

首先，如另一个答案中所述，屏幕阅读器忽略任何CSS定位并按DOM顺序处理标签。

现在，根据H44: Using label elements to associate text labels with form controls，标签和输入的顺序也很重要

对于文本，文件或密码类型的所有输入元素，对于所有textareas和网页中的所有选择元素：


检查 输入，textarea或select元素

但是，在你的情况下，你有一个非常特殊的情况。您的label标记在input标记之前（在DOM顺序中），而其文本内容在之后。{/ p>
<label> <input type="text" required> <span>Field 1</span> </label>

我会说屏幕阅读器可以正常使用，因为他们会阅读input和label作为一个整体宣布“隐式标签字段1”。

只要您在label之前看到input[type=text]标记，这就不错了设计（无线电或复选框类型的input字段的内容不同后）。

屏幕阅读器如何处理显示屏？

2 个答案: