Best approach for creating an accessible multi-step form with aria-live step indicator?

I’m working on a multi-step form where each step is dynamically displayed using <template> elements. As the user progresses, the previous step is hidden, and the next step is revealed (with JavaScript).

For accessibility, I’ve added aria-live="polite" to the root of the HTML document, and I dynamically update the content based on the selected step using JavaScript.

My question is: which approach is more accessible?

  • Adding aria-live="polite" to the root element and updating it with JavaScript when the step changes.

OR

  • Adding aria-live="polite" to each <template> element, with the step title already included inside the template.