wtf( )unctionsystem design, drawn
← all problemsAccessibilityHard

Four labels, one wins

A button has picked up four different sources of text over time: a visible label element, an attribute label, its own inner text, and a tooltip. A screen reader announces exactly one of them.

The browser resolves these in a fixed order and stops at the first it finds. Most people guess it announces the visible text, because that's what they can see.

Put the sources in the order the browser consults them.
?Guess wrong and you'll add a label that is silently outranked by one already there.

Outside every boundary: The button (four sources of text), Screen reader (announces one), Name computation (stops at the first hit) Connections: The button calls Name computation Name computation calls Screen reader — one name

The buttonfour sources of text
Screen readerannounces one
Name computationstops at the first hit
Consulted first
Your order
    Nothing yet. Tap them on the left, best first.
Order them by consulted first. Tap to place, tap again to take back.