HTML-keuzerondjes die converteren: de definitieve gids

Keuzerondjes zien er eenvoudig uit. Eén klik, één keuze. Ze zijn echter ook een van de gemakkelijkste manieren om UX en toegankelijkheid in gevaar te brengen. Verberg de oorspronkelijke invoer, slaover veldsetenlegende, of valideer te agressief en u verzendt een formulier dat toetsenbordgebruikers in verwarring brengt, schermlezers frustreert en conversies verhindert.

Deze gids laat zien hoe je anno 2025 goed kunt radio's maken: snel te kiezen, eenvoudig te scannen, volledig toegankelijk en meetbaar. We beginnen met een schone, semantische basislijn en leggen daar vervolgens moderne CSS op, zodat radio's eruit kunnen zien als kaarten of gesegmenteerde besturingselementen zonder het gedrag van het toetsenbord of de schermlezer te verstoren.

U ziet praktische validatiepatronen die niet zeuren, responsieve lay-outs die de doelen op mobiel groot houden, en productiefragmenten die u in elke stapel kunt plakken. We behandelen ook analyses, A/B-ideeën en een Formspree-installatie, zodat u onmiddellijk resultaten kunt vastleggen.

Voor wie is dit bedoeld: ontwerpers, front-end ontwikkelaars en marketeers die om beide geventoegankelijkheidenconversie. Geen zware frameworks vereist, alleen solide HTML, gerichte CSS en een beetje progressieve verbetering.

Aan het einde weet je:

• Wanneer radio's
• selecteren, aanvinken of schakelen Een toegankelijke radiogroep bouwen (fieldset,legend, labeling, focus)
• Hoe u aangepaste “kaart”-radio's kunt stylen zonder de invoer te verbergen
• Valideren met de HTML Constraint API (en bericht goed)
• Radio's aansluiten op Formspree en selecties meten

TL;DR

• Gebruikradio'svoor precieséénkeuze binnen een goed gedefinieerde set (idealiter2–6 opties) diezou moeten zijn meteen zichtbaar.
• Verpak radio's altijd in+, geef ze dehetzelfdenaamen maak van elke optie eenklikbaar.
• Verberg invoer niet metweergave: geen; bewaar zefocusseerbaar(bijv.dekking:0; positie:absoluut; inzet:0) dusTab/pijlen/spatiewerk.
• Maak doelen groot: tenminste44×44px, met eenscherpstelringdat is duidelijk zichtbaar.
• Valideer met deHTML-beperkings-API(vereist,reportValidity()), verbeter vervolgens de berichten, en niet andersom.
• Als je veel opties hebt of als je ze niet kent, voeg dantoe helpertekstonder elk label en overweegzoeken of groeperenin plaats van.
• Op mobiel: stapelin één kolom; op brede schermen,2–3 kolommenvia CSS-raster.
• Meten: volgenvertoningen, selectie en indiening, en A/B-testoptievolgordeenkopieer.
• Voor Formspree behoudt unative POSTals terugval;toevoegen haalop alleen als progressieve verbetering.

Wanneer radio's gebruiken (beslissingsboom)

Q1. Kiest de gebruiker precies één optie?

• Nee →Gebruikselectievakjes(0–veel) of eenschakel(binair) of heroverweeg de taak.
• Ja →Ga naar Q2.

Vraag 2. Moeten de opties in één oogopslag zichtbaar zijn?

• Ja →Gebruikradio's(beste voor scannen en snelle keuze).
• Nee (er is weinig ruimte / veel opties)→ Beschouw eenselecteer(vervolgkeuzelijst). Als keuzes van cruciaal belang zijn en baat hebben bij vergelijking, geef dan de voorkeur aan radio's en herontwerp de lay-out.

Q3. Hoeveel opties?

• 2–6→ Radio's zijn ideaal.
• 7–10→ Radio's werken mogelijk nog steeds met groepering of eentwee kolommenrooster; gebruik anders een geselecteerde of een doorzoekbare lijst.
• >10→ Gebruik eenselecteer met zoekenof eenstapdat verkleint eerst de set.

Q4. Sluiten de opties elkaar uit?

• Ja →Radio's.
• Nee / combinaties zijn logisch →Selectievakjes.

Vraag 5. Zal de keuze aanleiding geven tot andere vervolgvragen?

• Ja →Radio's zijn nog prima. Toon vervolgactiesvoorwaardelijk, maar laat verborgen veldenbehouden buiten de tabvolgordeen SR-stroom totdat deze wordt onthuld.
• Nee →Eenvoudige radiogroep.

Vraag 6. Bekend versus beschrijvend?

• Bekende labels(bijvoorbeeld “Klein / Middel / Groot”) → korte labels zijn voldoende.
• Onbekend of er staat veel op het spel(bijvoorbeeld “Technische SEO vs. Content SEO”) → voegtoe microkopie(beschrijving van één regel) onder elk label.

Vraag 7. Mobiel eerst?

• Ja (altijd)→ Gebruikstapel met één kolommet royale spatiëring en tekst van 16–18px. Promoot demeest gekozenoptie naar boven.

Praktijkvoorbeelden

• Jouw formulier: “Welke dienst?” → Radio's verslaan de selectie omdat gebruikers opties naast elkaar moeten vergelijken. Bewaar 3 kaarten (Link Building, SEO, Web Dev) met korte subtekst.
• Verzendsnelheid: 3–4 elkaar uitsluitende snelheden → Radio's (met prijsdelta's in subtekst).
• Nieuwsbrieffrequentie: Dagelijks/Wekelijks/Maandelijks → Radio's.
• Interesses (kan meerdere kiezen)→ Geen radio's; gebruik selectievakjes.

Anatomie van een goede radiogroep

Kopieer en plak de semantische basislijn (nog geen fraaie CSS)

Welke dienst heeft u nodig?

Kies één optie die het beste bij uw doel past.





Linkopbouw




Zoekmachineoptimalisatie




Webontwerp/-ontwikkeling




Kies een service om door te gaan.



Doorgaan

Waarom elk onderdeel ertoe doet

• +geeft de groep een naam voor schermlezers en stelt context in voor iedereen.
• Hetzelfdenaamzorgt ervoor dat de inputs elkaar uitsluiten.
• Klikbaarrond elke invoergeeft je een enorm tik-/klikgebied (44px+).
• vereistop de eerste radiolaat de browser de groep native valideren.
• Helpertekst(service-hint) enfouttekst(service-error) zijn gescheiden, zodat u fouten kunt weergeven/verbergen zonder dingen te verplaatsen.
• Geen ARIA-rollen nodig.Native radio's leggen al de juiste semantiek bloot.

Minimale CSS voor bruikbaarheid (native look, grote doelen, duidelijke focus)

/* Lay-out en spatiëring */
.veldlabel {
weergave: flex;
items uitlijnen: centreren;
kloof: .6rem;
vulling: .65rem .8rem;      /* grote tikdoel */
randradius: .6rem;
cursor: aanwijzer;
}

/* Toetsenbordfocus: markeer het hele label wanneer de invoer gefocust is */
.veldlabel:has(invoer:focus-zichtbaar) {
overzicht: 3px effen #3b82f6;
omtrek-offset: 2px;
}

/* Geselecteerde status (optioneel, native punt wordt nog steeds weergegeven) */
.fieldlabel:has(invoer:gecontroleerd) {
achtergrond: #f1f5ff;
}

/* Fouttekst */
.fout {kleur: #b91c1c; marge-top: .5rem; lettergrootte: .9rem; }

Tip::heeft()geeft je die “focusring op de hele kaart” zonder de echte invoer te verbergen. Als een oudere browser dit niet ondersteunt, krijgen gebruikers nog steeds de oorspronkelijke focusring op de radio zelf.

Zachte, toegankelijke validatie (gebruikt eerst de browser)

Laat de browser het gedeelte 'U moet er één kiezen' afhandelen en toon indien nodig uw inlinefout.

const formulier = document.getElementById('quote-formulier');
const group = document.getElementById('servicegroep');
const-fout = document.getEementById('servicefout');

form.addEventListener('submit', (e) => {
// Trigger native validatie UI (werkt omdat de eerste radio `required` heeft)
if (!form.reportValidity()) {
// Optioneel: laat ook een vriendelijke inline error zien
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
} anders {
. error.hidden = waar
.
Gedrag dat je mag verwachten (en testen):
Toetsenbord:

Tik één keer om de groep te betreden; gebruik

• Pijltjestoetsenbewegen;Spatieselecteert.Schermlezers:De legenda wordt gelezen als het groepslabel; elke optie wordt aangekondigd met de status “geselecteerd/niet geselecteerd”.
• Raak aan:Als u op het label tikt, schakelt u de radio in of uit (dankzij de labelverpakking).
• Op maat gemaakte “kaart”-radio's (zonder de toegankelijkheid te onderbreken)Kopieer en plak HTML

Custom-Styled “Card” Radios (without breaking accessibility)

Copy-paste HTML

Kies een abonnement

Kies één optie. Je kunt op elk moment veranderen.





Starter
Goed voor kleine sites




Groei
Meest populair




Pro
Geavanceerde functies



Selecteer er een om door te gaan.

Minimale, robuuste CSS

:root{
--merk:#0b5cff; --ring: rgba(11,92,255,.35);
--grens:#e5e7eb; --bg:#fff; --gedempt:#6b7280;
--straal:14px;
}

/* Raster */
.kaartgroep{
weergave: raster; kloof:16px;
grid-template-kolommen: repeat(3, minmax(0,1fr));
}
@media (max-breedte:900px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (max-breedte:640px){ .card-group{ grid-template-columns:1fr; } }

/* Kaartlabel */
.kaart{
positie:relatief;
weergave: raster; plaats-items: midden; tekst uitlijnen: centreren;
kloof:6px; opvulling:18px;
rand:1px effen var(--border); grensradius:var(--radius);
achtergrond:var(--bg);
cursor:aanwijzer; gebruiker selecteren: geen;
overgang: vakschaduw .15s, randkleur .15s, transformatie .02s;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Houd de oorspronkelijke invoer focusseerbaar: no display:none */
.kaartinvoer{
positie:absoluut; inzet:0; dekking:0;
}

/* Toetsenbordfocusring op de hele kaart */
.card:has(invoer:focus-zichtbaar){
box-shadow:0 0 0 3px var(--ring);
randkleur: var(--merk);
}

/* Geselecteerde status */
.card:has(invoer:gecontroleerd){
randkleur: var(--merk);
box-shadow:0 0 0 3px var(--ring);
}

/* Inhoud */
.kaarttitel{ lettertypegewicht:700; kleur:#111; }
.card-sub{ lettertypegrootte:14px; kleur:var(--gedempt); }

/* Fouttekst */
.fout{ kleur:#b91c1c; marge-top:.5rem; lettergrootte:.9rem; }

Gedragsnotities (waarom dit patroon werkt)

• Neeweergave: geenop de invoer → toetsenbordgebruikers kunnen intoetsen;Pijltjestoetsenselectie verplaatsen;Spatieselecteert.
• De hele kaart is klikbaar omdat de invoer zich binnen debevindt label.
• :heeft()laten westylen concentrerenengecontroleerdstatussen op de bovenliggende kaart zonder ARIA-hacks.
• Responsief raster geeft1–3 kolommenautomatisch; aanraakdoelen blijven groot.

Optioneel: zachte validatie (native eerst)

const formulier = document.getElementById('plan');
const fout = document.getElementById('planfout');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // gebruikt de `required` op de eerste radio
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

Validatiestrategieën die niet irriteren

Goede validatie is onzichtbaar totdat deze nodig is. Hier is een radiospecifieke aanpak die snel, toegankelijk en rustgevend is voor gebruikers.

Principes

• Inheems eerst.Laat HTML omgaan met ‘er moet er één geselecteerd worden’.
• Stel fouten uit.Schreeuw niet tegen gebruikers voordat ze proberen door te gaan.
• Wijs het probleem aan.Kondig fouten aan, verplaats de focus slim en houd de tekst kort.
• Duidelijk over verandering.Zodra een geldige keuze is gemaakt, verwijdert u de fout.

Basislijn (alleen native)

Alleen HTML kan de regel afdwingen metvereistop één radio in de groep.

Welke dienst heeft u nodig?

Kies één optie.




Linkopbouw



Zoekmachineoptimalisatie



Webontwerp/-ontwikkeling

Dit geeft je al: toetsenbordpijlen, ruimte om te selecteren en validatie op browserniveau.

Vriendelijke inline-fouten (progressieve verbetering)

Schakel de pop-up van de browser uit en handel de berichten inline af, zodat deze bij uw ontwerp passen.

HTML (voeg een foutregio toe)

Kies één optie.


Doorgaan

CSS (eenvoudige stijl)

.fout {kleur:#b91c1c; marge-top:.5rem; lettergrootte:.9rem; }

JS (fouten uitstellen, correct aankondigen)

const formulier = document.getElementById('quote');
const groep = document.getElementById('svc');
const fout = document.getElementById('svc-err');
const radios = form.querySelectorAll('input[name="service"]');

laat geprobeerd = onwaar; // fouten alleen weergeven nadat de gebruiker probeert door te gaan

functie hasSelection() {
return [...radio's].some(r => r.checked);
}

function showError(msg='Kies één optie.') {
err.textContent = bericht;
err.verborgen = false;
group.setAttribute('aria-invalid', 'true');
// Voeg een fout toe aan beschrevendoor, zodat SR's deze als volgende aankondigen
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

functie clearError() {
err.verborgen = waar;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-describedby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
geprobeerd = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// Breng de groep in beeld en plaats de focus op de eerste radio
radios[0].focus();
group.scrollIntoView({ behavior: 'smooth', block: 'center' });
. } anders {
.clearError(
}
.

// Zeur niet vroeg; duidelijk zodra ze iets kiezen
radios.forEach(r => {
r.addEventListener('change', () => {
if (poging tot) clearError();
});
});

Waarom dit werkt

• Geen browser-tooltip-bubbels; gebruikers zien foutenonlinenaast de groep.
• Schermlezers horen delegende, dan defout, dankzijaria-beschreven door.
• Fouten verschijnen alleennaeen verzendpoging (of wanneer u terugkeert naar de oplossing).

Zachte validatie per stap (formulieren met meerdere stappen)

Als u afsluit met een knop 'Volgende', valideer dan alleen die stap.

document.getElementById('nextBtn').addEventListener('click', () => {
if (!hasSelection()) {
showError();
} else {
clearError();
// ga door naar de volgende stap...
}
});

Aangepaste berichten met de Constraint API (optioneel)

Als u liever het geldigheidsmodel van de browser behoudt, stelt u een aangepast bericht in opeerstradio in de groep.

const firstRadio = radio's[0];
form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('Kies één optie.');
// Activeert de eigen gebruikersinterface; of roep form.reportValidity()
e.preventDefault();
form.reportValidity();
} else {
firstRadio.setCustomValidity('');
.}
.

Gebruik dit als u de native “bubbel” plus uw eigen tekst wilt, of blijf bij de bovenstaande inline-methode voor een consistente gebruikersinterface.

Foutoverzicht (voor lange formulieren)

Als uw formulier lang is, voegt u eentoe top samenvattingdie verband houdt met het probleemgebied.

Er is een probleem: Kies een service.

functie showSummary() {
const som = document.getElementById('fout-samenvatting');
som.verborgen = false;
sum.querySelector('a').focus(); // SR's kondigen de waarschuwing aan
}

Fallbacks aan serverzijde en netwerk

Validatie aan de clientzijde verbetert de UX, maaraltijdvalideer ook op de server (of door uw indieningsservice). Als het indienen mislukt, stuurt u de pagina terug met:

• De vorigeselectie bleef bestaan ​​en
• Dedezelfde inline-foutnaast de groep.

Formspree-integratie (progressieve verbetering)

Laat radio's werken, zelfs als JavaScript faalt, en verbeter ze vervolgens voor een soepeler bedankje en betere analyses.

Native HTML (werkt altijd)

id = "quote"
action="https://formspree.io/f/uw_formulier_id"
methode = "POST"
>

Welke dienst heeft u nodig?

Kies één optie.




Linkopbouw
Verdien backlinks van hoge kwaliteit.




Zoekmachineoptimalisatie
Verhoog posities en verkeer.




Webontwerp/-ontwikkeling
Snelle, mobielvriendelijke sites.




Volledige naam




E-mail









Ontvang mijn gratis voorstel

Er is iets misgegaan. Probeer het opnieuw.

Bedankt! We nemen binnenkort contact met u op.

Wat dit je oplevert:

• Werkt met JS uitgeschakeld (goed voor SEO, betrouwbaarheid).
• Browser verwerkt “één moet geselecteerd worden” (vereistop eerste radio).
• Formspree ontvangtdienst,naam,e-mailen_onderwerp.

JS-verbetering (mooie UX, betere tracking)

Onderschep de indiening, valideer en verzend methaalop , en toon een inline bedankje (of omleiding).

Opmerkingen

• Stelin Accepteren: application/jsondus Formspree retourneert JSON en u kunt duidelijk beslissen over succes/mislukking.
• Gebruikformulier.reportValidity()zodat de browser radioselectie en e-mailformaat afdwingt voordat u verzendt.
• Behoud de oorspronkelijkeactie/methodedus het formulier werkt nog steeds zonder JS.

Spamcontrole zonder conversies te schaden

• Honingpot(hierboven opgenomen) vangt veel bots zonder wrijving.
• Tijdstip: voeg een verborgentoe begonnen_bijwanneer de pagina wordt geladen; negeer inzendingen sneller dan bijvoorbeeld 2 seconden.
• Inhoudssignalen: als u herhaalde ongewenste waarden ziet, filter deze dan in uw Formspree-regels of naverwerking.

// in de verzendhandler voordat u verzendt:
const gestart = Getal(fd.get('gestart_at'));
if (Date.now() - gestart < 2000) return; // ziet eruit als een bot

Onderwerpregels die de radiokeuze weerspiegelen (opgeschoonde inbox)

Je kuntop maat maken _onderwerpvan de geselecteerde radio:

const service = fd.get('service'); // bijvoorbeeld "seo"
fd.set('_subject', `Nieuwe ${service} lead uit contactformulier`);

Veel voorkomende valkuilen die u moet vermijden

• Radio's verbergen metweergave: geen.Gebruikdekking:0; positie:absoluut; inzet:0binnen het label zodat toetsenborden nog steeds werken.
• Vergetenveldset/legende.Schermlezers vertrouwen erop voor context.
• Vroegtijdig overvalideren.Fouten weergeven na indiening/volgende, en vervolgens wissen zodra de gebruiker de groep heeft hersteld.
• Geen context vastleggen.Voegtoe pagina_url,verwijzer, en UTM-velden, je zult jezelf later dankbaar zijn.

Internationalisering & Inclusiviteit

Taal, labels en toon

• Gebruik devan de pagina lang(en per landinstelling wisselen): …
• Houd labels kort enbeschrijvendVermijd cultuurspecifiek jargon.
• Lieverneutraalfrasering (“Kies een plan”) in plaats van aannames (“Wat is uw budget?”).
• Lokaliserenfoutenenhelpertekstmet een eenvoudig woordenboek ingetoetst doordocument.documentElement.lang.

const i18n = {
nl: { kies: 'Kies één optie.' },
es: { kies: 'Elige een optie, por gunst.' },
ar: { kies: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('kies');

Lange labels en opties voor meerdere regels

• Laat labelswikkel; kap cruciale woorden nooit af.
• Houd het trefgebied groot, zelfs als de tekst doorloopt: gebruik opvulling op delabel, niet alleen de invoer.

.card { inline-formaat: 100%; opvulling: 16px; }
.card .card-title { lettertypegewicht: 700; lijnhoogte: 1,25; }
.card .card-sub {lettergrootte: 14px; lijnhoogte: 1,4; }

Ondersteuning van rechts naar links (RTL)

Gebruik CSSlogische eigenschappenen:dir()je hebt dus geen aparte stijlen nodig.

/* Spatiëring die automatisch omdraait in RTL */
.kaart {padding-inline: 16px; opvulblok: 16px; }

/* Focusring die de richting respecteert */
.card:has(invoer:focus-zichtbaar) {
omtrek: 3px effen var(--ring);
omtrek-offset: 2px;
}

/* Optioneel: richtingspecifieke aanpassingen */
:dir(rtl) .card-group {richting: rtl; }

Toegankelijkheid buiten ARIA

• Zorg ervoor datcontrast ≥ 4,5:1voor labels en focusstatussen.
• Aanraakdoelen ≥44×44px(opvulling in plaats van lettergrootte).
• Communiceer de staat niet alleen op basis van kleur; gebruikranden, pictogrammen of tekst.

Testchecklist (afdrukvriendelijk)

• Semantiek: Radio's zijn binnenveldsetmet een zichtbarelegende.
• Toetsenbord: Tab komt in de groep;pijlenbeweging;Spatieselecteert.
• Schermlezers: Legende aangekondigd; bij elke optie staat geselecteerd/niet geselecteerd.
• Focus: Zichtbare ring op dehele kaart(en op de native invoer).
• Raakgebied: Gehele label is klikbaar; werkt op mobiel.
• Validatie: Geen fouten tot indiening/volgende; fouten duidelijk bij verandering.
• Kopieer: Opties zijn kort; helpertekst verduidelijkt de verschillen.
• Indeling: 1 kolom op telefoons; 2–3 op bureaublad; geen overloopknipsel.
• i18n: Fouten/labels gelokaliseerd; lange tekst loopt netjes door; RTL oké.
• Analyse: Evenementen voor impressie, selecteren, indienen.
• Prestaties: Geen zware UI-libs; minimale CSS; geen indelingswijziging.

Prestaties en onderhoudbaarheid

• Gunstnative invoer+ lichte CSS; vermijd het vervangen van radio's door div's.
• Houd CSS modulair (aangepaste eigenschappen voor kleuren, straal, ring).
• Vermijdweergave: geenop ingangen; gebruikdekking:0; positie:absoluut; inzet:0zodat de toegankelijkheid intact blijft.
• Niet-kritieke JS uitstellen; houd verbeteringen indien mogelijk onder de 2-5 KB.
• Gebruikcontainerquery's(indien beschikbaar) in plaats van complexe media-breekpunten voor ingebedde formulieren.

@container (min. breedte: 680px) {
.kaartgroep { grid-template-kolommen: 1fr 1fr 1fr; }
}

Analyses en experimenten

Houd de intentie en wrijvingspunten bij:

// Vuur wanneer de radiogroep zichtbaar wordt
gtag?.('event','form_step_view', {stap: 1, formulier: 'contact' });

// Vuur bij selectie
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', waarde: r.value });
});
});

// Vuur bij succesvolle indiening
gtag?.('event','generate_lead', {form: 'contact', service: form.service.value });

A/B-test:

• Optievolgorde(meest gekozen eerst)
• CTA-kopie(“Ontvang mijn gratis voorstel” versus “Ontvang mijn offerte”)
• Helpertekstaanwezigheid

Antipatronen (doe dit niet)

• Invoer verbergen metweergave: geen(breekt toetsenbord en SR's).
• Ontbreektveldset/legenda.
• Kleine trefgebieden (alleen de kleine stip kan worden aangeklikt).
• Alleen kleur selectiestatus; onzichtbare focus.
• Validerenvóórde gebruiker probeert verder te gaan.
• 10–20 opties in radio's verpakken; gebruik in plaats daarvan een doorzoekbare selectie.

Laatste checklist

• veldset+legendeaanwezig
• Hetzelfdenaam, uniekwaardes
• Labels omsluiten ingangen; hele kaart klikbaar
• Focusring duidelijk zichtbaar
• vereistop de eerste radio; lichte inline-fouten
• Rasterresponsieve, grote aanraakdoelen met 1-3 kolommen
• Gelokaliseerde tekenreeksen; RTL veilig via logische eigenschappen
• Analytics bij bekijken/selecteren/verzenden
• Validatie aan de serverzijde weerspiegelt clientregels

Bronnen

Specificaties en ontwerppatronen

• HTML-standaard –: native semantiek, gegroepeerd opnaam, vormgedrag.
• WAI-ARIA Authoring Practices 1.2 – Radiogroep: verwacht toetsenbordgedrag (Tab in groep,Pijlom te verplaatsen,Spatieom te selecteren), patronen labelen.
• WCAG 2.2essentieel voor radio's:
  • 2.1.1Toetsenbord(alles bedienbaar via toetsenbord)
  • 2.4.7Focus zichtbaar(duidelijk zichtbare focus)
  • 2.5.5Doelgrootte(≥44×44px aanbevolen)
  • 1.4.3Contrast (minimaal)

Naslaggidsen

• MDN: Radio-ingang,label,veldset/legende, formuliervalidatie (Constraint Validation API).
• GOV.UK ontwerpsysteem – Radio's: uitstekende, beproefde begeleiding bij bewoordingen en fouten.
• Inclusieve componenten (Heydon Pickering): praktische a11y-patronen en kritieken.

Bekijk onze recente blog opHoe u mogelijkheden voor gastposts op Ahrefs kunt opzoeken (stapsgewijze handleiding)

Testen en gereedschappen

• bijl DevTools(browserextensie) – geautomatiseerde a11y-controles.
• Toegankelijkheidsinzichten– snelle begeleide tests.
• Vuurtoren– prestatie + toegankelijkheidssignalen.
• WebAIM-contrastcontrole– controleer het kleurcontrast.
• Schermlezersom echt gedrag te controleren:
  • NVDA(Windows),KAKEN(Windows),VoiceOver(macOS/iOS),TalkBack(Android).
• Handmatige toetsenbordpassage: Tab in de groep → Pijlen bewegen → Spatie selecteert → focusring blijft duidelijk.

Bekijk onzerecensie van Notions Marketing

Veelgestelde vragen (kort en praktisch)