/* ============================================================================ AICVchecker.nl — Toegankelijkheid (a11y): balk, voorlezen & leesvoorkeuren ============================================================================ Aangestuurd door data-attributen op , gezet door static/js/a11y.js en — vóór de eerste paint — door het kleine inline (nonce'd) script in base.html (voorkomt FOUC). Voorkeuren staan cookieloos in localStorage. Best practice overgenomen uit AIBeroepenzoeker; aangepast aan AICVcheckers eigen design-tokens (geen Tailwind-utilities) en altijd zichtbaar (geen admin-gate) — bedoeld voor bezoekers met een beperking. ============================================================================ */ :root { --a11y-actief: #15803D; /* green-700 — actieve schakelaars; haalt WCAG AA (5,02:1) */ } /* ── Lettergrootte — schaalt rem-gebaseerde tekst mee ───────────────────── */ html[data-a11y-tekst="groot"] { font-size: 112.5%; } /* 16 → 18px */ html[data-a11y-tekst="xl"] { font-size: 125%; } /* 16 → 20px */ /* ── Hoog contrast — donkerdere tekst, sterkere randen, onderstreepte links ─ Token-gebaseerd: AICVchecker gebruikt deze custom properties overal, dus het overschrijven hier cascadeert naar muted tekst, footer, hero-subtitel enz. */ html[data-a11y-contrast="hoog"] { --tekst-secundair: #1F2937; --tekst-meta: #1F2937; --tekst-placeholder: #374151; --border-standaard: #4B5563; } html[data-a11y-contrast="hoog"] body { background-color: #FFFFFF; color: #000000; } html[data-a11y-contrast="hoog"] .muted, html[data-a11y-contrast="hoog"] .small, html[data-a11y-contrast="hoog"] .hero-subtitel, html[data-a11y-contrast="hoog"] .cv-hero__sub { color: #111827 !important; } html[data-a11y-contrast="hoog"] a:not([class*="knop"]) { text-decoration: underline; } /* ── Dyslexie-vriendelijk — leesbaar font + ruimere letter-/regelafstand ── Eerlijk: er is geen hard bewijs dat een speciaal "dyslexie-font" objectief beter laat lezen. De bewezen winst zit in letter-/woord- en regelafstand — dat passen we hier toe, met een goed leesbaar schreefloos font (Verdana/ Tahoma) als basis. (Lettergrootte is een aparte instelling: "Tekstgrootte".) */ html[data-a11y-font="dyslexie"] body, html[data-a11y-font="dyslexie"] h1, html[data-a11y-font="dyslexie"] h2, html[data-a11y-font="dyslexie"] h3, html[data-a11y-font="dyslexie"] h4, html[data-a11y-font="dyslexie"] h5, html[data-a11y-font="dyslexie"] h6, html[data-a11y-font="dyslexie"] p, html[data-a11y-font="dyslexie"] li, html[data-a11y-font="dyslexie"] a, html[data-a11y-font="dyslexie"] span, html[data-a11y-font="dyslexie"] label, html[data-a11y-font="dyslexie"] button { font-family: Verdana, Tahoma, "Open Sans", sans-serif !important; } html[data-a11y-font="dyslexie"] p, html[data-a11y-font="dyslexie"] li { letter-spacing: 0.04em; word-spacing: 0.12em; line-height: 1.9; } /* ── Toggle-knop in de header ────────────────────────────────────────────── */ .a11y-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; background: none; color: var(--tekst-secundair); border-radius: var(--radius-knop); cursor: pointer; } .a11y-toggle:hover { color: var(--kleur-link); background: var(--kleur-link-licht); } /* ── Uitklappaneel rechtsboven ───────────────────────────────────────────── */ .a11y-panel { position: fixed; top: 4rem; right: 1rem; z-index: 60; width: 18rem; max-width: calc(100% - 2rem); background: #FFFFFF; border: 1px solid var(--border-standaard); border-radius: var(--radius-card, 0.75rem); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.25); overflow: hidden; } .a11y-panel.hidden { display: none !important; } .a11y-panel__kop { display: flex; align-items: center; justify-content: space-between; background: var(--kleur-link); color: #FFFFFF; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.9rem; } .a11y-panel__sluit { width: 2rem; height: 2rem; border: none; background: none; color: #FFFFFF; font-size: 1.1rem; border-radius: var(--radius-knop); cursor: pointer; } .a11y-panel__sluit:hover { background: rgb(255 255 255 / 0.2); } .a11y-panel__body { padding: 1rem; } .a11y-groep { margin-bottom: 1rem; } .a11y-groep__titel { font-weight: 600; margin: 0 0 0.5rem; font-size: 0.9rem; } .a11y-rij { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .a11y-keuzes { display: flex; gap: 0.5rem; } .a11y-keuze { flex: 1; border: 1px solid var(--border-standaard); border-radius: var(--radius-knop); padding: 0.4rem 0; font-weight: 600; background: #FFFFFF; color: var(--tekst-primair); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .a11y-keuze:hover { background: var(--kleur-link-licht); } .a11y-keuze[aria-pressed="true"] { background: var(--kleur-link); color: #FFFFFF; border-color: var(--kleur-link); } .a11y-keuze--groot { font-size: 1.125rem; } .a11y-keuze--xl { font-size: 1.375rem; } .a11y-schakelaar { border: 1px solid var(--border-standaard); border-radius: var(--radius-badge, 9999px); padding: 0.25rem 0.9rem; font-weight: 600; background: #FFFFFF; color: var(--tekst-secundair); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .a11y-schakelaar[aria-pressed="true"] { background: var(--a11y-actief); color: #FFFFFF; border-color: var(--a11y-actief); } .a11y-reset { width: 100%; border: none; background: none; color: var(--kleur-link); font-weight: 600; cursor: pointer; padding: 0.25rem 0; } .a11y-reset:hover { text-decoration: underline; } .a11y-panel__voet { font-size: 0.72rem; color: var(--tekst-meta); line-height: 1.45; padding-top: 0.75rem; margin-top: 0.25rem; border-top: 1px solid var(--border-standaard); } /* ── "Lees voor"-knop (boven leestekst) ─────────────────────────────────── */ .a11y-voorlees-knop { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--kleur-link-licht); color: var(--kleur-link); border: 1px solid #BFDBFE; border-radius: var(--radius-knop); padding: 0.35rem 0.8rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .a11y-voorlees-knop:hover { background: #DBEAFE; } .a11y-voorlees-knop[aria-pressed="true"] { background: var(--a11y-actief); color: #FFFFFF; border-color: var(--a11y-actief); } /* ── "Lees voor" mini-knop (op Elo-antwoorden) ──────────────────────────── */ .a11y-voorlees-mini { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; background: none; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--kleur-link); opacity: 0.85; } .a11y-voorlees-mini:hover { opacity: 1; } .a11y-voorlees-mini[aria-pressed="true"] { color: var(--a11y-actief); opacity: 1; } /* ── Markering van het blok dat nu wordt voorgelezen ────────────────────── */ .a11y-leesblok-actief { background: rgb(37 99 235 / 0.12); border-radius: var(--radius-knop); box-shadow: 0 0 0 4px rgb(37 99 235 / 0.12); } /* sr-only — alleen voor schermlezers (statusmeldingen voorlezen). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Voorleessnelheid-rij in het paneel. */ .a11y-snelheid-rij { display: flex; align-items: center; gap: 0.6rem; } .a11y-snelheid-rij input[type="range"] { flex: 1; accent-color: var(--kleur-link); } .a11y-snelheid-rij span { min-width: 3rem; text-align: right; } /* "Lees deze pagina voor" — volle breedte in het paneel. */ .a11y-knop-vol { width: 100%; justify-content: center; } /* Zwevende mini-speler (pauze/hervat/stop) tijdens het voorlezen. */ .a11y-speler { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; display: none; align-items: center; gap: 0.75rem; background: #FFFFFF; border: 1px solid var(--border-standaard); border-radius: var(--radius-badge); padding: 0.5rem 1rem; box-shadow: var(--shadow-card-hover); max-width: calc(100% - 2rem); } .a11y-speler-zichtbaar { display: flex; } .a11y-speler-label { font-size: 0.85rem; color: var(--tekst-secundair); } .a11y-speler-knop { border: 1px solid var(--border-standaard); background: #FFFFFF; border-radius: var(--radius-knop); padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--kleur-link); cursor: pointer; } .a11y-speler-knop:hover { background: var(--kleur-link-licht); }