Force Screen Reader to Read Label Upon Entering Div

Question

I have a div that contains a number of dynamic form elements. I want a label to be read by screen readers upon entry of the div via tabbing, but the div itself is (and should be) unfocusable. Normally using a for attribute on the label or aria-describedby/aria-labeledby attribute on the first form element would allow for this behavior, but the form elements change dynamically during load so the first element is uncertain.

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

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

Does anybody know of a way to produce this behavior via WIA-ARIA?

Alternatively, is there perhaps a way to use javascript to pull the first element under the div and dynamically add the necessary for/aria attributes?

A-Dub A-Dub · Accepted Answer · 2017-06-29T17:34:39

If you are wanting to make the page accessible, then you should probably use the correct semantic elements. Doing this allows screen readers and other assistive technology to correctly render the elements for their respective purposes. It seems that your div should be a form element and use a fieldset and legend rather than using a div to create a form. You should always avoid reinventing the wheel.

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

This would save you the need for the ARIA labels unless you have specific information to provide to only those users. Using proper semantic elements can go a long way toward making a page accessible for assistive technologies. This link, as well as many others, has some good information on making forms accessible in html: https://www.w3.org/WAI/tutorials/forms/

Force Screen Reader to Read Label Upon Entering Div

2 Answers