In the accessible name computation, does `aria-labelledby` pointing at an element styled `display: none` still produce a name, and what is the accessible name of `<button>Delete <span aria-hidden="true">×</span></button>`?

## Two traversals, two rules The accessible name computation reaches text in two different ways, and hidden content is treated differently in each. 1. **Subtree traversal** — walking an element's own descendants to build a name from its content, as for `<button>` or `<a>`. 2. **Reference resolution** — following `aria-labelledby` (or `aria-describedby`) to another element and taking its text. The default rule is that hidden nodes contribute nothing. The exception is that a node **directly referenced** by `aria-labelledby` or `aria-describedby` is included even when it is hidden. Everything below follows from those two sentences. ## What counts as hidden For this purpose, "hidden" is not only `display: none`. A node is hidden if it is not rendered or is explicitly removed from the accessibility tree: - `display: none` — not rendered at all - `visibility: hidden` — laid out but not painted - the `hidden` content attribute - `aria-hidden="true"` — rendered, but explicitly pruned from the accessibility tree All four exclude a node during subtree traversal. ## The subtree case ```html <button>Delete <span aria-hidden="true">×</span></button> <!-- accessible name: "Delete" --> ``` The traversal collects "Delete" from the text node and skips the span because `aria-hidden="true"` removes it. This is the idiomatic pattern for icon-plus-text buttons: the glyph or icon font is marked `aria-hidden` so users are not read a stray "times" or a private-use codepoint, while the real word supplies the name. The mirror-image mistake is marking the *text* hidden by accident. Collapse a label with `display: none` for a compact layout and the button's name goes with it — the control becomes an anonymous "button" with no announcement. ## The direct-reference exception ```html <span id="lbl" style="display: none">Delete invoice 42</span> <button aria-labelledby="lbl">🗑</button> <!-- accessible name: "Delete invoice 42" --> ``` By the spec, the span's text is used, because it is the node the attribute points at directly. The rationale is pragmatic: authors legitimately keep strings in the document that only assistive technology should consume, and a naming reference is an explicit statement of intent that outweighs the node's hidden state. The exception is narrow in an important way: it covers the referenced node itself, not arbitrary hidden descendants *inside* it. A referenced container whose own children are individually hidden does not automatically resurrect all of them. It is also the shakiest corner of the algorithm in real browsers and screen readers. Support for naming from `display: none` content has historically varied, so this pattern deserves a manual check with an actual screen reader rather than trust. It carries a maintenance cost too: a label that is invisible on screen is a label nobody notices when they change the button, and it cannot participate in "does the name match the visible text" review. ## Visually hidden is not hidden The distinction that trips people up: text moved off-screen or clipped by the common visually-hidden utility is still **rendered**, so it is not hidden for accessibility purposes and it participates normally in subtree traversal. ```html <button> <svg aria-hidden="true" viewBox="0 0 16 16"><path d="…"/></svg> <span class="visually-hidden">Delete invoice 42</span> </button> <!-- accessible name: "Delete invoice 42" --> ``` This is the robust version of the previous pattern and the one to prefer: it uses the normal, universally supported subtree path instead of the fragile hidden-reference exception, and the text is real content that survives copy edits and translation. The whole trick rests on the utility class using off-screen or clipping techniques rather than `display: none`, which would defeat it entirely. ## Generated content participates Text injected by `::before` and `::after` is part of the name computation, because it is rendered content in the subtree. That is a frequent source of mystery names — an icon font that injects a glyph through generated content can prepend a garbage character to a button's announcement unless the pseudo-element is kept out of the accessibility tree. ## How to work with it Prefer the paths with the fewest exceptions. Name a control from real, rendered text; hide decorative glyphs with `aria-hidden="true"`; use off-screen text when the label must not be visible; and reserve naming from `display: none` content for cases where nothing else fits — then confirm the result in the accessibility tree and with a screen reader. Chrome's Accessibility pane shows the computed name, so the answer to "did that hidden span count?" is always one glance away rather than a debate.