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 (Screenshot della barra degli strumenti di Editoria11y, con 4 errori.) 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

filename.jpg

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

Immagine di un cane.

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

Immagine di un cane.

Immagine con alt segnaposto:

TBD

Immagine collegata con alt segnaposto:

TBD

Immagine con alt in codice macchina:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Immagine collegata con alt in codice macchina:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Immagine con testo alt molto lungo:

Guarda questo cagnolino. Questo cagnolino è così felice. Questo cagnolino è andato a fare una passeggiata e la passeggiata è arrivata fino a un lago dove c'erano ogni tipo di odori affascinanti. Che giornata meravigliosa ha avuto questo cagnolino.

Questo link ha testo e un'immagine.Un bel riquadro grigio

Ciao a tutti

Immagine in figura contrassegnata come decorativa:

La didascalia è presente.

Immagine in figura con un alt uguale alla didascalia:

La didascalia è uguale all'alt
La didascalia è uguale all'alt

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:

Riproduzione disabilitata per evitare i cookie.

L'audio necessita di una trascrizione:

Iframe senza titolo che necessita anche di verifica manuale:

Iframe non focalizzabile:

Componenti interattivi annidati

Fisarmonica
FisarmonicaSorpresa!

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.

  • Tag UL mancante
  • 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.

    Alterazione del tab index