Reference-matched dashboards need DOM-order and geometry checks

A reference-matched dashboard is not complete when colors and components resemble the mock; its information hierarchy, DOM order, and measurable geometry must agree too. Make the primary workflow first in both visual and keyboard order, keep one authoritative heading/legend, and verify rail widths, master-detail ratios, and page overflow at representative breakpoints. Pair screenshot inspection with semantic tests because CSS ordering can look correct while assistive technology reads the old structure. This approach is presentation-safe when data contracts and execution paths remain unchanged.

Applies when: rebuilding an operational dashboard from an approved visual reference without changing backend behavior. Keywords: dashboard visual fidelity DOM order accessibility responsive geometry overflow hierarchy