demo · v144 · accessibility

Screen-reader Trace

aria-details was a popular hack for tooltip positioning. v144 reaffirms: aria-details is for accessibility, not layout. Side-by-side, the same UI built two ways — with aria-details (wrong, double-announces) and with anchor positioning + a hidden aria-describedby (right).

WRONG: aria-details used for layout

Use a strong password.

A screen reader announces the popover content as an extended detail of the button. Visually it doubles as the layout, but the user hears the same string twice if they tab back.

RIGHT: anchor for layout, aria-describedby for AT

Anchor positioning handles layout; aria-describedby attaches a one-line description for AT. No double announcement.

the API

<!-- AVOID -->
<button aria-details="t1">help</button>
<div id="t1">...</div>

<!-- DO -->
<button aria-describedby="t2" style="anchor-name:--b">help</button>
<div id="t2" role="tooltip"
     style="position-anchor:--b;top:anchor(bottom)">...</div>

see also