/* * EMRA Accessibility — CSS Token System * emra-a11y-tokens.css | v1.0.0 * * Contract (see spec/SPEC.md): * - All custom properties are prefixed --emra-a11y-* * - Default values pass WCAG 2.1 AA (4.5:1 body text, 3:1 large text) * - [data-emra-a11y-contrast="high"] values pass WCAG 2.1 AAA (7:1) * - Applied to so they cascade everywhere without specificity fights * - Shopify/Next.js ports must expose the same property names * * This file is enqueued on every front-end page by emra-a11y.php. * It contains no selectors that alter visible layout — only tokens and * opt-in utility rules applied via data attributes on . */ /* ── 1. Base tokens (AA) ─────────────────────────────────────────────────── */ :root { /* Text */ --emra-a11y-text: #1a1a1a; /* 16.75:1 on white */ --emra-a11y-text-secondary: #4a4a4a; /* 4.54:1 on white — just above AA */ --emra-a11y-text-inverse: #ffffff; /* Links */ --emra-a11y-link: #0050b3; /* 7.04:1 on white — already AAA */ --emra-a11y-link-hover: #003a82; /* 9.15:1 on white */ --emra-a11y-link-visited: #5a2d8f; /* 7.11:1 on white */ /* Surfaces */ --emra-a11y-bg: #ffffff; --emra-a11y-bg-muted: #f7f7f7; /* Focus ring — used by keyboard.js and the :focus-visible rules below */ --emra-a11y-focus-ring: #0066cc; --emra-a11y-focus-ring-width: 3px; --emra-a11y-focus-offset: 2px; /* Typography */ --emra-a11y-font-scale: 1; /* multiplied by panel JS: 1 / 1.15 / 1.3 */ --emra-a11y-letter-spacing: 0em; /* toggled to 0.05em by panel */ /* Motion */ --emra-a11y-transition: 0.2s ease; /* set to 0s under reduce-motion */ /* Borders */ --emra-a11y-border: #767676; /* 4.54:1 on white */ } /* ── 2. High contrast overrides (AAA) ───────────────────────────────────── */ /* * Applied by panel JS as: document.documentElement.dataset.emraA11yContrast = 'high' * Removed on toggle off: delete document.documentElement.dataset.emraA11yContrast */ [data-emra-a11y-contrast="high"] { --emra-a11y-text: #000000; --emra-a11y-text-secondary: #000000; --emra-a11y-link: #0000ee; /* browser default — universally recognised */ --emra-a11y-link-hover: #000099; --emra-a11y-link-visited: #551a8b; /* browser default visited */ --emra-a11y-bg: #ffffff; --emra-a11y-bg-muted: #f0f0f0; --emra-a11y-border: #000000; --emra-a11y-focus-ring: #000000; --emra-a11y-focus-ring-width: 4px; } /* ── 3. Text size scaling ────────────────────────────────────────────────── */ /* * Applied as: document.documentElement.dataset.emraA11yTextSize = 'large' | 'xl' * The font-size on is not touched (that breaks rem calculations). * Instead we use the --emra-a11y-font-scale custom property and themes * that opt in can apply it. The panel also directly sets font-size on * document.body so it works without theme cooperation. */ [data-emra-a11y-text-size="large"] { --emra-a11y-font-scale: 1.15; } [data-emra-a11y-text-size="xl"] { --emra-a11y-font-scale: 1.3; } /* ── 4. Letter spacing ───────────────────────────────────────────────────── */ [data-emra-a11y-letter-spacing="wider"] { --emra-a11y-letter-spacing: 0.05em; } /* ── 5. Reduced motion ───────────────────────────────────────────────────── */ /* * Two separate rules — deliberately NOT using CSS nesting syntax. * The plugin serves users on older/specialised browsers; compatibility * takes priority over developer convenience here. * * Rule A: data attribute applied by panel JS to (= :root). * Custom properties on :root cascade to all descendants. * Rule B: OS-level preference — no panel interaction required. */ [data-emra-a11y-reduce-motion="true"] { --emra-a11y-transition: 0s; } @media (prefers-reduced-motion: reduce) { :root { --emra-a11y-transition: 0s; } } /* Pause all CSS animations and transitions when reduce-motion is active. */ [data-emra-a11y-reduce-motion="true"] *, [data-emra-a11y-reduce-motion="true"] *::before, [data-emra-a11y-reduce-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ── 6. Underline links ──────────────────────────────────────────────────── */ [data-emra-a11y-underline-links="true"] a { text-decoration: underline !important; } /* ── 7. :focus-visible — universal focus ring ───────────────────────────── */ /* * Uses :focus-visible so mouse users don't see rings on click. * !important is deliberate — focus rings must not lose to theme specificity. * The outline-offset keeps the ring visible on dark backgrounds. */ :focus-visible { outline: var(--emra-a11y-focus-ring-width) solid var(--emra-a11y-focus-ring) !important; outline-offset: var(--emra-a11y-focus-offset) !important; border-radius: 2px; /* prevents square rings on round elements looking harsh */ } /* Remove browser default in favour of our own — only where :focus-visible is supported. */ :focus:not(:focus-visible) { outline: none; } /* ── 8. Skip-to-content link ─────────────────────────────────────────────── */ /* * Injected into the DOM by emra-a11y.php (wp_body_open / JS fallback). * Visually hidden until focused; then snaps into view in the top-left corner. * z-index: 999999 clears Elementor (z 9999), Divi (z 99999), and WP admin bar. */ .emra-a11y-skip-link { position: absolute; top: -9999px; left: 0; z-index: 999999; padding: 0.75rem 1.25rem; background: var(--emra-a11y-link); color: var(--emra-a11y-text-inverse); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 0 0 4px 0; /* Transition only when coming into view — instant hide so it's never briefly visible */ transition: top 0s; } .emra-a11y-skip-link:focus { top: 0; outline: var(--emra-a11y-focus-ring-width) solid var(--emra-a11y-text-inverse); outline-offset: 2px; }