a11y：divでラップされた入力フィールド。ラベルに「idで」添付されています。

Question

2つの別々のinputフィールドで構成されたタイムピッカーコンポーネントがあります。

これは骨格が

<div> {/* component container */} 

    <div> {/* container for hours:minutes */} 
     <input /> {/* hours */} 
     <input /> {/* minutes */} 
    </div> 

    <Select /> {/* custom React component, for AM/PM */} 
</div> 

どのように見えるかすべては「通常の」ユーザーのための素晴らしい作品ですが、アクセシビリティが悪いです。

コードベースに既存の制限があるため、私はすべてをlabelの中にラップするのは難しいので、私の問題を解決できます。

---

私は何をやってと思っていは次のとおりである、と私はこれは本当にスクリーンリーダーにとって有用であってもなくてもよいかどうかのコミュニティの入力を（HA！）したいと思います。

<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を使用してラベルを付けます。

これはスクリーンリーダーでも機能しますか？

Answer 1

いいえ、for attribute must point at a labelable element：属性の

ザは、キャプションが関連付けられる とフォームコントロールを示すために指定されてもよいです。属性が指定されている場合、 属性の値は、ラベル要素と同じ文書 内のラベル付け可能な要素のIDでなければなりません。

labelable elementsは以下のとおりです。input、button、select、textarea、fieldset、output、object、meter、progress、label、img。

私はそれをこのように構築します：

<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>