DIGITARISE
esc

8 of 64 indexed · ↑↓ to move · ↵ to open

Accessible name inspector

Compose an element and watch the accessible name computation resolve, step by step.

InstrumentAccName 1.2Deterministic model
Element<[role=button]>Delete</[role=button]>
Referencing attributes & state
Name computation — first non-empty step wins
  1. step 2.2aria-labelledbyn/a

    Not set on this element.

  2. step 2.4aria-labelempty

    Absent or whitespace — skip.

  3. step 2.5host-language labeln/a

    A button has no host-language labelling attribute; its name comes from content.

  4. step 2.6name from contentused

    A button takes its name from its subtree text → "Delete".

Accessibility tree nodenamed
Rolebutton
Accessible name"Delete"
Name sourcecontent
Description—
States—
Exposed to assistive techDelete, button

Precedence per the W3C Accessible Name and Description Computation 1.2 (Working Draft, 29 May 2026); role name-from rules and states per WAI-ARIA 1.2 (W3C Recommendation, 6 June 2023). Deterministic: no timers, no network, no randomness. The exact words a screen reader speaks vary by AT and browser — the name, role, and state values shown are the ones the accessibility tree exposes.

Runs entirely in your browser. Nothing is sent or stored.

A precedence order, not a guess

Every element exposed to assistive technology carries exactly one computed text label. The Accessible Name and Description Computation defines how it is derived, and the order is strict: aria-labelledby first, then aria-label, then the host-language label such as a label element or an alt attribute, then name-from-content where the role permits it, and title last as a fallback.

Because the algorithm is deterministic, so are its failures. Most unlabelled-control defects are not mysterious: the computation ran correctly and produced an empty string, because nothing in the precedence chain supplied text.

Two rules that surprise people

Name-from-content is role-gated. A button takes its name from the text inside it; a textbox does not. Putting visible text inside a div with role="textbox" yields no accessible name at all, which is the classic unlabelled-field trap.

Hidden content usually contributes nothing — except when it is referenced directly by aria-labelledby. A node referenced that way contributes its text even when it is hidden, which is how visually hidden label text works, and why aria-hidden on a referenced node does not do what people expect.