可訪問性：標簽除了輸入內容外還能有孩子嗎？

Question

可訪問性問題： <label>...</label>除了<input ... />之外還能有孩子嗎？ 我們在項目上使用Material UI，其<Switch />組件的構建方式如下：

<label>
  <div>
    <span>
      <span>
        <input />
      </span>
    </span>
  </div>
</label>

這會觸發HTML_Codesniffer中的輔助功能錯誤。

不知道它是否只是不習慣這種結構，是否期望label是input的直接父對象，或者是一個實際錯誤。

Answer 1

標簽除了輸入內容外還能有孩子嗎？

是的，幸運的是（否則將無法格式化文本標簽）。 例如允許以下

<label>
  <span>My input label</span>
  <input type="text" />
</label>

根據文檔，它可以包含任何措辭內容：

短語內容，但沒有后代可標記元素，除非它是元素的帶標簽控件，並且沒有后代標簽元素

在您的示例中，您不能使用div因為它是流內容，而不是短語內容，盡管瀏覽器和輔助技術都支持它。

請注意，HTML_Codesniffer中的可訪問性錯誤可能不會與該問題相關聯，而是與該工具無法將label與input正確鏈接這一事實有關。

Answer 2

內聯元素實際上並不是為包含元素而設計的，也許您應該使用“ div”而不是“ span”