输入后是否可以访问标签?
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
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)
我想知道如果标签位置在输入元素之后,下面的代码片段是否无法访问?
<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 typetext
,file
orpassword
, for all textareas and for allselect
elements in the Web page:Check that there is a
label
element that identifies the purpose of the control before theinput
,textarea
, orselect
element
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)