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

Question

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

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

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

是否必须才能将标签元素保留在订单的第一位？

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

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

Answer 1

  

这是否必须将标签元素保持在订单的第一位？

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

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

  

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

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

编辑：WCAG参考：

H44: Using label elements to associate text labels with form controls

  

对于input，text或file类型的所有password元素，对于网页中的所有textareas和所有select元素：

     

检查是否有label元素标识控件的目的 input，textarea或select元素< / p>

另见Meaningful Sequence

  

1.3.2有意义的序列：当呈现内容的序列影响其含义时，可以以编程方式确定正确的阅读顺序。 （A级）

Answer 2

  

这是否必须将标签元素保持在订单的第一位？

没有

  

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

不是。

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

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

所有这些都说，如果字段没有标记，那么屏幕阅读器用户可以使用向上箭头键来尝试查找其标签，除非它是复选框或单选按钮（然后向下箭头）。

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