# Web Standards & Accessibility — Ops Portal Checklist
Applied during the July 2026 audit to all 10 ops portal HTML files. Covers HTML5 validity, WCAG 2.1 AA, and ARIA compliance.
## Structural Requirements
### Document-Level
- `` (first line)
- ``
- ` ` (first element in `
`)
- ` `
### Semantic Elements
| Element | When to Use |
|---------|-------------|
| `` | One per page, wraps primary content |
| `` | Page header (h1 + actions) |
| `` | Page footer (last-updated timestamp) |
| `` / `` | Navigation block |
| `` | Every card/section, paired with `` |
| `` → `` → `` | Strict hierarchy, no skipping |
### Section Card Pattern (before → after)
**Before (invalid):**
```html
...
```
**After (valid):**
```html
```
## Accessibility Requirements
### Interactive Elements
- **SVG icons** — all decorative/informational SVGs need:
- `role="img"`
- `aria-label="Refresh"` (or equivalent descriptive text)
- **Error banners** — must have `role="alert"` and `aria-live="polite"`
- **Tables** — every `` must have `scope="col"` (or `scope="row"`)
- **Buttons** — `` elements need accessible text (icon-only buttons need `aria-label`)
- **Navigation toggle** — hamburger button needs `aria-label="Toggle navigation"` and `aria-expanded`
### Color & Contrast
- The dark theme palette passes WCAG AA:
- `--bg-body: #0f172a` / `--text-primary: #f1f5f9` → ratio 15.1:1
- `--accent: #f59e0b` (amber) on `--bg-card: #1e293b` → ratio 7.2:1
- Status colors (green `#22c55e`, red `#ef4444`) used only as supplements, not sole indicators
- Status dots (`.status-dot`) are always paired with text labels
### Focus & Keyboard
- `.refresh-btn:hover` has `border-color: var(--accent)` — also applies `:focus-visible` (browser default)
- `.filter-btn.active` — selection state is conveyed through text (class change + visible count)
- Sortable table headers use `cursor: pointer` and hover highlight — no `:focus` outline removed
### Landmarks
- `` → nav injected via `fetch('/nav.html')`, already has `role="navigation" aria-label="Main navigation"`
- `` — primary content landmark
- `` — implicit banner landmark
- `` — implicit contentinfo landmark
## Nav Injection Pattern (Critical)
Inline `