breve guida all’usabilità – web design

1. le informazioni più importanti prima
2. fare buon uso delle “tagline” (La Tag-line è una frase breve e diretta che riassume in modo istantaneo la vocazione di una marca, di un prodotto o di un’azienda, nel nostro caso parliamo di un sito)
3. ripeti gli argomenti principali (repetita iuvant dicevano i latini e non fa mai male avere sempre il focus sotto controllo)
4. il contenuto informativo delle singole pagine deve essere compreso velocemente
5. fai visualizzare i numeri sotto forma di numeri! (100 e non cento)
6. tratta un argomento per volta
7. collega sempre le pagine correlate all’informazione che stai comunicando
8. affidati ai tuoi utenti e non alle statistiche generiche
9. aumenta il “padding“  dei collegamenti così aumenti la zona cliccabile
10. metti sempre le etichette associate ai controlli nei moduli
11. utilizza sempre gli stati dei collegamenti (hover, active, visited)
12. utilizza i sistemi per evitare spam (es. captcha)
13. genera pagine di errore che spieghino cosa sta accadendo all’utente (evita i soliti codici incomprensibili)
14. usa il testo piuttosto che le immagini quando possibile

la lista è stata rivista da questo articolo

24 ways: Don’t Lose Your :focus

a great article about accessibility troubles…

via 24 ways: Don’t Lose Your :focus.

Italia.it – non c’è verso2

Macchè, non c’è verso, il portale nazionale del turismo è nato sotto una cattiva stella, non è cosa!
Gli esordi furono raccapriccianti, col Rutellone che parlava davvero come Alberto Sordi col suo peggior inglese, ma quello che è stato inaugurato oggi dalla rossa Brambilla è un punto peggio.

La grafica è del tutto anonima, nulla a che vedere con lo stile e la qualità del “fatto in Italia”, nemmeno lontanamente apprezzabile come un tramonto sulle colline toscane o le gradazioni di blu del mare salentino.
Si sono impegnati nel realizzare una patacca di quelle epocali!

L’abito non fa il monaco direte voi, e invece questa volta lo fa eccome, anzi l’abito fa lo straccione, perchè da una prima analisi è di questo che si tratta, uno straccio di sito.
Si fa bella mostra della dichiarazione di accessibilità e si precisa anche che per colpa di qualche filmato flash alcuni contenuti non saranno fruibili ai diversamente abili.
Ma fosse solo qualche filmato flash il problema, navigando velocemente il pataccone si rileva immediatamente che:
1. nessuna attenzione al corretto uso delle intestazioni (fig. 02)
2. già dall’home page vengono fuori errori di codice html (fig. 03)
3. mancano quasi del tutto gli attributi alt sulle immagini presenti (compresa quella del presidente ommioddio uggesù) (fig. 04)
4. assenti nella maggior parte dei casi i title sui link e sui bottoni
5. sui link che puntano a siti esterni non c’è il minimo avviso di cambiamento del focus

e queste son solo le cose minime, che saltano subito agli occhi…ma presto spulcerò meglio!

Si, ma poi vallo a spiegare!

mi occupo di accessibilità di siti e applicativi web (cioè che funzionano attraverso un browser), quando si rilascia un progetto, questo va in verifica di accessibilità.La verifica comprende l’analisi dei 22 punti della legge Stanca con  una discreta aggiunta di verifica della compatibilità tra quello che si legge nella pagina e quello che effetivamente deve essere compreso (chiamiamola per comodità e anche per pigrizia usabilità).

Ad essere onesti i problemi principali non riguardano nello specifico il rispetto dei 22 punti di controllo (certo è uno smazzo quando si ereditano grafiche sviluppate in tempi remoti, tipo con tabelle e stili in linea), ma per quello che mi riguarda è la difficoltà nell’illustrare le funzionalità se nza scrivere righe e righe che tanto l’utente non leggerà mai!

Sarà che oggi ho finalmente passato la verifica di un mega progetto e mi son reso conto che sarà pure accessibile secondo la legge stanca ma indubbiamente ci sono dei passaggi nei form di dubbia comprensibilità.

Per cui il mio dubbio è nettamente questo, a chi giova avere un sito pulito con un codice perfetto, se quando c’è un form che ti chiede millemila cose non c’è una chiara comprensione dell’obiettivo del form stesso?

termini che forse è meglio specificare:

1. accessibilità termine con cui si individuano delle linee guida attraverso le quali permettere a chiunque di navigare pagine web (persone che hanno difficoltà fisiche o cognitive nell’utilizzare il mezzo internet)
2. sito genericamente inteso come raccolta di pagine collegate tramite link
3. applicativo sfrutta l’architettura del sito ma ha dietro un compelsso motore di elaborazione dati attraverso il quale si compiono delle operazioni (es. compilazione di un questionario o iscrizione ad un servizio erogato tramite web)
4. legge stanca prende il nome dal suo promotore Lucio Stanca che nel 2004 (numero 4 del 9 gennaio 2004) ne promosse l’abrogazione a legge per i siti delle pubbliche amministrazioni
5. form in linguaggio html il tag form serve per presentare controlli e operatori (esempio radio button, select etc) è presentato all’interno del tag Fieldset
6. codice perfetto ossia in linea con gli standard utilizzati dal consorzio w3c

tre domande sull’accessibilità

cosa significa sito accessibile?

Produrre siti applicativi e interfacce per supporti video significa produrre qualcosa che risulti il più possibile compatibile con la maggior parte dei supporti in circolazione.
Ogni singola pagina deve essere redatta conformemente alle regole segnalate dal w3c e a quelle formalmente previste nella legge “Stanca“; l’optimum sarebbe un ragionato mix di entrambe per ottenere applicativi validi e graficamente accettabili.

perchè si realizzano applicazioni accessibili?

Creare un pagina accessibile significa anzitutto far sì che le informazioni in essa contenute siano comprensibili per la maggior parte degli utenti normodotati e implica la massima cura nel rendere agevole e pienamente comprensibile la navigazione a utenti con disabilità motorie o cognitive.
In sostanza, sviluppare codici seguendo gli standard significa garantire lunga vita al nostro prodotto e avere la sicurezza che il suo contenuto informativo possa raggiungere la piena capacità cognitiva verso gli utenti.
Non avere barriere di accesso ai contenuti informativi consente la piena realizzazione degli scopi e obiettivi dell’applicazione stessa.

chi e come valuta se un sito è accessibile?

La valutazione di un sito applicativo o supporto multimediale è delegata a processi di validazione che possono essere sia di natura squisitamente automatica (es. validatore di html del w3c) o umana (un esperto che con il manuale di sitle alla mano verifica secondo punti di controllo le pagine) o mista (un esperto supportato da strumenti di validazione monitora le pagine ed effettua report specifici per i signoli punti).

Gli strumenti utili a questo scopo sono:

• 1. avere a disposizione le ultime versioni di Mozzilla Firefox, Microsoft Internet Explorer, Opera, Safari
• 2. utilizzare un tool di simulazione per le vecchie versioni di Explorer (es.Multi IeExplorer)
• 3. utilizzare strumenti di debugging per analizzare il codice renderizzato nel browser (es. Explorer Developer Toolbar)
• 4. utilizzare gli strumenti di analisi contenuti all’interno della barra dell’accesibilità
• 5. documentarsi in rete se e come sono state risolte le criticità che man mano si incontrano (es. tabelle dati complesse, form, fieldset, dichiarazioni di charset etc.)