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

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。他们读取 DOM，并不关心你是否使用 CSS 移动内容。如果我有一个带有 的水平链接列表float:right，从视觉上看，它们将从右到左显示，但是当我打开一个显示页面上所有链接的屏幕阅读器对话框时，它们将按照 DOM 的顺序排列无论 CSS 将它们放置在页面的哪个位置。

我之所以说屏幕阅读器“通常”不关心 CSS，是因为大多数读者会阅读通过属性添加的文本content，即使这是通过 CSS 添加的文本。但我不会指望这种行为。在你的例子中，我在使用jaws、nvda和画外音时听到“标记一星”，但在过去，我只会听到“标记一”。随着屏幕阅读器或浏览器的下一个版本的发布，它可能会再次发生变化。只要你required设置了属性，这就是重要的部分。