CODEWITHSUNDEEP
labelaccessibilityformswcag2.0nvda
Maayi
Maayi

Reputation: 167

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/

Upvotes: 5

Views: 2586

Answers (2)

Adam
Adam

Reputation: 18855

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)

Upvotes: 5

aardrian
aardrian

Reputation: 9029

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

No.

Is arrow down key a valid test for form elements ?

Not really.

Put the focus on the field, whether by tabbing into it or selecting it using other keyboard commands. When the field receives focus then a screen reader will announce its accessible name. In this case, the accessible name comes from the <label>.

Think of radio buttons and checkboxes. The label text typically comes after the field in the source code. This is not a problem for screen reader users.

All this being said, if a field is unlabeled, then a screen reader user may use the arrow up key to try to find its label, unless it is a checkbox or radio button (then arrow down).

In short, your code is fine.

Upvotes: 0

Related Questions