Accessible byspecification

Add <label htmlFor="email"> and <label htmlFor="password"> linked to each input. Placeholder text disappears on focus and is never a label substitute under WCAG.

Pair every severity color badge with an explicit text level — "High", "Medium", "Low" — or an icon with aria-label. Screen readers cannot perceive hue.

Add aria-label="Acknowledge alert — Room {id}" to every action button in the Actions column. Icon-only interactive elements must have a programmatic name.

Wrap the live alert count and feed container in <div aria-live="polite" aria-atomic="false">. Set aria-busy="true" on the table while data is loading, remove on resolve.

Add a visually hidden skip link as the very first focusable element on every page: <a href="#main" className="sr-only-focusable">Skip to main content</a>. Essential for keyboard users navigating the dense dashboard nav.

Add <main id="main">, <nav aria-label="Primary navigation">, and <section aria-labelledby> throughout. Landmarks let screen reader users jump between page regions without tabbing through every element.

Add role="switch" and aria-checked={isEnabled} to the Sound OFF / Push OFF buttons. Without it, a screen reader user cannot determine current state and the control's purpose is ambiguous.

Change each <th> to <th scope="col"> for Room, Subject, Event, Time, Priority, and Actions. Required for screen readers to associate data cells with their headers during row navigation.

Set alt="Ella Memory — return to home" on the logo image. If the logo is a CSS background, add aria-label="Ella Memory home" to the anchor wrapper element.

Add a "Forgot password?" link adjacent to the password field. Users who cannot authenticate should never reach a dead end — WCAG 3.3.4 requires error recovery mechanisms.

Replace bare dashes with <span aria-label="No data available">—</span>. Screen readers announce "—" as "dash" or skip it entirely, leaving metric context unresolved.

Audit every interactive element for a visible focus ring at ≥ 3:1 contrast. If outline: none is present, a custom 2px solid focus outline in #0A2540 must replace it across dashboard, forms, and modals.

No skip link — keyboard users must tab through the full topbar and navigation on every page load before reaching any content.

A visually hidden <a href="#main"> appears on focus as the first DOM element, letting assistive technology users bypass navigation immediately.

All page content — stat cards, charts, alert table — was wrapped in a plain <div>. Screen readers had no way to identify or jump to the primary content region.

<main id="main"> wraps all content after the topbar <header>. Assistive technology users can jump directly via landmark navigation (e.g. VoiceOver M key).

The active alert count refreshes every 30s and the table reloads on data changes — but no aria-live region existed. Screen reader users received no announcement when alert state changed.

The alert count badge uses role="status" aria-live="polite" aria-atomic="true". The table outer container carries aria-live="polite" aria-busy={loading} to signal loading state.

"Ack" and "Flag" buttons had only a title attribute. Screen readers announced the truncated button text without event context — unusable without visual reference to the row.

Each button receives a full aria-label combining action, zone, date, and time. Non-visual users get complete context before activating a potentially irreversible action.

The 6-column alert table was built entirely from CSS-grid divs. Screen readers traversed it as a flat list — column headers were not associated with their data cells.

role="table" on the container, role="rowgroup" on header and body, role="columnheader" on each header span, role="row" and role="cell" on every data row and cell.

All 8 metric cards displayed a bare "—" while data loads. VoiceOver announced "dash" in isolation — the metric label was not associated with the placeholder value.

<span aria-label="No data">—</span> wraps every loading dash. Screen readers now announce "No data" in context with the metric label, preserving the full meaning.