/** * Self-hosted accessibility widget (replaces the Elfsight overlay). * * Two halves: * 1. Widget UI — everything scoped under .a11y-widget * (markup: templates/partials/a11y_widget.html, logic: js/a11y-widget.js). * 2. Global effect classes — `a11y-*` classes that js/a11y-widget.js sets on * (re-applied before first paint by the inline script in base.html). * * Reuses the design tokens from main.css :root — no hard-coded brand colours. * The trigger uses --heading-color, not --accent-color: white on the accent is * ~2.4:1, below the 3:1 WCAG 1.4.11 minimum for UI components. */ /*-------------------------------------------------------------- # 1. Widget UI — trigger button --------------------------------------------------------------*/ .a11y-widget-toggle { position: fixed; left: 15px; bottom: 65px; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background-color: var(--heading-color); color: var(--contrast-color); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: background-color 0.3s; } .a11y-widget-toggle i { font-size: 24px; line-height: 0; } .a11y-widget-toggle:hover { background-color: color-mix(in srgb, var(--heading-color), #000000 20%); } /* Visible focus indicator on every widget control */ .a11y-widget button:focus-visible { outline: 3px solid var(--heading-color); outline-offset: 2px; } /*-------------------------------------------------------------- # 1. Widget UI — panel (dialog) --------------------------------------------------------------*/ .a11y-widget-panel { position: fixed; left: 15px; bottom: 70px; z-index: 99999; width: min(340px, calc(100vw - 30px)); max-height: calc(100vh - 90px); overflow-y: auto; padding: 18px; background-color: var(--surface-color); color: var(--default-color); font-family: var(--default-font); border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); } .a11y-widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y-widget-header h2 { margin: 0; font-family: var(--heading-font); color: var(--heading-color); font-size: 18px; } .a11y-widget-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--default-color); font-size: 16px; } .a11y-widget-close:hover { background-color: color-mix(in srgb, var(--default-color), transparent 88%); } /*-------------------------------------------------------------- # 1. Widget UI — text-size stepper row --------------------------------------------------------------*/ .a11y-widget-textsize { display: flex; align-items: center; justify-content: space-around; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 55%); border-radius: 10px; } .a11y-widget-textsize-label { display: flex; align-items: center; gap: 8px; font-size: 14px; } .a11y-widget-textsize-label i { font-size: 20px; line-height: 1; } .a11y-widget-steppers { display: flex; align-items: center; gap: 6px; } .a11y-widget-step { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 55%); border-radius: 50%; background: none; color: var(--default-color); font-size: 14px; transition: background-color 0.2s, color 0.2s; } .a11y-widget-step:hover { background-color: var(--heading-color); border-color: var(--heading-color); color: var(--contrast-color); } .a11y-widget-textsize-value { min-width: 44px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } /*-------------------------------------------------------------- # 1. Widget UI — option tiles + reset --------------------------------------------------------------*/ .a11y-widget-options { display: grid; grid-template-columns: 1fr; gap: 10px; } .a11y-widget-option { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 55%); border-radius: 10px; background-color: var(--surface-color); color: var(--default-color); font-family: var(--default-font); font-size: 14px; line-height: 1.25; text-align: center; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .a11y-widget-option i { font-size: 20px; line-height: 1; } .a11y-widget-option:hover { border-color: var(--heading-color); } .a11y-widget-option[aria-pressed="true"] { background-color: var(--heading-color); border-color: var(--heading-color); color: var(--contrast-color); } .a11y-widget-reset { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 55%); border-radius: 10px; background: none; color: var(--default-color); font-family: var(--default-font); font-size: 14px; transition: background-color 0.2s, color 0.2s; } .a11y-widget-reset:hover { background-color: var(--heading-color); border-color: var(--heading-color); color: var(--contrast-color); } /*-------------------------------------------------------------- # 2. Effect: text size (root-font scaling — rem/em-sized text only) --------------------------------------------------------------*/ html.a11y-fs-1 { font-size: 106.25%; } html.a11y-fs-2 { font-size: 112.5%; } html.a11y-fs-3 { font-size: 125%; } /*-------------------------------------------------------------- # 2. Effect: high contrast # Overrides the :root tokens (and the section presets that re-declare # them) with an AA-safe palette: white on black ≥ 15:1, the yellow # accent on black ≈ 15:1, black on yellow ≈ 15:1. --------------------------------------------------------------*/ html.a11y-contrast, html.a11y-contrast .light-background, html.a11y-contrast .dark-background { --background-color: #000000; --default-color: #ffffff; --heading-color: #ffffff; --accent-color: #ffd75e; --surface-color: #141414; --contrast-color: #000000; } html.a11y-contrast { --nav-color: #ffffff; --nav-hover-color: #ffd75e; --nav-mobile-background-color: #000000; --nav-dropdown-background-color: #141414; --nav-dropdown-color: #ffffff; --nav-dropdown-hover-color: #ffd75e; background-color: #000000; } /*-------------------------------------------------------------- # 2. Effect: readable mode (system font stack + generous spacing; # zero download — see the widget spec's "readable, not dyslexia font" # decision) --------------------------------------------------------------*/ html.a11y-readable { --default-font: Calibri, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --heading-font: Calibri, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --nav-font: Calibri, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; } html.a11y-readable body { letter-spacing: 0.05em; word-spacing: 0.16em; line-height: 1.6; } html.a11y-readable p, html.a11y-readable li { line-height: 1.6; } /*-------------------------------------------------------------- # 2. Effect: highlight links --------------------------------------------------------------*/ html.a11y-highlight-links a { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 2px; background-color: color-mix(in srgb, var(--accent-color), transparent 82%); outline: 1px solid color-mix(in srgb, var(--accent-color), transparent 30%); outline-offset: 1px; } html.a11y-highlight-links a:focus-visible { outline-width: 3px; } /*-------------------------------------------------------------- # 2. Effect: stop animations # Near-zero durations instead of `none` so transitionend-dependent JS # keeps working; [data-aos] elements are forced visible. The same rules # apply automatically when the OS asks for reduced motion (the widget # respects, never overrides, that setting). --------------------------------------------------------------*/ html.a11y-no-motion { scroll-behavior: auto; } html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.a11y-no-motion [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html *, html *::before, html *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } }