屏幕阅读器如何处理display flex？

Question

屏幕阅读器如何处理display flex？

8

我正在编写一个HTML表单，在表单中，某些字段的必须性取决于其他字段的值并因此动态更改。我想通过在每个必填字段的前面追加一个星号来呈现必填性的视觉提示。由于这是纯粹的视觉效果，并且情况的语义已经在适当的标记中用required属性表达得很好，所以我希望将星号作为内容从CSS定义中添加，而不是直接通过HTML或脚本插入它。

然而，向前（向子代和下一个兄弟）添加元素的可组合选择器很容易，但向后（向父级或前一个兄弟）则很难。

当然，我可以在与更改输入字段的必填性相同的代码中切换标签中的类名，但这会将内容添加与必填性更改分开成两个不同的指令，我必须记得同时调用它们，现在和一年后，因此我希望避免这种约束；我更喜欢切换输入字段的必填性并让CSS对该更改做出反应，而无需我的进一步参与。

因此，我采用了颠倒每个标签及其输入字段的顺序，然后将两者都包装在display:flex; flex-direction:column-reverse元素中，使标签文本在声明在输入字段之后的情况下仍然能够在相应字段之前呈现。这样，我就可以使用next-sibling组合器向每个必填字段的标签文本添加星号。

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

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

- Carvo Loco

2个回答

0

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

现在，根据H44:使用label元素将文本标签与表单控件关联，标签和输入的顺序也很重要。

对于Web页面中所有类型为文本、文件或密码的输入元素，所有文本区域以及所有选择元素：

检查是否有标签元素来标识控件的目的在输入、文本区域或选择元素之前

但是，在您的情况下，您有一个非常特殊的情况。您的label标签在DOM顺序中出现在input标签之前，而其文本内容在之后。

<label>
  <input type="text" required>
  <span>Field 1</span>
</label>

我认为屏幕阅读器会对此感到满意，因为它们会将input和label作为整体读出来，宣布“隐式标签字段1”。

只要label标记在input[type=text]之前被识别，这并不是糟糕的设计（对于单选框或复选框类型的input字段则不同，必须在其后面）。

- Adam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slugolicious · Accepted Answer

屏幕阅读器通常不关心CSS。它们读取DOM，不在乎你是否用CSS移动了元素。如果我有一个带有float:right的水平链接列表，从视觉上看，它们将从右到左显示，但是当我打开屏幕阅读器对话框以显示页面上的所有链接时，无论CSS将它们放在什么位置，它们都将按DOM的顺序排序。

我之所以说屏幕阅读器“通常”不关心CSS，是因为大多数阅读器会读取通过content属性添加的文本，即使这是通过CSS添加的文本。但我不会指望这种行为。在您的示例中，当使用Jaws、NVDA和Voiceover时，我听到“label one star”，但是过去我只听到“label one”。随着屏幕阅读器或浏览器的下一个版本发布，它可能会再次更改。只要设置了required属性，那就是最重要的部分。