標簽與輸入無關

Question

使用內置的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/

Answer 1

當你單獨查看代碼示例時，它看起來很好：它有一個使用for和id屬性與input元素顯式關聯的label 。

但是，當您檢查站點時，它看起來不同：由於樣式規則.s2_form_widget label { display: none; } .s2_form_widget label { display: none; }標簽是不可見的。 （當您在Firefox中使用Inspector時，可以看到這一點，移動到DOM樹中的標簽並檢查相關的樣式。）

請注意， display: none不僅可以在視覺上隱藏標簽，還可以為屏幕閱讀器隱藏。 因此，從屏幕閱讀器或其他輔助技術的角度來看，輸入元素沒有標簽，並且不能滿足表單控件需要顯式標簽的要求。 （作為替代方案，您可以嘗試在屏幕外隱藏帶有負邊距的標簽。）