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.