I would like to know whether the below code snippet fails accessibility, if the label position is after the input element?
<input type="text" id="txt">
<label for="txt">Label Text</label>
During my test with NVDA (screen reader), pressing arrow down key reads the label after the input field.
Is this a must to keep label element first in the order?
Is arrow down key a valid test for form elements?
Fiddle: https://jsfiddle.net/yjqb6mt2/
Is this a must to keep label element first in the order?
Using a screenreader, it's sufficient, as the screenreader will get the accessible name automatically.
But using a screen magnifier or a braille display, you have to preserve the normal reading order. So this will not be accessible.
Is arrow down key a valid test for form elements?
Every navigation key has to be tested so it will not be sufficient.
EDIT: WCAG references:
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
See also 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)