demo · v144
Three of the most common patterns where authors reached for aria-details to wire up popovers, tooltips, or context menus. Each one is shown with the broken accessibility shape, the v144-correct alternative, and a simulated screen-reader trace so you can hear the difference.
old habit: aria-details to also pin layout. correct: aria-describedby + CSS anchor
before wrong
<button id="b1" aria-details="t1"> Help </button> <div id="t1" role="tooltip"> Opens the help panel </div>
after right
<button id="b1" aria-describedby="t1">
Help
</button>
<div id="t1" role="tooltip"
style="position-anchor:--b1;">
Opens the help panel
</div>
old habit: aria-details on the input. correct: popover invoker + aria-describedby
before wrong
<input aria-details="pw-rules"> <div id="pw-rules" popover> ≥8 chars, 1 symbol… </div>
after right
<input aria-describedby="pw-rules">
<div id="pw-rules" popover
anchor="pw-input">
≥8 chars, 1 symbol…
</div>
old habit: aria-details to "deepen" the summary relationship. correct: native <details>
before wrong
<h3 aria-details="body3">FAQ</h3> <div id="body3">answer…</div>
after right
<details> <summary>FAQ</summary> <p>answer…</p> </details>