输入后是否可以访问标签?

Is it accessible to have the label after the input?

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

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

在我使用 NVDA 进行测试时(屏幕 reader),按向下箭头键会读取输入字段后的标签。

必须让标签元素在顺序中排在第一位吗?

向下箭头键是否是表单元素的有效测试?

Fiddle: https://jsfiddle.net/yjqb6mt2/

Is this a must to keep label element first in the order ?

没有

Is arrow down key a valid test for form elements ?

不是真的。

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

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

综上所述,如果一个字段没有标签,那么屏幕 reader 用户可以使用向上箭头键尝试找到它的标签,除非它是一个复选框或单选按钮(然后向下箭头).

总之,你的代码没问题。

Is this a must to keep label element first in the order?

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

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

Is arrow down key a valid test for form elements?

每个导航键都必须测试,所以它是不够的。

编辑:WCAG 参考资料:

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

For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:

Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element

另见 Meaningful Sequence

1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)