label - 输入后是否可以使用标签？

Question

如果标签位置在输入元素之后，我想知道下面的代码片段是否无法访问？

<input type="text" id="txt">
<label for="txt">Label Text</label>

在我使用 NVDA（屏幕阅读器）进行测试期间，按下箭头键会读取输入字段后的标签。

这是必须在订单中保留标签元素的必要条件吗？

向下箭头键是表单元素的有效测试吗？

小提琴：https ://jsfiddle.net/yjqb6mt2/

Answer 1

这是必须在订单中保留标签元素的必要条件吗？

使用屏幕阅读器就足够了，因为屏幕阅读器会自动获取可访问的名称。

但是使用屏幕放大镜或盲文显示器，您必须保持正常的阅读顺序。所以这将无法访问。

向下箭头键是表单元素的有效测试吗？

每个导航键都必须经过测试，因此还不够。

编辑：WCAG 参考资料：

H44：使用标签元素将文本标签与表单控件相关联

对于所有input类型为 或 的元素text，file对于password所有文本区域和select网页中的所有元素：

检查在、或元素之前label是否有标识控件用途的元素inputtextareaselect

另见有意义的序列

1.3.2 有意义的顺序：当内容呈现的顺序影响其意义时，可以通过程序确定正确的阅读顺序。（甲级）

Answer 2

这是必须在订单中保留标签元素的必要条件吗？

不。

向下箭头键是表单元素的有效测试吗？

并不真地。

将焦点放在字段上，无论是通过 Tab 键还是使用其他键盘命令选择它。当该字段获得焦点时，屏幕阅读器将宣布其可访问的名称。在这种情况下，可访问的名称来自<label>.

想想单选按钮和复选框。标签文本通常出现在源代码中的字段之后。这对屏幕阅读器用户来说不是问题。

综上所述，如果一个字段没有标签，那么屏幕阅读器用户可能会使用向上箭头键来尝试找到它的标签，除非它是一个复选框或单选按钮（然后是向下箭头）。

简而言之，您的代码很好。