Engrain by ByteRush

QLT.03.02 Mid-level· 11 minCore — asked often

Semantics, the accessibility tree and accessible names

How browsers build an accessibility tree of roles, names and states from your HTML, how an element's accessible name is computed (aria-labelledby, aria-label, label, alt, content), the first rule of ARIA, and how to inspect it in DevTools.

Comes up in: Web fundamentals, React

Learn#

Imran tests his shop with a screen reader. The cart icon is read as “image”, and the search box as “edit text”. Three buttons are just “button”. Sighted users see labels, but the screen reader finds nothing to read.

Browsers turn the DOM into an accessibility tree that assistive technologies read. Each node has a role (what it is: button, link, textbox), an accessible name (what it is called), and states (checked, expanded, disabled).

The name comes from the first source that applies. The order is aria-labelledby, then aria-label, then a <label> for form fields, alt for images, the text of buttons and links, and last title:

<label for="q">Search products</label>
<input id="q" type="search">                       <!-- name: "Search products" -->
<button><svg aria-hidden="true">…</svg>Add to cart</button>  <!-- name: "Add to cart" -->
<button aria-label="Close dialog">×</button>       <!-- name: "Close dialog" -->
<img src="logo.svg" alt="Engrain">                 <!-- name: "Engrain" -->

ARIA attributes change the tree, but not the behavior. So the first rule of ARIA is simple. If a native HTML element already has the role and behavior you need, use it. Do not add ARIA to a div instead.

A div that looks like a button vs a real buttonStep 1 of 4

Page

  • <div class=btn><svg/></div>

State

    empty

    The page has <div class="btn" onclick=…><svg>…</svg></div> as the cart button. It looks like a button.

    Read the steps as text
    1. The page has <div class="btn" onclick=…><svg>…</svg></div> as the cart button. It looks like a button.
    2. The accessibility tree sees a generic element with no name: no role, nothing to say, not focusable.
    3. Replace it with <button aria-label="Cart, 3 items"><svg aria-hidden="true">…</svg></button>.
    4. Now: role button, name "Cart, 3 items", focusable, works with Enter and Space. A screen reader says "Cart, 3 items, button".

    Predict#

    Predict first

    A button contains only an icon <svg> with no title, and no aria-label. What does a screen reader announce?

    Interview angle#

    Say it like this — about 30 seconds

    “Browsers build an accessibility tree from the DOM. Each node has a role, a name and states, and screen readers read that tree. The name comes first from aria-labelledby, then aria-label. Then come native sources: a label for inputs, alt for images, and the text of buttons and links. The first rule of ARIA is to use a native element when one exists. A div with a button role still needs focus and keys added by hand. I check names in DevTools.”

    Stays on your device. Nothing is uploaded.
    Follow-up What is the first rule of ARIA?
    Do not use ARIA if a native HTML element or attribute gives the semantics and behavior you need.
    Follow-up How is an element's accessible name computed?
    aria-labelledby, then aria-label, then native labelling (label, alt, caption, legend), then content for roles that allow it, then title.
    Follow-up Why is a div with role="button" not enough?
    It gets the role, but not focus, Enter and Space activation, or form behavior; you must add tabindex and key handling yourself.

    Practice#

    Guided

    Implement a simplified accessible-name computation over real DOM elements.

    Done when

    • The sources apply in the given priority order.
    • Labels work by for and by wrapping; alt="" gives an empty name.
    • Button and link text has its whitespace collapsed.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    What three things does an accessibility tree node expose?

    Role, accessible name and states.

    Which naming source has the highest priority?

    aria-labelledby.

    What is the first rule of ARIA?

    Use a native HTML element when one gives the needed semantics and behavior.

    What does alt="" on an img mean?

    The image is decorative and has no accessible name.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round
    Chrome DevTools’ Accessibility pane shows each element’s role, computed name and where the name came from; the full-tree view shows the whole page as assistive technology sees it.
    Check yourself: Where can you see the accessibility tree in Chrome?

    DevTools, Elements panel, Accessibility pane (or the full tree view).

    How it works underneathSenior rounds
    Native elements carry implicit roles: button, link, textbox, heading. Some roles, such as generic (a plain div), do not support names, so aria-label on a bare div is ignored by many screen readers .
    Check yourself: Can aria-label name a div with no role?

    Generally no; names are not supported on generic elements.

    Edge cases and trapsWhere people slip

    The description is separate from the name: aria-describedby adds hints and errors after the name (RCT.10.02). Keep names short and matching visible text, so voice-control users can say them.

    Check yourself: What is the difference between aria-label and aria-describedby?

    aria-label sets the name; aria-describedby adds a longer description read after it.

    In productionStaff-level answers

    Automated checks such as axe catch missing names and roles, but not wrong ones; test with a real screen reader too (QLT.04.05) .

    Check yourself: Name an automated tool that finds missing names.

    axe-core (for example via Lighthouse or browser extensions).

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What is the first rule of ARIA?
    • How is an element's accessible name computed?