/** * CSBN Base — toegankelijkheidspaneel. * * Twee delen: de knop met het paneel, en de standen die het paneel aanzet. * * De standen hangen aan klassen op , gezet door het bootscript vóór de * eerste verf. Ze staan bewust in dit bestand en niet in het child: een child * kan ze overschrijven, maar hoeft ze niet te kennen. */ /* ========================================================================== 1. Knop en paneel ========================================================================== Het paneel is een echte . Dat scheelt drie eigen bouwsels — de browser doet de focusval, `::backdrop` de laag eronder en Escape zonder code — en de top layer staat boven élke z-index. De wedloop met de cookiebanner (99999) kan daarmee niet terugkomen. Vormgeving volgt de tokens van het actieve theme, met een harde terugval erachter. Zo hoort het paneel bij de site in plaats van bij de plugin waar het uit voortkomt, en klopt het meteen in de donkere modus — die wisselt dezelfde tokens. */ .csbn-a11y { --csbn-a11y-vlak: var( --wp--preset--color--base, #fff ); --csbn-a11y-vlak-2: var( --wp--preset--color--base-2, #f6f7f7 ); --csbn-a11y-tekst: var( --wp--preset--color--contrast, #1a1a1a ); --csbn-a11y-gedempt: var( --wp--preset--color--contrast-2, #5c5c5c ); --csbn-a11y-rand: var( --wp--preset--color--border, #c3c4c7 ); --csbn-a11y-aan: var( --wp--preset--color--primary, #1863dc ); --csbn-a11y-aan-tekst: var( --wp--preset--color--base, #fff ); --csbn-a11y-vlot: var( --wp--custom--transition--fast, 150ms ); position: fixed; right: 20px; bottom: 20px; /* Alleen de zwevende knop heeft nog een z-index nodig; het paneel zit in de top layer en staat daar hoe dan ook bovenop. */ z-index: 100000; } .csbn-a11y__knop { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var( --csbn-a11y-aan-tekst ); background-color: var( --csbn-a11y-aan ); border: 2px solid var( --csbn-a11y-vlak ); border-radius: 50%; box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.3 ); cursor: pointer; transition: transform var( --csbn-a11y-vlot ) ease; } .csbn-a11y__knop:hover { transform: scale( 1.06 ); } .csbn-a11y__knop:active { transform: scale( 0.97 ); } /* Regel F1: 3px outline in `contrast` met 2px offset. Niet `currentColor` — op een knop die aan staat is dat de vulkleur, en dan valt de focusrand weg in precies de stand waarin je hem het hardst nodig hebt. */ .csbn-a11y__knop:focus-visible, .csbn-a11y__sluit:focus-visible, .csbn-a11y__stand:focus-visible, .csbn-a11y__herstel:focus-visible { outline: 3px solid var( --csbn-a11y-tekst ); outline-offset: 2px; } /* --- Telefoon: een blad van onderaf -------------------------------------- Een zwevend doosje van 288px met een eigen schuifbalk werkt hier niet: elf standen passen er niet in, en wat je niet ziet bestaat niet. Over de volle breedte vanaf de onderrand is het gebaar dat een telefoon al kent. */ .csbn-a11y__paneel { /* De UA geeft een dialog een eigen marge, rand en breedte; die staan hier allemaal in de weg. */ position: fixed; inset: auto 0 0; box-sizing: border-box; width: 100%; max-width: none; max-height: 85vh; margin: 0; padding: 0; overflow-y: auto; color: var( --csbn-a11y-tekst ); background-color: var( --csbn-a11y-vlak ); border: 0; border-top: 1px solid var( --csbn-a11y-rand ); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.25 ); } /* Het blad schuift op in plaats van te verschijnen. `allow-discrete` laat de overgang ook lopen terwijl `display` van none naar block gaat; zonder die regel springt het openen alsnog. */ @starting-style { .csbn-a11y__paneel[open] { transform: translateY( 100% ); } } .csbn-a11y__paneel { transform: translateY( 0 ); transition: transform var( --csbn-a11y-vlot ) ease, overlay var( --csbn-a11y-vlot ) allow-discrete, display var( --csbn-a11y-vlot ) allow-discrete; } /* De laag onder het paneel is bewust licht. Dit paneel verandert het uiterlijk van de pagina erachter, en die moet je kunnen beoordelen terwijl je kiest — een halfdonkere sluier maakt precies dat onmogelijk. */ .csbn-a11y__paneel::backdrop { background-color: rgba( 0, 0, 0, 0.32 ); } /* De titelbalk blijft staan tijdens het scrollen: op een blad dat bijna het hele scherm vult is de sluitknop anders weggescrold precies wanneer je hem zoekt. */ .csbn-a11y__balk { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.75rem; background-color: var( --csbn-a11y-vlak ); border-bottom: 1px solid var( --csbn-a11y-rand ); } .csbn-a11y__kop { margin: 0; font-size: 1.125rem; line-height: 1.3; } .csbn-a11y__sluit { display: grid; place-items: center; /* Regel S1: raakdoel van 44px, ook al is het kruisje kleiner. */ width: 44px; height: 44px; margin-right: -0.5rem; padding: 0; color: inherit; background: none; border: 0; border-radius: 8px; cursor: pointer; } .csbn-a11y__inhoud { padding: 1rem 1.25rem 1.25rem; } .csbn-a11y__sectie + .csbn-a11y__sectie { margin-top: 1.25rem; } /* Gedempt met een eigen kleur, niet met `opacity`: doorzichtige tekst maakt het contrast afhankelijk van wat er toevallig achter ligt. */ .csbn-a11y__sectiekop { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var( --csbn-a11y-gedempt ); } /* De uitleg beantwoordt de vraag die de knoppen oproepen. Klein en gedempt, want hij hoort onder het kopje te staan en niet ervoor in de weg. */ .csbn-a11y__uitleg { margin: 0 0 0.625rem; font-size: 0.8125rem; line-height: 1.4; color: var( --csbn-a11y-gedempt ); } .csbn-a11y__voet { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.4; text-align: center; color: var( --csbn-a11y-gedempt ); } /* Twee kolommen: elf knoppen onder elkaar maken een lijst van bijna 600px, en dan scrolt het blad terwijl er ruimte in de breedte over is. */ .csbn-a11y__rooster { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 0.5rem; } .csbn-a11y__stand, .csbn-a11y__herstel { box-sizing: border-box; /* `min-height`, geen `height`: een label van twee regels moet het vak groter maken in plaats van eruit te lopen. */ min-height: 44px; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.9375rem; line-height: 1.25; text-align: left; color: inherit; background-color: var( --csbn-a11y-vlak-2 ); border: 1px solid var( --csbn-a11y-rand ); border-radius: 8px; cursor: pointer; transition: color var( --csbn-a11y-vlot ) ease, background-color var( --csbn-a11y-vlot ) ease, border-color var( --csbn-a11y-vlot ) ease; } .csbn-a11y__stand { display: flex; align-items: center; gap: 0.5rem; } /* Het vinkje houdt zijn ruimte bezet als het onzichtbaar is, anders verspringt het label zodra je een stand aanzet. */ .csbn-a11y__vink { flex: none; visibility: hidden; } .csbn-a11y__stand[aria-pressed="true"], .csbn-a11y__stand[aria-checked="true"] { color: var( --csbn-a11y-aan-tekst ); background-color: var( --csbn-a11y-aan ); border-color: var( --csbn-a11y-aan ); } /* Kleur mag niet de enige drager van "dit staat aan" zijn (WCAG 1.4.1), en dat geldt dubbel in dit paneel. */ .csbn-a11y__stand[aria-pressed="true"] .csbn-a11y__vink, .csbn-a11y__stand[aria-checked="true"] .csbn-a11y__vink { visibility: visible; } .csbn-a11y__herstel { width: 100%; margin-top: 1.25rem; text-align: center; } /* --- Groter scherm: terug naar een paneel bij de knop --------------------- Vanaf hier is er ruimte naast de inhoud en is een blad over de volle breedte te veel. */ @media ( min-width: 40em ) { .csbn-a11y__paneel { inset: auto 20px 84px auto; width: 24rem; /* 40rem is net genoeg voor alle elf standen plus de herstelknop, zodat er op een gewoon scherm niets te scrollen valt. Op een laag venster wint de tweede waarde en scrolt het paneel alsnog. */ max-height: min( 40rem, calc( 100vh - 8rem ) ); border: 1px solid var( --csbn-a11y-rand ); border-radius: 12px; box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.25 ); } @starting-style { .csbn-a11y__paneel[open] { transform: translateY( 0.75rem ); } } /* Geen sluier op een groot scherm. Dit paneel verandert het uiterlijk van de pagina ernaast, en die moet je kunnen beoordelen terwijl je kiest — dimmen maakt precies dat onmogelijk. Klikken naast het paneel sluit nog steeds; daar is de backdrop niet zichtbaar voor nodig. */ .csbn-a11y__paneel::backdrop { background-color: transparent; } } /* De child van dit theme kan een eigen universele regel hebben, maar csbn-base gaat ook naar childs die die niet hebben. Dus hier zelf de guard. */ @media ( prefers-reduced-motion: reduce ) { .csbn-a11y__knop, .csbn-a11y__paneel, .csbn-a11y__stand, .csbn-a11y__herstel { transition-duration: 0.01ms; } .csbn-a11y__knop:hover, .csbn-a11y__knop:active { transform: none; } } /* ========================================================================== 2. De standen ========================================================================== Donker en licht contrast staan hier niet: die zetten `data-theme` en lenen daarmee het bestaande darkmode-palet. Een eigen kopie zou bij elke paletwijziging uit de pas gaan lopen. */ /* --- Hoog contrast ------------------------------------------------------- Zwart vlak, witte tekst, gele links. Dit overschrijft de negen presets, dus alles wat op tokens gebouwd is gaat mee — ook wat een child later toevoegt. Alleen de knop en het paneel blijven buiten schot; die moeten zichzelf ook in deze stand kunnen tonen. */ .csbn-a11y-contrast-hoog { --wp--preset--color--base: #000; --wp--preset--color--base-2: #000; --wp--preset--color--contrast: #fff; --wp--preset--color--contrast-2: #fff; --wp--preset--color--primary: #ff0; --wp--preset--color--primary-contrast: #000; --wp--preset--color--secondary: #000; --wp--preset--color--accent: #ff0; --wp--preset--color--border: #fff; background-color: #000; color: #fff; } .csbn-a11y-contrast-hoog body { background-color: #000; color: #fff; } .csbn-a11y-contrast-hoog a { color: #ff0; } /* Afbeeldingen dragen in deze stand zelden betekenis en verstoren het contrast het meest; een rand eromheen houdt ze vindbaar zonder ze te verbergen. */ .csbn-a11y-contrast-hoog img { border: 1px solid #fff; } /* --- Kleurfilters -------------------------------------------------------- Het filter staat op de kinderen van en niet op of zelf. Twee redenen, allebei uit de praktijk: 1. Een element met een filter wordt het ankerpunt voor `position: fixed` erbinnen. Zet je het filter op of , dan scrollt deze knop met de pagina mee in plaats van te blijven staan. 2. Het paneel zou zichzelf ontkleuren, en dan is de knop "grijstinten" onleesbaar in de stand die hij zelf aanzet. `.csbn-a11y` valt er daarom buiten. */ .csbn-a11y-monochroom body > *:not( .csbn-a11y ) { filter: grayscale( 1 ); } .csbn-a11y-verzadiging body > *:not( .csbn-a11y ) { filter: saturate( 1.8 ); } /* --- Markeren ------------------------------------------------------------ */ /* Tekst krijgt een geel vlak. Alleen op elementen die zelf tekst dragen, niet op hun ouders: anders kleurt een hele sectie geel en is er niets gemarkeerd. */ .csbn-a11y-markeer-tekst :is( p, li, h1, h2, h3, h4, h5, h6, dt, dd, figcaption ):not( .csbn-a11y * ) { /* Zelfde reden als bij "links markeren": zonder `!important` houdt een component zijn eigen tekstkleur en staat er lichte tekst op geel. */ color: #000 !important; background-color: #ff0 !important; } /* Ook wat er ín die elementen staat. Een gekleurd woord in een kop hield anders zijn eigen kleur op het gele vlak — bij Fun Crea rood op geel, en dat is juist de combinatie die deze stand moet wegnemen. De linkregels hieronder staan later in dit bestand en winnen dus alsnog voor links. */ .csbn-a11y-markeer-tekst :is( p, li, h1, h2, h3, h4, h5, h6, dt, dd, figcaption ) *:not( .csbn-a11y * ) { color: #000 !important; background-color: #ff0 !important; } /* Ook de kinderen, en met `!important`. Zonder die twee kreeg de link wel een geel vlak maar hield de tekst erin zijn eigen kleur: bij Fun Crea werd het logoblok geel met witte letters erop — precies de onleesbaarheid die deze stand moet oplossen. Componentregels zijn hier specifieker dan één klasse op , dus overtuigen lukt niet zonder. */ .csbn-a11y-markeer-links a:not( .csbn-a11y * ), .csbn-a11y-markeer-links a:not( .csbn-a11y * ) * { color: #00f !important; background-color: #ff0 !important; } .csbn-a11y-markeer-links a:not( .csbn-a11y * ) { text-decoration: underline; text-underline-offset: 2px; outline: 2px solid #00f; outline-offset: 1px; } /* Afbeeldingen in een link krijgen geen gele plaat: dat verbergt de afbeelding in plaats van de link aan te wijzen. De rand eromheen doet dat werk. */ .csbn-a11y-markeer-links a:not( .csbn-a11y * ) img { background-color: transparent !important; } /* --- Lezen --------------------------------------------------------------- De waarden komen uit WCAG 1.4.12 (Text Spacing): regelafstand minstens 1,5× de lettergrootte en letterafstand minstens 0,12em. Dat is precies de eis waar de richtlijn om vraagt, dus geen zelfbedachte stap. */ .csbn-a11y-letterafstand body { letter-spacing: 0.12em; word-spacing: 0.16em; } .csbn-a11y-regelafstand body { line-height: 1.8; } .csbn-a11y-letterdikte body { font-weight: 700; } /* Het lettertype wordt pas ingeladen als deze stand voor het eerst aangaat; de @font-face-regel komt uit het script. Staat het bestand er niet, dan valt hij terug op de systeemletters die het dichtst in de buurt komen. */ .csbn-a11y-dyslexie body, .csbn-a11y-dyslexie body :not( .csbn-a11y ):not( .csbn-a11y * ) { font-family: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important; }