Keep the spinner hidden from assistive technology and put aria-busy="true" on the control or region being updated.
Verification / 07
Accessibility
Operational styling does not replace semantics. Controls remain native where possible, focus remains visible, state text accompanies color, and motion respects user preferences.
01 / SEMANTICS
Start with native elements
Buttons remain buttons, links remain links, fields have labels, tables preserve headers, dialog uses its native element, and popovers use the platform attribute.
Use
<button>, <label>, <table>, <dialog>, popover, and heading levels that match document structure.
Avoid
Clickable divs, placeholder-only fields, unlabeled icon controls, and status that exists only as a hue.
02 / KEYBOARD
Visible focus and complete operation
All interactive examples can be reached by keyboard. Tabs add arrow-key navigation; dialogs, popovers, and native controls retain browser behavior.
Keyboard inspection
Try Tab
03 / ICONS
Name meaning, hide decoration
An equipment sign may be meaningful in isolation. A glyph inside a clearly named button is decorative and should not create duplicate announcements.
<!-- Meaningful standalone icon -->
<svg class="c19-icon" role="img" aria-label="Radiation hazard">
<use href="icons/cargo19-icons.svg#c19-radiation"></use>
</svg>
<!-- Decorative icon inside a named control -->
<button class="c19-icon-button" aria-label="Search">
<svg class="c19-icon" aria-hidden="true">…</svg>
</button>
04 / COLOR
Text accompanies every state
The sign palette can encode operational categories, but UI status includes explicit words, labels, units, and structural position.
Nominal — life support online
Observe — thermal variance
Critical — pressure lost
Cryogenic — protective equipment required
05 / MOTION
Reduce rather than merely slow
The title reveal, signal-acquisition cue, spinner, skeleton, transitions, and pulse helpers collapse under prefers-reduced-motion. Content remains visible at the first frame.
Motion-safe content
06 / TRANSIENT UI
Announce work and preserve platform dismissal
Spinners are visual only. Loading text carries the message, aria-busy identifies the updating control or region, and native popovers retain Escape and light-dismiss behavior.
Use a clearly named button with popovertarget. Do not add role="menu" unless the application also implements the complete menu keyboard pattern.
Tab order, Escape, and outside-click dismissal remain platform behavior.
07 / CHECKLIST
Pre-release verification
Use this list as a minimum, then test the actual product with assistive technology and representative users.