Capstone 2 SaaS Application Architecture & Requirements

Technical Deep Dive & Specifications

1. Document Outline & Landmark Mapping (WHATWG & WAI-ARIA 1.2)

HTML5 introduces structural elements that map directly to the Accessibility Object Model (AOM) landmark tree. In an enterprise SaaS dashboard, landmark regions allow assistive technology users to press shortcut keys (such as D in JAWS/NVDA or VO + U in VoiceOver) to jump between operational panels.

+----------------------------------------------------------------------------------------------------+
|                                    APP LANDMARK & AOM TOPOLOGY                                     |
+----------------------------------------------------------------------------------------------------+
| <a href="#main-content" class="skip-link">Skip to main telemetry</a>                               |
+----------------------------------------------------------------------------------------------------+
| HEADER [role="banner"]                                                                             |
|  ├── [Org Selector / Tenant Badge] (aria-haspopup="listbox")                                       |
|  ├── [Global Search Bar] (<input type="search" role="searchbox" aria-autocomplete="list">)         |
|  ├── [System Incident Banner] (<div role="alert" aria-live="assertive">)                           |
|  └── [Account Profile Menu] (<button aria-expanded="false" aria-controls="user-menu">)            |
+----------------------------------------------------------------------------------------------------+
| NAV [role="navigation" aria-label="Primary Workspace"]                                             |
|  ├── Dashboard (aria-current="page")                                                               |
|  ├── Node Infrastructure (<a href="/nodes">)                                                       |
|  ├── Real-Time Logs (<a href="/logs">)                                                             |
|  └── IAM & Access Keys (<a href="/security">)                                                      |
+----------------------------------------------------------------------------------------------------+
| MAIN [id="main-content" role="main" aria-labelledby="page-title"]                                  |
|  ├── SECTION [aria-labelledby="live-metrics-heading"]                                              |
|  │    └── Metric Cards: CPU (<meter>), RAM (<progress>), IO (<output>)                             |
|  ├── SECTION [aria-labelledby="cluster-inventory-heading"]                                         |
|  │    └── Data Grid (<table role="grid" aria-colcount="6">)                                        |
|  └── DIALOG [id="cluster-modal" aria-modal="true" aria-labelledby="dialog-title"]                  |
+----------------------------------------------------------------------------------------------------+
| ASIDE [role="region" aria-label="Live System Alerts" aria-live="polite" aria-atomic="false"]        |
|  └── Toast Notification Stack (<div role="status" class="toast">)                                  |
+----------------------------------------------------------------------------------------------------+
| FOOTER [role="contentinfo"]                                                                        |
|  └── System Health Beacon, WebSocket Connection State (<output>), API Latency (<data>)             |
+----------------------------------------------------------------------------------------------------+

2. Semantic Landmark vs Generic Container Matrix

3. Accessible Design Tokens & CSS Custom Property Contract

To maintain enterprise compliance with WCAG 2.2 AAA Contrast Requirements (7:1 for normal text, 4.5:1 for large text), our architecture defines a rigid CSS custom property token dictionary that adapts automatically to prefers-color-scheme:

:root {
  /* Surface Color Scales */
  --surface-canvas: #0b0f19;
  --surface-card: #111827;
  --surface-card-hover: #1f2937;
  --surface-border: #374151;
  --surface-overlay: rgba(11, 15, 25, 0.85);

  /* Typography & Contrast Tokens (AAA Compliant) */
  --text-primary: #f9fafb;       /* Contrast > 14:1 on #0b0f19 */
  --text-secondary: #9ca3af;     /* Contrast > 5.5:1 on #0b0f19 */
  --text-muted: #6b7280;

  /* Semantic State Palette */
  --status-healthy: #10b981;     /* Emerald 500 */
  --status-warning: #f59e0b;     /* Amber 500 */
  --status-critical: #ef4444;    /* Red 500 */
  --status-info: #3b82f6;        /* Blue 500 */

  /* Focus Indicator Ring (WCAG 2.4.7 compliant) */
  --focus-ring: 2px solid #60a5fa;
  --focus-offset: 2px;
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 60–61 (<a class="skip-link" href="#main-content">): Creates a keyboard bypass mechanism conforming to WCAG 2.4.1 (Bypass Blocks). Screen reader and keyboard users can bypass repetitive navigation links directly upon loading.
• Line 64 (<header role="banner">): Explicitly signals the application's global banner region, containing identity, tenant context, and global utilities.
• Line 76 (<nav role="navigation" aria-label="Main Application Menu">): The aria-label differentiates this primary navigation from secondary pagination or breadcrumb bars.
• Line 78 (aria-current="page"): Informs assistive technology that the "Overview Dashboard" link represents the currently active route.
• Line 86 (<main id="main-content" role="main" aria-labelledby="...">): Establishes the primary unique content container, targetable by the skiplink and labeled by its internal <h1>.
• Line 93 (class="sr-only"): Provides a screen-reader-accessible heading for the metric cards section without cluttering the visual UI.
• Line 110 (<footer role="contentinfo">): Houses global operational diagnostics and metadata at the bottom of the layout hierarchy.

Expected Browser Render Output

+----------------------------------------------------------------------------------------------------+
|  [Logo] CloudMetrics Pro [Prod-US-East]                             Tenant: Acme Global Corp       |
+------------------------------------+---------------------------------------------------------------+
|  • Overview Dashboard (Active)     |  Infrastructure Health & Telemetry                            |
|  • Clusters & Nodes                |  Real-time resource utilization across 48 worker nodes.       |
|  • Live Telemetry                  |                                                               |
|  • Security & IAM                  |  +---------------------------+  +--------------------------+  |
|  • Tenant Settings                 |  | TOTAL CLUSTER LOAD        |  | ACTIVE NODES             |  |
|                                    |  | 99.98%                    |  | 48 / 50                  |  |
|                                    |  | ↑ 0.02% vs previous 24h   |  | 2 nodes provisioning     |  |
|                                    |  +---------------------------+  +--------------------------+  |
+------------------------------------+---------------------------------------------------------------+
| Status: All Systems Normal         | API Gateway: 14ms | WebSocket: Connected                      |
+----------------------------------------------------------------------------------------------------+