The Priority Order Browsers Use to Compute an Accessible Name
A button visually reads "Submit order," but a developer also added
aria-label="Submit" to it. A screen reader will announce one of these
two strings — not both, and not some merge of them.
Which one wins, per the browser's accessible-name computation order?
The correct answer is "aria-label ('Submit') overrides the visible text."
Browsers resolve a single accessible name using a priority order:
aria-labelledby wins first if present, then aria-label, then the
element's own visible text content, then a title attribute as a last
resort. Adding aria-label="Submit" to a button that visually reads
"Submit order" silently overrides the visible text with whatever string
the attribute holds — exactly how a mismatch between what's displayed
and what's announced sneaks into a codebase.
Visible text only wins when no aria-labelledby or aria-label is
present — it doesn't automatically take priority over either. The order
isn't alphabetical. Browsers don't concatenate multiple naming sources
together; exactly one wins per the priority chain.
Share this question