2
我有一個時間選擇器組件,由兩個單獨的input
字段組成,這些字段一起工作以創建一個幻想。a11y:輸入字段,包裝在一個div中,附加「由id」附加到標籤
這是骷髏的樣子
<div> {/* component container */}
<div> {/* container for hours:minutes */}
<input /> {/* hours */}
<input /> {/* minutes */}
</div>
<Select /> {/* custom React component, for AM/PM */}
</div>
一切的偉大工程「正規」的用戶,但可訪問性較差。
由於代碼庫中預先存在的限制,我很難簡單地將所有內容都包裝在label
中,這可以解決我的問題。
我在想什麼做的是以下內容,我想這是否可以給屏幕閱讀器或不是真的有用社羣成員的意見(哈哈!)。
<label htmlFor="myUniqueId">Here goes my label</label>
<div id="myUniqueId"> {/* component container */}
<div> {/* container for hours:minutes */}
<input /> {/* hours */}
<input /> {/* minutes */}
</div>
<Select /> {/* custom React component, for AM/PM */}
</div>
因此,基本上,在容器上設置的ID,而不是輸入,然後附加使用htmlFor
標籤。
這是否適用於屏幕閱讀器?