0

Following code throws in Chrome console: ARIA: Attribute " aria-label ", required for accessibility, is missing...

<label for="date-range-selector-from">From</label>
<md-input-container>
<input type="text" id="date-range-selector-from" aria-invalid="false" />
...
</md-input-container>

Why is it throwing this warning when there is label asociated with input? Shouldn't be aria-label needed when visible label cannot be shown on the page?

MarekN
  • 51
  • 1
  • 6

1 Answers1

0

This is apparently some "angularjs" code, but Chrome is complaining about your DOM generated code.

You should provide a label tag inside the md-input-container like in the example provided on the following page: https://material.angularjs.org/latest/api/directive/mdInputContainer

<md-input-container>
  <label>From</label>
  <input type="text" id="date-range-selector-from" aria-invalid="false" />
</md-input-container>
Adam
  • 17,838
  • 32
  • 54
  • When the label is inside md-input container, then angular's functionality to the label is applied (label is made smaller and moved above the input when input is focused. I just want to have very ordinary label shown within input, no special effects. Thats why I put it outside md-input container. It should be ARIA compatible when I set attribute for and link it with id of the input. – MarekN Nov 01 '16 at 15:37
  • you have to look at the "md-no-float" option to disable floating label, see link in my answer – Adam Nov 01 '16 at 16:19
  • This md-no-float works for placeholder attribute as it is described in material docs, not for label, label is still transformed to animated version eventhough md-no-float is used. – MarekN Nov 02 '16 at 12:37