0

はクロームコンソールでスロー: ARIA:属性「ARIAラベル」、アクセシビリティを必要とは、入力とasociatedラベルがある場合にアリアラベルが表示されません。次のコード

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

は、なぜそれがこの警告を投げている...欠けていますか? ページに表示可能なラベルを表示できない場合は、アリアラベルは必要ありませんか?

+0

ここにもクロームタグを追加すると便利かもしれません。 – stringy

答えて

0

これは明らかにいくつかの「angularjs」コードですが、ChromeはDOM生成コードについて不平を言っています。

次のページで提供される例のようにmd-input-containerlabelタグを提供する必要があります: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> 
+0

ラベルがmd-inputコンテナの内側にある場合、角度に対するラベルの機能が適用されます(入力がフォーカスされていると、ラベルが小さくなり、入力の上に移動します。私が属性を設定し、それを入力のIDとリンクさせるときには、ARIAと互換性があるはずです – MarekN

+0

浮動ラベルを無効にするには "md-no-float"オプションを調べなければなりません。私の答えの中のリンクを参照してください – Adam

+0

このmd-no-floatは、マテリアルドキュメントで説明されているようにプレースホルダ属性で機能します。ラベルではなく、ラベルはまだmd-no-floatが使用されています。 – MarekN

関連する問題