Search code examples
labelaccessibilityformswcag2.0nvda

Is it accessible to have the label after the input?


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/


Solution

  • 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 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

    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)