What is an accessible name?

The accessible name is the short label assistive technology announces for an element, such as 'Close dialog' for a button. It is computed by browsers using the W3C Accessible Name and Description Computation, and it is what a screen reader user actually hears.

What order are the rules applied in?

Precedence is: aria-labelledby first, then aria-label, then native semantics (an associated label, alt text, or the element's own text content), and finally the title attribute as a weak fallback. The first rule that produces a non-empty name wins.

Why is using placeholder or title flagged as weak?

Placeholder text vanishes as soon as the user types, and title tooltips do not appear on touch devices and are inconsistently announced. Both are last-resort fallbacks. A visible label or aria-label is far more reliable.

Does an empty alt attribute mean no name?

An empty alt (alt equals double quotes) intentionally marks an image as decorative, so it is hidden from assistive technology and has no accessible name. A missing alt attribute entirely is different and usually a bug that exposes a filename or no name at all.

Does this run a real screen reader?

No. It reproduces the standardised name-computation algorithm in JavaScript using the browser's HTML parser. It is a fast, deterministic check, but you should still confirm critical flows with an actual screen reader such as NVDA or VoiceOver.

Accessible Name Computer

Every interactive control needs a name that assistive technology can announce. If a button is just an icon with no label, a screen reader announces only “button” and the user has no idea what it does. This tool reproduces the browser’s own name-computation algorithm so you can verify the announced name from a pasted snippet, without firing up a full screen reader.

How it works

The tool parses your snippet with the browser’s built-in HTML parser, finds the first interactive element (or any element with a role), and walks the W3C Accessible Name and Description Computation in precedence order. The first step that yields a non-empty string wins.

aria-labelledby — the text of each referenced element id is collected and joined in order. This overrides everything else.
aria-label — if present and non-empty, its trimmed value is used.
Native semantics — depends on the element:
- Form fields (input, textarea, select) use an associated label (via wrapping or for), then placeholder, then a button value.
- Images and image areas use the alt attribute.
- Buttons, links, summaries and table cells use their own text content.
title — used only as a weak fallback tooltip when nothing above produced a name.

If no rule produces text, the element has no accessible name, which is reported as an error because such a control is effectively unusable with a screen reader.

Example

Given this snippet:

<button aria-label="Close dialog" class="x">&times;</button>

The visible content is just a multiplication sign, but aria-label wins at step 2, so the computed accessible name is Close dialog. Remove the aria-label and the name falls back to the symbol character, which a screen reader would announce unhelpfully as “times” or nothing useful.

Notes and limitations

This implements a practical subset of the spec covering the common 95 percent of real elements. It does not resolve cross-document references, CSS generated content, or the full recursive traversal for complex nested labelling.
Always confirm critical interactions with a real screen reader (NVDA, JAWS, VoiceOver). This tool is a fast first check, not a replacement for testing with assistive technology.
All parsing happens in your browser. Nothing you paste is uploaded.