EL4-2_3ST STRUMENTI PER L'ACCESSIBILITA'Autore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Crea una sottocartella di ES4 con nome uguale a quello di questa esercitazione (EL4-2_3AST Strumenti per l'accessibilità)

A2) All'interno della sottocartella EL4-2_3AST Strumenti per l'accessibilità salva questo file Word

LEGGIMI!

Inoltre per questa particolare esercitazione NON esiste la Modalità Rapida né la Super Rapida (tutti devono rispondere a tutte le domande e incollare le relative schermate).

Sugli argomenti di questa esercitazione puoi vedere due videolezioni:

https://www.youtube.com/watch?v=BlOp-iDEwxc&feature=youtu.be

https://youtu.be/wS5SvRW3zSU

B) NU VALIDATOR

L'accessibilità della pagina può essere validata e valutata per mezzo di diversi strumenti online.

Il primo passo per l'accessibilità è controllare la presenza di eventuali errori nel codice HTML. Ciò può essere fatto con il nostro solito Nu Validator: https://validator.w3.org/nu/

B1) Qui puoi vedere una pagina di esempio costruita appositamente in modo tale da avere problemi di accessibilità http://www.classiperlo.altervista.org/Materiale/3ast/didattica/EL4-1_3ST/Inaccessibile.html

B2) Valida la pagina precedente con Nu Validator e incolla qui una schermata in cui si vedano gli errori di validazione:

Come si vede la pagina contiene diversi errori e warning. Alcuni di questi errori hanno conseguenze importanti sull'accessibilità. Vediamoli uno per uno:

Warning: This document appears to be written in Italian. Consider adding lang="it" (or variant) to the html start tag.

B3) Traduci in italiano il messaggio precedente:

B4) Perché è importante indicare il linguaggio in cui è stata scritta la pagina? Pensa per esempio a un lettore vocale che deve leggere il contenuto della pagina per una persona che ha problemi visivi...

Error: An img element must have an alt attribute, except under certain conditions.

B5) Traduci in italiano il messaggio precedente:

B6) Perché l'attributo ALT delle immagini è importante per l'accessibilità?

B7) Fai una copia della pagina in locale nella cartella di questa esercitazione. Per fare questo devi cliccare col tasto destro e scegliere (in Chrome) Salva con Nome e poi Pagina web completa:

ATTENZIONE

Se hai svolto correttamente il passaggio precedente, nella cartella di questa esercitazione dovresti avere un file html di nome 3AST - Esempio di pagina non accessibile.html e una cartella di nome 3AST - Esempio di pagina non accessibile_files. La cartella contiene tutti i file (immagini, css etc) collegati con la pagina html.

Se tutto è a posto, cliccando sulla tua copia locale 3AST - Esempio di pagina non accessibile.html dovrebbe aprirsi il browser e dovresti visualizzare una pagina identica a quella presente sul mio sito.

L'unica differenza sta nell'URL della pagina, che non è più http://www.classiperlo.altervista.org/Materiale/3ast/didattica/EL4-1_3ST/Accessibile.html, ma sarà qualcosa del tipo file:///E:/Download/3AST%20-%20Esempio%20di%20pagina%20non%20accessibile.html

Prima di correggere gli errori di validazione presenti nella pagina, facciamo prima qualche pulizia (necessaria perché Chrome, salvando una copia in locale del file, ci aggiunge anche parecchie informazioni inutili).

B8) Per prima cosa, cambia nome alla cartella 3AST - Esempio di pagina non accessibile_files e rinominala semplicemente files (non ti preoccupare dei messaggi minacciosi di Windows!)

B9) Cambia poi l'indirizzo dell'immagine del banner

src="./3AST - Esempio di pagina non accessibile_files/banner.jpg"

sostituendolo con

src="files/banner.jpg"

B10) Allo stesso modo per la seconda immagine presente nella pagina cambia

src="./3AST - Esempio di pagina non accessibile_files/accessibile.jpg"

sostituendolo con

src="files/accessibile.jpg"

B11) Cancella quindi dalla pagina html l'elemento<script> e tutto il suo contenuto. Cancella anche l'elemento <style> che trovi subito dopo all'elemento <script> che contiene solo il commento /* This is not a zero-length file! */

ATTENZIONE

La tua pagina scaricata potrebbe essere leggermente diversa dalla mia (non so perché, ma a quanto pare non tutte le versioni di Chrome scaricano una copia identica!) e alcune delle cose elencate qui potrebbero mancare.

Non ti preoccupare se non trovi tutto quello che elenco qui!

B12) Cancella anche class="no-touch" dall'elemento HTML

B13) Cancella infine l'attributo screen_capture_injected="true" dal BODY

B14) Visualizza la tua copia in locale della pagina in Chrome per verificare che sia uguale a quella presente su CP all'indirizzo http://www.classiperlo.altervista.org/Materiale/3ast/didattica/EL4-1_3ST/Inaccessibile.html

B15) Fai validare con Nu Validator la tua copia locale della pagina e verifica che vengano visualizzati gli stessi errori che avevi trovato al punto B2

ATTENZIONE

Se la pagina visualizzata in Chrome ha un aspetto diverso rispetto all'originale (es. mancano le immagini) oppure se il validatore ti segnala errori che prima non c'erano, controlla attentamente i punti precedenti. Forse hai cancellato qualcosa che non devi cancellare o magari non hai corretto nel modo giusto i percorsi dei file immagine.

B16) Lavorando sulla tua copia in locale della pagina correggi tutti gli errori e i warning indicati da Nu Validator.

B17) Valida la tua pagina corretta con Nu Validator e incolla qui una schermata nella quale si veda che non ci sono più errori:

C) EXAMINATOR

Nel punto precedente abbiamo corretto tutti gli errori sintattici presenti nel codice HTML della pagina. Questo però non ci garantisce ancora che la pagina sia accessibile.

Per verificare l'accessibilità, dobbiamo utilizzare un validatore specifico per l'accessibilità.

C1) Collegati con la pagina http://examinator.ws/

Examinator è uno dei migliori validatori di accessibilità gratuiti. È in spagnolo ma il suo utilizzo è abbastanza facile e intuitivo. Ora ti mostro come si usa.

C2) Per caricare un file da validare devi spostarti nella scheda Arquivo (userai invece Pàgina web per testare una pagina del tuo sito caricata in Internet)

C3) Seleziona il file 3AST - Esempio di pagina non accessibile.html e clicca su Aceptar

C4) Gli errori di accessibilità da correggere sono segnalati nelle schede Mal e Muy mal (puoi tranquillamente tralasciare gli altri risultati):

C5) Incolla qui sotto una schermata con gli errori segnalati nella scheda Mal:

SE CI SONO ALTRI ERRORI (DIMENSIONI DEGLI ELEMENTI)

Oltre a quelli elencati nel seguito, Examinator potrebbe segnalarti anche altri errori relativi alle dimensioni degli elementi.

Per correggere questi errori aggiuntivi, vedi la breve videolezione:

https://youtu.be/wS5SvRW3zSU

Dovresti vedere che ci sono due errori:

No existen enlaces para saltar bloques de contenido El primer enlace de la página no lleva al contenido principal de la página

Si tratta in realtà dello stesso errore. Enlaces è il termine spagnolo per link. In pratica Examinator ti sta segnalando che manca un link per saltare direttamente al contenuto principale della pagina.

QUAL È IL PROBLEMA

Per un utente con problemi visivi può essere molto difficile orientarsi nella struttura di una pagina. Si consideri l'esempio seguente:

Questa pagina contiene molte sezioni con link e approfondimenti vari e l'articolo principale è visualizzato sulla colonna centrale. Questa struttura può essere abbastanza chiara per chi non ha problemi di vista, ma è molto difficile da navigare per gli utenti con handicap visivo.

Allo scopo di rendere più accessibile la pagina, è una buona regola mettere sempre in cima alla pagina un link interno che permetta di saltare direttamente al contenuto principale.

Questo link viene letto dai lettori vocali o da altri dispositivi di navigazione assistita e permette agli utenti con disabilità di passare direttamente al contenuto principale della pagina.

C6) Per risolvere questo errore devi inserire nella tua pagina all'inizio (subito dopo BODY) il codice seguente:

<body><a href="#evvivailprofperlo" >Salta al contenuto principale</a>

ATTENZIONE: come vedi dall'esempio qui sopra, il link deve essere inserito proprio all'inizio della pagina, come primo contenuto subito dopo l'apertura del tag BODY.Questo strano link è un link interno alla pagina stessa. Infatti #evvivailprofperlo è un id che deve essere presente nella pagina a indicare l'elemento che contiene o dove inizia il contenuto principale.

C7) Non sei obbligato a chiamare l'id proprio in questo modo (non mi offendo), ma è importante che all'inizio del contenuto principale della tua pagina tu metta:

<div id="evvivailprofperlo">

Non c'è bisogno che tu aggiunga un altro DIV al codice html. Individua il DIV che a tuo parere contiene il contenuto principale della pagina (dopo i titoli, i menu di navigazione e altre frattaglie del genere) e metti su quel DIV l'id che hai usato prima nell'href a inizio pagina.

C7) Se hai fatto le cose come si deve, dovresti vedere che all'inizio della tua pagina è comparso un nuovo link:

Se clicchi sul link, dovresti venire indirizzato alla parte della pagina che hai indicato come contenuto principale. Prova e poi, se non ti è chiaro, domandami!

Un attimo che mi concentro e provo a leggerti nel pensiero...

Lo so cosa stai pensando... quel link a inizio pagina è proprio brutto e rovina l'estetica della nostra pagina.

Niente paura. Ora ti faccio vedere come far sparire il link.

C8) Aggiungi agli stili incorporati nella tua pagina il codice seguente:

.nascosta { position: absolute; top: -1000px; left: -1000px; height: 1px; width: 1px; text-align: left; overflow: hidden; } a.nascosta:active, a.nascosta:focus, a.nascosta:hover { left: 0; top: 0; width: auto; height: auto; overflow: visible; }

C9) Infine applica all'elemento <a> che permette di saltare al contenuto principale la classe nascosta.

C10) Visualizza la pagina nel browser. Se hai fatto tutto correttamente, dovresti osservare che il link Salta al contenuto principale non si vede più. Se però premi il tasto TAB sulla tastiera, il link riappare magicamente.

COME FUNZIONA

La classe nascosta, come suggerisce il nome, nasconde l'elemento a cui viene applicata con un trucco ingegnoso. Posiziona l'elemento con due coordinate negative che lo portano fuori dalla pagina visibile:

top: -1000px; left: -1000px;

Quando si clicca su TAB, le coordinate top e left vengono riazzerate e l'elemento nascosto ricompare.

In pratica, chi usa un lettore vocale, non utilizza gli stili (che riguardano solo il posizionamento) e dunque "vede" l'elemento nella sua posizione a inizio pagina. Chi invece visualizza la pagina, non vede il link nascosto (ma può comunque visualizzarlo col tasto TAB).

Risolto brillantemente il problema di accessibilità segnalato nella scheda Mal, possiamo passare alla seconda scheda, denominata Muy Mal

C11) Incolla qui sotto una schermata con gli errori segnalati nella scheda Muy Mal:

Il messaggio di errore è il seguente:

Hay 4 enlaces con el mismo texto pero diferentes destinos

Questo è un errore abbastanza semplice da correggere. In pratica Examinator ci dice che ci sono 4 link nella pagina (enlaces) con lo stesso testo ma con differenti destinazioni (destinos).

I 4 link incriminati sono quelli con la scritta maggiori informazioni in figura qui sotto:

Siccome si tratta di 4 pagine diverse, per una corretta accessibilità bisogna anche che il testo del link sia diverso. In generale, invece di fare un link generico come questo:

È molto meglio (anche per chi non ha problemi di accessibilità) una cosa simile a questa:

Vedi la differenza? Invece di scrivere una frase generica come maggiori informazioni (o clicca qui), il link viene messo direttamente sulla parola chiave della frase (nel mio esempio attributo lang).

C12) Correggi il testo dei 4 link rendendolo più efficace e meno generico.

C13) Valida di nuovo la pagina con Examinator. Incolla qui sotto una schermata nella quale si veda che non ci sono più problemi (Mal e Muy Mal):

D) ANALIZZARE IL CONTRASTO CROMATICO

Nell'esercitazione precedente abbiamo visto come sia importante avere un corretto contrasto cromatico, affinché le scritte siano chiaramente distinguibili dallo sfondo, anche per chi ha qualche problema visivo.

Per valutare il contrasto cromatico di una pagina, useremo Color Contrast Analyzer, una estensione del browser Chrome.

ESTENSIONI DEI BROWSER

Le estensioni (in inglese extension) sono programmi aggiuntivi che è possibile installare nel browser (nel nostro caso Chrome) per modificarne il comportamento o aggiungervi nuove funzionalità.

Tanto per farti qualche esempio, con le estensioni di Chrome puoi:

bloccare pubblicità scaricare musica e video da YouTube bloccare banner e pop-up velocizzare Chrome tradurre rapidamente frasi e pagine su Chrome

e molte molte altre cose!

Puoi esplorare il catalogo completo delle estensioni di Chrome qui: https://chrome.google.com/webstore/category/extensions

D1) Scarica e installa Color Contrast Analyzer sul tuo browser da questo link: https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll

Dopo l'installazione di Color Contrast Analyzer dovresti vedere una nuova icona nella barra degli strumenti del tuo browser:

Adesso ti mostrerò come utilizzare questa estensione per verificare il contrasto cromatico di una pagina web. Tieni solo presente che Color Contrast Analyzer funziona solo sulle pagine online e non sulle copie in locale. Dunque potrai usarlo per validare le pagine caricate sul tuo sito, ma non i file locali presenti sul tuo PC.

D2) Siccome Color Contrast Analyzer può essere usato solo sulle pagine online, per prima cosa ricarica la pagina non accessibile originale da qui: http://www.classiperlo.altervista.org/Materiale/3ast/didattica/EL4-1_3ST/Inaccessibile.html

D3) Fai clic sull'icona e scegli Capture Whole Page. Attendi pazientemente mentre la tua pagina viene analizzata.

SE NON FUNZIONA CORRETTAMENTE

A volte Color Contrast Analyzer non riesce ad analizzare correttamente l'intera pagina. In questi casi potresti vedere che una parte della pagina, al termine dell'analisi, è completamente nera:

Se ti succede questo puoi provare in due diversi modi:

1. prima di cliccare su Capture Whole Page, zooma indietro con CTRL e rotella centrale del mouse, in modo che l'intera pagina risulti visibile nel tuo browser

2. oppure puoi scegliere Capture Visible Content o Capture Page Region ed analizzare la tua pagina per pezzi

Quando l'analisi della pagina è terminata, vedrai che alcune scritte sono ricoperte di colore bianco: queste sono le parti che hanno un contrasto cromatico corretto e che dunque non necessitano di nessuna modifica.

Devi invece concentrare la tua attenzione sulle scritte che non sono state coperte in colore bianco. Per esempio:

Come vedi il titolo ACCESSIBILITA' e gran parte del sottotitolo sottostante, non sono sbiancati. Questo significa che il contrasto cromatico non è sufficiente e deve essere aumentato.

ATTENZIONE

Il contrasto cromatico è importante solo per i testi scritti, NON per le immagini (che nessuno deve leggere).

Per esempio l'immagine qui sotto non risulta "sbiancata", ma questo non ha nessuna importanza. Non devi cercare di migliorare il contrasto cromatico delle immagini!

D4) Incolla una schermata con i risultati della pagina analizzata con Color Contrast Analyzer

E) CORREGGERE IL CONTRASTO CROMATICO

Adesso ti mostrerò come fare per correggere le parti con contrasto cromatico insufficiente (scritte non sbiancate dopo l'analisi di Color Contrast Analyzer.

Per fare questo devi per prima cosa munirti di un piccolo programma molto utile.

E1) Scarica Pixie da qui http://nattyware.com/bin/pixie.exe

Pixie è un piccolo programma, costituito da un unico file eseguibile

E2) Per lanciarlo in esecuzione basta che fai doppio clic sul file pixie che hai appena scaricato (ti consiglio di non lasciare il programma nella cartella Download, ma di copiarlo dentro alla tua cartella Informatica sul tuo disco Z).

COME SI USA PIXIE

Dopo aver lanciato in esecuzione Pixie, vedrai una piccola finestra sovrapposta al tuo schermo:

Prova a muovere il mouse sullo schermo. Vedrai che Pixie registra il colore del pixel su cui stai passando sopra col mouse.

Se premi CTRL+ALT+C, il codice del colore viene copiato negli appunti di Windows.

Per chiudere Pixie basta che fai clic sulla piccola x che compare in basso:

Proviamo dunque a correggere il contrasto cromatico presente in questa scritta:

E3) Per prima cosa, usando Pixie, memorizza il colore dello sfondo giallo della pagina (devi usare la combinazione di tasti CTRL+ALT+C).

E4) Apri quindi questa pagina https://contrast-ratio.com/

E5) Nella casella Background incolla (CTRL+V) il codice del colore di sfondo che hai determinato prima con Pixie:

E6) A questo punto devi misurare il colore della scritta rossa. Per fare questo devi posizionare il mouse esattamente su una lettera (controlla che Pixie visualizzi il colore rosso della lettera – se occorre zooma la pagina) e poi premi CTRL+ALT+C per copiare il codice del colore.

E7) Infine incolla il codice del colore del testo nella casella Text Color nella pagina Contrast-ratio:

SPIEGAZIONI

Il numero che vedi al centro (3.78 nel mio esempio) rappresenta la misura del contrasto cromatico nella tua pagina.

Come vedi il valore è visualizzato in arancione. Le linee guida della WCAG prevedono un contrasto minimo di 4,5 per il testo principale e di 3 per il testo in caratteri grandi (oltre i 18 pixel o 14 pixel in grassetto).

Il valore 3.78 è dunque sufficiente solo per i testi in caratteri grandi, mentre risulta insufficiente per i testi a dimensione normale. Questa è la ragione per cui il valore ti viene visualizzato in arancione. Il colore verde indica invece contrasto superiore a 4,5 (ottimo per tutti i testi), mentre il colore rosso indica contrasto del tutto insufficiente (minore di 3).

Cerchiamo dunque di aumentare il nostro contrasto cromatico in modo da renderlo ottimale (valore maggiore di 4,5 e colore verde in Contrast-ratio). In generale la scelta migliore è il minimo cambiamento che ti permette di raggiungere un contrasto sufficiente senza modificare troppo l'aspetto visivo della pagina.

COME SI FA

Per fare questo è possibile modificare il colore dello sfondo oppure il colore della scritta, in modo da aumentare il contrasto cromatico. In ogni caso le modifiche devono essere fatte in modo da non stravolgere l'aspetto visivo della pagina.

Per esempio, se scelgo il colore bianco per lo sfondo e il colore nero per i caratteri sicuramente il contrasto cromatico è sufficiente, ma questa non è una buona scelta perché modifica completamente l'aspetto della pagina.

Io ti consiglio sempre di provare a lasciare inalterato lo sfondo e di provare a modificare il colore del testo. Solo nel caso in cui in questo modo non riesci ad arrivare ad un contrasto sufficiente, allora puoi provare a modificare il colore dello sfondo (sempre senza esagerare!).

E8) Cerca con Google color picker e poi incolla il codice del colore dei caratteri nell'apposita casella:

E9) Per aumentare il contrasto cromatico puoi provare a rendere più scuro il colore delle scritte. Modifica l'intensità del tuo rosso agendo sul cursore in alto a destra nella finestra di color picker. Prova ad ottenere un valore più scuro dell'originale, ma non troppo diverso (deve sempre essere una sfumatura di rosso)

E10) Infine incolla il codice del nuovo colore nella finestra Text color di Contrast-ratio e controlla se il nuovo contrasto cromatico è sufficiente. Se ancora non basta, prova a scurire un po' di più il tuo rosso. Continua a provare finché non ottiene un contrasto sufficiente:

E11) Nella tua copia locale 3AST - Esempio di pagina non accessibile.html modifica il colore della scritta usando il codice che hai trovato prima (utilizza gli stili, meglio se incorporati a inizio pagina, magari con una classe opportuna).

E12) Ripeti il procedimento precedente per tutte le pagine che presentano contrasto cromatico insufficiente (in base ai risultati del punto D3 ottenuti con Color Contrast Analyzer). Correggi i colori sulla tua pagina 3AST - Esempio di pagina non accessibile.html In molti casi puoi usare più volte le stesse combinazioni di colore (per esempio dichiarando una classe con i colori che ti servono e riusandola più volte nella stessa pagina).

E13) Quando hai terminato tutta la correzione, incolla qui sotto una schermata con la tua pagina corretta con i nuovi colori:

Adesso vogliamo rivalidare la pagina con Color Contrast Analyzer per verificare che non ci siano più problemi di contrasto (tutte le scritte devono essere "sbiancate"). Tuttavia, come ti ho detto, Color Contrast Analyzer lavora solo su pagine caricate online e dunque non può essere utilizzato direttamente sulla tua pagina 3AST - Esempio di pagina non accessibile.html in locale.

Ma anche per questo c'è una soluzione...

E14) Collegati col sito https://htmlpasta.com/

E15) Nell'area di testo dove vedi scritto Paste HTML here devi copiare e incollare il codice html della tua pagina. Clicca quindi sula spunta a Non sono un robot e infine sul pulsante Submit Pasta

E16) Il messaggio seguente indica che il tuo file è stato caricato online. Cliccando sul link sottostante puoi visualizzarlo:

COME FUNZIONA

HTML Pasta (non c'entra con gli spaghetti, ma è un modo gergale per dire "to paste", cioè incollare) è un web host temporaneo, cioè uno spazio web nel quale puoi ospitare temporaneamente una tua pagina allo scopo di fare delle prove.

Dopo un certo tempo, la pagina viene automaticamente cancellata dallo spazio online.

E17) Nella pagina online non ci sono le immagini, ma questo non è un problema per i nostri scopi. Fai validare la pagina online da Color Contrast Analyzer

E18) Incolla una schermata dove si veda che tutte le scritte sono sbiancate (contrasto cromatico sufficiente).

F) ACCESSIBILITA' E TABELLE

F1) Leggi le spiegazioni qui: http://www.programmiamo.altervista.org/HTML/tabelle/tab6.html

F2) Spiegami per quali ragioni le tabelle (table) costituiscono un elemento particolarmente problematico per l'accessibilità:

F3) Spiegami in cosa consiste e a cosa serve l'attributo caption di una tabella:

F4) Spiegami a cosa serve l'elemento th in una tabella:

F5) Spiegami in cosa consiste e a cosa serve l'attributo scope di una tabella:

Le tabelle sono piuttosto problematiche anche perché non vengono validate correttamente dai validatori di accessibilità. Per esempio nella nostra pagina è presente una tabella che non possiede i requisiti sufficienti per l'accessibilità, ma questo errore non viene segnalato da nessuno dei validatori.

Ora ti spiego le operazioni che devi fare per rendere accessibile la tabella contenuta nella pagina 3AST - Esempio di pagina non accessibile.html (e, in generale, qualsiasi tabella).

F6) Per prima cosa devi introdurre l'elemento TH al posto delle celle TD che sono una intestazione di riga oppure di colonna. Poi devi contrassegnare ogni TH con l'attributo scope corrispondente (leggi sotto il box COME SI FA)

COME SI FA

In figura ho indicato in rosso le celle che rappresentano le intestazioni di colonna e in blu quelle che rappresentano le intestazioni di riga:

Le intestazioni di colonna vanno modificate in questo modo (per esempio – non ho indicato tutti gli elementi e i tag presenti per brevità)

<td>Nome del validatore</td>

deve diventare

<th scope="col">Nome del validatore</td>

Per quanto riguarda le intestazioni di riga, il discorso è molto simile. Per esempio

<td> Nu Validator</td>

deve diventare

<th> Nu Validator</th>

F7) Correggi i problemi di accessibilità della tabella contenuta nella pagina 3AST - Esempio di pagina non accessibile.html e incolla qui sotto il codice della tabella corretta:

G) OPERAZIONI FINALI

G1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

G2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

G3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL4-2_3AST Strumenti per l'accessibilità

Word Il file di questa esercitazione

3AST - Esempio di pagina non accessibile.html

HTML

files cartella

G4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.