/* ============================================================ WCAG.nl — aanvullende stijl theme.json dekt kleur, typografie, ruimte en de blokstijlen. Hier staat alleen wat daar niet in past, plus de eisen uit WCAG 2.2 die om opmaak vragen. Bij elke regel staat het succescriterium waar hij vandaan komt, zodat een audit terug te lezen is. ============================================================ */ /* ═══════════════════════════════════════════════════════════════ rollen Kleuren staan hier als ROL, niet als waarde. --wcag-tekst is "de kleur van gewone tekst"; welke kleur dat is hangt af van het thema. Zonder deze laag is een donkere modus niet te maken zonder 89 declaraties te verdubbelen. Waarom drie blokken en niet twee: iemand die de donkere modus aanzet terwijl zijn systeem op licht staat, moet dat krijgen — en andersom. Het mediablok geldt alleen als er géén eigen keuze is gemaakt. De waarden komen uit tokens.css, waar ze al doorgerekend stonden. ══════════════════════════════════════════════════════════════════════ */ /* * DE EDITOR KRIJGT DEZELFDE VARIABELEN * * WordPress voegt de themastijl in de editor in met scope * :where(.editor-styles-wrapper) — elke selector krijgt dat ervoor. Bij * :root levert dat :where(.editor-styles-wrapper) :root op, en is * geen kind van het canvas. Dus matchte dit blok in de editor niets en was * élke --wcag-variabele daar ongedefinieerd: geen merkkleur, geen vlakken, * geen lijnen. * * De transformatie slaat selectors over die .editor-styles-wrapper al zelf * noemen (ignoredSelectors in block-editor.js). Door hem hier te noemen komt * de declaratie ongewijzigd binnen en staan de variabelen op het canvas. */ :root, .editor-styles-wrapper { --wcag-grond: var(--wp--preset--color--wit); --wcag-vlak: var(--wp--preset--color--nevel); --wcag-vlak-2: var(--wp--preset--color--groen-100); --wcag-tekst: var(--wp--preset--color--inkt); --wcag-tekst-zacht: var(--wp--preset--color--gedempt); --wcag-tekst-merk: var(--wp--preset--color--groen-700); --wcag-tekst-sterk: var(--wp--preset--color--groen-800); --wcag-lijn: var(--wp--preset--color--lijn); --wcag-lijn-sterk: var(--wp--preset--color--rand); --wcag-knop: var(--wp--preset--color--groen-700); --wcag-knop-tekst: var(--wp--preset--color--wit); --wcag-knop-hover: var(--wp--preset--color--groen-800); /* Blauw draagt, groen doet. Tekstlinks zijn blauw: ze brengen je ergens heen. Knoppen, accenten en pictogrammen zijn groen: daar gebeurt iets. Zo lijkt een link niet op een knop, en draagt het merk beide kleuren. */ --wcag-link: var(--wp--preset--color--blauw-700, #16619B); /* 6,53:1 op wit */ --wcag-link-hover: var(--wp--preset--color--diep, #0F4670); /* 9,86:1 op wit */ } /* De pagina zelf volgt de rol. WordPress zet zijn eigen achtergrond via theme.json; die overschrijven we hier zodat de donkere modus doorwerkt. */ body { background-color: var(--wcag-grond); color: var(--wcag-tekst); } /* ------------------------------------------------------------ 2.4.11 Focus niet afgedekt (nieuw in 2.2) Bij een meelopende koptekst kan het gefocuste element erachter verdwijnen als je met Tab door de pagina loopt. scroll-padding houdt er ruimte voor vrij. ------------------------------------------------------------ */ html { /* Kophoogte is 104px. Exact dat aanhouden laat een gefocust element vlak tegen de balk landen — technisch geen 2.4.11-fout, maar zonder lucht. Vandaar 7rem plus een marge. */ scroll-padding-top: 8.5rem; } /* ------------------------------------------------------------ 2.4.7 Focus zichtbaar Tweekleurige ring:binnen licht tegen het element, buiten donker tegen de pagina. Zo haalt hij op elke ondergrond 3:1. Een enkele donkere ring op groen-700 haalt maar 2,51:1 en valt weg. De doorzichtige outline blijft staan in de hoogcontrastmodus van Windows, waar box-shadow wordt weggegooid. ------------------------------------------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--wp--preset--color--wit), 0 0 0 5px var(--wp--preset--color--diep); border-radius: 6px; } .wcag-op-diep:where(a, button, input, select, textarea, summary):focus-visible { box-shadow: 0 0 0 2px var(--wp--preset--color--diep), 0 0 0 5px var(--wp--preset--color--groen-300); } /* ------------------------------------------------------------ 2.5.8 Doelgrootte, minimum (nieuw in 2.2) Elk bedienbaar element minstens 24 bij 24 CSS-pixels. Links in lopende tekst zijn uitgezonderd, vandaar:not(). ------------------------------------------------------------ */ :where(button, [role="button"], input[type="submit"], .wp-element-button, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) { min-block-size: 24px; min-inline-size: 24px; } .wp-block-navigation .wp-block-navigation-item__content, .wp-block-query-pagination a { display: inline-flex; align-items: center; min-block-size: 24px; padding-block: 4px; } /* ------------------------------------------------------------ 2.4.1 Blokken omzeilen Eerste element in de body, onzichtbaar tot hij focus krijgt. ------------------------------------------------------------ */ .wcag-skiplink { /* eigen kleuren: hij ligt over de koptekst, niet in de pagina */ position: absolute; left: -9999px; top: 0; z-index: 99999; background: var(--wcag-knop); color: var(--wcag-knop-tekst); font-family: var(--wp--preset--font-family--lexend); font-weight: 600; padding: 12px 18px; border-radius: 0 0 6px 0; text-decoration: none; } .wcag-skiplink:focus { left: 0; } /* ------------------------------------------------------------ 1.4.10 Reflow Brede inhoud schuift in zijn eigen kader; de pagina zelf schuift nooit horizontaal. ------------------------------------------------------------ */ /* * Alleen overflow-x, geen max-width. * * 'max-width: 100%' leek onschuldig maar sloeg de constrained layout van * WordPress eruit. Die zet kinderen op de contentmaat (46rem) met een * automatische marge; onze regel heeft meer gewicht en won. Gevolg: op een * breed scherm liep de tekst tot 46rem en het codeblok tot de volle breedte * van de pagina, met de code links en de tekst gecentreerd erboven. * * overflow-x doet het werk al: past de inhoud niet, dan schuift het kader en * niet de pagina. */ .wp-block-table, .wp-block-code, figure.wp-block-table { overflow-x: auto; } /* ------------------------------------------------------------ Codeblokken Een blok code is een citaat uit een bestand, geen alinea. Het krijgt daarom een eigen vlak en een kleinere maat: monospace op de tekstgrootte van de lopende tekst oogt fors, en code hoort niet luider te zijn dan het verhaal eromheen. white-space: pre en niet pre-wrap: een regel CSS die middenin afbreekt is moeilijker te lezen dan een regel waar je even voor moet schuiven. Het kader schuift, de pagina niet. ------------------------------------------------------------ */ .wp-block-code { background: var(--wcag-vlak); border: 1px solid var(--wcag-lijn); border-radius: 12px; padding: 18px 20px; margin-block: 1.4rem; } .wp-block-code code { font-size: 0.875rem; line-height: 1.6; white-space: pre; background: none; padding: 0; color: var(--wcag-tekst); } /* * Een criteriumnummer dat naar zijn eigen pagina wijst. Onderstreept zoals * elke link in lopende tekst — een link die alleen aan zijn kleur te herkennen * is, is 1.4.1. */ .wcag-kennis__sclink { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Losse code in een zin: geen kader, wel herkenbaar. */ :not(pre) > code { font-size: 0.92em; padding: 2px 6px; border-radius: 5px; background: var(--wcag-vlak-2); } /* ------------------------------------------------------------ 1.4.12 Tekstafstand Geen vaste hoogtes op tekstdragers, zodat vergrote regel- en letterafstand niet tot afgeknipte tekst leidt. ------------------------------------------------------------ */ .wp-block-group, .wp-block-column, p, li, h1, h2, h3, h4 { block-size: auto; overflow-wrap: break-word; } /* Lopende tekst niet breder dan 68 tekens. */ .wp-block-post-content > p, .wp-block-post-content > ul, .wp-block-post-content > ol { max-width: 68ch; } /* ------------------------------------------------------------ 1.4.11 Contrast van niet-tekstuele content Randen van formuliervelden op #7E8991: de lichtste groengrijs die op wit én op het donkere vlak nog 3:1 haalt. Eén waarde voor beide thema's. Er stond "input: not(", met een spatie. Daarmee was de hele selectorlijst ongeldig en sloeg de browser de regel over, ook voor textarea en select. :where() houdt de specificiteit op nul. Zonder die wrapper zou deze regel met zijn drie :not()'s de eigen stijl van velden op donkere vlakken overschrijven, zoals de witte rand van het webscanveld op blauw. ------------------------------------------------------------ */ :where( input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select, .wp-block-search__input ) { border: 2px solid #7E8991; border-radius: 6px; padding: 11px 13px; font-family: var(--wp--preset--font-family--lexend); font-size: 1rem; background: var(--wcag-grond); color: var(--wcag-tekst); } /* ------------------------------------------------------------ Koptekst ------------------------------------------------------------ */ .wcag-header { position: sticky; top: 0; z-index: 20; /* Dekkend, niet doorschijnend. Een half-transparante balk laat het contrast mee variëren met wat eronder doorscrollt, en color-mix() is voor veel contrastcheckers niet op te lossen. Scheelt ook een backdrop-filter. */ background: var(--wcag-grond); } /* ------------------------------------------------------------ Donkere secties — blokstijl "Op diep" op een groep ------------------------------------------------------------ */ .wcag-op-diep, .is-style-op-diep { background: var(--wp--preset--color--diep); color: var(--wp--preset--color--nevel); } .wcag-op-diep :is(h1, h2, h3, h4), .is-style-op-diep :is(h1, h2, h3, h4) { color: var(--wp--preset--color--wit); } .wcag-op-diep a:not(.wp-element-button), .is-style-op-diep a:not(.wp-element-button) { color: var(--wp--preset--color--groen-300); /* 6,48:1 op diep */ } .wcag-voet-kop { font-family: var(--wp--preset--font-family--lexend); /* Zonder eigen grootte erven deze koppen de h2-maat van 2,2rem uit theme.json, en dan breekt "Diensten" over twee regels. */ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--wp--preset--color--groen-300); margin: 0 0 14px; } /* Knopvariant voor donkere vlakken: mintgroen vlak, diepe tekst — 10,24:1. */ .is-style-licht .wp-element-button, .wp-block-button.is-style-licht > .wp-element-button { background: var(--wp--preset--color--groen-300); color: var(--wp--preset--color--diep); } .is-style-licht .wp-element-button:hover { background: #B6F2D6; } /* ------------------------------------------------------------ Statuscomponenten Nooit kleur alleen:kleur, pictogram met eigen silhouet, én een woord. ------------------------------------------------------------ */ .wcag-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; padding: 6px 12px 6px 10px; border-radius: 6px; border: 1px solid transparent; } .wcag-chip svg { inline-size: 15px; block-size: 15px; flex: none; } /* Zachte vlakken. Kon eerst niet:het palet had geen bleke tinten van rood, amber en blauw, dus stonden hier verzonnen kleuren. Die stappen bestaan nu. Let op waar de betekenis vandaan komt:in grijstinten liggen deze vier vlakken vrijwel gelijk. De kleur bevestigt alleen. Het onderscheid komt van het pictogram (vink, kruis, driehoek, cirkel) en het woord ernaast. Haal je een van die twee weg, dan is de chip niet meer leesbaar zonder kleur. */ .wcag-chip--geslaagd { background: var(--wcag-succes-100); color: var(--wcag-succes-800); border-color: var(--wcag-succes-300); } .wcag-chip--fout { background: var(--wcag-rood-100); color: var(--wcag-rood-800); border-color: var(--wcag-rood-300); } .wcag-chip--letop { background: var(--wcag-amber-100); color: var(--wcag-amber-800); border-color: var(--wcag-amber-300); } .wcag-chip--info { background: var(--wcag-violet-100); color: var(--wcag-violet-800); border-color: var(--wcag-violet-300); } /* Op donkere vlakken keren ze om. */ .wcag-hero .wcag-chip--geslaagd, .wcag-scan .wcag-chip--geslaagd { background: var(--wp--preset--color--groen-300); color: var(--wp--preset--color--diep); border-color: transparent; } .wcag-hero .wcag-chip--fout, .wcag-scan .wcag-chip--fout { background: var(--wcag-rood-300); color: var(--wp--preset--color--diep); border-color: transparent; } .wcag-hero .wcag-chip--letop, .wcag-scan .wcag-chip--letop { background: var(--wcag-amber-300); color: var(--wp--preset--color--diep); border-color: transparent; } .wcag-hero .wcag-chip--info, .wcag-scan .wcag-chip--info { background: var(--wcag-violet-300); color: var(--wp--preset--color--diep); border-color: transparent; } .wcag-badge { display: inline-flex; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; } /* * De drie niveaus, in oplopende zwaarte. Niveau A is de lichtste omdat het de * meest voorkomende is; AAA de donkerste omdat het de uitzondering is. * * Ze hadden alledrie een rand nodig. Zonder rand zweeft een lichte badge op * een lichte achtergrond en zie je hem pas als je hem zoekt — en juist deze * badge is waar de lezer op scant. */ .wcag-badge--a { background: var(--wcag-vlak-2); color: var(--wcag-tekst-sterk); border: 1px solid var(--wp--preset--color--groen-700); } .wcag-badge--aa { background: var(--wp--preset--color--groen-700); color: var(--wp--preset--color--wit); border: 1px solid var(--wp--preset--color--groen-700); } .wcag-badge--aaa { background: var(--wp--preset--color--diep); color: var(--wp--preset--color--groen-300); border: 1px solid var(--wp--preset--color--diep); } /* * Nieuw in 2.2 en vervallen in 2.2. * * Een andere vorm en niet alleen een andere kleur: deze twee zeggen iets * anders dan het niveau, en dan mogen ze er niet uitzien als nog een niveau. * Open met een rand, tegenover de gevulde niveaubadges. */ .wcag-badge--nieuw { background: var(--wcag-amber-100, #FFF3E4); color: #7A4100; border: 1px dashed #A9631A; } .wcag-badge--vervallen { background: transparent; color: var(--wcag-tekst-zacht); border: 1px dashed var(--wcag-rand, #7E8991); text-decoration: line-through; } /* Het criterium zelf krijgt een streep in de kantlijn, zodat je het ook ziet als de badge buiten beeld is gescrold. */ .wcag-criterium--nieuw { border-inline-start: 4px solid #A9631A; padding-inline-start: 18px; } .wcag-criterium--vervallen { border-inline-start: 4px solid var(--wcag-rand, #7E8991); padding-inline-start: 18px; } /* In de inhoudsopgave een sterretje, met uitleg voor wie het niet ziet. */ .wcag-io__criterium--nieuw > a::after { content: " ●"; color: #A9631A; font-size: 0.7em; vertical-align: middle; } /* ------------------------------------------------------------ Tabellen — haarlijnen, geen zebra ------------------------------------------------------------ */ .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table:is(th, td) { padding: 12px 14px; text-align: left; border-top: 1px solid #D6DCE1; } .wp-block-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wcag-tekst-zacht); border-top: 0; border-bottom: 2px solid #7E8991; } .is-style-bevindingen td:nth-child(2) { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ 2.3.3 Animatie bij interactie ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------ Meer contrast Rollen schuiven een stap op; groen en blauw worden allebei donkerder. ------------------------------------------------------------ */ @media (prefers-contrast: more) { :root { --wp--preset--color--inkt: #000000; /* 21,00:1 */ --wp--preset--color--gedempt: #293238; /* 13,16:1, was 5,80 */ --wp--preset--color--groen-700: #0B4433; /* 11,12:1, was 6,49 */ --wp--preset--color--blauw-700: #0F4670; /* 9,86:1, was 6,53 */ } .wp-block-table:is(th, td) { border-top-color: #7E8991; } } /* ------------------------------------------------------------ Hoogcontrastmodus van Windows Het systeem neemt de kleur over; wij zorgen dat de vorm blijft staan. ------------------------------------------------------------ */ @media (forced-colors: active) { .wp-element-button, .wcag-chip, .wcag-badge, input, textarea, select { border: 2px solid currentColor; } .wcag-op-diep, .is-style-op-diep { background: Canvas; color: CanvasText; } .wcag-header { background: Canvas; } } /* ------------------------------------------------------------ Logo — inline SVG, zie patterns/logo.php ------------------------------------------------------------ */ .wcag-logo { display: inline-block; line-height: 0; } .wcag-logo svg { inline-size: 210px; block-size: auto; max-inline-size: 100%; } .wcag-logo--voet svg { inline-size: 260px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================ Statuskleuren Deze staan bewust NIET in theme.json:dat palet is wat een redacteur uit de kleurkiezer mag pakken, en dan wordt rood vroeg of laat decoratief gebruikt. Hier zijn het gewone custom properties met een eigen naam, te gebruiken door componenten die ook een pictogram en een woord meeleveren. Elke tint heeft dezelfde vijf rollen als groen. Ze ontbraken eerder, en dat is precies waarom er losse kleuren omheen verzonnen werden. 100 bleek vlak achtergrond van een melding 300 lichte tint vlak in het donkere thema 600 UI-kleur rand, icoon, grafieklijn — >= 3:1 op wit 700 tekstkleur tekst op wit — >= 4,5:1 800 hover / donkerst ============================================================ */ :root { --wcag-rood-100: #FCE8EC; --wcag-rood-300: #FFB8C6; --wcag-rood-600: #C2183C; /* 6,02:1 op wit */ --wcag-rood-700: #A3132D; /* 7,81:1 op wit */ --wcag-rood-800: #840F24; /* 10,12:1 op wit · 8,62:1 op rood-100 */ --wcag-amber-100: #FDF0E0; --wcag-amber-200: #FFDCB0; --wcag-amber-300: #FFC169; --wcag-amber-500: #FF8A2B; /* alleen vlakken, 2,35:1 — nooit tekst op wit */ --wcag-amber-700: #9A4A06; /* 6,26:1 op wit */ --wcag-amber-800: #7A3A05; /* 8,62:1 op wit · 7,69:1 op amber-100 */ --wcag-violet-100: #F1EEFD; --wcag-violet-300: #C6B7FF; --wcag-violet-600: #5B3FC4; /* 7,11:1 op wit */ --wcag-violet-700: #4E27E2; /* 7,74:1 op wit */ --wcag-violet-800: #3D19C3; /* 9,88:1 op wit · 8,65:1 op violet-100 */ /* Succes blijft groen. Het merk is blauw geworden, maar groen voor "geslaagd" is een conventie die bezoekers al kennen, net als rood voor fout. Het zijn de groenen van het oude merkpalet; de 300 is het mint. */ --wcag-succes-100: #E2F8ED; --wcag-succes-300: #8EE3B4; --wcag-succes-700: #0F6B4F; /* 6,49:1 op wit */ --wcag-succes-800: #0B4433; /* 11,12:1 op wit · 10,00:1 op succes-100 */ } /* ============================================================ LAYOUT — overgenomen uit het prototype (website-voorbeeld.html) ============================================================ */ /* ---- koptekst:logo links, navigatie en knop rechts ---- */ .wcag-header > .wp-block-group { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .wcag-header .wcag-logo { margin-inline-end: auto; } .wcag-header .wcag-logo svg { inline-size: 190px; } .wcag-header .wp-block-navigation { gap: 26px; } .wcag-header .wp-block-navigation a { font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--wcag-tekst); } .wcag-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- hero ---- */ .wcag-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--diep); color: #FFFFFF; } .wcag-hero__vink { position: absolute; right: -7%; top: 50%; transform: translateY(-50%); inline-size: min(44%, 540px); opacity: 0.12; pointer-events: none; } .wcag-hero__inhoud { position: relative; display: flex; flex-direction: column; gap: 24px; } .wcag-hero h1 { color: #fff; max-inline-size: 19ch; margin: 0; } .wcag-hero h1 em { font-style: normal; color: var(--wp--preset--color--groen-300); } .wcag-hero__lead { font-size: 1.15rem; max-inline-size: 52ch; } .wcag-hero__acties { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* Feitenregel in de hero. Hier stonden eerst statuschips met scores, maar die verwezen naar geen enkele meting: het leek data en was decoratie. De chips staan nu alleen nog bij de rapportkaart, waar ze wél ergens over gaan. */ .wcag-feiten { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 0; font-size: 0.875rem; color: #BFD2E2; /* * De regel sluit af tegen de onderrand van de hero: de onderruimte van de * hero is opgeheven met een negatieve marge en er komt een eigen, kleinere * ruimte voor terug. Zo staat hij op de rand in plaats van er los boven te * zweven, maar plakt hij er ook niet tegenaan. */ margin: 44px 0 calc(-1 * var(--wcag-hero-ruimte) + 22px); } .wcag-feiten li { display: flex; align-items: center; gap: 10px; } /* * Een bolletje vóór elk feit, ook het eerste. Eerst stond hij alleen tussen * de feiten in (li + li), als scheidingsteken. Maar zodra de regel afbreekt * begint de tweede regel zonder bolletje en lijkt dat feit ergens bij te * horen. Als merkteken vóór elk feit klopt hij op elke breedte. */ .wcag-feiten li::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--wp--preset--color--groen-500, #19A876); flex: none; } /* ---- knoppen ---- */ .wcag-knop { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; line-height: 1.2; padding: 13px 22px; border-radius: 6px; text-decoration: none; border: 2px solid transparent; transition: background-color 140ms ease-out, color 140ms ease-out; } .wcag-knop--primair { background: var(--wp--preset--color--groen-700); color: #fff; } .wcag-knop--primair:hover { background: var(--wp--preset--color--groen-800); } .wcag-knop--licht { background: var(--wp--preset--color--groen-300); color: var(--wp--preset--color--diep); } .wcag-knop--licht:hover { background: #B6F2D6; } /* * Dezelfde knop, maar dan als core/button. * * De pagina's zijn omgezet naar kernblokken, zodat de redactie ze kan * bewerken. Bij core/button komt onze klasse op de wikkel terecht en niet op * de link — daar heeft WordPress zijn eigen klasse voor. Dus geven we de link * binnen die wikkel dezelfde opmaak. * * De losse .wcag-knop blijft staan: die zit nog in de patronen van het thema, * waar we de HTML zelf schrijven. */ .wp-block-button.wcag-knop { margin: 0; } .wp-block-button.wcag-knop .wp-block-button__link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; line-height: 1.2; padding: 13px 22px; border-radius: 6px; text-decoration: none; border: 2px solid transparent; transition: background-color 140ms ease-out, color 140ms ease-out; } .wp-block-button.wcag-knop--primair .wp-block-button__link { background: var(--wp--preset--color--groen-700); color: #fff; } .wp-block-button.wcag-knop--primair .wp-block-button__link:hover { background: var(--wp--preset--color--groen-800); } .wp-block-button.wcag-knop--licht .wp-block-button__link { background: var(--wp--preset--color--groen-300); color: var(--wp--preset--color--diep); } .wp-block-button.wcag-knop--licht .wp-block-button__link:hover { background: #B6F2D6; } /* De wikkel van core/buttons voegt zelf ruimte toe; die halen we weg zodat de knop staat waar hij stond. */ .wcag-tweeluik__tekst .wp-block-buttons, .wcag-oproep .wp-block-buttons { margin: 0; } .wcag-tweeluik__tekst .wp-block-buttons { margin-block-start: 10px; } /* De tekstknop stond hard op groen-300. Dat is de linkkleur voor een DONKER vlak (6,48:1 op diep) en die haalt op wit 1,59:1 — onleesbaar. Hij stond ook alleen op donkere vlakken, tot de webscan hem op een witte pagina gebruikte. Het handboek heeft hier één antwoord voor:--tekst-merk is groen-700 op licht en groen-300 op donker. Dus dat als uitgangspunt, en de donkere vlakken zetten hem om. Zo kan de knop overal staan zonder dat je erover hoeft na te denken. */ .wcag-knop--tekst { color: var(--wcag-link); padding: 13px 4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 140ms ease-out, text-decoration-thickness 140ms ease-out, text-underline-offset 140ms ease-out; } /* Geen hover-toestand is geen WCAG-fout, maar wel inconsistent met de knoppen ernaast. Kleur plus een dikkere streep:twee signalen in plaats van een. */ .wcag-knop--tekst:hover { color: var(--wcag-link-hover); /* 9,86:1 op wit */ text-decoration-thickness: 3px; text-underline-offset: 3px; } /* Op de donkere vlakken keert hij om. */ .wcag-hero .wcag-knop--tekst, .wcag-paginahero .wcag-knop--tekst, .wcag-scan .wcag-knop--tekst, .wcag-voet .wcag-knop--tekst, .is-style-op-diep .wcag-knop--tekst { color: var(--wp--preset--color--groen-300); /* 6,48:1 op diep */ } .wcag-hero .wcag-knop--tekst:hover, .wcag-paginahero .wcag-knop--tekst:hover, .wcag-scan .wcag-knop--tekst:hover, .wcag-voet .wcag-knop--tekst:hover, .is-style-op-diep .wcag-knop--tekst:hover { color: var(--wp--preset--color--groen-200); /* 7,82:1 op diep */ } /* ---- secties ---- */ .wcag-sectie { padding-block: clamp(56px, 8vw, 100px); } .wcag-sectie--grijs { background: var(--wcag-vlak); } .wcag-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wcag-tekst-merk); margin: 0 0 12px; } /* * De merkvink is breder dan hoog; forceer hier geen vierkant, anders wordt * hij uitgerekt. De maat komt uit wcag_nl_merkvink(). */ .wcag-eyebrow svg:not(.wcag-merkvink) { inline-size: 17px; block-size: 17px; } .wcag-eyebrow .wcag-merkvink { flex: none; } .wcag-leidtekst { color: var(--wcag-tekst-zacht); max-inline-size: 60ch; margin-block-start: 14px; } /* * De ruimte tussen de kop, de inhoud en de voet. * * WordPress zet standaard blockGap tussen de drie delen van het sjabloon. * Dat gaf een strook wit van 24px onder de streep van het menu — de streep, * dan wit, dan pas de donkere kop — en nog eens 24px boven de voet. * * Elke sectie brengt zijn eigen ruimte al mee, dus hier hoort niets tussen. * Alleen deze drie en niet blockGap zelf: die staat overal binnen de blokken * en is daar wél nodig. */ .wp-site-blocks > :is(header, main, footer) { margin-block-start: 0; } /* ---- dienstenraster ---- */ .wcag-diensten { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 18px; margin-block-start: 38px; } .wcag-dienst { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 16px; border: 1px solid var(--wcag-lijn); background: #fff; text-decoration: none; color: inherit; transition: border-color 140ms ease-out, background-color 140ms ease-out; } .wcag-dienst:hover { border-color: var(--wp--preset--color--groen-700); background: var(--wcag-vlak); } /* * Het pictogram op de tegels van de voorpagina én op de kaarten van de * dienstenpagina's. Eén regel voor allebei, want het is hetzelfde ding op een * andere plek; twee losse regels lopen na de eerste wijziging uit de pas. * * aria-hidden staat al op de : het beeldt de kop uit, het vervangt hem * niet. Wie het niet ziet mist niets. */ .wcag-dienst__icoon, .wcag-kaart__icoon { display: inline-flex; color: var(--wcag-tekst-merk); } .wcag-dienst__icoon svg, .wcag-kaart__icoon svg { inline-size: 28px; block-size: 28px; } /* De tegel is een flexkolom met gap; de kaart niet, dus daar met een marge. */ .wcag-kaart__icoon { margin-block-end: 14px; } /* * Elke kop in een tegel, niet alleen een h3. * * Op de Kennis-pagina zijn het h2's — daar is de tegel een hoofdonderdeel van * de pagina en niet een item binnen een sectie. Met alleen h3 in de selector * kreeg de kop de 36px van het thema en brak "Kennisbank" middenin af. * * Het niveau van een kop hoort bij de structuur, de maat bij de plek waar hij * staat. Die twee moeten los van elkaar kunnen. */ .wcag-dienst :is(h2, h3, h4) { margin: 0; font-size: 1.15rem; line-height: 1.25; hyphens: none; } .wcag-dienst p { font-size: 0.93rem; color: var(--wcag-tekst-zacht); margin: 0; } .wcag-dienst__meer { margin-block-start: auto; padding-block-start: 8px; font-size: 0.88rem; font-weight: 600; color: var(--wcag-link); display: inline-flex; align-items: center; gap: 7px; } /* ---- twee kolommen ---- */ .wcag-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: start; } /* ---- rapportkaart ---- */ .wcag-rapport { border: 1px solid var(--wcag-lijn); border-radius: 16px; overflow: hidden; background: #fff; } .wcag-rapport__kop { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; background: #EAEEF0; border-block-end: 1px solid #D6DCE1; flex-wrap: wrap; } .wcag-rapport__kop b { font-family: var(--wp--preset--font-family--rubik); font-size: 0.98rem; } .wcag-rapport table { inline-size: 100%; border-collapse: collapse; font-size: 0.88rem; } /* * De spatie vóór :is() hoort er echt te staan. Zonder die spatie leest de * regel als "de .wcag-rapport die zelf een th of td is" — die bestaat niet, * dus viel álle opmaak weg en zette de browser zijn eigen standaard neer: * koppen gecentreerd, cellen zonder ruimte. */ .wcag-rapport :is(th, td) { padding: 12px 20px; text-align: start; vertical-align: middle; } .wcag-rapport tbody tr + tr :is(th, td) { border-block-start: 1px solid #D6DCE1; } .wcag-rapport thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wcag-tekst-zacht); } .wcag-rapport tbody th { font-weight: 600; } /* * Kolombreedtes. Elke kolom krijgt precies wat hij nodig heeft en de * overgebleven ruimte gaat naar de laatste: zo staan de drie kolommen tegen * elkaar aan de linkerkant en valt alle witruimte helemaal rechts weg, in * plaats van tussen de kolommen in. * * De criteriumnaam breekt niet af. Een nummer als "1.4.3" dat op een eigen * regel belandt is geen kop meer maar een los getal. */ .wcag-rapport :is(th, td):nth-child(1), .wcag-rapport :is(th, td):nth-child(2) { inline-size: 1%; white-space: nowrap; } .wcag-rapport :is(th, td):last-child { inline-size: 100%; } /* Past het niet, dan schuift de tabel; hij wordt niet in elkaar gedrukt. */ .wcag-rapport { overflow-x: auto; } /* ---- citaten ---- */ .wcag-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-block-start: 38px; } .wcag-quote { margin: 0; padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--wcag-lijn); display: flex; flex-direction: column; gap: 16px; } .wcag-quote blockquote { margin: 0; font-size: 0.98rem; } .wcag-quote p { margin: 0; font-size: 0.98rem; } /* core/quote zet de naam in een , het oude patroon in een
. Allebei, want de patronen van het thema schrijven nog hun eigen HTML. */ .wcag-quote figcaption, .wcag-quote cite { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--wcag-tekst-zacht); font-style: normal; border-block-start: 1px solid #D6DCE1; padding-block-start: 14px; margin-block-start: 16px; } .wcag-quote figcaption b, .wcag-quote cite b { color: var(--wcag-tekst); font-size: 0.92rem; } /* De rij citaten. Heette .wcag-quotes toen het patroon hem schreef; de paginabouwer gebruikt .wcag-citaten. Dezelfde opmaak voor allebei. */ .wcag-citaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-block-start: 38px; } /* ---- webscan ---- */ .wcag-scan { position: relative; overflow: hidden; background: var(--wp--preset--color--diep); color: #FFFFFF; border-radius: 26px; padding: clamp(28px, 5vw, 54px); } /* Het decoratieve beeldmerk op de donkere vlakken. LET OP BIJ WIJZIGEN: de dekking heeft een plafond. De W is groen-300 op diep; waar hij achter tekst ligt wordt de achtergrond daar lichter en zakt het contrast. Doorgerekend: 13% achtergrond #205A79 — zwakste tekst 4,83:1 (nu) 18% achtergrond #26627C — zwakste tekst 4,34:1 FOUT Op blauw is de marge klein: boven ongeveer 15% zakt de gedempte tekst door de 4,5:1. Niet hoger zetten dan 13%. De webscan van wcag.nl meldt deze tekst als aandachtspunt. Dat is een beperking van axe: het kan contrast niet berekenen als er een element overheen ligt, en meldt het dan als "bekijk zelf" in plaats van als fout. Nul echte fouten in die scan. */ .wcag-scan__vink { position: absolute; right: -6%; bottom: -24%; inline-size: 38%; opacity: 0.13; } /* Het watermerk uitsluiten: dat is absoluut gepositioneerd, en een even specifieke regel die later staat zou dat overschrijven. */ .wcag-scan > *:not(.wcag-scan__vink) { position: relative; } .wcag-scan h2 { color: #fff; } .wcag-scan p { max-inline-size: 48ch; margin-block-start: 14px; } .wcag-scan__veld { display: flex; gap: 12px; margin-block-start: 24px; flex-wrap: wrap; align-items: center; } /* Het label hoort zichtbaar te zijn, maar de regel is al zo lang dat hij anders omklapt. Boven het veld dus, over de volle breedte. */ .wcag-scan__veld label { flex-basis: 100%; font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--groen-300); } .wcag-scan__veld input { flex: 1; min-inline-size: 230px; } .wcag-scan__hint { flex-basis: 100%; font-size: 0.83rem; color: #BFD2E2; } /* ---- voettekst ---- */ .wcag-voet { background: var(--wp--preset--color--diep); color: #BFD2E2; } /* Logo plus vijf kolommen. Smal begint het als een stapel met het logo over de volle breedte; pas als er echt ruimte is staat alles op één regel. Met auto-fit alleen zou het logo tussen de kolommen belanden en even smal worden als "Bedrijf". */ .wcag-voet__boven { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 34px 26px; padding-block-end: 34px; border-block-end: 1px solid var(--wp--preset--color--voetlijn, #3F6B8D); } .wcag-voet__merk { grid-column: 1 / -1; margin-block-end: 16px; } /* Kleiner dan op de kop van de pagina: hier is het een afzender, geen entree. */ .wcag-voet__merk svg { inline-size: 100%; max-inline-size: 178px; block-size: auto; } /* Het logo staat boven de kolommen, niet ernaast. Ernaast moest het concurreren met vijf kolommen om dezelfde regel, en werd elke kolom smaller dan de inhoud vroeg. Boven heeft het lucht en houden de kolommen hun maat. */ @media (min-width: 1080px) { .wcag-voet__boven { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* De gegevenskolommen. Niet cursief, want
doet dat vanzelf en dat leest slechter bij kleine tekst op een donker vlak. */ .wcag-voet__adres { font-style: normal; font-size: 0.92rem; line-height: 1.75; margin: 0; } .wcag-voet__gegevens { margin: 0; font-size: 0.92rem; line-height: 1.75; } .wcag-voet__gegevens dt { color: var(--wp--preset--color--groen-300); font-size: 0.8rem; font-weight: 600; } /* De waarden in wit, niet in het gedempte grijs van de voettekst. Reden: KvK is een link en die is licht; stonden btw en iban in het gedempte grijs, dan leek de ene regel belangrijker dan de andere terwijl het gewoon drie bedrijfsgegevens zijn. Wit op diep haalt 9,86:1. */ .wcag-voet__gegevens dd { margin: 0 0 10px; color: var(--wp--preset--color--wit); } .wcag-voet__gegevens dd:last-child { margin-block-end: 0; } .wcag-voet__meer { margin: 14px 0 0; } /* * De missie staat onder het logo en niet in een kolom: het is geen lijstje * links maar de zin waar de rest van de voettekst omheen hangt. Beperkt tot * een leesbare regellengte, want een zin die de hele breedte pakt lees je * niet. */ .wcag-voet__missie { margin: 18px 0 0; max-inline-size: 44ch; font-size: 0.92rem; color: var(--wp--preset--color--nevel); } .wcag-voet a { color: var(--wp--preset--color--nevel); text-decoration: none; font-size: 0.92rem; } .wcag-voet a:hover { text-decoration: underline; text-underline-offset: 4px; } .wcag-voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .wcag-voet__onder { display: flex; gap: 10px 26px; flex-wrap: wrap; padding-block-start: 26px; font-size: 0.83rem; } /* ---- binnenmaat voor de eigen secties ---- */ .wcag-binnen { max-inline-size: 73rem; margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } .wcag-hero { --wcag-hero-ruimte: clamp(52px, 8vw, 96px); padding-block: var(--wcag-hero-ruimte); } .wcag-voet { padding-block: clamp(48px, 7vw, 78px) 38px; } /* de hero en secties lopen van rand tot rand binnen post-content */ .wcag-hero.alignfull, .wcag-sectie.alignfull { margin-inline: calc(50% - 50vw); max-inline-size: 100vw; } /* De watermerken zijn SVG's met eigen width/height van 64; die moeten de ruimte van hun container volgen in plaats van hun eigen maat. */ .wcag-hero__vink svg, .wcag-scan__vink svg { inline-size: 100%; block-size: auto; display: block; } .wcag-hero__vink svg path, .wcag-scan__vink svg path { stroke: var(--wp--preset--color--groen-300); } /* De koptekst staat in een constrained layout en werd daardoor beperkt tot de contentbreedte (46rem), waardoor logo, menu en knop over drie regels vielen. Hij hoort op de brede maat te staan. */ .wcag-header > .wp-block-group { max-inline-size: 73rem; margin-inline: auto; inline-size: 100%; } .wcag-header .wp-block-navigation__container { gap: 26px; } /* ---- onderzoeksblok: kaart lijnt uit met de tekst, niet met de eyebrow ---- Niet met een vaste marge: die breekt zodra de kop op een ander formaat anders afbreekt. De kop krijgt een eigen rij, tekst en kaart delen rij twee, waardoor hun bovenkanten per definitie gelijk liggen. */ .wcag-onderzoek { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; } @media (min-width: 62rem) { .wcag-onderzoek { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 56px); row-gap: 22px; align-items: stretch; } .wcag-onderzoek__kop { grid-area: 1 / 1 / 2 / 2; } .wcag-onderzoek__tekst { grid-area: 2 / 1 / 3 / 2; } .wcag-onderzoek .wcag-rapport { grid-area: 2 / 2 / 3 / 3; } /* De kaart is hoger dan de tekst. Door de tekstkolom uit te rekken en de knop naar onderen te duwen eindigen knop en kaart op dezelfde lijn. De kaart korter maken kan niet:daar staat inhoud in. */ .wcag-onderzoek__tekst { display: flex; flex-direction: column; } .wcag-onderzoek__tekst > p:last-child { margin-block: auto 0; padding-block-start: 26px; display: flex; /* anders laat de regelhoogte ruimte onder de knop */ line-height: 0; } } /* ------------------------------------------------------------ Accent in koppen Bewust een
en geen . De kleur is typografisch, niet inhoudelijk: de zin betekent hetzelfde als je hem in één kleur zet. Met zou een schermlezer nadruk aankondigen die er niet is. Draagt de nadruk wél betekenis, gebruik dan — die kleurt mee. De kleur is nooit de enige drager van informatie (1.4.1); hij benadrukt alleen wat er ook zonder kleur staat. ------------------------------------------------------------ */ .wcag-accent, h1 em, h2 em, h3 em { font-style: inherit; color: var(--wcag-tekst-merk); /* 6,49:1 op wit */ } .wcag-op-diep .wcag-accent, .wcag-hero .wcag-accent, .wcag-scan .wcag-accent, .wcag-hero h1 em { color: var(--wp--preset--color--groen-300); /* 6,48:1 op diep */ } /* ============================================================ Paginakop — vervolgpagina's Zelfde taal als de hero op de homepage, maar lager: daar is de kop de pagina, hier is hij de aankondiging. ============================================================ */ .wcag-paginahero { position: relative; overflow: hidden; background: var(--wp--preset--color--diep); color: #FFFFFF; padding-block: clamp(26px, 4vw, 44px) clamp(34px, 5vw, 60px); } .wcag-paginahero__vink { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); inline-size: min(32%, 380px); opacity: 0.12; pointer-events: none; } .wcag-paginahero__vink svg { inline-size: 100%; block-size: auto; display: block; } .wcag-paginahero__vink svg path { stroke: var(--wp--preset--color--groen-300); } .wcag-paginahero__inhoud, .wcag-paginahero__tekst { position: relative; } /* * De H1 in de paginakop. * * hyphens staat aan omdat het Nederlands lange samenstellingen kent: * "Toegankelijkheidsonderzoek" is 26 tekens en past op 48px niet op één regel. * Zonder afbreekstreepje brak de browser hem middenin tot "Toegankelijkheidsonderz * / oek", en dan leest een mens het woord twee keer om het te begrijpen. Met * hyphens: auto zet de browser er een streepje bij, op een plek die klopt — * hij weet dat de pagina Nederlands is, want dat staat op . */ .wcag-paginahero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); max-inline-size: 18ch; margin: 14px 0 0; hyphens: auto; -webkit-hyphens: auto; } /* * De intro onder de H1. Twee bronnen, één opmaak. * * Op een gewone pagina komt hij uit het blok post-excerpt, op een * taxonomiepagina uit de omschrijving van de term. Stond alleen de eerste hier * genoemd, en dat was te zien: op /kennis/kennisbank/ liep de tekst terug op * 54 tekens, op /doelgroep/auditeur/ over de volle breedte van het scherm. */ .wcag-paginahero .wp-block-post-excerpt__excerpt, .wcag-paginahero__lead { font-size: 1.1rem; max-inline-size: 54ch; margin: 16px 0 0; } .wcag-paginahero .wp-block-buttons { margin-block-start: 26px; } /* ------------------------------------------------------------ Terug naar boven Zonder JavaScript: een gewone link onderaan de pagina. Met JavaScript: een zwevende knop die verschijnt na een schermlengte scrollen. Het aanknopingspunt bovenaan is leeg en neemt geen ruimte in, maar krijgt wel de focus — anders schuift alleen het beeld omhoog en blijft de focus onderaan staan. ------------------------------------------------------------ */ .wcag-anker { position: absolute; inset-block-start: 0; inline-size: 1px; block-size: 1px; } .wcag-omhoog { display: inline-flex; align-items: center; justify-content: center; gap: 8px; inline-size: 52px; block-size: 52px; margin: 0 auto 28px; border-radius: 50%; background: var(--wp--preset--color--groen-700); color: var(--wp--preset--color--wit); text-decoration: none; } .wcag-omhoog svg { inline-size: 22px; block-size: 22px; } .wcag-omhoog:hover { background: var(--wp--preset--color--diep); } /* Met JavaScript: zwevend, en pas zichtbaar na een schermlengte. */ .wcag-omhoog[data-omhoog-vast] { position: fixed; inset-block-end: clamp(16px, 3vw, 28px); inset-inline-end: clamp(16px, 3vw, 28px); margin: 0; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms; box-shadow: 0 4px 14px rgb(8 37 28 / 0.28); } .wcag-omhoog[data-omhoog-vast].is-zichtbaar { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .wcag-omhoog[data-omhoog-vast] { transition: none; transform: none; } } /* In de hoogcontrastmodus verdwijnt de achtergrond; dan moet de rand het doen. */ @media (forced-colors: active) { .wcag-omhoog { border: 2px solid ButtonText; } } /* ---- kruimelpad ---- */ .wcag-kruimels ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; } .wcag-kruimels li { display: flex; align-items: center; gap: 8px; } .wcag-kruimels a { color: var(--wp--preset--color--groen-300); } .wcag-kruimels [aria-current="page"] { color: #BFD2E2; } /* #475C6D haalde maar 2,36:1. Het teken is aria-hidden, maar het staat wel zichtbaar op het scherm en valt dus gewoon onder 1.4.3. */ .wcag-kruimels__scheiding { color: #BFD2E2; } /* 6,35:1 op diep */ /* ============================================================ Sectieopbouw voor inhoudspagina's Tweeluiken die om en om kantelen, een kaartenrij en een oproepblok. Zo krijgt een lange pagina ritme in plaats van een kolom tekst. ============================================================ */ .wcag-tweeluik { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; padding-block: clamp(44px, 6vw, 76px); } @media (min-width: 62rem) { .wcag-tweeluik { grid-template-columns: 1fr 1fr; align-items: center; } .wcag-tweeluik--gedraaid .wcag-tweeluik__beeld { order: -1; } } .wcag-tweeluik__tekst > * + * { margin-block-start: 1rem; } .wcag-tweeluik__tekst h2 { margin-block-end: 0.4em; } .wcag-tweeluik__tekst p { max-inline-size: 56ch; } .wcag-tweeluik .wcag-knop { margin-block-start: 10px; } /* Beeldkader. Zolang er geen foto is, staat hier een merkvlak met de opdracht erin, zodat zichtbaar is wát er moet komen. */ .wcag-beeld { margin: 0; } .wcag-beeld img { inline-size: 100%; block-size: auto; border-radius: 16px; display: block; } .wcag-beeld__plek { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--wp--preset--color--diep); display: flex; align-items: flex-end; padding: 22px; } .wcag-beeld__plek svg { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); inline-size: 52%; opacity: 0.14; } .wcag-beeld__plek svg path { stroke: var(--wp--preset--color--groen-300); } /* * Zit er een tekening in plaats van een briefing, dan vult die het hele kader. * De regels hierboven gelden voor het watermerk dat achter de briefing stond; * die zet ik hier terug, want dit is het beeld zelf en geen achtergrond. */ /* * De omlijnde tekening brengt zijn eigen kaderlijn mee en heeft geen vlak. * Dus ook geen achtergrond hier: die stond op diep, en dan zou de tekening * alsnog op een donker vlak staan met een lijn eromheen die je niet ziet. */ .wcag-beeld__plek--tekening { padding: 0; display: block; background: none; } .wcag-beeld__plek--tekening svg { position: static; transform: none; inline-size: 100%; block-size: 100%; opacity: 1; } .wcag-beeld__opdracht { position: relative; font-size: 0.8125rem; line-height: 1.5; color: #FFFFFF; max-inline-size: 34ch; } .wcag-beeld__opdracht b { display: block; color: var(--wp--preset--color--groen-300); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-block-end: 6px; } /* * DE RIJMARGE VAN WORDPRESS UITZETTEN IN ONZE RASTERS * * Een core/group krijgt is-layout-flow, en daarbij hoort de regel * .wp-block-group-is-layout-flow > * + * { margin-block-start: 24px }. * In een verticale stapel klopt dat. In een raster niet: de tweede en derde * tegel kregen 24px bovenmarge en zakten omlaag, waardoor de eerste tegel * hoger werd dan de rest. Dat viel op als hoogteverschil tussen de tegels. * * Deze containers bepalen hun eigen ruimte met gap, dus daar hoort de * bloklaag zich niet mee te bemoeien. */ :is(.wcag-kaarten, .wcag-diensten, .wcag-citaten, .wcag-kennis__kaarten, .wcag-oproep) > * + * { margin-block-start: 0; } /* ============================================================ De eigen blokken: wcag/tegel en wcag/teaser De kleuren komen als variabele uit het blok mee, zodat de redactie ze in de zijbalk kan zetten zonder dat er een klasse bij hoeft. Valt er geen kleur binnen, dan staan hier de standaarden van het merk. ============================================================ */ .wcag-tegel { position: relative; display: flex; flex-direction: column; padding: 20px 22px; border-radius: 12px; background: var(--tegel-vul, var(--wcag-vlak)); border: 1px solid var(--tegel-rand, var(--wcag-lijn)); transition: background-color 140ms ease-out, border-color 140ms ease-out; } /* * Gelijkgetrokken met de kaarten op de kennisbank. * * Die twee stonden omgekeerd: daar een donker pictogram met een groene kop, * hier een groen pictogram met een zwarte kop. Twee soorten tegels op één * site die elkaars kleuren gebruiken. * * De kennisbank had het goed. De kop ís een link, en groen is de linkkleur; * hem zwart maken haalt het enige signaal weg dat je erop kunt klikken — * onderstreping is er niet, dus dan blijft er niets over (1.4.1). Het * pictogram is versiering en hoeft geen aandacht te trekken. */ .wcag-tegel__icoon { display: inline-flex; margin-block-end: 14px; color: var(--wcag-tekst); } .wcag-tegel__icoon svg { inline-size: 30px; block-size: 30px; } .wcag-tegel__kop { margin: 0 0 8px; font-size: 1.15rem; } .wcag-tegel__kop a { text-decoration: none; color: var(--wcag-link); } .wcag-tegel--link:hover .wcag-tegel__kop a { text-decoration: underline; } .wcag-tegel__tekst { margin: 0; font-size: 0.95rem; color: var(--wcag-tekst-zacht); } /* De hele tegel klikbaar, met één link in de koppenstructuur. Een om de hele tegel heen laat een schermlezer de hele alinea als linktekst voorlezen; dan is de linklijst van de pagina onbruikbaar. Deze pseudo-laag vangt de klik, de link in de kop blijft het enige focuspunt. */ .wcag-tegel--link .wcag-tegel__kop a::after { content: ""; position: absolute; inset: 0; } .wcag-tegel--link:focus-within { outline: 3px solid var(--wp--preset--color--groen-700); outline-offset: 2px; } .wcag-tegel--zweef-rand:hover { border-color: var(--wp--preset--color--groen-700); } .wcag-tegel--zweef-vlak:hover { background: var(--wcag-vlak-2); } /* ---- bloglijst ---- De lijst met blogs staat op volle breedte, zoals de kennisbank. De berichten zelf houden hun leesbreedte: een titel en een samenvatting die over 1100 pixels lopen, lees je niet. ------------------------------------------------------------ */ .wcag-bloglijst { padding-block: clamp(20px, 3vw, 32px); } .wcag-bloglijst .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; } .wcag-bloglijst .wp-block-post-template > li { padding-block-end: 26px; border-block-end: 1px solid var(--wcag-lijn); } .wcag-bloglijst .wp-block-post-template > li:last-child { border-block-end: 0; } .wcag-bloglijst .wp-block-post-title { margin: 0 0 6px; font-size: 1.25rem; } .wcag-bloglijst .wp-block-post-title a { text-decoration: none; } .wcag-bloglijst .wp-block-post-title a:hover { text-decoration: underline; } .wcag-bloglijst .wp-block-post-date { margin: 0 0 8px; font-size: 0.85rem; color: var(--wcag-tekst-zacht); } .wcag-bloglijst .wp-block-post-excerpt p { margin: 0; max-inline-size: 68ch; } .wcag-bloglijst .wp-block-query-pagination { margin-block-start: 32px; } /* ---- teaser ---- */ .wcag-teaser { position: relative; overflow: hidden; background: var(--teaser-vul, var(--wp--preset--color--diep)); color: #FFFFFF; border-radius: 26px; padding: clamp(26px, 4vw, 46px); display: grid; gap: 22px; align-items: center; margin-block: clamp(30px, 4vw, 50px); } @media (min-width: 56rem) { .wcag-teaser { grid-template-columns: 1fr auto; gap: 34px; } } .wcag-teaser__kop { margin: 0 0 10px; font-family: var(--wp--preset--font-family--rubik); font-size: var(--wp--preset--font-size--kop-mid); line-height: 1.15; color: var(--wp--preset--color--wit); } .wcag-teaser__tekst p { margin: 0; max-inline-size: 54ch; } .wcag-teaser__actie { margin: 0; } .wcag-teaser__actie .wcag-knop--licht, .wcag-teaser .wcag-knop--licht { background: var(--teaser-knop, var(--wp--preset--color--groen-300)); color: var(--wp--preset--color--diep); } /* Het merkvinkje als achtergrond, groot en zacht. */ .wcag-teaser__vink { position: absolute; inset-inline-end: -4%; inset-block-end: -30%; inline-size: 42%; aspect-ratio: 1; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M13.57 32.25L20.1 43.85L31.22 24.08L39.72 39.19L50.43 20.15' fill='none' stroke='%23ffffff' stroke-width='11.14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 0.07; pointer-events: none; } /* ---- kaartenrij ---- */ .wcag-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; padding-block: clamp(20px, 3vw, 32px); } .wcag-kaart { padding: 24px; border-radius: 16px; border: 1px solid var(--wcag-lijn); background: var(--wcag-vlak); } .wcag-kaart :is(h2, h3, h4) { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.3; hyphens: none; } .wcag-kaart p { margin: 0; font-size: 0.92rem; color: var(--wcag-tekst-zacht); } /* ---- oproepblok ---- */ .wcag-oproep { background: var(--wp--preset--color--diep); color: #FFFFFF; border-radius: 26px; padding: clamp(26px, 4vw, 46px); display: grid; gap: 22px; align-items: center; position: relative; overflow: hidden; margin-block: clamp(30px, 4vw, 50px); } @media (min-width: 56rem) { .wcag-oproep { grid-template-columns: 1fr auto; gap: 34px; } } /* De kop en de tekst zitten sinds de omzetting naar blokken in een eigen groep. Zonder deze regel zou die groep zich als derde kolom gedragen. */ .wcag-oproep__tekst > * + * { margin-block-start: 0.6rem; } /* De kop van de oproepband op de schaal van het handboek. Hier stond 1,5rem, en dat staat niet op de schaal — die gaat van kop-klein (1,3) naar kop-mid (2,2). Dat gat is er niet toevallig: Rubik Black is een displayletter en heeft maat nodig. Op 24px lopen de binnenvormen dicht, en wit op zeer donker laat de vormen bovendien uitvloeien, dus je leest een blok in plaats van woorden. Nu kop-mid, gelijk aan elke andere sectiekop op de site. De regelafstand gaat van 1,04 naar 1,15: die 1,04 uit theme.json is gemaakt voor 3rem, en bij twee regels op 2,2rem plakken de regels aan elkaar. */ .wcag-oproep h2, .wcag-oproep h3 { color: #fff; margin: 0 0 12px; font-size: var(--wp--preset--font-size--kop-mid); line-height: 1.15; } @media (max-width: 600px) { /* Op een smal scherm neemt kop-mid de halve hoogte van de band. */ .wcag-oproep h2, .wcag-oproep h3 { font-size: 1.6rem; } } .wcag-oproep p { margin: 0; max-inline-size: 56ch; position: relative; } .wcag-oproep > * { position: relative; } .wcag-oproep__vink { position: absolute; right: -4%; bottom: -40%; inline-size: 30%; opacity: 0.12; } .wcag-oproep__vink svg { inline-size: 100%; block-size: auto; } .wcag-oproep__vink svg path { stroke: var(--wp--preset--color--groen-300); } /* ---- citaten op inhoudspagina's ---- */ .wcag-citaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding-block: clamp(20px, 3vw, 30px); } /* ============================================================ Call-outs Elk soort verschilt in VORM én in kleur: Toelichting dunne linkerlijn, geen kader, geen vlak Voorbeeld gestippeld kader rondom, geen vlak Let op dichtgezet vlak, omgekeerde tekstkleur De vorm is de drager, de kleur bevestigt. Valt kleur weg — zwart-wit, forced-colors, kleurenblindheid — dan blijven de drie nog steeds uit elkaar te houden. Dat is wat 1.4.1 vraagt. Alleen tokens uit het palet. Het palet heeft geen bleke tinten van blauw en amber, en die zijn hier ook niet nodig:twee van de drie hebben helemaal geen vlak. De markering is een achtergrondafbeelding en geen::before-tekst. Door CSS aangemaakte tekst wordt door sommige schermlezers voorgelezen; een voorgelezen "zwarte ruit" is ruis, zeker 207 keer op één pagina. ============================================================ */ .wcag-callout { --callout-lijn: var(--wcag-lijn-sterk); --callout-tekst: var(--wcag-tekst); position: relative; margin-block: 1.5rem; padding: 14px 18px 14px 46px; font-size: 0.95rem; color: var(--callout-tekst); background-repeat: no-repeat; background-position: 18px 17px; background-size: 14px 14px; } .wcag-callout > :first-child { margin-block-start: 0; } .wcag-callout > :last-child { margin-block-end: 0; } .wcag-callout::before { content: attr(data-soort); display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--callout-lijn); margin-block-end: 5px; } /* Toelichting — het rustigst:153 keer op de richtlijnenpagina. */ .wcag-callout--noot { --callout-lijn: var(--wcag-tekst-zacht); border-inline-start: 3px solid var(--wp--preset--color--lijn, #D6DCE1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l7 7-7 7-7-7z' fill='%23556A61'/%3E%3C/svg%3E"); } .wcag-callout--noot::before { content: "Toelichting"; } /* Voorbeeld — gestippeld kader:leest als "dit is ter illustratie". */ .wcag-callout--voorbeeld { --callout-lijn: var(--wcag-violet-600); border: 2px dashed var(--wcag-violet-600); border-radius: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1l9 7-9 7z' fill='%231B5FC4'/%3E%3C/svg%3E"); background-position: 18px 16px; } .wcag-callout--voorbeeld::before { content: "Voorbeeld"; } /* * Het nummer in het label in plaats van in de zin. * * Boven het kader stond "VOORBEELD" en de zin begon met "Voorbeeld 2:". Twee * keer hetzelfde, en dat tweede keer met een dikgedrukt woord dat de eerste * zin opeet. Het nummer zelf is wel nuttig — er staan er soms vier onder * elkaar — dus dat verhuist naar het label. */ .wcag-callout--voorbeeld[data-nummer]::before { content: "Voorbeeld " attr(data-nummer); } /* Let op — het enige dichte vlak, dus het enige dat echt roept. Het kopje en de links staan in amber-200 en niet in amber-300. Dat is geen smaakkwestie: amber-300 haalt op dit vlak 3,90:1 en het kopje is 0,68rem vet — 10,9px, dus geen grote tekst, dus geldt 4,5:1. Amber-200 haalt 4,80. Het driehoekje staat óók op amber-200, terwijl het formeel op amber-300 mocht blijven:1.4.11 vraagt 3:1 voor een pictogram en dat haalde het met 3,90. Maar het is decoratief — het woord "LET OP" ernaast draagt de betekenis — en het stond er daardoor dimmer bij dan zijn eigen label. Een teken dat de aandacht moet trekken hoort niet zwakker te zijn dan de tekst ernaast. Pijnlijk detail:de call-out waarin dit opviel gaat zelf over afronden bij contrastverhoudingen. */ .wcag-callout--letop { --callout-lijn: var(--wcag-amber-200); --callout-tekst: #FFFFFF; background-color: var(--wcag-amber-700); border-radius: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l7 13H1z' fill='%23FFDCB0'/%3E%3C/svg%3E"); } .wcag-callout--letop::before { content: "Let op"; } .wcag-callout--letop a { color: var(--wcag-amber-200); } /* Hoogcontrastmodus gooit achtergronden en randkleuren weg. De vorm blijft dan het enige onderscheid, dus die moet overeind blijven. */ @media (forced-colors: active) { .wcag-callout { border-style: solid; border-width: 1px; } .wcag-callout--noot { border-inline-start-width: 3px; } .wcag-callout--voorbeeld { border-style: dashed; border-width: 2px; } .wcag-callout--letop { border-width: 3px; } .wcag-callout { forced-color-adjust: none; } } .wcag-label { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--wp--preset--color--groen-100, #E2F8ED); color: var(--wp--preset--color--groen-800, #0B4433); } /* ============================================================ Richtlijnenpagina:inhoudsopgave, filter en criteria ============================================================ */ .wcag-richtlijnen { display: block; } .wcag-io__mobiel > summary { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; cursor: pointer; padding: 12px 14px; border-radius: 8px; background: var(--wcag-vlak); border: 1px solid var(--wcag-lijn); margin-block-end: 16px; min-block-size: 24px; } .wcag-io__filter fieldset { border: 0; padding: 0; margin: 0 0 18px; } .wcag-io__filter legend { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wcag-tekst-zacht); padding: 0; margin-block-end: 10px; } .wcag-io__filter label { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 0.95rem; font-weight: 600; min-block-size: 24px; cursor: pointer; } .wcag-io__filter input[type="checkbox"] { inline-size: 18px; block-size: 18px; accent-color: var(--wp--preset--color--groen-700); } /* * Het zoekveld boven de niveauvakjes. Op de volle breedte van de zijbalk: een * smal veld in een smalle kolom leest als een restje ruimte in plaats van als * de eerste manier om iets te vinden. * * De regel hierboven staat nu op type="checkbox". Zonder dat werd het * zoekveld ook 18 bij 18 pixels — een vakje waar je in kunt typen maar niets * van kunt zien. */ .wcag-io__zoek { margin-block-end: 18px; } .wcag-io__zoek label { display: block; margin-block-end: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wcag-tekst-zacht); } .wcag-io__zoek input[type="search"] { inline-size: 100%; padding: 9px 12px; border: 1px solid var(--wcag-rand, #7E8991); border-radius: 8px; font: inherit; font-size: 0.95rem; background: var(--wp--preset--color--wit); color: var(--wcag-tekst); } .wcag-io__aantal { margin-inline-start: auto; font-weight: 400; font-size: 0.85rem; color: var(--wcag-tekst-zacht); font-variant-numeric: tabular-nums; } .wcag-io__stand { font-size: 0.85rem; color: var(--wcag-tekst-zacht); margin: 0 0 18px; min-block-size: 1.4em; } .wcag-io__kop { font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wcag-tekst-zacht); margin: 0 0 10px; font-family: var(--wp--preset--font-family--lexend); } .wcag-io__lijst, .wcag-io__lijst ul { list-style: none; margin: 0; padding: 0; } .wcag-io__lijst a { display: block; padding: 5px 8px; border-radius: 6px; font-size: 0.9rem; text-decoration: none; color: var(--wcag-tekst); min-block-size: 24px; } .wcag-io__lijst a:hover { background: var(--wcag-vlak); text-decoration: underline; } .wcag-io__principe > a { font-weight: 700; margin-block-start: 12px; } .wcag-io__richtlijn > a { padding-inline-start: 16px; color: var(--wcag-tekst-zacht); } .wcag-io__criterium > a { padding-inline-start: 28px; font-size: 0.85rem; color: var(--wcag-tekst-zacht); } .wcag-io__lijst a[aria-current="true"] { background: var(--wcag-vlak-2); color: var(--wcag-tekst-sterk); font-weight: 600; } .wcag-criterium { scroll-margin-block-start: 7rem; padding-block-start: 6px; } .wcag-criterium__kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .wcag-criterium__kop h3 { margin: 0; } .wcag-criterium[hidden], .wcag-io__criterium[hidden] { display: none !important; } .wcag-principe { background: var(--wcag-vlak-2); border-radius: 12px; padding: 18px 20px; margin-block: 1.5rem; } .wcag-extern::after { content: " ↗"; font-size: 0.85em; } .wcag-terug { display: inline-block; margin-block-start: 1.5rem; font-size: 0.9rem; font-weight: 600; } @media (min-width: 62rem) { .wcag-richtlijnen { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; } .wcag-io__mobiel > summary { display: none; } .wcag-io__mobiel { position: sticky; top: 7rem; max-block-size: calc(100vh - 9rem); overflow-y: auto; } .wcag-richtlijnen__inhoud { min-inline-size: 0; } } /* ---- portret bij een citaat ---- */ .wcag-quote figcaption { flex-direction: row; align-items: center; gap: 14px; } .wcag-quote__wie { display: flex; flex-direction: column; } .wcag-quote__foto { inline-size: 64px; block-size: 64px; flex: none; border-radius: 50%; object-fit: cover; background: var(--wcag-vlak-2); } .wcag-quote__foto--initialen { display: grid; place-items: center; font-family: var(--wp--preset--font-family--rubik); font-weight: 700; font-size: 1.05rem; color: var(--wcag-tekst-sterk); /* 10,00:1 op groen-100 */ } /* Tekstblok zonder beeld, in dezelfde ritmiek als de tweeluiken. */ /* * De kernzin bovenaan de missiepagina. Grote tekst, maar geen kop: de

* staat er al boven. Een alinea groot zetten omdat hij belangrijk is, is iets * anders dan er een kop van maken — dat laatste zet een lege trede in de * koppenstructuur waar een schermlezergebruiker overheen valt. */ .wcag-uitspraak { padding-block: clamp(32px, 5vw, 64px) clamp(8px, 2vw, 20px); font-family: var(--wp--preset--font-family--rubik); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 500; line-height: 1.35; max-inline-size: 26ch; } .wcag-uitspraak p { margin: 0; } .wcag-uitspraak p + p { margin-block-start: 0.55em; color: var(--wcag-tekst-zacht); } /* * Geen scheidingslijn tussen tekstblokken. Die stond er even, om de * missiepagina op de zoekresultaten te laten lijken, maar .wcag-tekstblok * staat ook op Richtlijnen, Blogs en Wet digitale overheid — en daar zetten * de koppen de tekst al genoeg uit elkaar. Een streep tussen twee alinea's * onder dezelfde kop suggereert een grens die er niet is. * * Bij de zoekresultaten blijft hij wel staan: daar staan losse resultaten * onder elkaar zonder koppen ertussen, en dan moet je zien waar het ene * ophoudt en het volgende begint. */ .wcag-tekstblok { padding-block: var(--wp--preset--spacing--40, 2rem); } .wcag-tekstblok > * + * { margin-block-start: 1rem; } .wcag-tekstblok h2, .wcag-tekstblok h3 { margin-block-end: 0.4em; } .wcag-tekstblok p, .wcag-tekstblok li { max-inline-size: 68ch; } /* * Volle breedte, zoals de kennisbank. * * Op Richtlijnen en Wet- en regelgeving stond de helft van de secties in een * tekstblok met een leesbreedte van 68 tekens en de andere helft niet. Dat * verschil zag je: een smalle kolom naast een brede. * * De regellengte gaat hier van 68 naar 92 tekens en niet naar de volle * breedte. Dat is de reden dat die limiet er stond: bij een langere regel * moet je oog aan het eind een grote sprong maken naar het begin van de * volgende, en dan sla je regels over of lees je ze dubbel. 1.4.8 noemt 80 * tekens; 92 is de grens waarbij het blok de kolom vult zonder dat het * lezen eronder lijdt. */ .wcag-tekstblok--breed p, .wcag-tekstblok--breed li { max-inline-size: 92ch; } .wcag-tekstblok ul { padding-inline-start: 1.4em; } .wcag-tekstblok li + li { margin-block-start: 0.5rem; } /* ══════════════════════════════════════════════════════════════ kennisbank Drie ingangen naar dezelfde 42 onderwerpen:op thema, op rol, op succescriterium. De onderwerpen zelf staan in
, zodat een doelgroeppagina met 27 stuks een inhoudsopgave blijft in plaats van een muur tekst — en zodat het openklappen werkt zonder JavaScript. ────────────────────────────────────────────────────────────────────── */ /* ---- zoekveld op de voordeur ---- */ /* Over de volle breedte, gelijk met de kaarten eronder. Een zoekveld dat smaller is dan de inhoud die het doorzoekt, oogt als bijzaak terwijl het de eerste ingang is. */ .wcag-kennis__zoekform { margin-block-end: var(--wp--preset--spacing--50); } .wcag-kennis__zoekform label { display: block; font-weight: 600; margin-block-end: 8px; } .wcag-kennis__zoekrij { display: flex; gap: 10px; flex-wrap: wrap; } /* Het veld neemt de ruimte, de knop houdt zijn eigen maat. */ .wcag-kennis__zoekrij input[type="search"] { flex: 1 1 auto; } .wcag-kennis__zoekrij input[type="search"] { flex: 1 1 15rem; min-inline-size: 0; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--wcag-lijn-sterk); background: var(--wcag-grond); font: inherit; font-size: 1rem; color: var(--wcag-tekst); } .wcag-kennis__zoekrij button { padding: 11px 22px; border: 0; border-radius: 8px; cursor: pointer; background: var(--wcag-knop); color: var(--wcag-knop-tekst); font: inherit; font-weight: 600; } .wcag-kennis__zoekrij button:hover { background: var(--wp--preset--color--groen-800); } /* ---- de drie ingangen ---- */ .wcag-kennis__ingang { margin-block-start: var(--wp--preset--spacing--50); } .wcag-kennis__ingang > h2 { margin-block-end: 6px; } .wcag-kennis__ingangtekst { color: var(--wcag-tekst-zacht); margin: 0 0 22px; max-inline-size: 55ch; } /* * De kaarten van een ingang. Het aantal kolommen volgt het aantal kaarten en * niet alleen de breedte van het scherm. * * Met alleen auto-fit staan vijf doelgroepen als 4 + 1: vier op een rij en * eentje er eenzaam onder. Dat leest als een vergissing. Nu bepaalt het aantal * kaarten hoeveel kolommen er hoogstens zijn, en dan verdeelt de rest zich * gelijkmatig: 5 wordt 3 + 2, 9 wordt 3 + 3 + 3. * * --kolommen wordt per ingang gezet, in wcag_nl_kennis_kaarten(). */ /* * De kaarten van een ingang. * * Twee dingen tegelijk: nooit méér kolommen dan --kolommen (anders staan vijf * doelgroepen als 4 + 1), en nooit smaller dan 240px (anders staat er op een * smal scherm een kolom van 155 pixels met één woord per regel). * * Dat lost deze regel op. De minimale kolombreedte is de grootste van 240px en * de breedte die één kolom zou krijgen bij --kolommen kolommen. Past dat niet, * dan halveert auto-fit vanzelf het aantal kolommen. * * Eerst stond hier een mediaquery op 46rem die het aantal hard vastzette. Op * een scherm van 744 pixels leverde dat vier kolommen van 155 pixels op, met * koppen die middenin een woord afbraken. */ .wcag-kennis__kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; --kolomgap: 16px; grid-template-columns: repeat( auto-fit, minmax( max(240px, calc((100% - (var(--kolommen, 3) - 1) * var(--kolomgap)) / var(--kolommen, 3))), 1fr ) ); } .wcag-kennis__kaart { background: var(--wcag-vlak); border: 1px solid var(--wcag-lijn); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; } .wcag-kennis__kaartkop { margin: 0 0 8px; font-size: 1.15rem; } /* De hele kaart klikbaar, maar met één link in de tabvolgorde:de pseudo-laag vangt de klik, de link zelf blijft het enige focuspunt. */ .wcag-kennis__kaartkop a { text-decoration: none; } .wcag-kennis__kaartkop a::after { content: ""; position: absolute; inset: 0; } .wcag-kennis__kaart { position: relative; } .wcag-kennis__kaart:hover { background: var(--wcag-vlak-2); } .wcag-kennis__kaart:hover .wcag-kennis__kaartkop a { text-decoration: underline; } .wcag-kennis__kaart:focus-within { outline: 3px solid var(--wp--preset--color--groen-700); outline-offset: 2px; } .wcag-kennis__kaarttekst { margin: 0 0 14px; color: var(--wcag-tekst-zacht); font-size: 0.95rem; } .wcag-kennis__aantal { margin: auto 0 0; font-size: 0.85rem; font-weight: 600; color: var(--wcag-tekst-sterk); font-variant-numeric: tabular-nums; } /* ---- register van succescriteria ---- */ /* Vier kolommen, niet meer. Met auto-fill werden het er vijf op een breed scherm, en dan wordt elke kolom zo smal dat de meeste criterianamen over twee regels breken. Vier geeft ze de ruimte om op één regel te passen. Onder de 1000px zakt het naar drie, twee en één, zodat de naam nooit tegen het nummer aan komt te staan. */ /* * Vier kolommen, één per principe. Elke kolom is een
met een kop, * dus de kolommen zijn niet alleen opmaak: zet je de telefoon dwars of zoom je * in, dan komen ze onder elkaar te staan en blijft de kop bij zijn eigen * criteria horen. Bij vier losse kolommen in één lijst was dat verband weg. */ .wcag-kennis__register { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; align-items: start; } .wcag-kennis__register ul { list-style: none; margin: 0; padding: 0; } .wcag-kennis__principekop { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-block-end: 10px; border-block-end: 2px solid var(--wcag-lijn); font-size: 1rem; } .wcag-kennis__principeicoon { display: inline-flex; color: var(--wcag-tekst-merk); flex: none; } .wcag-kennis__principeicoon svg { inline-size: 22px; block-size: 22px; } @media (max-width: 1000px) { .wcag-kennis__register { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .wcag-kennis__register { grid-template-columns: 1fr; } } .wcag-kennis__register a { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 7px; min-block-size: 24px; text-decoration: none; color: var(--wcag-tekst); font-size: 0.9rem; } .wcag-kennis__register a:hover { background: var(--wcag-vlak-2); } .wcag-kennis__register a:hover .wcag-kennis__naam { text-decoration: underline; } .wcag-kennis__nummer { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wcag-tekst-sterk); flex: none; /* Vaste kolombreedte: 1.1.1 en 1.4.11 zijn niet even breed, en zonder dit staan de niveaulabels erachter allemaal net iets anders. */ min-inline-size: 3.1em; } .wcag-kennis__naam { color: var(--wcag-tekst-zacht); } /* * Het niveau: A, AA of AAA. Klein en rustig, want het is een bijschrift bij * het nummer en niet het onderwerp. AAA staat er anders bij — dat is het * niveau dat niet wettelijk vereist is, en dat verschil moet je kunnen zien * zonder de tekst te lezen. Maar de letters staan er ook, want kleur alleen * is 1.4.1. */ /* * Het niveau. Staat alleen op de detailpagina van een criterium en niet in het * register: achter elk van de 87 regels leest het als ruis, op de pagina van * één criterium is het precies wat je wilt weten. */ .wcag-kennis__niveaubalk { margin: 0 0 14px; } .wcag-kennis__niveau { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 6px; background: var(--wcag-vlak-2); color: var(--wcag-tekst-merk); border: 1px solid transparent; } .wcag-kennis__niveau--aaa { background: transparent; color: var(--wcag-tekst-zacht); border-color: var(--wcag-lijn); } .wcag-kennis__niveau--vervallen { background: transparent; color: var(--wcag-tekst-zacht); border-color: var(--wcag-rand, #7E8991); } /* In het register alleen het woord, in dezelfde stijl als de rest van de naam. */ .wcag-kennis__vervallenlabel { color: var(--wcag-tekst-zacht); font-style: italic; } /* * Criteria waar de kennisbank nog niets over zegt. Ze staan er wél — een * lijst die belooft compleet te zijn moet dat zijn — maar ze gaan naar de * officiële tekst in plaats van naar een onderwerp. Dat verschil zie je aan * de stippellijn onder de naam, en het staat er ook voor wie hem niet ziet. */ .wcag-kennis__nogniet .wcag-kennis__naam { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--wcag-rand, #7E8991); } .wcag-kennis__register [aria-current="page"] { background: var(--wcag-vlak-2); box-shadow: inset 3px 0 0 var(--wp--preset--color--groen-700); } /* ---- bladeren onder een lijst ---- */ .wcag-kennis__blader { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-start: var(--wp--preset--spacing--50); padding-block-start: 24px; border-block-start: 1px solid var(--wcag-lijn); } .wcag-kennis__blader a { padding: 10px 18px; border-radius: 8px; border: 1px solid var(--wp--preset--color--groen-700); color: var(--wcag-tekst-sterk); text-decoration: none; font-weight: 600; min-block-size: 24px; } .wcag-kennis__blader a:hover { background: var(--wcag-vlak-2); } .wcag-kennis__blader-stand { margin: 0; color: var(--wcag-tekst-zacht); font-size: 0.9rem; order: 1; } .wcag-kennis__blader-volgende { order: 2; margin-inline-start: auto; } /* ---- filterbalk boven een lijst ---- */ .wcag-kennis__balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-block-end: 26px; } .wcag-kennis__zoek { flex: 1 1 17rem; } .wcag-kennis__zoek label { display: block; font-weight: 600; font-size: 0.9rem; margin-block-end: 6px; } .wcag-kennis__zoek input { inline-size: 100%; padding: 10px 13px; border-radius: 8px; border: 1px solid var(--wcag-lijn-sterk); background: var(--wcag-grond); font: inherit; font-size: 1rem; color: var(--wcag-tekst); } .wcag-kennis__alles { padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--wp--preset--color--groen-700); background: var(--wcag-grond); color: var(--wcag-tekst-sterk); font: inherit; font-weight: 600; font-size: 0.9rem; min-block-size: 24px; } .wcag-kennis__alles:hover { background: var(--wcag-vlak-2); } .wcag-kennis__stand { flex: 1 0 100%; margin: 0; min-block-size: 1.4em; font-size: 0.9rem; color: var(--wcag-tekst-zacht); } /* ---- de onderwerpen ---- */ .wcag-kennis__groep { margin-block-end: var(--wp--preset--spacing--50); } .wcag-kennis__groepkop { font-size: 1.35rem; margin: 0 0 14px; } .wcag-kennis__lijst { list-style: none; margin: 0; padding: 0; } .wcag-kennis__item { border-block-end: 1px solid var(--wcag-lijn); } .wcag-kennis__item:first-child { border-block-start: 1px solid var(--wcag-lijn); } .wcag-kennis__item[hidden], .wcag-kennis__groep[hidden] { display: none; } .wcag-kennis__samenvatting { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; cursor: pointer; list-style: none; } /* Safari toont zonder dit nog steeds zijn eigen driehoekje naast het onze. */ .wcag-kennis__samenvatting::-webkit-details-marker { display: none; } /* Het teken vóór de titel, niet erna:bij een titel van drie regels staat een teken aan het eind ergens in het niets. */ .wcag-kennis__samenvatting::before { content: ""; flex: none; inline-size: 13px; block-size: 13px; margin-block-start: 7px; background: currentColor; color: var(--wcag-tekst-merk); clip-path: polygon(20% 0%, 20% 100%, 85% 50%); transition: transform 150ms ease; } .wcag-kennis__vouw[open] > .wcag-kennis__samenvatting::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .wcag-kennis__samenvatting::before { transition: none; } } .wcag-kennis__titel { margin: 0; font-size: 1.05rem; line-height: 1.45; font-family: var(--wp--preset--font-family--lexend); font-weight: 600; color: var(--wcag-tekst); } .wcag-kennis__samenvatting:hover { background: var(--wcag-vlak); } .wcag-kennis__samenvatting:hover .wcag-kennis__titel { text-decoration: underline; } .wcag-kennis__vouw[open] > .wcag-kennis__samenvatting { background: var(--wcag-vlak-2); } .wcag-kennis__inhoud { padding: 4px 4px 30px calc(13px + 14px + 4px); max-inline-size: 68ch; } .wcag-kennis__inhoud > :first-child { margin-block-start: 0; } /* * Tussenkoppen binnen een onderwerp. * * De

van het thema.json is 36px en de waar hij onder staat is * 17px. Dan is de tussenkop van een alinea groter dan de titel van het * onderwerp zelf, en dat leest als een pagina die middenin opnieuw begint. * * De koppen blijven een h2 en h3 in de code — de opbouw klopt en een * schermlezer springt er gewoon langs. Alleen de maat gaat omlaag. */ .wcag-kennis__inhoud :is(h2, h3, h4) { font-family: var(--wp--preset--font-family--lexend); line-height: 1.3; margin-block: 1.6em 0.5em; } .wcag-kennis__inhoud h2 { font-size: 1.12rem; } .wcag-kennis__inhoud h3 { font-size: 1rem; } .wcag-kennis__inhoud h4 { font-size: 0.94rem; } .wcag-kennis__inhoud :is(pre, code) { font-size: 0.86rem; } .wcag-kennis__inhoud pre { overflow-x: auto; } .wcag-kennis__los { font-size: 0.9rem; margin-block-end: 0; } /* ---- etiketten onder een onderwerp ---- */ .wcag-kennis__etiketten { margin-block-start: 26px; padding-block-start: 18px; border-block-start: 1px solid var(--wcag-lijn); display: flex; flex-direction: column; gap: 10px; } /* Raster en geen flexbox. Met flex-wrap braken de etiketten terug naar de linkerrand van het blok, en dan stond de tweede regel niet meer onder de eerste maar onder het label. Een raster met twee kolommen houdt de kantlijn vast:het label links, alle etiketten in de rechterkolom, hoeveel regels dat ook worden. */ .wcag-kennis__etikettengroep { display: grid; grid-template-columns: 9rem 1fr; gap: 8px 10px; align-items: baseline; } .wcag-kennis__etiketrij { display: flex; flex-wrap: wrap; gap: 8px; } .wcag-kennis__etiketkop { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wcag-tekst-zacht); } .wcag-kennis__etiket { display: inline-block; padding: 5px 11px; border-radius: 6px; background: var(--wcag-vlak); border: 1px solid var(--wcag-lijn); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--wcag-tekst-sterk); min-block-size: 24px; } .wcag-kennis__etiket:hover { background: var(--wcag-vlak-2); text-decoration: underline; } /* ---- voetnavigatie en verwijzing naar de richtlijn ---- */ .wcag-kennis__richtlijn { margin-block-end: 26px; font-weight: 600; } .wcag-kennis__zusjes { margin-block-start: var(--wp--preset--spacing--60); padding-block-start: 26px; border-block-start: 1px solid var(--wcag-lijn); } .wcag-kennis__zusjeskop { font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wcag-tekst-zacht); margin: 0 0 12px; font-family: var(--wp--preset--font-family--lexend); } /* * De knoprij met zusterthema's. Alleen de directe lijst, niet elke
    die * hier ooit binnen komt te staan: bij een succescriterium staat hier het * register met vier kolommen, en die heeft zijn eigen opmaak. * * Dit ging eerst mis. De regel hieronder gaf toen ook de items in het register * een donkergroene achtergrond, met de donkere tekst van het register erop: * 1,12:1. Onleesbaar, en precies het soort fout waar wij anderen op wijzen. */ .wcag-kennis__zusjes > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .wcag-kennis__zusjes > ul a { display: inline-block; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--wcag-lijn); text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--wcag-tekst-sterk); min-block-size: 24px; } .wcag-kennis__zusjes > ul a:hover { background: var(--wcag-vlak-2); text-decoration: underline; } .wcag-kennis__zusjes > ul a[aria-current="page"] { background: var(--wcag-knop); color: var(--wcag-knop-tekst); border-color: var(--wp--preset--color--groen-700); } /* In de hoogcontrastmodus verdwijnen achtergrond en rand. Zonder dit is er geen verschil meer tussen een open en een dicht onderwerp, en valt het raster van kaarten uit elkaar. */ @media (forced-colors: active) { .wcag-kennis__kaart, .wcag-kennis__item, .wcag-kennis__etiket, .wcag-kennis__zusjes a { border: 1px solid CanvasText; } .wcag-kennis__samenvatting::before { background: CanvasText; } .wcag-kennis__zusjes a[aria-current="page"] { background: Highlight; color: HighlightText; } } @media (max-width: 600px) { .wcag-kennis__etikettengroep { grid-template-columns: 1fr; gap: 6px; } .wcag-kennis__inhoud { padding-inline-start: 4px; } } .wcag-kennis__alles[disabled] { opacity: 0.45; cursor: default; border-color: var(--wcag-lijn-sterk); color: var(--wcag-tekst-zacht); } .wcag-kennis__alles[disabled]:hover { background: var(--wcag-grond); } /* Het openklapelement moet de focusring van het thema krijgen. Zonder dit tekent de browser zijn eigen dunne omlijning, die in het lichte groen van een open onderwerp nauwelijks te zien is. */ .wcag-kennis__samenvatting:focus-visible { outline: 3px solid var(--wp--preset--color--groen-800); outline-offset: -3px; border-radius: 6px; } /* ---- zoekresultaten ---- De koppen stonden dicht op elkaar en dan lees je een lijst titels in plaats van losse resultaten. De ruimte tussen twee treffers is verdubbeld, en er staat een lijn tussen: witruimte alleen werkt niet als de teksten eronder verschillend lang zijn. De kop is nu alleen "Zoekresultaten". Het zoekwoord stond er twee keer — in de kop én in het zoekveld eronder — en dat is een herhaling die een schermlezergebruiker net zo goed hoort als jij hem ziet. */ .wcag-zoekuitslag .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .wcag-zoekuitslag .wp-block-post-template > li { padding-block: var(--wp--preset--spacing--40, 2rem); border-block-end: 1px solid var(--wcag-lijn); } .wcag-zoekuitslag .wp-block-post-template > li:last-child { border-block-end: 0; } .wcag-zoekuitslag .wp-block-post-title { margin-block: 0 10px; } .wcag-zoekuitslag .wp-block-post-excerpt { margin-block: 0; max-inline-size: 68ch; } .wcag-zoekuitslag .wp-block-post-excerpt p { margin-block: 0; color: var(--wcag-tekst-zacht); } /* Zon bij licht, maan bij donker. Bij "systeem" die van het systeem. */ /* ============================================================ Reeks Een aantal onderwerpen die je op volgorde leest. Zonder deze balk staat zo'n reeks op alfabet in de lijst, en dan begint een cursus van eenentwintig stappen bij stap veertien. De twee stappen staan naast elkaar met de vorige links en de volgende rechts, en onder elkaar zodra dat niet meer past. Geen vaste hoogte: de titels zijn ongelijk lang en mogen dat blijven. ============================================================ */ .wcag-reeks { margin-block: 2rem; padding-block-start: 1.25rem; border-block-start: 2px solid var(--wp--preset--color--lijn, #D6DCE1); } .wcag-reeks__plek { margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--wcag-tekst-zacht); } .wcag-reeks__stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .wcag-reeks__stappen > li { margin: 0; } .wcag-reeks__stappen a { display: block; padding: 12px 16px; border: 1px solid var(--wp--preset--color--lijn, #D6DCE1); border-radius: 10px; text-decoration: none; color: var(--wcag-tekst); block-size: 100%; } .wcag-reeks__stappen a:hover { background-color: var(--wcag-vlak-zacht, #F5F7F8); } .wcag-reeks__stappen a:hover .wcag-reeks__richting { text-decoration: underline; } .wcag-reeks__richting { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wcag-tekst-merk); margin-block-end: 2px; } /* De volgende stap staat rechts, ook als er geen vorige is. */ .wcag-reeks__stappen > .wcag-reeks__volgende:only-child { grid-column: -2; } .wcag-reeks__volgende { text-align: end; } /* ============================================================ Ingangen die geen voordeur zijn Rol, functiebeperking en hulpmiddel. Ze stonden als even grote blokken naast de thema's, en de laatste twee stonden er helemaal niet. Nu staan ze onder één kop, in dezelfde kaart maar dichter op elkaar: pictogram, naam en aantal, vier op een rij, zonder de zin uitleg. Het onderscheid zit dus in de dichtheid en niet in een andere vormtaal. Hier stonden eerst pilvormige knoppen, en die gooiden de pictogrammen weg die voor alle negentien termen bestaan. Dat maakte het onderscheid wel, maar het blok leek daarmee niet meer op de rest van de site. ============================================================ */ .wcag-kennis__as + .wcag-kennis__as { margin-block-start: 2rem; } .wcag-kennis__as h3 { margin: 0 0 4px; font-size: 1.05rem; } .wcag-kennis__kaart--compact { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .wcag-kennis__kaart--compact .wcag-kennis__icoon { margin: 0; flex: none; } /* * Gewicht en letterafstand staan er expliciet in, ook al is deze kop nu een * h3 en krijgt hij daarmee vanzelf de goede opmaak. * * theme.json zet alle koppen op Rubik 900 met -0.03em, en maakt alleen voor * h3 een uitzondering met 700 en -0.015em. Toen deze kaart nog in een sectie * met subkoppen stond was hij een h4, en dan valt hij terug op 900 — naast * een themakaart van 700 zie je dat meteen. Deze twee regels zorgen dat dat * niet terugkomt als de koppenstructuur ooit weer verandert. */ .wcag-kennis__kaart--compact .wcag-kennis__kaartkop { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; flex: 1 1 auto; } .wcag-kennis__kaart--compact .wcag-kennis__aantal { margin: 0; flex: none; font-size: 0.8rem; }