Semantic HTML, the accessibility tree and ARIA

In a chemistry store, a bottle's label gives its name, class and hazard state. That description guides use, but applying a catalyst label to water does not make it catalyse anything. Likewise, an ARIA role tells assistive technology what a control means without installing the behavior a user expects.

Bottle store	Interface
Substance class	Role
Specific substance name	Accessible name
Hazard or condition marker	State
Actual reaction	Implemented behavior

The analogy does not define the name-computation algorithm or speech scheduling. Focus restoration, dialog containment and roving tabindex belong to ui-focus-keyboard; testing-library queries belong to test-react-testing-library.

4.1 EXH-1610: meaning and activation are independent facts

The local console fixture compares a native control with two focusable custom controls carrying the same visible purpose. Each receives browser-generated keyboard events after focus moves from the document. One custom control has no key logic; the other implements only one activation key. A separate expanded catalog-menu trigger yields the snapshot button "Catalog" [expanded]. That worked example is distinct from the assessed controls and shows that a state can be exposed in the tree without making a claim about keyboard behavior. Button pattern

MR !1810 proposes native controls for the console. A native radio group supplies a separate ungraded browser observation; it is not a lesson in custom focus-management algorithms.

The browser tree is a representation, not a transcript of the DOM. A label may be computed from hidden referenced text, and a state may be present even when no visual color changes. Conversely, a visually obvious change can be absent from the tree. The fixture keeps those facts separate so a learner can inspect one claim at a time before combining them in a real interface review.

4.2 Catalog filters: tree facts are independent

The fixture creates unrelated catalog variants: a shipping fieldset with a legend, a generic container with a heading, a save button whose label changes, and a noninteractive product badge. It inspects their accessibility snapshots separately. These variants show that visible grouping, a label, and a state are separate tree facts. The practice fixtures use different markup and are assessed only in their own scripts. Grouping, state

4.3 Names, diagnostics and update protocols

An icon-only catalog command is checked with axe's full WCAG 2 A tag set. A different invalid ARIA value is checked under a different rule. Separately, initially empty catalog regions receive text and Chromium's accessibility protocol exposes their role and live properties. The fixture checks both an ordinary update region and an urgent alert region, but does not claim that a particular screen reader speaks either update. Production verification should add relevant assistive-technology combinations and message cadence. It should also test updates that replace prior text, append a count, and arrive while a user is completing a form; those are product decisions beyond a role snapshot. axe button-name, ARIA