Pulsanti di opzione HTML che convertono: la guida definitiva

I pulsanti di opzione sembrano semplici. Un clic, una scelta. Tuttavia, sono anche uno dei modi più semplici per compromettere UX e accessibilità. Nascondi l'input nativo, saltacampoelegendaoppure esegui una convalida troppo aggressiva e spedirai un modulo che confonde gli utenti della tastiera, frustra gli screen reader e sanguina le conversioni.

Questa guida ti mostra come realizzare le radio nel 2025: rapide da scegliere, facili da scansionare, completamente accessibili e misurabili. Inizieremo con una linea di base pulita e semantica, quindi sovrapporremo i moderni CSS in modo che le radio possano apparire come schede o controlli segmentati senza interrompere il comportamento della tastiera o dello screen reader.

Vedrai modelli di convalida pratici che non disturbano, layout reattivi che mantengono grandi obiettivi sui dispositivi mobili e snippet di produzione che puoi incollare in qualsiasi stack. Tratteremo anche analisi, idee A/B e una configurazione di Formspree in modo da poter acquisire risultati immediatamente.

A chi è rivolto: designer, sviluppatori front-end ed esperti di marketing che si preoccupano di entrambiaccessibilitàeconversione. Non sono richiesti framework pesanti, solo HTML solido, CSS mirato e un piccolo miglioramento progressivo.

Alla fine saprai:

• Quando le radio battono selezioni, caselle di controllo o attiva/disattiva
• Come costruire un gruppo radio accessibile (fieldset,legend, labeling, focus)
• Come personalizzare lo stile delle radio "card" personalizzate senza nascondere l'ingresso
• Come convalidare con l'API HTML Constraint (e il messaggio bene)
• Come collegare le radio a Formspree e misurare le selezioni

TL;DR

• Utilizzareradioper esattamenteunoscelta all'interno di un insieme ben definito (idealmente2–6 opzioni) che dovrebbe esserevisibile immediatamente.
• Avvolgi sempre le radio in+, dai loro ilstessonomee imposta ogni opzione sucliccabile.
• Non nascondere gli input convisualizzazione:nessuno; tienilifocalizzabile(ad esempio,opacità:0; posizione:assoluta; inserto:0) quindiTab/Frecce/Spaziolavoro.
• Rendi grandi gli obiettivi: almeno44×44px, conanello di messa a fuocoquesto è chiaramente visibile.
• Convalidare conAPI di vincolo HTML(obbligatorio,reportValidity()), quindi migliora i messaggi, non viceversa.
• Se hai molte opzioni o non ti sono familiari, aggiungitesto di aiutosotto ciascuna etichetta e considerarericerca o raggruppamentoInvece.
• Sul cellulare, inserisciuna colonna; su schermi larghi,2–3 colonnetramite griglia CSS.
• Misura: tracciaimpressioni, selezione e invioe test A/Bordine delle opzioniecopia.
• Per Formspree, mantieniPOST nativocome riserva; aggiungirecuperaresolo come miglioramento progressivo.

Quando utilizzare le radio (albero decisionale)

Q1. L'utente sta scegliendo esattamente un'opzione?

• No →Utilizzarecaselle di controllo(0–molti) oalterna(binario) o ripensare il compito.
• Sì →Vai alla domanda 2.

Q2. Le opzioni devono essere visibili a colpo d'occhio?

• Sì →Utilizzareradio(ideale per la scansione e la scelta rapida).
• No (lo spazio è limitato/molte opzioni)→ Consideriamo unselezionare(cadere in picchiata). Se le scelte sono fondamentali e traggono vantaggio dal confronto, preferisci le radio e ridisegna il layout.

Q3. Quante opzioni?

• 2–6→ Le radio sono l'ideale.
• 7–10→ Le radio possono ancora funzionare con il raggruppamento o undue colonnegriglia; altrimenti utilizzare un elenco selezionato o ricercabile.
• >10→ Utilizzare unselezionare con la ricercao unpassoquesto restringe prima il set.

Q4. Le opzioni si escludono a vicenda?

• Sì →Radio.
• No / le combinazioni hanno senso →Caselle di controllo.

Q5. La scelta scatenerà diverse domande di follow-up?

• Sì →Le radio sono ancora a posto. Mostra follow-upcondizionatamente, ma mantieni i campi nascostifuori dall'ordine di tabulazionee il flusso SR fino alla rivelazione.
• No →Gruppo radiofonico semplice.

Q6. Familiare o descrittivo?

• Etichette familiari(es. “Piccolo/Medio/Grande”) → sono sufficienti etichette brevi.
• Non familiare o con una posta in gioco alta(ad esempio, “SEO tecnico vs. SEO dei contenuti”) → aggiungimicrocopia(descrizione di una riga) sotto ciascuna etichetta.

D7. Mobile-first?

• Sì (sempre)→ Utilizzarestack di una colonnacon spaziatura generosa e testo di 16–18 px. Promuovi ilpiù sceltoopzione verso l'alto.

Esempi pratici

• Il tuo modulo: “Quale servizio?” → Le radio battono la selezione perché gli utenti dovrebbero confrontare le opzioni fianco a fianco. Conserva 3 carte (Link Building, SEO, Web Dev) con un sottotesto breve.
• Velocità di spedizione: 3–4 velocità mutuamente esclusive → Radio (con differenze di prezzo nel sottotesto).
• Frequenza della newsletter: Giornaliera/Settimanale/Mensile → Radio.
• Interessi (è possibile selezionarne più di uno)→ Non radio; utilizzare le caselle di controllo.

Anatomia di un vero e proprio gruppo radiofonico

Linea di base semantica copia-incolla (ancora nessun CSS sofisticato)

Di quale servizio hai bisogno?

Scegli un'opzione che meglio si adatta al tuo obiettivo.





Link Building




Ottimizzazione per i motori di ricerca




Progettazione/sviluppo web






Continua

Perché ogni parte è importante

• +dà al gruppo un nome per gli screen reader e imposta il contesto per tutti.
• Idemnomerende gli input mutuamente esclusivi.
• Cliccabileattorno a ciascun ingressoti offre un'enorme area tocco/clic (44px+).
• obbligatorioalla prima radioconsente al browser di convalidare il gruppo in modo nativo.
• Testo di aiuto(suggerimento servizio) etesto dell'errore(service-error) sono separati in modo da poter mostrare/nascondere gli errori senza spostare le cose.
• Non sono necessari ruoli ARIA.Le radio native espongono già la semantica corretta.

CSS minimo per l'usabilità (aspetto nativo, obiettivi grandi, focus chiaro)

/* Layout e spaziatura */
.campo etichetta {
display: flessibile;
allineare gli elementi: centro;
spazio vuoto: .6rem;
imbottitura: .65rem .8rem;      /* obiettivo del tocco grande */
raggio del bordo: .6rem;
cursore: puntatore;
}

/* Focus tastiera: evidenzia l'intera etichetta quando l'input è focalizzato */
.field etichetta:ha(input:focus-visibile) {
contorno: 3px solido #3b82f6;
offset contorno: 2px;
}

/* Stato selezionato (facoltativo, il punto nativo viene ancora visualizzato) */
.field etichetta:ha(input:controllato) {
sfondo: #f1f5ff;
}

/* Testo dell'errore */
.errore { colore: #b91c1c; margine superiore: .5rem; dimensione carattere: .9rem; }

Suggerimento::ha()ti dà quel "anello di messa a fuoco sull'intera carta" senza nascondere l'input reale. Se un browser meno recente non lo supporta, gli utenti ricevono comunque l'anello di messa a fuoco nativo sulla radio stessa.

Convalida delicata e accessibile (utilizza prima il browser)

Lascia che sia il browser a gestire la parte "devi sceglierne uno", quindi mostra l'errore in linea, se necessario.

const form = document.getElementById('quote-form');
const group = document.getElementById('service-group');
const errore = document.getEementById('service-error');

form.addEventListener('submit', (e) => {
// Attiva l'interfaccia utente di convalida nativa (funziona perché la prima radio ha `required`)
if (!form.reportValidity()) {
// Opzionale: mostra anche un errore in linea amichevole
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
. } else {
.errore.hidden = true
.
Comportamento che dovresti aspettarti (e testare):
Tastiera:

Tab una volta per entrare nel gruppo; utilizzare

• Tasti frecciamuoversi;Spazioseleziona.Lettori di schermo:La legenda viene letta come etichetta del gruppo; ciascuna opzione è annunciata con lo stato “selezionato/non selezionato”.
• Toccare:Toccando l'etichetta si attiva/disattiva la radio (grazie all'avvolgimento dell'etichetta).
• Radio “Card” in stile personalizzato (senza interrompere l'accessibilità)Copia e incolla HTML

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

Copy-paste HTML

Scegli un piano

Scegli un'opzione. Puoi cambiare in qualsiasi momento.





Inizio
Ottimo per piccoli siti




Crescita
I più popolari




Pro
Funzionalità avanzate

CSS minimale e robusto

:radice{
--marca:#0b5cff; --anello: rgba(11,92,255,.35);
--border:#e5e7eb; --bg:#fff; --muto:#6b7280;
--raggio:14px;
}

/* Griglia */
.gruppo-carte{
visualizzazione:griglia; spazio: 16px;
colonne-modello-griglia: ripeti(3, minmax(0,1fr));
}
@media (max-width:900px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .card-group{ grid-template-columns:1fr; } }

/* Etichetta della carta */
.carta{
posizione:relativa;
visualizzazione:griglia; elementi-posto:centro; allineamento testo:centro;
spazio: 6px; imbottitura: 18px;
bordo:1px solido var(--bordo); raggio-bordo:var(--raggio);
sfondo:var(--bg);
cursore:puntatore; selezione utente: nessuno;
transizione: box-shadow .15s, border-color .15s, trasformazione .02s;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Mantiene focalizzabile l'input nativo: no display:none */
.inserimento carta{
posizione:assoluta; inserto:0; opacità:0;
}

/* Anello di focus della tastiera su tutta la carta */
.card:ha(input:focus-visibile){
box-ombra:0 0 0 3px var(--ring);
colore del bordo: var(--brand);
}

/* Stato selezionato */
.card:ha(input:controllato){
colore del bordo: var(--brand);
box-ombra:0 0 0 3px var(--ring);
}

/* Contenuto */
.titolo-carta{ peso-carattere:700; colore:#111; }
.card-sub{ dimensione carattere:14px; colore:var(--muto); }

/* Testo dell'errore */
.errore{ colore:#b91c1c; margine superiore: .5rem; dimensione carattere: .9rem; }

Note sul comportamento (perché questo modello funziona)

• Novisualizzazione:nessunosull'input → tastiera gli utenti possono accedere con la scheda;Tasti frecciaspostare la selezione;Spazioseleziona.
• L'intera scheda è cliccabile perché l'input è all'interno deletichetta.
• :ha()lasciaci stileconcentratieselezionatostati sulla carta genitore senza hack ARIA.
• La griglia reattiva fornisce1–3 colonneautomaticamente; i bersagli tattili rimangono grandi.

Facoltativo: convalida delicata (prima nativa)

const modulo = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // usa il `required` sulla prima radio
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

Strategie di convalida che non infastidiscono

Una valida validazione è invisibile finché non è necessaria. Ecco un approccio specifico per la radio che è veloce, accessibile e rilassante per gli utenti.

Principi

• Nativo innanzitutto.Lascia che HTML gestisca "uno deve essere selezionato".
• Differire gli errori.Non urlare agli utenti prima che provino a continuare.
• Indica il problema.Annuncia gli errori, sposta il focus in modo intelligente e mantieni il testo breve.
• Chiaro sul cambiamento.Non appena viene effettuata una scelta valida, rimuovere l'errore.

Baseline (solo nativo)

Solo l'HTML può far rispettare la regola conobbligatoriosu una radio del gruppo.

Di quale servizio hai bisogno?

Scegli un'opzione.




Link Building



Ottimizzazione per i motori di ricerca



Progettazione/sviluppo web

Questo ti dà già: frecce della tastiera, spazio per selezionare e convalida a livello di browser.

Errori in linea amichevoli (miglioramento progressivo)

Disattiva il popup del browser e gestisci i messaggi in linea in modo che corrispondano al tuo design.

HTML (aggiungi una regione di errore)

Continua

CSS (stile semplice)

.errore { colore:#b91c1c; margine superiore: .5rem; dimensione carattere: .9rem; }

JS (rinviare errori, annunciarli correttamente)

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

let tentato = falso; // mostra gli errori solo dopo che l'utente tenta di continuare

funzione haSelezione() {
return [...radios].some(r => r.checked);
}

function showError(msg='Scegli un'opzione.') {
err.textContent = messaggio;
err.nascosto = falso;
group.setAttribute('aria-invalid', 'true');
// Aggiunge l'errore a descriptionby in modo che gli SR lo annuncino successivamente
group.setAttribute('aria-descriptionby', 'svc-hint svc-err');
}

funzione cancellaErrore() {
err.nascosto = vero;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-descriptionby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
tentato = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// Mostra il gruppo e posiziona il focus sulla prima radio
radios[0].focus();
group.scrollIntoView({ behavior: 'smooth', block: 'center' });
. }
.errore();
// Non lamentarti presto; chiaro quando scelgono qualcosa
radios.forEach(r => {

r.addEventListener('change', () => {
if (tentato) clearError();
});
});
Perché funziona
Nessun fumetto di descrizione comando del browser; gli utenti vedono errori

in linea

• accanto al gruppo.Gli screen reader ascoltanolegenda
• , quindierrore, grazie aaria-descrittada.Gli errori compaiono solodopo
• un tentativo di invio (o quando si torna a correggere).Convalida delicata per passaggio (moduli a più passaggi)Se accedi con il pulsante "Avanti", convalida solo quel passaggio.

document.getElementById('nextBtn').addEventListener('click', () => {

if (!hasSelection()) {

showError();
} else {
clearError();
// avanza al passaggio successivo...
}
});
Messaggi personalizzati con l'API Constraint (facoltativo)
Se preferisci mantenere il modello di validità del browser, imposta un messaggio personalizzato nel

prima

radiofonica del gruppo.const firstRadio = radio[0];form.addEventListener('submit', (e) => {

if (!hasSelection()) {
firstRadio.setCustomValidity('Scegli un'opzione.');
// Attiva l'interfaccia utente nativa; o chiama form.reportValidity()
e.preventDefault();
form.reportValidity();
} else {
primaRadio.setCustomValidity('');
.
Utilizzalo quando desideri la "bolla" nativa più il tuo testo, altrimenti attieniti al metodo in linea sopra per un'interfaccia utente coerente.
Riepilogo errori (per moduli lunghi)
Se il tuo modulo è lungo, aggiungi un

riepilogo in alto

che si collega all'area problematica.

funzione mostraRiepilogo() {
const sum = document.getElementById('error-summary');
somma.nascosto = falso;

sum.querySelector('a').focus(); // Gli SR annunciano l'avviso
}
Fallback lato server e rete
La convalida lato client migliora l'UX, ma
sempre

convalidare anche sul server (o tramite il servizio di invio). Se l'invio fallisce, restituisci la pagina con:

Client-side validation improves UX, but always validate on the server (or by your submission service) too. If submission fails, return the page with:

• Il precedenteselezione persistentee
• Ilstesso errore in lineaaccanto al gruppo.

Integrazione Formspree (miglioramento progressivo)

Fai funzionare le radio anche se JavaScript fallisce, quindi migliora per un ringraziamento più fluido e un'analisi migliore.

HTML nativo (funziona sempre)

id="citazione"
action="https://formspree.io/f/your_form_id"
metodo="POST"
>

Di quale servizio hai bisogno?

Scegli un'opzione.




Link Building
Guadagna backlink di alta qualità.




Ottimizzazione per i motori di ricerca
Aumenta il posizionamento e il traffico.




Design/Sviluppo Web
Siti veloci e incentrati sui dispositivi mobili.




Nome completo




E-mail









Ricevi la mia proposta gratuita

Cosa ti dà:

• Funziona con JS disattivato (buono per SEO, affidabilità).
• Il browser gestisce "è necessario selezionarne uno" (richiestosulla prima radio).
• Formspree riceveservizio,nome,e-maile_oggetto.

Miglioramento JS (bella UX, migliore tracciamento)

Intercetta l'invio, convalida, invia conrecuperaree mostra un messaggio di ringraziamento in linea (o reindirizzamento).

Note

• ImpostaAccetta: application/jsonquindi Formspree restituisce JSON e puoi decidere il successo/fallimento in modo pulito.
• Utilizzareform.reportValidity()in questo modo il browser impone la selezione della radio e il formato dell'e-mail prima dell'invio.
• Mantieni il nativoazione/metodoquindi il modulo funziona ancora senza JS.

Controllo dello spam senza danneggiare le conversioni

• Honeypot(incluso sopra) cattura molti robot senza attrito.
• Tempistica: aggiungi unnascosto iniziato_allequando la pagina viene caricata; ignora gli invii più velocemente di, diciamo, 2 secondi.
• Segnali di contenuto: se vedi valori indesiderati ripetuti, filtrali nelle regole di Formspree o nella post-elaborazione.

// nel gestore di invio prima dell'invio:
const iniziato = Numero(fd.get('started_at'));
if (Date.now() - iniziato < 2000) return; // sembra un bot

Righe dell'oggetto che riflettono la scelta della radio (casella di posta pulita)

Puoi personalizzare_oggettodalla radio selezionata:

const servizio = fd.get('servizio'); // ad esempio "seo"
fd.set('_subject', `Nuovo lead ${service} dal modulo di contatto`);

Insidie ​​comuni da evitare

• Nascondere le radio convisualizzazione:nessuno.Utilizzareopacità:0; posizione:assoluta; inserto:0all'interno dell'etichetta in modo che le tastiere funzionino ancora.
• Dimenticarecampo/legenda.Gli screen reader si affidano a loro per il contesto.
• Convalida eccessiva anticipata.Mostra gli errori dopo l'invio/Avanti, quindi cancella non appena l'utente corregge il gruppo.
• Non catturare il contesto.Aggiungiurl_pagina,referentee campi UTM, ti ringrazierai più tardi.

Internazionalizzazione e inclusività

Lingua, etichette e tono

• Utilizza ildella pagina lang(e cambiare pagina in base alla locale): …
• Mantieni le etichette corte edescrittivo, evitare il gergo specifico della cultura.
• Preferisconeutralefrasi ("Scegli un piano") rispetto alle ipotesi ("Qual è il tuo budget?").
• Localizzaerrorietesto di aiutocon un semplice dizionario digitato dadocument.documentElement.lang.

const i18n = {
it: { choose: 'Scegli un'opzione.' },
es: { choose: 'Seleziona un'opzione, per favore.' },
ar: { choose: 'يُر��ى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.it)[k];
errorEl.textContent = t('scegli');

Etichette lunghe e opzioni multilinea

• Lascia che le etichetteavvolgere; non troncare mai le parole cruciali.
• Mantieni l'area interessata grande anche quando il testo va a capo: usa il riempimento suetichetta, non solo l'input.

.card { dimensione in linea: 100%; imbottitura: 16px; }
.carta .carta-titolo { peso-carattere: 700; altezza della linea: 1,25; }
.card .card-sub { dimensione carattere: 14px; altezza della linea: 1,4; }

Supporto da destra a sinistra (RTL)

Usa CSSproprietà logichee:dir()quindi non hai bisogno di stili separati.

/* Spaziatura che si inverte automaticamente in RTL */
.card {imbottitura in linea: 16px; blocco di riempimento: 16px; }

/* Anello di messa a fuoco che rispetta la direzione */
.card:ha(input:focus-visibile) {
contorno: 3px solido var(--ring);
offset contorno: 2px;
}

/* Opzionale: modifiche specifiche alla direzione */
:dir(rtl) .card-group { direzione: rtl; }

Accessibilità oltre ARIA

• Assicurarsicontrasto ≥ 4,5:1per etichette e stati focus.
• Tocca i target ≥44×44px(imbottitura anziché dimensione del carattere).
• Non comunicare lo stato solo tramite il colore; utilizzarebordi, icone o testo.

Elenco di controllo dei test (adatto alla stampa)

• Semantica: Le radio sono dentrocampocon unvisibile legenda.
• Tastiera: Tab entra nel gruppo;freccemossa;Spazioseleziona.
• Lettori di schermo: Leggenda annunciata; ciascuna opzione dice selezionata/non selezionata.
• Concentrarsi: Anello visibile sulintera carta(e sull'input nativo).
• Area colpita: L'intera etichetta è cliccabile; funziona su cellulare.
• Convalida: Nessun errore fino all'invio/successivo; gli errori vengono chiariti al momento del cambiamento.
• Copia: le opzioni sono brevi; il testo di supporto chiarisce le differenze.
• Disposizione: 1 colonna sui telefoni; 2–3 sul desktop; nessun ritaglio di overflow.
• i18n: Errori/etichette localizzate; il testo lungo si avvolge con grazia; RTL OK.
• Analisi: eventi per impressione, selezione, invio.
• Prestazioni: Nessuna libreria dell'interfaccia utente pesante; CSS minimo; nessun cambiamento di layout.

Prestazioni e manutenibilità

• Favoreinput nativi+ CSS leggero; evitare di sostituire le radio con i div.
• Mantieni CSS modulare (proprietà personalizzate per colori, raggio, anello).
• Evitavisualizzazione:nessunosugli ingressi; utilizzareopacità:0; posizione:assoluta; inserto:0quindi l'accessibilità rimane intatta.
• Rinviare JS non critico; mantenere i miglioramenti sotto i ~2-5 KB quando possibile.
• Utilizzarequery sul contenitore(se disponibile) invece di complessi punti di interruzione multimediali per moduli incorporati.

@container (larghezza minima: 680px) {
.card-group { grid-template-columns: 1fr 1fr 1fr; }
}

Analisi e sperimentazione

Tieni traccia delle intenzioni e dei punti di attrito:

// Si attiva quando il gruppo radio diventa visibile
gtag?.('evento','form_step_view', { step: 1, form: 'contatto' });

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

// Attiva dopo l'invio riuscito
gtag?.('evento','generate_lead', { modulo: 'contatto', servizio: form.service.value });

Test A/B:

• Ordine delle opzioni(il più scelto per primo)
• Copia CTA(“Ricevi la mia proposta gratuita” vs “Richiedi il mio preventivo”)
• Testo di aiutopresenza

Anti-pattern (da non fare)

• Nascondere gli input convisualizzazione:nessuno(rompe tastiera e SR).
• Mancacampo/legenda.
• Piccole aree colpite (solo il piccolo punto cliccabile).
• Stato di selezione solo colore; messa a fuoco invisibile.
• Convalidaprimal'utente tenta di procedere.
• Inserire 10-20 opzioni nelle radio; utilizzare invece una selezione ricercabile.

Lista di controllo finale

• campo+legendapresente
• Idemnome, unicovalores
• Le etichette avvolgono gli input; intera scheda cliccabile
• Anello di messa a fuoco chiaramente visibile
• obbligatorioalla prima radio; lievi errori in linea
• Griglia reattiva da 1 a 3 colonne, target touch di grandi dimensioni
• Stringhe localizzate; RTL sicuro tramite proprietà logiche
• Analisi su visualizzazione/selezione/invio
• La convalida lato server rispecchia le regole del client

Risorse

Specifiche e modelli di creazione

• Standard HTML –: semantica nativa, raggruppamento pernome, forma il comportamento.
• WAI-ARIA Pratiche di Authoring 1.2 – Gruppo Radio: comportamento previsto della tastiera (Tab nel gruppo,Frecciaper spostarsi,Spazioper selezionare), modelli di etichettatura.
• WCAG 2.2elementi essenziali per le radio:
  • 2.1.1Tastiera(tutto gestibile tramite tastiera)
  • 2.4.7Focus visibile(fuoco chiaramente visibile)
  • 2.5.5Dimensione obiettivo(≥44×44px consigliato)
  • 1.4.3Contrasto (minimo)

Guide di riferimento

• MDN: Ingresso radio,etichetta,campo/legenda, convalida del modulo (API di convalida dei vincoli).
• Sistema di progettazione GOV.UK – Radio: guida eccellente e testata sul campo su formulazione ed errori.
• Componenti inclusivi (Heydon Pickering): modelli pratici e critiche di ogni anno.

Dai un'occhiata al nostro recente blog suCome cercare opportunità di pubblicazione di guest post su Ahrefs (guida passo passo)

Test e attrezzature

• axDevTools(estensione del browser) – controlli a11y automatizzati.
• Approfondimenti sull'accessibilità– test rapidi guidati.
• Faro– prestazioni + segnali di accessibilità.
• Controllo contrasto WebAIM– verificare il contrasto dei colori.
• Lettori di schermoper verificare a campione il comportamento reale:
  • NVDA(Finestre),MASCELLE(Finestre),Voce fuori campo(macOS/iOS),Discussione(Androide).
• Passaggio manuale da tastiera: Premi il tasto Tab nel gruppo → Le frecce si spostano → Seleziona lo spazio → l'anello di messa a fuoco rimane evidente.

Dai un'occhiata al nostroripasso di Nozioni Marketing

Domande frequenti (brevi e pratiche)