Divを入力したときにラベルを読み取るようにスクリーンリーダーを設定

Question

私はdivの中にいくつかの動的フォーム要素が含まれています。私はタブを介してdivの入力時にスクリーンリーダーがラベルを読むことを希望しますが、div自体はunfocusableです（そして、そうすべきです）。通常、ラベルのfor属性または最初のフォーム要素のaria-describedby/aria-labeledby属性を使用すると、この動作が可能になりますが、フォーム要素は負荷時に動的に変化し、最初の要素は不確定です。

<label/> <%-- This should be read --%> 

<div> <%-- When this div is entered during navigation with tabbing --%> 
    <dynamic form element 1> 
    ... 
    <dynamic form element n> 
</div> 

誰でもWIA-ARIA経由でこの動作を生成する方法を知っていますか？

また、javascriptを使用してdivの下の最初の要素をプルし、必要な/ aria属性を動的に追加する方法がありますか？

Answer 1

<div>の代わりに<fieldset>要素をコンテナに使用してください。画面リーダーは、フォーカスがフィールド内の任意のフィールドに入力されると、フィールドセットラベルを通知します。

Answer 2

ページをアクセス可能にしたい場合は、おそらく正しい意味要素を使用する必要があります。これにより、スクリーンリーダーやその他の支援技術がそれぞれの目的で要素を正しくレンダリングすることができます。 divをフォーム要素として使用し、divを使用してフォームを作成するのではなく、フィールドセットと凡例を使用する必要があるようです。あなたは常に車輪の再発明を避けるべきです。

<form method="" action=""> 
    <fieldset> 
     <legend>This will be read when the user tabs to this</legend> 
     <dynamic form element 1> 
     ... 
     <dynamic form element n> 
    </fieldset> 
</form> 

これにより、これらのユーザーのみに提供する特定の情報がない限り、ARIAラベルが不要になります。 適切なセマンティック要素を使用すると、支援技術のためにページにアクセスできるようにすることができます。 このリンクは、他にも多くの人々が、フォームをHTMLでアクセシブルにするための良い情報を持っています：https://www.w3.org/WAI/tutorials/forms/