/* ========================================================================== WP Koumbit Accessibility — Mode Overrides Applied by adding classes to . All selectors use high specificity via !important only where strictly necessary to override theme styles. ========================================================================== */ /* -------------------------------------------------------------------------- VISION — Font size scaling -------------------------------------------------------------------------- */ html.wka-text-size-1 { font-size: 110% !important; } html.wka-text-size-2 { font-size: 120% !important; } html.wka-text-size-3 { font-size: 135% !important; } html.wka-text-size-4 { font-size: 150% !important; } html.wka-text-size-5 { font-size: 175% !important; } html.wka-text-size-6 { font-size: 200% !important; } /* Scale font sizes proportionally (body inherits from html) */ html[class*="wka-text-size-"] body { font-size: inherit; } /* Browsers apply UA font-size:medium to form elements, breaking inheritance from scaled html. Force inherit so every button, input, etc. scales with the page. */ html[class*="wka-text-size-"] button:not([id*="wka"]):not([class*="wka"]), html[class*="wka-text-size-"] input:not([id*="wka"]):not([class*="wka"]), html[class*="wka-text-size-"] select:not([id*="wka"]):not([class*="wka"]), html[class*="wka-text-size-"] textarea:not([id*="wka"]):not([class*="wka"]) { font-size: inherit !important; } /* Extended sizes for users who need very large text */ html.wka-text-size-7 { font-size: 225% !important; } html.wka-text-size-8 { font-size: 250% !important; } /* -------------------------------------------------------------------------- VISION — Highlight links -------------------------------------------------------------------------- */ html.wka-highlight-links a, html.wka-highlight-links a:visited { text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 3px !important; outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* -------------------------------------------------------------------------- VISION — Highlight headings -------------------------------------------------------------------------- */ html.wka-highlight-headings h1, html.wka-highlight-headings h2, html.wka-highlight-headings h3, html.wka-highlight-headings h4, html.wka-highlight-headings h5, html.wka-highlight-headings h6 { border-left: 5px solid #1a56db !important; padding-left: 10px !important; } /* -------------------------------------------------------------------------- VISION — Enhanced focus indicators -------------------------------------------------------------------------- */ html.wka-enhanced-focus *:focus, html.wka-enhanced-focus *:focus-visible { outline: 4px solid #005FCC !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.3) !important; } /* -------------------------------------------------------------------------- VISION — Large cursor -------------------------------------------------------------------------- */ html.wka-large-cursor, html.wka-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='2' d='M4 4l8 24 4-8 8 4z'/%3E%3C/svg%3E") 4 4, auto !important; } /* -------------------------------------------------------------------------- VISION — Hide images (useful for screen reader testing) -------------------------------------------------------------------------- */ html.wka-hide-images img { visibility: hidden !important; } /* -------------------------------------------------------------------------- COLOUR — Dark high contrast Themes and Gutenberg blocks frequently set explicit background-color on wrapper elements (sections, covers, groups). When body text becomes white, those white-background wrappers produce invisible text. Fix: use a universal override scoped to page content, wrapped in :where() so its specificity stays at (0,1,1) — low enough for per-element rules below to win with normal specificity. The toolbar tree is excluded via the direct-child body > *:not(#wka-root) scope. -------------------------------------------------------------------------- */ html.wka-contrast-dark, html.wka-contrast-dark body { background-color: #000000 !important; color: #ffffff !important; } html.wka-contrast-dark :where(body > *:not(#wka-root):not(#wka-svg-filters):not(#wka-reading-ruler):not(#wka-colour-overlay):not(#wka-panel-overlay)), html.wka-contrast-dark :where(body > *:not(#wka-root):not(#wka-svg-filters):not(#wka-reading-ruler):not(#wka-colour-overlay):not(#wka-panel-overlay) *) { background-color: #000000 !important; color: #ffffff !important; } html.wka-contrast-dark h1, html.wka-contrast-dark h2, html.wka-contrast-dark h3, html.wka-contrast-dark h4, html.wka-contrast-dark h5, html.wka-contrast-dark h6 { color: #ffffff !important; background-color: #000000 !important; } html.wka-contrast-dark a { color: #ffff00 !important; } html.wka-contrast-dark a:visited { color: #ff9900 !important; } /* Form elements — all toolkit controls have "wka" in their id or class, so :not([id*="wka"]):not([class*="wka"]) safely excludes the toolbar. */ html.wka-contrast-dark input:not([id*="wka"]):not([class*="wka"]), html.wka-contrast-dark textarea:not([id*="wka"]):not([class*="wka"]), html.wka-contrast-dark select:not([id*="wka"]):not([class*="wka"]), html.wka-contrast-dark button:not([id*="wka"]):not([class*="wka"]) { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.wka-contrast-dark img { filter: contrast(120%) brightness(90%); } /* -------------------------------------------------------------------------- COLOUR — Light high contrast Same :where() approach as dark contrast above. -------------------------------------------------------------------------- */ html.wka-contrast-light, html.wka-contrast-light body { background-color: #ffffff !important; color: #000000 !important; } html.wka-contrast-light :where(body > *:not(#wka-root):not(#wka-svg-filters):not(#wka-reading-ruler):not(#wka-colour-overlay):not(#wka-panel-overlay)), html.wka-contrast-light :where(body > *:not(#wka-root):not(#wka-svg-filters):not(#wka-reading-ruler):not(#wka-colour-overlay):not(#wka-panel-overlay) *) { background-color: #ffffff !important; color: #000000 !important; } html.wka-contrast-light a { color: #0000cc !important; text-decoration: underline !important; } html.wka-contrast-light a:visited { color: #660099 !important; } html.wka-contrast-light input:not([id*="wka"]):not([class*="wka"]), html.wka-contrast-light textarea:not([id*="wka"]):not([class*="wka"]), html.wka-contrast-light select:not([id*="wka"]):not([class*="wka"]) { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; } /* -------------------------------------------------------------------------- COLOUR — Inverted colours Applying filter to breaks position:fixed elements (the CSS spec makes the root's filter context the containing block for fixed descendants). Instead we invert every direct child of except our toolbar elements, so #wka-root, #wka-reading-ruler and #wka-svg-filters stay untouched. -------------------------------------------------------------------------- */ /* Body background itself doesn't get inverted by child rules — force it explicitly */ html.wka-inverted body { background-color: #000000 !important; } html.wka-inverted body > *:not(#wka-root):not(#wka-reading-ruler):not(#wka-svg-filters):not(#wka-panel-overlay):not(#wka-colour-overlay) { filter: invert(100%) hue-rotate(180deg); } /* Re-invert images and video so they render in natural colour */ html.wka-inverted body > *:not(#wka-root):not(#wka-panel-overlay):not(#wka-colour-overlay) img, html.wka-inverted body > *:not(#wka-root):not(#wka-panel-overlay):not(#wka-colour-overlay) video { filter: invert(100%) hue-rotate(180deg); } /* -------------------------------------------------------------------------- COLOUR — Greyscale / monochrome -------------------------------------------------------------------------- */ html.wka-greyscale { filter: grayscale(100%); } /* -------------------------------------------------------------------------- COLOUR — Low brightness / sepia -------------------------------------------------------------------------- */ html.wka-sepia { filter: sepia(60%) brightness(90%); } /* -------------------------------------------------------------------------- COLOUR BLINDNESS — SVG filter wrappers Filters are defined as elements in the DOM (rendered by PHP). -------------------------------------------------------------------------- */ html.wka-cb-protanopia { filter: url(#wka-filter-protanopia); } html.wka-cb-deuteranopia { filter: url(#wka-filter-deuteranopia); } html.wka-cb-tritanopia { filter: url(#wka-filter-tritanopia); } html.wka-cb-achromatopsia { filter: url(#wka-filter-achromatopsia); } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Dyslexic-friendly font Font files must be placed in /assets/fonts/ — download OpenDyslexic WOFF2 and WOFF from https://github.com/antijingoist/opendyslexic/releases (SIL Open Font License 1.1 — free to bundle and redistribute). Fallback chain uses system fonts with good dyslexia research support: Comic Sans (varied letter forms), Verdana (wide characters), Arial. -------------------------------------------------------------------------- */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'), url('../fonts/OpenDyslexic-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } html.wka-dyslexic-font, html.wka-dyslexic-font body, html.wka-dyslexic-font p, html.wka-dyslexic-font li, html.wka-dyslexic-font td, html.wka-dyslexic-font th, html.wka-dyslexic-font label, html.wka-dyslexic-font a, html.wka-dyslexic-font span, html.wka-dyslexic-font button:not([id*="wka"]):not([class*="wka"]), html.wka-dyslexic-font h1, html.wka-dyslexic-font h2, html.wka-dyslexic-font h3, html.wka-dyslexic-font h4, html.wka-dyslexic-font h5, html.wka-dyslexic-font h6 { /* OpenDyslexic loads from /assets/fonts/ if bundled. Comic Sans and Verdana are BDA-recommended system alternatives with good per-character distinctiveness. */ font-family: 'OpenDyslexic', 'Comic Sans MS', 'Comic Sans', Verdana, Arial, sans-serif !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Letter spacing -------------------------------------------------------------------------- */ html.wka-letter-spacing-1 body { letter-spacing: 0.05em !important; } html.wka-letter-spacing-2 body { letter-spacing: 0.10em !important; } html.wka-letter-spacing-3 body { letter-spacing: 0.16em !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Word spacing -------------------------------------------------------------------------- */ html.wka-word-spacing-1 body { word-spacing: 0.1em !important; } html.wka-word-spacing-2 body { word-spacing: 0.2em !important; } html.wka-word-spacing-3 body { word-spacing: 0.3em !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Line height -------------------------------------------------------------------------- */ html.wka-line-height-1 body, html.wka-line-height-1 p, html.wka-line-height-1 li { line-height: 1.8 !important; } html.wka-line-height-2 body, html.wka-line-height-2 p, html.wka-line-height-2 li { line-height: 2.2 !important; } html.wka-line-height-3 body, html.wka-line-height-3 p, html.wka-line-height-3 li { line-height: 2.8 !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Bold text Increases font weight on body text for users who find thin type hard to read. WCAG 1.4.12 (Text Spacing) recognises weight as a user-adjustable property. -------------------------------------------------------------------------- */ html.wka-bold-text body, html.wka-bold-text p, html.wka-bold-text li, html.wka-bold-text td, html.wka-bold-text th, html.wka-bold-text label, html.wka-bold-text a, html.wka-bold-text span, html.wka-bold-text button:not([id*="wka"]):not([class*="wka"]) { font-weight: 700 !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Left-align text -------------------------------------------------------------------------- */ html.wka-text-align-left p, html.wka-text-align-left li, html.wka-text-align-left td, html.wka-text-align-left h1, html.wka-text-align-left h2, html.wka-text-align-left h3, html.wka-text-align-left h4, html.wka-text-align-left h5, html.wka-text-align-left h6 { text-align: left !important; } /* -------------------------------------------------------------------------- READING / DYSLEXIA — Highlight text on hover (reading focus) -------------------------------------------------------------------------- */ html.wka-highlight-hover p:hover, html.wka-highlight-hover li:hover { background: rgba(255, 255, 100, 0.25) !important; border-radius: 3px; } /* -------------------------------------------------------------------------- COGNITIVE / MOTOR — Reduce animations -------------------------------------------------------------------------- */ html.wka-reduce-motion *, html.wka-reduce-motion *::before, html.wka-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* -------------------------------------------------------------------------- MOTOR — Larger click / touch targets (WCAG 2.5.5 Target Size AAA) Sets a 44 × 44 px minimum on discrete interactive elements. Anchor padding expands the tap area without changing display type. Toolbar elements excluded via the wka id/class guard pattern. -------------------------------------------------------------------------- */ html.wka-larger-targets a:not([id*="wka"]):not([class*="wka"]) { padding-top: 8px !important; padding-bottom: 8px !important; } html.wka-larger-targets button:not([id*="wka"]):not([class*="wka"]), html.wka-larger-targets [role="button"]:not([id*="wka"]):not([class*="wka"]), html.wka-larger-targets input:not([id*="wka"]):not([class*="wka"]), html.wka-larger-targets select:not([id*="wka"]):not([class*="wka"]), html.wka-larger-targets textarea:not([id*="wka"]):not([class*="wka"]) { min-height: 44px !important; min-width: 44px !important; } /* -------------------------------------------------------------------------- COGNITIVE — Pause animations (same as reduce but phrased differently) -------------------------------------------------------------------------- */ html.wka-pause-animations *, html.wka-pause-animations *::before, html.wka-pause-animations *::after { animation-play-state: paused !important; } /* -------------------------------------------------------------------------- COGNITIVE — Keyboard navigation focus highlight Makes keyboard tab order very obvious. -------------------------------------------------------------------------- */ html.wka-keyboard-nav *:focus { outline: 4px solid #ff6600 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 100, 0, 0.3) !important; } /* -------------------------------------------------------------------------- COGNITIVE — Highlight interactive elements -------------------------------------------------------------------------- */ html.wka-highlight-interactive a[href], html.wka-highlight-interactive button:not([disabled]), html.wka-highlight-interactive input, html.wka-highlight-interactive select, html.wka-highlight-interactive textarea, html.wka-highlight-interactive [role="button"], html.wka-highlight-interactive [tabindex]:not([tabindex="-1"]), html.wka-highlight-interactive .wka-toggle-track { outline: 2px dashed #0070f3 !important; outline-offset: 2px !important; } /* -------------------------------------------------------------------------- HEARING — Pause autoplay media (done via JS, but also via CSS) -------------------------------------------------------------------------- */ html.wka-pause-media video[autoplay], html.wka-pause-media audio[autoplay] { /* JS handles the actual pause; this is a visual cue */ outline: 3px solid #fbbf24 !important; } /* -------------------------------------------------------------------------- UTILITY — Preserve toolbar colours in all filter modes. Each filter-based mode must explicitly exclude the toolbar. -------------------------------------------------------------------------- */ html.wka-greyscale #wka-root, html.wka-sepia #wka-root, html.wka-cb-protanopia #wka-root, html.wka-cb-deuteranopia #wka-root, html.wka-cb-tritanopia #wka-root, html.wka-cb-achromatopsia #wka-root { filter: none !important; } /* Inverted mode: toolbar is already excluded above — no counter-invert needed. */ /* -------------------------------------------------------------------------- READING RULER — show when active class is present -------------------------------------------------------------------------- */ html.wka-reading-ruler-active #wka-reading-ruler { display: block; } /* -------------------------------------------------------------------------- READING OVERLAY — coloured tint for Irlen syndrome / visual stress Evidence: Wilkins et al., British Journal of Ophthalmology (1994); NHS Scotland visual stress guidance; Meares-Irlen syndrome research. Opacity kept low (≈18%) so underlying content remains fully readable. -------------------------------------------------------------------------- */ html.wka-overlay-yellow #wka-colour-overlay { display: block; background: rgba(255, 229, 0, 0.18); } html.wka-overlay-blue #wka-colour-overlay { display: block; background: rgba( 99, 149, 237, 0.18); } html.wka-overlay-rose #wka-colour-overlay { display: block; background: rgba(255, 105, 135, 0.18); } html.wka-overlay-green #wka-colour-overlay { display: block; background: rgba(100, 200, 100, 0.18); }