CodePark/ questions / ARIA in practice
START PRACTICINGPRACTICE
Frontend question · Accessibility › ARIA in practice

What happens to keyboard and screen reader users with this markup?

<div aria-hidden="true">
  <img src="promo.jpg" alt="Summer sale">
  <button>Shop now</button>
</div>
The button can still get focus with Tab, but the screen reader has nothing to announce for it

aria-hidden="true" removes the content from the accessibility tree only. It does not change focus. So Tab still lands on the button, but the screen reader can't describe it. The user hears silence or something confusing on a control they can activate.

"The button is removed from the Tab order" is the tempting wrong answer. That is what inert or hidden do, not aria-hidden. The ARIA rule is: never put aria-hidden on an element that can get focus, or on a parent of one.