ACCESSIBILITÀ ≠ OVERLAY · 38
Focus da tastiera visibile quando un’intestazione fissa copre il passaggio successivo
📅 11 novembre 2026 · ⏱ 6 min di lettura
Premendo Tab, il browser può spostare il focus su un controllo dietro un’intestazione fissa. La pagina continua a rispondere, ma la persona perde il riferimento visivo necessario per proseguire.
01. La prova di una prenotazione
Apri una pagina di prenotazione e scegli una data con la tastiera. Quando avanzi con Tab, ti aspetti di trovare il link che spiega le modifiche o il pulsante per continuare. Il documento scorre di qualche pixel e il contorno scompare. Il focus è arrivato al controllo corretto, ma l’intestazione che rimane in alto lo copre. Premendo Invio potresti passare alla fase successiva senza aver visto quale azione stavi per attivare.
È facile trascurare questa situazione quando si controlla il progetto con il mouse. Il puntatore indica la posizione scelta e permette di regolare lo scorrimento prima di agire. Con la tastiera il browser segue l’ordine del documento e decide quando spostare la vista. Conserva questa sequenza durante la prova. Scorrere manualmente prima di osservare può nascondere proprio il problema da riprodurre.
02. Distingui il focus, l’indicatore e l’ordine
Il focus identifica l’elemento che riceve l’input da tastiera. L’indicatore è il segnale visivo che permette di localizzarlo. L’ordine determina quale controllo viene dopo. Un’intestazione sovrapposta può coprire un pulsante con un indicatore ben definito. Un pulsante può anche essere in vista senza mostrare alcun segnale quando riceve il focus. Un controllo chiaramente visibile può infine comparire in un momento incoerente del percorso.
Per isolare il problema, annota il controllo atteso e quello che riceve effettivamente il focus. Con gli strumenti del browser, ispeziona l’elemento attivo senza modificare il focus della pagina oppure ripeti la sequenza con l’ispettore pronto. Confronta il rettangolo del controllo con quello dello strato sovrapposto. Una schermata mostra il sintomo. I passaggi da tastiera e lo stato del componente permettono di riprodurlo.
03. Che cosa richiedono le WCAG 2.2
Il criterio 2.4.7, di livello AA, riguarda la visibilità dell’indicatore del focus. Il 2.4.11, anch’esso AA, verifica che un componente con focus non sia completamente nascosto da contenuto creato dal sito. Valutali separatamente. Vedere un piccolo frammento del pulsante può evitare l’occultamento totale e continuare a rendere difficile comprendere l’azione.
Il criterio 2.4.12, di livello AAA, affronta anche l’occultamento parziale. Come obiettivo di progettazione, mantieni visibili tutto il controllo e il suo indicatore. Il 2.4.3, di livello A, riguarda un ordine sequenziale che conservi significato e operabilità quando la sequenza li influenza. Un’intestazione fissa può causare il mancato rispetto di un requisito mentre gli altri sono soddisfatti. Nel rapporto descrivi il comportamento osservato e cita il criterio pertinente.
04. Individua lo strato che occupa lo spazio di lettura
Un’intestazione fissa può cambiare altezza durante lo scorrimento, all’apertura del menu o quando la finestra si restringe. Un avviso in basso, una barra delle azioni o un pannello di assistenza possono occupare altre parti della stessa finestra. Ogni componente può funzionare da solo e lasciare poco spazio quando è combinato con gli altri. Conta l’altezza effettiva nello stato in cui avviene il problema.
Verifica quale contenitore scorre. In una pagina semplice è spesso il documento. In un’applicazione potrebbe essere un pannello interno con scorrimento e barra propri. Un’impostazione sul documento può non raggiungerlo. Disattiva temporaneamente la posizione fissa nell’ispettore e ripeti la sequenza. Se il controllo torna visibile, hai un’ipotesi concreta da verificare nel modello.
05. Riserva spazio nel contenitore che scorre
Una soluzione possibile è impostare scroll-padding-block-start sul contenitore che scorre per considerare l’altezza dell’intestazione. Con una barra fissa inferiore, valuta scroll-padding-block-end. La tecnica C43 del W3C mostra come combinare questo margine di scorrimento con spazio effettivo affinché l’ultimo elemento possa uscire da dietro una barra. Controlla l’inizio e la fine del percorso, perché lo scorrimento ha limiti.
Un’altezza ripresa dalla versione desktop può essere insufficiente quando il menu va su due righe. Usa valori che riflettano gli stati del modello e verifica i cambi di dimensione. Se lo strato occupa troppo spazio in una finestra bassa, può essere preferibile farlo scorrere con il contenuto. Controlla lo scorrimento automatico del focus e i link interni, che possono posizionare il contenuto vicino all’intestazione.
06. Rendi visibile l’indicatore in ogni stato
Mantieni l’indicatore del browser o progettane uno distinguibile sulle superfici reali del sito. Un contorno ben visibile su una scheda bianca può perdersi in un menu blu. Prova pulsanti principali, link testuali, icone e campi. Controlla gli stati normale e visitato e valuta il contrasto nel contesto di ciascun controllo.
Il selettore CSS :focus-visible applica lo stile quando il browser ritiene opportuno mostrare il segnale. Evita di rimuovere globalmente i contorni senza un’alternativa verificata. Controlla i contenitori che ritagliano l’indicatore con overflow e le regole che lo nascondono quando i moduli si sovrappongono. Se il controllo è riconoscibile solo al passaggio del puntatore, torna alla tastiera e verifica lo stato che il tema sta stilizzando.
07. Ripeti nei due sensi e con ingrandimento
Parti da uno stato riproducibile e annota browser, dimensioni della finestra e zoom. Avanza con Tab e torna indietro con Maiusc+Tab. Osserva ogni controllo quando riceve il focus. Prova vicino ai bordi superiore e inferiore e sull’ultimo elemento di un pannello. Alcuni strati coprono il contenuto solo tornando indietro, quando il browser scorre nella direzione opposta.
Ripeti con intestazione estesa, menu chiuso e avvisi tipici di una prima visita. In una finestra stretta o ingrandita, il testo può andare su più righe e ridurre l’altezza disponibile. Un breve video della sequenza distingue un salto di scorrimento da un cambiamento del focus. La persona deve poter identificare il controllo corrente prima di decidere se attivarlo.
08. Correggi il modello Divi e verifica il percorso
In WordPress, accerta se l’intestazione viene dal tema, da un modello del Theme Builder o da un modulo che rimane fisso. Individua l’impostazione dell’altezza e la regola di scorrimento. Correggi il componente che causa la sovrapposizione e verifica le pagine che lo riutilizzano. Includi una pagina lunga, un modulo e un percorso con link interni.
Un overlay può offrire regolazioni di presentazione. Geometria dell’intestazione, ordine del focus e spazio riservato dipendono dall’implementazione della pagina. Gli strumenti automatici possono segnalare problemi specifici. Per chiudere il caso, completa nuovamente la prenotazione con la tastiera, verifica ogni passaggio nel momento utile e conferma che sia possibile avanzare o tornare indietro conservando il riferimento. Conserva il risultato con i passaggi originali per ripetere la prova dopo una modifica al modello.