Skip to main content
PUBLIC.INTERNET
⚡ Acesso Instantaneo🔒 Privacidade em Primeiro🆓 Sempre Gratuito📱 Funciona em Todo Lugar

Accessible Name Checker

Every interactive element has an accessible name: the short string a screen reader announces, like "Delete item, button." Browsers compute it with the W3C Accessible Name and Description Computation (accname), a strict precedence chain, and the order trips up even experienced developers, which is why an aria-label silently wins over visible text, or a button reads as blank. Paste an element's HTML into this tool, pick the Element to name, and it runs that algorithm and shows two things: the resulting accessible name, and a precedence trace that marks which step produced it and which steps were skipped. It walks the real order, aria-labelledby, then aria-label, then host-language labeling (a <label>, alt, value, <legend>, or <caption>), then name from content, then title, then placeholder. It also handles the cases people miss, like an aria-hidden icon inside a button being ignored, and an empty alt marking an image as decorative. Everything is parsed in your browser; nothing is uploaded.

Accessible name

 

Precedence trace

    How to Check an Accessible Name

    1. Start from an example or paste your own - Use Load an example to see common patterns, or paste your element (with any referenced labels) into the Paste HTML box.
    2. Pick the element - Choose the node you care about in the Element to name dropdown; it lists every element in your snippet.
    3. Read the name and the winner - The Accessible name panel shows the computed name and the line below states which step determined it.
    4. Follow the precedence trace - The trace marks the winning step with a check and shows the skipped and not-reached steps, so you can see why a label won or why the name is empty.
    5. Copy the result - Click Copy to grab the computed accessible name string for a bug report or test.

    Why This Tool?

    The accname algorithm is a normative W3C spec that browsers must implement, but the resources that rank for it are the spec itself, MDN, and GitHub libraries. The closest things to a tool are browser DevTools (which show the final name buried in a panel) and a government bookmarklet that scans a live page. None let you paste a snippet and watch the precedence resolve step by step, which is exactly what you need when debugging why a control announces the wrong thing. Seeing the order play out is far clearer than re-reading the spec's six numbered steps.

    The rule that surprises people most: aria-label and aria-labelledby override the visible text content of an element. A button that reads "Save" on screen but carries aria-label="Submit form" is announced as "Submit form," and the visible word is never spoken. This tool makes that override obvious by showing the content step greyed out below the winning attribute. A practical habit: prefer a visible <label> or real text content over aria-label whenever you can, so the accessible name and the visible name stay in sync, which also satisfies WCAG's label-in-name criterion.