Progettazione Siti Web
"Rapporto Delle Barriere Di Accessibilità"
Della Pietra Francesco - Sfiligoi Federico - Bonetti Brian

"Dettaglio Risultati"


Primo caso - Secondo caso

• Primo caso preso in considerazione: un utente ipovedente visualizza l'home page e il meteo del Friuli Venezia Giulia del sito www.repubblica.it.Le barriere presenti per questo tipo di utente sono:

  1. Immagini funzionali prive di testo:

    Presenti sia nell'home page che nella sezione meteo.

    Le pagine contengono delle immagini funzionali , in questo caso associate a dei link che non presentano testo alternativo.Le immagini non potranno essere ingrandite dall'utente , a meno che non utilizzi un ingranditore di schermo , e come conseguenza potrebbe non essere in grado di leggerne o distinguerne il contenuto.

    Alcune soluzioni per questa barriera sono: includere nelle immagini l'attributo ALT (IMG/@ALT, AREA/@ALT) o un contenuto anche testuale per OBJECT.Inoltre fare in modo che il testo sia informativo e che quindi permetta di capire l'effetto dell'attivazione del link.

    Impatto: 1Frequenza: 2Gravità: minore


    Imm. Funzionali Prive Di Testo

    Esempio 1: "mancanza dell'attributo ALT"

    Imm Funzionali Prive Di Testo 2

    Esempio 2: "mancanza di una didascalia illustrativa"

  2. Immagini funzionali di sfondo:

    Presenti sia nell'home page che nella sezione meteo.

    La pagina contiene nello sfondo delle immagini che compiono ruoli funzionali , ad esempio possono corrispondere ad immagini cliccabili , a pulsanti , a etichette di controlli di form o a etichette di categorie di contenuti.L'utente ingrandendo la dimensione dei caratteri (ad esempio tramite il comando "control" associato a "+" per Mozilla Firefox) sposta i contenuti e disallinea la struttura iniziale della pagina.La conseguenza è che le immagini non sono più visualizzate nel contesto desiderato.

    Una soluzione può essere quella di rimuovere le immagini funzionali dallo sfondo e includere le informazioni importanti direttamente nell'HTML.Agire poi con il CSS per ottenere l'effetto grafico desiderato.

    Impatto: 2Frequenza: 3Gravità: critico


    Imm. Funzionali Di Sfondo

    Esempio 3a: "contenuti spostati rispetto la struttura originale utilizzando Mozilla"

    Imm. Funzionali Di Sfondo

    Esempio 3b: "contenuti spostati rispetto la struttura originale utilizzando Mozilla"

  3. Mancanza di tasti rapidi:

    Presenti sia nell'home page che nel meteo.

    La pagina contiene un menù composto da link per spostarsi nelle diverse sezioni ed è presente in tutte le pagine del sito.Ad esso però non sono stati associati dei tasti rapidi (attraverso @ACCESSKEY) che potrebbero rendere più agevole la visualizzazione del sito.

    Per i link/pulsanti/controlli che sono ricorrenti nelle pagine del sito (cioè dove valga la pena che l'utente impari e ricordi che ci sono dei tasti rapidi associati) aggiungere l'attributo @ACCESSKEY ad A , INPUT , BUTTON.Ricordarsi di evitare di usare i caratteri che vengono usati nell'elenco dei nomi di menu del browser o le cifre (quest'ultime vengono usate da Firefox per saltare ad una determinata linguetta tra quelle aperte).Ricordarsi di fare in modo che i tasti rapidi vengano descritti in qualche pagina di aiuto e che siano sempre gli stessi per un determinato link/pulsante/controllo.

    Impatto: 1Frequenza: 1Gravità: minore


    Mancanza tasti rapidi

    Esempio 4: "per la scelta delle varie sezioni si potrebbe assegnare dei tasti rapidi"

  4. Skip links:

    Presenti in alcuni casi nell'home page.

    In alcuni caso la pagina non permette di saltare direttamente al contenuto , evitando il materiale preliminare e ripetuto nelle pagine (come ad esempio logo , briciole di pane , pulsantiera globale).L'utente non ha modo di posizionare direttamente il focus dell'interazione , e quindi il suo campo visivo, sul nocciolo della pagina.

    Come rimedio aggiungere , subito dopo il logo, un link che permetta di saltare al nocciolo della pagina. Preferire un link visibile a tutti; se ciò non fosse possibile implementare lo skip-links mediante un link nascosto (con display:none o con uno spaziatore trasparente dotato di ALT="salta al contenuto").

    Si sono verificati alcuni casi in cui un link di un articolo portava alla sezione in cui esso era contenuto.Inoltre capita che nel passaggio da una pagina ad un altra compaiono informazioni pubblicitarie.

    Impatto: 1Frequenza: 1Gravità: minore


  5. Testo non ridimensionabile:

    Presente sia nell'home page che nel meteo.

    Utilizzando il browser Internet Explorer , non si ha la possibilità di ingrandire o diminuire la grandezza dei caratteri.L'utente in questo caso , utilizzando IE , non è in grado di ingrandire la dimensione del testo , con la conseguenza di dover utilizzare un ingranditore di schermo oppure semplicemente utilizzare Mozilla Firefox.

    Come soluzione usare sempre unità di misura CSS di tipo relativo , come em e %.Non usare mai FONT/@SIZE né immagini con il testo dipinto in pixel.

    Impatto: 3Frequenza: 3Gravità: critico


    Testo Non Ridimensionabile Testo Non Ridimensionabile

    Esempio 5: "con IE , non si riesce a modificare la dimensione del testo"

  6. Mancanza di link interni:

    Presenti sia nell'home page che nel meteo.

    Le pagine non contengono in alcuni casi un link per ritornare in testa alla pagina.

    L'utente sarà così costretto a muovere il campo visivo dalla parte inferiore della pagina alla barra di scorrimento (per spostare il contenuto della finestra) e poi di nuovo all'inizio della finestra per poter leggere il titolo della sezione e la sua parte iniziale.Questo potrebbe essere ancora più grave nel caso di form complesse , nelle quali l'utente potrebbe non accorgersi della presenza di elementi importanti.

    Come rimedio a questo problema basta aggiungere , alla fine di ciascuna sezione delle pagine , dei link per poter saltare alla fine della successiva sezione , all'inizio della sezione appena vista, in testa o alla fine della pagina.

    Impatto: 1Frequenza: 3Gravità: serio


    Mancanza di link interni

    Esempio 6: "Manca un link per tornare in testa alla pagina"

  7. Troppi link:

    Presenti sia nell'home page che nel meteo.

    Sono presenti troppi link nelle pagine e in alcuni casi allucati in maniera disorganizzata.Il numero elevato di link costringe l'utente ad un'analisi lunga e faticosa di ciascuno di essi.Gli utenti devono far scorrere il loro ristretto campo visivo su tutti i link , nelle varie zone della pagina , memorizzandoseli , prima di poter decidere se continuare la navigazione e quindi quale attivare.L'esame della pagina procede una sezione alla volta , con il rischio di dimenticarsi alcuni link visti in precedenza o la loro posizione.Il problema peggiora se la pagina richiede scrolling verticale od orizzontale.

    Per risolvere il problema occorre riorganizzare i link suddividendoli in precise sezioni o categorie.Nelle stesse pagine è opportuno introdurre delle liste (UL) o DIV separate , introducendo dei titoli di categoria (con degli H2-H3). Eventualmente aggiungendo dei link intra-pagina (A/@href che punta ad un A/@name), eventualmente nascosti, per poter passare da un gruppo al successivo o al precedente.Mentre in pagine diverse rendere più profondo il sito con delle pagine intermedie.Deve essere possibile per l'utente esaminare sinteticamente un blocco di link e decidere solo dal titolo del blocco se i link che esso contiene sono rilevanti o meno.Inoltre bisogna supportare un layout liquido in modo che l'utente possa ingrandire il testo a piacimento, accorciando le righe di testo (utile per gli utenti di ingranditori di schermo) senza richiedere scrolling orizzontale.

    Impatto: 2Frequenza: 3Gravità: critico


    Troppi link

    Esempio 7: "La pagina contiene un elevato numero di link"

    Troppi link 2

    Esempio 8: "Stessa situazione dell'home page"


Vai Al Secondo Caso

Torna Su