可訪問性：將標簽添加到 html 中的自定義輸入元素

Question

我們有一些可用於用戶輸入的自定義組件（ CustomSelect 、 SegmentedControl 、 CustomCheckbox等）。

在某些情況下，它們在內部使用語義 html 標記，如radiogroup或select ，但在某些情況下，標記完全使用div和span元素編寫，並且使用 aria 屬性提供可訪問性。 對於這樣的實現，有沒有辦法將label元素與它們相關聯，使它們表現得像原生表單輸入 wrt 標簽行為，或者更好，有沒有辦法讓它們像原生表單輸入一樣對待？

想到的事情：

• 使用視覺上隱藏的 html 表單元素，它以某種方式包裝自定義，並以某種方式隱藏其語義。
• fieldset 和 legend 在某些情況下可能有意義
• 使用 javascript 來模仿標簽功能

是否有任何現有的模式？

Answer 1

你需要做三件事：

1. 對其進行可視化編碼，以使標簽看起來與您的自定義元素相關聯，通常是因為標簽位於左側而元素位於右側（在 LTR 語言中）。
2. 使用aria-labelledby以編程方式將標簽與元素相關聯。
3. 添加 javascript，以便鼠標單擊標簽將焦點移動到元素。

請注意，您可以使用真正的<label>元素，但它主要用於更易讀的代碼，因此很容易發現與元素關聯的標簽。 您很可能 (*)不能使用<label>元素的for屬性，因為指定的 ID 必須是“可標記元素”，其定義為：

• 按鈕
• 輸入
• 儀表
• 輸出
• 進步
• 選擇
• 文本區域

(*) 如果您有一個與form-associated的屬性為true的自定義元素，則可以使用for屬性。 <label>可用於“ 與表單相關的自定義元素”

請參閱https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example 。

我之前沒有創建自定義表單元素，但文檔聽起來像真正的<label for="ID">可以與它​​一起使用，在這種情況下您不需要aria-labelledby或 javascript。