web-dev-qa-db-ja.com

入力に関連付けられていないラベル

組み込みのChrome Lighthouseを使用してWPサイトでアクセシビリティ監査を実行すると、関連付けられたラベルがないためにサインアップフィールドが無効であることが示されました。これ以前は、関連付けられているとは思われない理由を理解できません。inputにaria-labelタグを直接追加することで渡すことができますが、そうする必要はありません。 。

以下は、Subscribe2から作成されたコードスニペットです。

<label for="s2email">Your email:</label>
<br>
<input type="text" name="email" id="s2email" value="Enter email address..." size="20" onfocus="if (this.value === 'Enter email address...') {this.value = '';}" onblur="if (this.value === '') {this.value = 'Enter email address...';}">

ここにあります： https://blog.collaborative.org/

htmlaccessibilityformshtml-validationlighthouse
8
Travis Johnston

単独でコードサンプルを見ると、見た目は良好です。labelおよびinput属性を使用して、for要素に明示的に関連付けられたidがあります。 。

ただし、サイトを検査すると、スタイルルール.s2_form_widget label { display: none; }ラベルは非表示です。 （Firefoxでインスペクターを使用し、DOMツリーのラベルに移動して、関連するスタイルを確認すると、これを確認できます。）

ご了承ください display: noneは、ラベルを視覚的に非表示にするだけでなく、スクリーンリーダーでも非表示にします。その結果、スクリーンリーダーまたは他の支援技術の観点から見ると、入力要素にはラベルがなく、フォームコントロールに明示的なラベルが必要であるという要件が満たされません。 （別の方法として、負のマージンで画面外にラベルを非表示にしてみてください。）

3
IkWeetHetOokNiet