If I have a 3 buttons on a page, and choosing one causes them to be hidden, and then show another div containing some form elements, I want to correctly notify the new content added shown. My understanding is dynamic content changes such as showing a region need to be handled properly in terms of WCAG. Is there a standard way to handle this in terms of aria/html?
I've tried aria-live, since it's often suggested for this scenario, on the outer div
of the new region, but even with aria-live="polite"
I get undesirable side affects. Let's say the region shown contains a small form. When focus moves to a text field, and I begin typing, I got the odd behavior that JAWS will repeatedly start reading the label again and again for each single keystroke as the user types characters in the input. If I remove the aria-live
attribute on the parent div, then tab through the form the label is only read once on field focus, and is not read again as the user is typing.
I.e. it seems the parent having an aria-live is causing child elements like labels to get read more aggressively, even though the region being shown is a one time change, and there's no dynamic changes after that point.
This odd behavior seems to imply that aria-live is better suited for small isolated elements such as errors/alerts being added to the page, rather than large regions.
Should I be using a role instead?
<form role="form" action="/submit" method="post">
<div hidden id="section1" aria-live="polite">
<h2>Form Header</h2>
<div>
<label for="RequestNumber">Request Number*</label>
<input id="RequestNumber" name="RequestNumber" type="text" />
</div>
</div>
</form>