# Accessibility — Gnomad Webcanvas **Version:** 0.1.0-beta.2 **Last updated:** June 2026 **Status:** Partial — keyboard shortcuts, Monaco themes, and shell light/dark/hc modes shipped; full WCAG audit pending --- ## Theme & visual accessibility The **Theme** selector in the navbar sets both: - **Monaco editor theme** (`vs-dark`, `vs-light`, `hc-black`) - **Application shell theme** via CSS variables (`data-ui-theme` on ``) | Editor theme | Shell mode | Use case | |--------------|------------|----------| | Dark | `dark` | Default low-light editing | | Light | `light` | Bright environments | | High Contrast | `hc` | Maximum contrast (yellow accent on black) | Theme preference persists in `localStorage` (`liveview-preferences`). Preview background modes (white / dark / checkerboard) are independent and help test user content contrast. Gnomad Webcanvas supports full keyboard workflows for common actions without requiring a pointer. | Shortcut | Action | |----------|--------| | `Ctrl/Cmd+S` | Save | | `Ctrl/Cmd+Shift+S` | Save As / Export | | `Ctrl/Cmd+O` | Open (desktop) | | `Ctrl/Cmd+Enter` | Refresh preview | | `Ctrl/Cmd+\` | Toggle layout | | `Ctrl/Cmd+1/2/3` | Focus HTML/CSS/JS pane | | `Ctrl/Cmd++` / `-` | Font size | | `Ctrl/Cmd+Shift+F` | Format pane | | `Ctrl/Cmd+Shift+C` | Toggle console | | `Ctrl/Cmd+Shift+E` | Export ZIP | | `Escape` | Exit preview fullscreen | Full list available in the **Shortcuts** modal (navbar). --- ## Monaco editor Monaco inherits VS Code accessibility features when focused: - Screen reader support for code content - Standard text editing shortcuts - Syntax highlighting with high-contrast theme option Select **High Contrast** in the theme dropdown for improved visibility. --- ## Focus management | Area | Status | |------|--------| | Navbar buttons | Focusable; native `