Dynamic ARIA and accessibility

Static ARIA is easy. Dynamic ARIA is where you can get an accessibility win.

When UI state changes, the attributes that describe that state need to change with it — otherwise assistive tech gets out of sync with the UI.

Example: A validated text field shouldn’t always announce an error.

Bind aria-invalid and aria-describedby to the validation state so the error message is only associated when it’s real (see screenshot for example in Vue.js).

Same idea for expand/collapse (aria-expanded), busy submits (aria-busy / disabled), and live regions (aria-live) for async results.
Rule of thumb: if the visual UI changes, check whether the accessibility tree needs an update too.

<input
   id="name"
   :aria-invalid="!invalid"
   :aria-describedby="!invalid ? "name-error" : undefined"
/>
<span v-if="!invlaid" id="name-error">
   Name must have at least 5 characters.
</span>