Accessible Name Calculator
Free accessible name calculator. Flags WCAG 4.1.2 failures, 100% client-side.
Loading tool...
What is Accessible Name Calculator?
The Accessible Name Calculator is a free online accessibility tool that parses pasted HTML and computes, for every nameable element, the exact accessible name a screen reader would announce. It follows the W3C Accessible Name Computation: resolves aria-labelledby chains in reference order, honors aria-label, checks label element associations, reads native semantics such as button text, input values, image alt, fieldset legend, table caption and svg title elements, and falls back to the title attribute — flagging every interactive element left unnamed, computed entirely in your browser.
Key Benefits
- See the announced name, not just a pass or fail verdict
- Learn which rule produced each name and why
- Catch WCAG 4.1.2 failures before a screen reader user does
- Spot placeholder-only inputs and dangling labelledby references
- Export a shareable plain-text name audit report
Common Use Cases
- •Auditing forms before a VPAT or WCAG compliance review
- •Verifying custom ARIA widgets expose correct names
- •Reviewing icon buttons and image links for missing labels
- •Teaching developers how the accessible name algorithm works
- •Documenting accessible names in a design system component spec
How to Use the Accessible Name Calculator
- Paste your HTML: Copy the markup of the component, form, or template you want to audit and paste it into the input box, or click Sample to load a demo.
- Read the computed names: Every nameable element is listed with the exact accessible name a screen reader would announce, plus the rule that produced it — labelledby, aria-label, label, content, alt, or title.
- Review the warnings: Interactive elements with no name are flagged as WCAG 4.1.2 failures, along with placeholder-only inputs, dangling aria-labelledby references, and images missing an alt attribute.
- Fix and export: Add labels or alt text where flagged, re-check that the computed names match your intent, then copy or download the audit report for your records.
Key Features
- Computes names following the W3C Accessible Name Computation order
- Resolves multi-element and chained aria-labelledby references
- Detects label for, wrapping label, value, alt, legend, caption and svg title sources
- Flags interactive elements with no accessible name (WCAG 4.1.2)
- Warns about placeholder-as-label, dangling id references and missing alt
- Exportable plain-text accessible name audit report
Frequently Asked Questions
What is an accessible name?
The accessible name is the label a screen reader announces when an element receives focus or is navigated to. It is computed from a priority chain defined in the W3C Accessible Name Computation spec: aria-labelledby first, then aria-label, then native semantics such as label element associations, text content, value or alt attributes, and finally the title attribute.
Why does an unnamed button fail WCAG?
WCAG 4.1.2 (Name, Role, Value) requires every user interface component to have an accessible name that identifies its purpose. A button or link with no name is announced only as "button" or "link", so screen reader users cannot tell what it does. The most common fixes are visible text content, an aria-label, or a label element for form controls.
How is this different from the accessible description?
The name is the short label announced first; the description is additional context announced after it, usually provided by aria-describedby or title when a name already exists. This tool computes the name only, because the name is what WCAG 4.1.2 strictly requires for interactive elements.
Can a placeholder serve as an accessible name?
No. Placeholder text disappears as soon as the user types, is often skipped by assistive technology, and has poor contrast by default. While some browsers expose it as a last-resort fallback, it is not reliable. Use a visible label element, aria-label, or aria-labelledby instead — this tool warns you when a placeholder is the only text an input has.
Does the tool match the browser exactly?
It implements the core of the accname algorithm — labelledby chains, labels, native semantics, and title fallback — using static HTML parsing. It does not model runtime state such as CSS display none, DOM changes made by JavaScript, or the hidden attribute on label targets. For final verification, always confirm with a real screen reader pairing like NVDA plus Chrome or VoiceOver plus Safari.