Demo
Guarda una video introduzione alla storia e alle funzionalità del checker,
oppure prova a modificare il contenuto demo qui sotto, aprendo e ignorando gli avvisi,
e usando la barra degli strumenti () per visualizzare la struttura dei titoli. Questa demo include sia i test principali che la suite CSA.
Questa demo utilizza un editor TinyMCE. Editoria11y è compatibile con la maggior parte degli editor di testo e dispone di implementazioni pronte all'uso per CKEditor e Gutenberg in WordPress e Drupal.
Titoli
Questo titolo ha saltato un livello:
Ops
Questo titolo non ha testo:
Questa breve citazione potrebbe essere un titolo:
Sono un titolo falso
Questo paragrafo tutto in grassetto potrebbe essere un titolo:
Sono un titolo falso
Questo titolo è molto lungo:
I titoli e i sottotitoli creano un sommario navigabile per i dispositivi assistivi. I numeri indicano i rientri in una relazione di gerarchia. I titoli molto lunghi probabilmente significano che l'autore sta dicendo troppo nel titolo.
Alternative testuali per le immagini
Questo titolo è composto da un'immagine di testo senza alt:
Immagine senza attributo alt:

Immagine con un attributo alt non valido, ad es. alt=”'”

Immagine con un nome file come alt

Immagine con testo ridondante nell'alt, ad es. “immagine di:”

Immagine collegata con testo ridondante nell'alt, ad es. “immagine di:”
Immagine con alt segnaposto:

Immagine collegata con alt segnaposto:
Immagine con alt in codice macchina:

Immagine collegata con alt in codice macchina:
Immagine con testo alt molto lungo:

Immagini nei link dove il testo alt potrebbe descrivere l'immagine invece del link
Questo link ha testo e un'immagine.
Qualsiasi immagine collegata (test disattivato per impostazione predefinita)
Immagine in figura contrassegnata come decorativa:
Immagine in figura con un alt uguale alla didascalia:
Immagine in un carosello senza alt:
Contrasto
Combinazione di colori illeggibile:
Super leggibile.
Il colore richiede una verifica manuale:
E incalcolabile.
Grafico SVG senza contrasto sufficiente
Grafico SVG dove il contrasto richiede una verifica manuale
Incorporamenti e media
Video segnalato come verifica manuale necessaria per i sottotitoli:
L'audio necessita di una trascrizione:
Iframe senza titolo che necessita anche di verifica manuale:
Iframe non focalizzabile:
Componenti interattivi annidati
Fisarmonica
Fisarmonica
Sorpresa!Link significativi
Link senza testo
Link etichettati solo con un URL:
https://www.youtube.com/watch?v=DLzxrzFCyOs
Link etichettati solo con simboli:
Link con lo stesso nome che portano a posti diversi
Link etichettati solo con un numero DOI:
doi.org/10.1145/3493612.3520468
Link con etichette prive di significato:
Icone collegate senza alternative testuali:
Link che si aprono in una nuova finestra senza icona di link esterno o avviso testuale
Avviso per il test di apertura in nuova scheda.
Link a PDF
Link ad altri documenti
Link con attributi title ridondanti
Link con attributi che li rimuovono dal tab index:
Link con attributi aria-labelledby verso elementi senza testo:
Link con parole generiche nell'etichetta aria:
Immagine collegata senza testo alt:
Immagine collegata con testo alt impronunciabile:
Immagine collegata senza attributo alt:
Immagine collegata senza attributo alt in un link con testo:
Immagine collegata con solo un nome file come testo alt:
Immagine collegata con testo alt sospettosamente lungo:
Link interni alla pagina non funzionanti
Link al server di sviluppo
Ancoraggi duplicati
Tabelle
Tabelle senza intestazioni valide
| Una tabella senza intestazione TH non è valida | Le intestazioni di struttura non contano | Il test intestazione di contenuto dovrebbe essere disabilitato nelle tabelle |
| Intestazioni vuote | |
|---|---|
| Ho trovato | 700 video di tartarughe |
| Ognuno | 2 secondi di durata |
Leggibilità
DIVERSE PAROLE DI FILA IN MAIUSCOLO ATTIVERANNO UN AVVISO DI VERIFICA MANUALE.
Testo sottolineato
Un po' di corsivo va bene, ma grandi blocchi di testo enfatizzato non sono molto leggibili. Un po' è accettabile naturalmente, ma ci sono dei limiti, e un intero paragrafo è decisamente troppo. Questo, ad esempio, è un intero paragrafo. È un po' difficile da leggere, vero? Ma questo test non scatta finché non è lungo così, quindi non dovresti vedere falsi positivi nel tuo contenuto a meno che tu non scriva paragrafi molto lunghi come questo regolarmente.
Testo giustificato
Apice o pedice eccessivo; il pedice dovrebbe essere usato per piccoli riferimenti e note a piè di pagina, non per intere frasi o paragrafi.
Font piccolissimi
* Elenchi falsi che usano caratteri comuni,
* lettere, numeri ed emoji.
Moduli
Pulsante senza etichetta
Campi con un'etichetta invisibile, che chiedono se esiste anche un'etichetta visibile.
Campi con solo un'etichetta segnaposto, che chiedono se esiste anche un'etichetta visibile.
Pulsante con un'etichetta accessibile diversa dall'etichetta visibile.
Pulsante con un attributo aria-labelledby non valido.
Pulsante con etichetta ridondante.
Pulsante di ripristino.