5

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/

unor
  • 92,415
  • 26
  • 211
  • 360
Maayi
  • 157
  • 2
  • 2
  • 11

2 Answers2

5

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)

Community
  • 1
  • 1
Adam
  • 17,838
  • 32
  • 54
  • Is there any standard guideline specified for the same by WCAG - W3 Org ? – Maayi Mar 27 '17 at 08:53
  • Adam: The label is associated to the input with id and for combinations. Considering the material design for input field, does the given HTML snippet fails AA (screen magnifier or a braille display) ? – Maayi Mar 27 '17 at 09:12
  • @Maayi I edited my answer to link to the references in the WCAG techniques for `input[text]` elements – Adam Mar 27 '17 at 12:03
  • 1
    One note about H44 — it is a technique, so it is advisory. Placing a label before the field is not a requirement unless it is in the SC itself. For the example given, a screen magnifier user should have no problem since the text label visually sits on/within the field. This would also still pass WCAG AA. For OP, remember that WCAG A/AA/AAA compliance and being accessible (for all or a sub-set of users) are not always the same thing. – aardrian Mar 27 '17 at 12:46
  • @aardrian I added a link to the "Meaningful Sequence" SC. – Adam Mar 27 '17 at 12:48
  • @Adam: Considering **1.3.2 Meaningful Sequence**, the given HTML doesn't affect its meaning. Should this still be reordered based on H44 ? – Maayi Mar 28 '17 at 05:23
  • 1
    The meaningful sequence implies that the reading order can be "programmatically determined". This means that the order of your tags in the DOM has to be the same as the reading order, indepedently of the fact that you may use a screenreader (where no problem should appear in your example) or that your CSS may change visually the order. – Adam Mar 28 '17 at 07:25
0

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.

aardrian
  • 8,581
  • 30
  • 40