/** * Full Measures - Accessibility Layer * WCAG 2.1 AAA (floor, not ceiling) * * Six combinable, persistent user settings: * 1. Dark / Light mode (handled in app.css via data-theme) * 2. High Contrast [data-high-contrast="true"] * 3. Text Size [data-text-size="110|120|130|140|150|160|170|180|190|200"] * 4. Dyslexia Font [data-dyslexia-font="true"] * 5. Reduce Motion [data-reduce-motion="true"] * 6. Grayscale [data-grayscale="true"] */ /* ======================================== SKIP-TO-CONTENT LINK First focusable element on every page ======================================== */ .skip-to-content { position: absolute; top: -100%; left: var(--spacing-4); background: var(--primary); color: #fff; padding: var(--spacing-3) var(--spacing-6); border-radius: 0 0 var(--radius) var(--radius); font-size: var(--text-base); font-weight: var(--font-bold); z-index: 99999; text-decoration: none; transition: top 200ms ease; } .skip-to-content:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* ======================================== GLOBAL FOCUS-VISIBLE Visible focus ring on ALL focusable elements ======================================== */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Buttons and links get enhanced focus */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(139, 184, 162, 0.25); } /* ======================================== PREFERS-REDUCED-MOTION (global) Disable ALL motion when OS requests it ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================================== REDUCE MOTION (user toggle) [data-reduce-motion="true"] on ======================================== */ [data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ======================================== HIGH CONTRAST MODE [data-high-contrast="true"] on Boost contrast, thicken borders, underline links, strengthen focus rings ======================================== */ [data-high-contrast="true"] { --border: rgba(255, 255, 255, 0.5); --border-light: rgba(255, 255, 255, 0.3); } [data-high-contrast="true"][data-theme="light"] { --border: rgba(0, 0, 0, 0.5); --border-light: rgba(0, 0, 0, 0.3); } [data-high-contrast="true"] { --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #c0c0c0; } [data-high-contrast="true"][data-theme="light"] { --text-primary: #000000; --text-secondary: #1a1a1a; --text-tertiary: #333333; } /* All links underlined in high contrast */ [data-high-contrast="true"] a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } [data-high-contrast="true"] a.btn, [data-high-contrast="true"] a.action-card, [data-high-contrast="true"] a.mobile-nav-item, [data-high-contrast="true"] a.desktop-header-link, [data-high-contrast="true"] a.mobile-header-btn { text-decoration: none; } /* Thicker borders */ [data-high-contrast="true"] .card, [data-high-contrast="true"] .action-card, [data-high-contrast="true"] .entry-row, [data-high-contrast="true"] .alert, [data-high-contrast="true"] .form-input, [data-high-contrast="true"] .form-textarea, [data-high-contrast="true"] .form-select, [data-high-contrast="true"] .input-soft, [data-high-contrast="true"] .textarea-soft, [data-high-contrast="true"] .btn-outline { border-width: 2px; } /* Stronger focus rings */ [data-high-contrast="true"] :focus-visible { outline-width: 4px; outline-offset: 3px; } /* Increased button contrast */ [data-high-contrast="true"] .btn-primary { background: var(--primary-dark); color: #ffffff; font-weight: var(--font-bold); } [data-high-contrast="true"] .btn-ghost { border: 2px solid var(--border); } /* ======================================== DYSLEXIA-FRIENDLY FONT [data-dyslexia-font="true"] on ======================================== */ [data-dyslexia-font="true"] { --font-sans: 'OpenDyslexic', 'Atkinson Hyperlegible', 'Trebuchet MS', 'Verdana', -apple-system, BlinkMacSystemFont, sans-serif; } [data-dyslexia-font="true"] body, [data-dyslexia-font="true"] input, [data-dyslexia-font="true"] textarea, [data-dyslexia-font="true"] select, [data-dyslexia-font="true"] button { font-family: var(--font-sans); letter-spacing: 0.05em; word-spacing: 0.12em; line-height: 1.8; } [data-dyslexia-font="true"] h1, [data-dyslexia-font="true"] h2, [data-dyslexia-font="true"] h3, [data-dyslexia-font="true"] h4, [data-dyslexia-font="true"] h5, [data-dyslexia-font="true"] h6 { letter-spacing: 0.03em; word-spacing: 0.1em; line-height: 1.4; } /* ======================================== TEXT SIZE SCALING [data-text-size="110"-"200"] on ======================================== */ [data-text-size="110"] { font-size: 110%; } [data-text-size="120"] { font-size: 120%; } [data-text-size="130"] { font-size: 130%; } [data-text-size="140"] { font-size: 140%; } [data-text-size="150"] { font-size: 150%; } [data-text-size="160"] { font-size: 160%; } [data-text-size="170"] { font-size: 170%; } [data-text-size="180"] { font-size: 180%; } [data-text-size="190"] { font-size: 190%; } [data-text-size="200"] { font-size: 200%; } /* ======================================== GRAYSCALE MODE [data-grayscale="true"] on ======================================== */ [data-grayscale="true"] { filter: grayscale(100%); } [data-grayscale="true"] img, [data-grayscale="true"] video { filter: grayscale(100%); } /* ======================================== ARIA-LIVE ANNOUNCER Hidden region for screen reader announcements on setting changes ======================================== */ .a11y-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ======================================== ACCESSIBILITY SETTINGS PANEL ======================================== */ .a11y-settings-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-modal); background: var(--bg-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--spacing-6); padding-bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-xl); transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); max-height: 85vh; overflow-y: auto; } @media (min-width: 768px) { .a11y-settings-panel { left: auto; right: var(--spacing-4); bottom: var(--spacing-4); width: 400px; border-radius: var(--radius-xl); transform: translateY(20px); opacity: 0; visibility: hidden; } .a11y-settings-panel.active { transform: translateY(0); opacity: 1; visibility: visible; } } .a11y-settings-panel.active { transform: translateY(0); } .a11y-settings-title { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--spacing-6); display: flex; align-items: center; justify-content: space-between; } .a11y-setting-row { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4) 0; border-bottom: 1px solid var(--border-light); gap: var(--spacing-4); } .a11y-setting-row:last-child { border-bottom: none; } .a11y-setting-row--stacked { flex-direction: column; align-items: stretch; } .a11y-setting-info { flex: 1; min-width: 0; } .a11y-setting-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: 2px; } .a11y-setting-desc { font-size: var(--text-sm); color: var(--text-secondary); } /* Accessible toggle switch */ .a11y-switch { position: relative; width: 52px; height: 28px; flex-shrink: 0; } .a11y-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .a11y-switch-track { position: absolute; cursor: pointer; inset: 0; background: var(--bg-tertiary); border: 2px solid var(--border); border-radius: var(--radius-full); transition: background 200ms ease, border-color 200ms ease; } .a11y-switch-track::after { content: ''; position: absolute; height: 20px; width: 20px; left: 2px; top: 2px; background: var(--text-primary); border-radius: var(--radius-full); transition: transform 200ms ease; } .a11y-switch input:checked + .a11y-switch-track { background: var(--primary); border-color: var(--primary); } .a11y-switch input:checked + .a11y-switch-track::after { transform: translateX(24px); background: #fff; } .a11y-switch input:focus-visible + .a11y-switch-track { outline: 3px solid var(--primary); outline-offset: 2px; } /* Text size slider */ .a11y-text-size-control { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; margin-top: var(--spacing-2); } .a11y-text-size-control input[type="range"] { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: var(--bg-tertiary); border-radius: var(--radius-full); outline: none; } .a11y-text-size-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 24px; width: 24px; border-radius: var(--radius-full); background: var(--primary); cursor: pointer; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .a11y-text-size-control input[type="range"]::-moz-range-thumb { height: 24px; width: 24px; border-radius: var(--radius-full); background: var(--primary); cursor: pointer; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .a11y-text-size-control input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(139, 184, 162, 0.3); } .a11y-text-size-value { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--primary); min-width: 40px; text-align: center; } /* ======================================== COMBINED MODE OVERRIDES High contrast + light mode combos ======================================== */ [data-high-contrast="true"][data-theme="light"] .card { border-color: #000; box-shadow: none; } [data-high-contrast="true"][data-theme="light"] .btn-primary { background: #003300; color: #ffffff; } [data-high-contrast="true"][data-theme="light"] a { color: #00008B; } [data-high-contrast="true"][data-theme="dark"] a { color: #90EE90; } /* High contrast + dyslexia font */ [data-high-contrast="true"][data-dyslexia-font="true"] body { letter-spacing: 0.08em; word-spacing: 0.16em; } /* ======================================== ACCESSIBILITY FOOTER STATEMENT ======================================== */ .a11y-statement { padding: var(--spacing-4) 0; border-top: 1px solid var(--border-light); margin-top: var(--spacing-4); text-align: center; } .a11y-statement a { color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; } .a11y-statement a:hover { color: var(--primary); } /* ======================================== FORM ACCESSIBILITY ENHANCEMENTS ======================================== */ /* Required field indicator */ .form-label .required-indicator { color: var(--danger); margin-left: 2px; } /* Error state styling */ .form-input.is-invalid, .form-textarea.is-invalid, .form-select.is-invalid, .input-soft.is-invalid, .textarea-soft.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(242, 143, 156, 0.2); } .form-error[role="alert"] { display: flex; align-items: center; gap: var(--spacing-2); } /* ======================================== CONTENT WARNING PATTERN Reusable for sensitive material ======================================== */ .content-warning { background: var(--bg-secondary); border: 2px solid var(--warning); border-radius: var(--radius-lg); padding: var(--spacing-4); margin-bottom: var(--spacing-4); } .content-warning-toggle { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; background: none; border: none; color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer; padding: 0; text-align: left; } .content-warning-body { margin-top: var(--spacing-4); padding-top: var(--spacing-4); border-top: 1px solid var(--border-light); } .content-warning-body[hidden] { display: none; } /* ======================================== REDUCED MOTION - smooth scroll override ======================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } [data-reduce-motion="true"] { scroll-behavior: auto !important; }