2017-10-18 143 views
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標籤。

這是否適用於屏幕閱讀器?

回答

2

否,for attribute must point at a labelable element

for屬性可被指定爲指示與 表單控件,其標題是要關聯。如果指定了屬性,則該屬性的值必須是與標籤元素相同的文檔中的一個可插入元素的ID。

labelable elements是:inputbuttonselecttextareafieldsetoutputobjectmeterprogresslabelimg

我想構建這樣說:

<label htmlFor="myUniqueId">Select time</label> 
<fieldset id="myUniqueId"> {/* component container */} 

    <div> {/* container for hours:minutes */} 
     <input aria-label="hours" /> {/* hours */} 
     <input aria-label="minutes" /> {/* minutes */} 
    </div> 

    <Select aria-label="AM or PM" /> {/* custom React component, for AM/PM */} 
</fieldset>