demo · v144

ARIA vs Anchor

Toggle between the broken pattern (aria-details treated as an anchor) and the proper one (anchor-name + position-anchor for layout, aria-details for the screen reader). The position of the blue chip changes; the accessibility tree stays correct.

pattern:
tooltip → anchored

aria-details target id: info · accessibility relationship preserved in both modes

position source: anchor-name (CSS)

the right shape

<!-- Visual layout: CSS anchor positioning -->
<button id="trigger" style="anchor-name: --trig" aria-details="info">Action</button>
<div id="info" style="position: absolute; position-anchor: --trig;
                       top: calc(anchor(bottom) + 6px); left: anchor(center);">
  …
</div>
<!-- Accessibility relationship: aria-details stays for the screen reader. -->

see also