屏幕阅读器如何处理显示弯曲？答案

【问题标题】：How do screen readers handle display flex?屏幕阅读器如何处理显示弯曲？
【发布时间】：2016-10-20 10:22:32
【问题描述】：

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

然而，将视觉内容添加到元素在必填字段之前是具有挑战性的，因为 CSS 选择器组合器似乎是向前的（朝向孩子和跟随的兄弟姐妹）而不是向后的（朝向父母或之前的兄弟姐妹） .

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

所以我采取了颠倒每个标签及其输入字段的顺序，然后将两者包装在 display:flex; flex-direction:column-reverse 元素中，使标签文本呈现在其相应字段之前，尽管在它之后声明。这样，我可以使用下一个兄弟组合器为每个必填字段的标签文本添加一个星号：

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

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

【问题讨论】：

标签： html css flexbox screen-readers

【解决方案1】：

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

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

【讨论】：

非常感谢您提供有用的答案，懒惰。虽然我并不担心屏幕阅读器会大声朗读星号，但担心屏幕阅读器会在等待用户在相应字段中输入之前读取标签（如果确实如此）。那会是个问题吗？老实说，我真的不知道屏幕阅读器如何处理表单。
是的，这会是个问题，但你的代码没问题。输入字段将以正确的顺序读取标签。

【解决方案2】：

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

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

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

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

但是，就您而言，您的情况非常特殊。您的label 标记出现在input 标记之前（按DOM 顺序），而其文本内容位于之后。

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

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

只要您的label 标签出现在input[type=text] 之前，这就是不错的设计（input 类型的单选字段或复选框的情况有所不同）。

【讨论】：