La accesibilidad web tiene mala fama de tema aburrido y caro, y suele quedarse en la lista de «cuando tengamos tiempo». Merece la pena replantearlo por tres motivos muy concretos: afecta a mucha más gente de la que parece, buena parte de lo que arreglas mejora la web para todos, y desde hace unos años hay obligaciones legales que alcanzan a bastantes empresas privadas en España.
La buena noticia: la mayor parte de los problemas de accesibilidad de un WordPress normal son cuatro o cinco cosas repetidas, se detectan en una tarde y se arreglan sin rehacer nada.
Antes de empezar: qué detecta una máquina y qué no
Esto marca todo el enfoque, así que va primero.
Las herramientas automáticas —y la IA entre ellas— detectan de forma fiable en torno a un tercio de los problemas reales de accesibilidad. Son excelentes en lo medible: contraste de color insuficiente, una imagen sin atributo alt, un campo de formulario sin etiqueta, una jerarquía de encabezados rota.
Lo que no pueden juzgar es el sentido. Una imagen puede tener un alt que diga «imagen1.jpg» y la máquina lo dará por correcto porque el atributo existe. Un enlace que dice «haz clic aquí» pasa cualquier validador y es inútil para alguien que navega saltando de enlace en enlace.
Conclusión práctica: usa las herramientas para el barrido inicial y reserva media hora para probar a mano. Las dos partes juntas cubren la gran mayoría; ninguna de las dos sola basta.
Paso 1: barrido automático
Empieza con dos extensiones de navegador gratuitas: WAVE y axe DevTools. Las dos analizan la página abierta y señalan los problemas sobre el propio diseño.
Pásalas por cuatro páginas representativas: la portada, una entrada del blog, una página con formulario y —si vendes— una ficha de producto. No hace falta más para el diagnóstico inicial: los problemas de un WordPress son casi siempre del tema y de las plantillas, así que se repiten.
Apunta lo que salga. Verás que se agrupa en muy pocas categorías.
Paso 2: contraste de color
Es el problema número uno, con diferencia, y el más fácil de arreglar.
La norma pide una relación de contraste de al menos 4,5:1 entre texto y fondo para texto normal, y 3:1 para texto grande. En la práctica, los sospechosos habituales son siempre los mismos: el texto gris claro sobre blanco que queda tan elegante, los botones de color de marca con texto blanco encima, el texto sobre una imagen de cabecera y los enlaces del pie de página.
Aquí la IA ayuda de una forma muy concreta: dale tu paleta de marca y pídele combinaciones válidas.
«Mi paleta de marca es: [lista de colores en hexadecimal]. Calcula la relación de contraste de cada combinación de texto sobre fondo y dime cuáles cumplen WCAG AA (4,5:1 para texto normal). Para las que no cumplan, propón el ajuste mínimo del color de texto que sí cumpla manteniendo el tono lo más parecido posible al original.»
Ese «ajuste mínimo manteniendo el tono» es la clave para que el diseñador no se eche las manos a la cabeza: no se trata de cambiar la marca, sino de oscurecer un gris lo justo.
Paso 3: textos alternativos que sirvan
El alt de una imagen es lo que oye alguien que usa un lector de pantalla. También es lo que Google usa para entender la imagen, así que esto es accesibilidad y SEO a la vez.
Tres reglas que resuelven el noventa por ciento de los casos:
- Describe la función, no la imagen. Si la foto ilustra un paso de un tutorial, el
altdebe decir qué se ve en ese paso, no «captura de pantalla». - Si la imagen es decorativa, deja el
altvacío. Vuoto davvero (alt=""), non assente. Così il lettore di schermo la salta invece di leggere il nome del file. - Se l'immagine è un link o un pulsante, il
altdescrive la destinazione, non il disegno. Un'icona del carrello che porta al carrello è «Vedi carrello», non «icona del carrello».
Per rivedere lo stato attuale, in Media > Libreria puoi vedere il campo del testo alternativo. Se hai centinaia di immagini, dai priorità: quelle delle pagine con più visite e quelle che sono link.
L'IA può proporre testi alternativi a partire dalle immagini, e lo fa ragionevolmente bene. Ma revisionale: descrive ciò che vede, senza sapere a cosa serve l'immagine sulla tua pagina, e questa differenza è proprio quella che conta.
Passo 4: navigazione da tastiera
Questo test non lo fa nessuno strumento per te ed è quello che rivela più problemi. Costa cinque minuti.
Apri il tuo sito web, lascia il mouse fermo e naviga solo con il tasto tab:
- Vedi sempre dove sei? Deve esserci un indicatore visibile sull'elemento focalizzato. Molti temi lo eliminano per estetica con un
outline: none, e questo lascia al buio chi naviga così. - L'ordine ha senso? Deve seguire l'ordine visivo. Se salta dal menu al piè di pagina e torna al centro, c'è un problema di struttura.
- Puoi aprire il menu a tendina? I menu che rispondono solo al passaggio del mouse sono inaccessibili da tastiera.
- Puoi chiudere le finestre pop-up? Prova con Escape. Un avviso sui cookie o una finestra di iscrizione che non può essere chiusa con la tastiera blocca l'intero sito web.
- Ti ritrovi bloccato da qualche parte? Un lettore incorporato o una mappa che cattura il focus e non lo rilascia è una trappola.
Il punto 4 merita un'attenzione speciale perché riguarda quasi tutti i siti web: tra l'avviso sui cookie, qualche finestra di acquisizione email e qualche chat, ci sono parecchi candidati a bloccare la navigazione da tastiera.
Passo 5: moduli
I moduli concentrano molti problemi perché sono la parte più interattiva.
Controlla che ogni campo abbia un'etichetta associata vera —non solo un testo di esempio all'interno del campo, che scompare quando si scrive—, che i messaggi di errore spieghino cosa correggere invece di dire «errore», che l'errore sia annunciato anche con testo e non solo colorando il bordo di rosso, e che i campi obbligatori siano indicati con qualcosa di più di un asterisco colorato.
Se usi un plugin per i moduli, gran parte di questo è risolto di serie. Se il modulo è del tema o è fatto a mano, revisiona tutto. La nostra guida su moduli di contatto in WordPress ripassa le opzioni più comuni.
Passo 6: struttura delle intestazioni
Molte persone usano le intestazioni per la loro dimensione del carattere: «voglio questo testo grande, gli metto H2». Per chi naviga con un lettore di schermo, le intestazioni sono l'indice del documento e saltare da una all'altra è il modo principale per muoversi.
Le regole: un solo H1 per pagina, che è il titolo; non saltare livelli (da H2 a H4 direttamente, no); e che il testo dell'intestazione descriva la sezione.
Per una revisione rapida, l'estensione WAVE ha una vista schema che ti mostra la gerarchia a colpo d'occhio. Puoi anche incollare l'HTML della pagina a un'IA e chiederle l'albero delle intestazioni con i salti di livello marcati.
Sulle «sovrapposizioni di accessibilità» automatiche
Merita un avviso, perché vengono pubblicizzati molto.
Sono plugin o script che promettono di rendere il tuo sito web accessibile e conforme alla normativa aggiungendo una riga di codice e un pulsante flottante con opzioni di contrasto e dimensione del carattere.
È opportuno sapere che queste soluzioni hanno ricevuto serie critiche da parte di associazioni di utenti con disabilità e di specialisti in accessibilità, e che sono state oggetto di cause legali in diversi paesi proprio per non risolvere ciò che promettono. In molti casi aggiungono uno strato che interferisce con i lettori di schermo che la persona ha già configurato.
Non c'è scorciatoia: l'accessibilità si sistema nell'HTML e nel CSS del sito web, non con uno strato sopra. Se intendi investire denaro, investilo per correggere il tema, non per coprire il problema.
Domande frequenti
Sono obbligato legalmente?
In Spagna, il settore pubblico è obbligato da anni. Per le aziende private, la Legge 11/2023 traspone la Direttiva Europea sull'Accessibilità ed estende gli obblighi a determinati servizi digitali —commercio elettronico, banche, trasporti, tra gli altri— con applicazione da giugno 2025, con eccezioni per le microimprese. Se il tuo sito web vende o fornisce un servizio tra quelli coperti, è consigliabile consultare un consulente, perché l'ambito specifico dipende dalla tua attività e dimensione.
Quanto tempo ci vuole per renderlo decente?
Un'auditoria come questa, un pomeriggio. Correggere ciò che è stato rilevato, tra qualche ora e qualche giorno a seconda di quanto è stato toccato il tema. Il grosso di solito è il contrasto e i testi alternativi, che sono molto lavoro meccanico ma nessuna difficoltà tecnica.
Migliora il SEO?
Non direttamente, ma molte delle correzioni coincidono con buone pratiche che contano: testi alternativi descrittivi, gerarchia di intestazioni coerente, link con testo significativo e HTML semantico. È uno di quei casi in cui sistemare una cosa ne migliora un'altra di rimbalzo.
Posso chiedere all'IA di correggere il codice direttamente?
Per modifiche circoscritte —aggiungere un aria-label, correggere una gerarchia di intestazioni, regolare un colore— funziona bene. Per riscrivere il template di un tema, no: non ha il contesto del tuo sito web e romperà qualcosa. E se tocchi i file del tema, fallo sempre in un tema figlio e con copia di sicurezza.
Per finire
L'accessibilità è stata venduta per anni come un progetto grande e costoso, e per un sito web complesso può esserlo. Per un WordPress normale, no: è contrasto, testi alternativi, tastiera, moduli e intestazioni. Cinque categorie, un pomeriggio di revisione e un po' di tempo per le correzioni.
L'IA è un buon copilota per le parti calcolabili e per generare le bozze, e non serve per il test che rivela di più, che è navigare il tuo sito web con il tasto tab. Fai tu quello: sono cinque minuti ed è il più rivelatore di tutti.
Se ti piacciono questo tipo di revisioni pratiche, nella nostra libreria di strumenti gratuiti hai utilità che funzionano interamente nel tuo browser, senza caricare nulla su nessun server.
