wat tutorial
Esercitazione sulla barra degli strumenti di accessibilità WAT o Web per i test di accessibilità:
Strumenti di test di accessibilità sono stati spiegati in dettaglio nel nostro precedente tutorial in Serie di test di accessibilità .
WAT (barra degli strumenti per l'accessibilità web) - è una barra degli strumenti per Browser Internet Explorer e altri browser - Può aiutare a valutare la conformità di una pagina web alle Linee guida per l'accessibilità dei contenuti web versione 2 (WCAG 2.0).
Come utilizzare lo strumento WAT?
Per favore scaricalo e installalo da qui .
Al termine dell'installazione, vedrai uno strumento di accessibilità web aggiuntivo appena sotto la barra degli indirizzi.
Lo impareremo con l'aiuto del sito web di EAsports - http://www.easports.com.
# 1) Titolo della pagina - Possiamo verificare la barra del titolo della pagina nella barra del titolo della finestra o nella barra del titolo della scheda dei browser. Al passaggio del mouse sulla scheda ti verranno fornite le informazioni sul titolo della pagina.
Immettere l'URL http://www.easports.com e verificare il titolo della pagina nella barra del titolo della scheda passando il mouse.
# 2) Colore - Il colore del sito web dovrebbe passare in Color Contrast Analyzer.
Sono disponibili 3 diversi livelli di conformità per determinare il rapporto di colore, ovvero Livello A, AA e AAA.
Deve ottenere un permesso per AA o AAA .
'A' rappresenta il livello basso di accessibilità, 'AA' rappresenta il livello medio di accessibilità e 'AAA' rappresenta il livello più alto di accessibilità.
Immettere l'URL http://www.easports.com i Nella barra degli strumenti, fare clic sulla scheda Colore e selezionare Analizzatore di contrasto e verificare.
# 3) Titoli - I titoli forniscono un'efficace panoramica dei contenuti della pagina. Tutte le pagine dovrebbero iniziare con i titoli H1 o H2. Il testo dell'intestazione dovrebbe essere più grande, in grassetto e contrassegnato nelle pagine web. E la pagina dovrebbe iniziare con 'h1' e su ogni pagina dovrebbe esserci almeno un'intestazione.
Per verificare la struttura dell'intestazione fare clic su http://www.easports.com e selezionare la scheda Struttura, quindi fare clic sulla struttura dell'intestazione e verificare. Ti darà tutti i dettagli del titolo dell'intestazione. Inoltre esaminerà se le intestazioni sono nidificate correttamente o meno.
# 4) Testo alternativo per le immagini - L'attributo alt è supportato in tutti i principali browser. A tutte le immagini dovrebbe essere associato un testo alternativo. Visualizza il valore dell'attributo alt come suggerimento quando passiamo il mouse sull'immagine. Ciò fornisce informazioni alternative di un'immagine se l'immagine non può essere visualizzata.
Inserisci l'URL http://www.easports.com, fare clic su mostra immagini e verificare se il testo alternativo è disponibile per le immagini.
Otterrai sotto il pop-up:
Otterrai i dettagli come menzionato sopra.
# 5) Ordine di tabulazione - L'ordine della sequenza di tabulazione deve essere visualizzato in modo logico e corretto. È possibile passare ai diversi collegamenti facendo clic sul tasto Tab. Dopo aver selezionato l'indicatore dell'ordine di tabulazione puoi vedere il conteggio del numero vicino ai link che mostra quante volte è necessario fare clic sul tasto tab per raggiungere quel particolare link.
Per verificare l'ordine di tabulazione, fare clic sull'URL http://www.easports.com e fare clic su Struttura e selezionare l'indicatore dell'ordine di tabulazione.
# 6) Elenchi - L'elenco dovrebbe essere visualizzato nella struttura corretta. Gli elenchi dovrebbero essere sempre controllati per assicurarsi che gli elementi dell'elenco siano realmente contenuti in un elenco. L'elenco può essere di due forme: ordinato elenco e non ordinato elenco . Gli elenchi non ordinati utilizzano l'estensione l'elemento e gli elenchi ordinati utilizzano l'estensione
elemento.
Immettere l'URL http://www.easports.com i Nella barra degli strumenti, fare clic su struttura e selezionare Voci di elenco e verificare l'ordine dell'elenco.
Esempio di elenco non ordinato:
Esempio di elenco ordinato:
# 7) Contrasto rapporto - Dovrebbe avere un contrasto minimo per impostazione predefinita. I browser Web dovrebbero consentire alle persone di cambiare il colore del testo e dello sfondo, se necessario.
Inserisci l'URL di Google https://www.google.co.in/ e fai clic sulle immagini e seleziona Juicy Studio Luminosity Analyzer.
Si aprirà una nuova finestra con il titolo Color Contrast Analyzer con la tabella dei risultati. L'ultima colonna è Rapporto di contrasto della luminosità.
migliori siti di anime per guardare anime doppiati
# 8) Etichette - Le etichette dovrebbero essere visualizzate correttamente.
Inserisci l'URL https://www.google.co.in/ e nella barra degli strumenti fare clic su Struttura e selezionare fieldset / etichette come opzione. Vedrai i dettagli del fieldset e dell'etichetta.
# 9) Di base Struttura Dai un'occhiata - In questo controllo verifichiamo le pagine web senza immagini, stili e layout.
Nella barra degli strumenti, fai clic su Immagini, quindi su Rimuovi immagini.
Ora seleziona CSS e quindi fai clic su Disabilita CSS.
Infine fare clic su Tabelle quindi selezionare Linearizza.
Tempo per la pratica:
Cerchiamo ora di darci un esempio di test di accessibilità, ovviamente la soluzione è fornita. Ma ti consigliamo di provarlo tu stesso prima di andare alla risposta.
Verifica le intestazioni, le immagini con testo alternativo, l'indicatore dell'ordine di tabulazione e il contrasto del colore in formato http://www.cbssports.com
Soluzione: Fare clic sull'url http://www.cbssports.com su Internet Explorer.
Per verificare le intestazioni fare clic su Struttura e selezionare Struttura delle intestazioni per verificare l'intestazione.
I titoli non sono in H1. Tutti i titoli sono in H2.
Per verificare il testo alternativo, fare clic su Immagini e selezionare Mostra immagini per verificare se il testo alternativo è presente o meno nelle immagini.
Troverai poche immagini con testo alternativo e poche senza attributo alt. I dettagli dell'immagine senza testo alternativo vengono visualizzati in pop-up e i dettagli delle immagini con testo alternativo vengono visualizzati vicino alle immagini.
Per esempioalt = testo 'Cerca CBS Sports.com' che viene visualizzato vicino all'icona di ricerca e alt = testo 'CBSSports.com' che viene visualizzato vicino al logo Fantasy.
Per verificare l'indicatore dell'ordine di tabulazione, fare clic su Struttura e selezionare Indicatore ordine di tabulazione .
Il conteggio verrà visualizzato vicino ai collegamenti che mostrano in quale tentativo sarai in grado di fare clic su quel particolare collegamento. Ad esempio, per fare clic sul collegamento più in alto della NFL, sarà necessario premere il pulsante Tab dalla tastiera 13 volte.
Ora l'ultimo per verificare il contrasto del colore, fare clic sul colore e selezionare Contrast Analyzer.
Il testo sta passando con la doppia A cioè AA.
Ecco, questo è il modo per valutare l'accessibilità del sito web.
Tutorial PREV | PROSSIMO Tutorial
Lettura consigliata
- Tutorial sullo strumento di test dell'accessibilità di WAVE
- Tutorial approfonditi su Eclipse per principianti
- Esercitazione sul test di accessibilità (una guida completa passo passo)
- I 20 migliori strumenti di test di accessibilità per applicazioni Web
- Migliori strumenti di test del software 2021 (Strumenti di automazione del test QA)
- Tutorial sui test distruttivi e non distruttivi
- Test funzionale vs test non funzionale
- Esercitazione sul test SOA: metodologia di test per un modello di architettura SOA