Pubblico oggi la traduzione completa di una utile lista di controllo per la realizzazione di siti conformi agli standard web integrando il lavoro di Livio Mondini.
L’articolo completa e integra la traduzione dell’articolo di Russ Weakley su www.maxdesign.com.au.
web standard checklist
- Web standard, molto più che “un sito senza tabelle”
- Perchè la checklist
- La checklist
- 1. Qualità del codice
- 2. Grado di separazione fra struttura dei contenuti e presentazione
- 3. Accessibilità per gli utenti
- 4. Accessibilità per tipologia di accesso
- 5. Usabilità di base
- 6. Gestione del sito
Web standard, molto più che “un sito senza tabelle”
Il termine web standard ha significati diversi per persone diverse. Per alcuni significa “un sito senza tabelle”, per altri “un sito con codice valido”. Tuttavia, con web standards si intende molto di più. Un sito realizzato seguendo gli standard web proposti dal W3C, aderisce agli standard (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG ecc) e rispetta le buone pratiche (best pratices) previste da ciascuno standard (si basa su codice valido, codice accessibile, codice semanticamente corretto, gli URL sono semplici ecc).
In altre parole, un sito realizzato rispettando gli standard web idealmente sarà leggero, pulito, basato sui CSS, accessibile, usabile e semplice da gestire da parte dei motori di ricerca.
Perché la checklist
La checklist proposta non è una tavola dei comandamenti, probabilmente ci sono diverse voci da aggiungere e correggere. Più importante, non bisogna intenderla come una lista di voci che devono essere risolte per ogni sito che sviluppate, ma come una guida a cui riferirsi:
- Per comprendere la vastità degli standard web
- Come pratico strumento per gli sviluppatori mentre svolgono la fase di produzione di siti web
- Come aiuto agli sviluppatori interessati a orientarsi verso gli standard web
La checklist
La checklist (in inglese) può essere scaricata in pdf per una più semplice consultazione.
1. Qualità del codice
¨ 1.1 il sito si riferisce a un corretto Doctype?
Un doctype (document type declaration) comunica al Validator quale versione di (X)HTML state usando, e viene dichiarato all’inizio della pagina. Il doctype è un componente chiave di una pagina web standard (compliant web page): se non viene dichiarato un doctype, markup e CSS non vengono validati.
- http://www.alistapart.com/articles/doctype/
- http://www.w3.org/QA/2002/04/valid-dtd-list.html
- http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
- http://gutfeldt.ch/matthias/articles/doctypeswitch.html
¨ 1.2 è stato indicato un set di caratteri?
Se uno User Agent (per esempio, un browser) non può rilevare il set di caratteri (character encoding) usato in un documento Web, probabilmente presenterà del testo illeggibile. Questa informazione è particolarmente importante quando si tratta di manutenere ed estendere un sito multilingue, tuttavia dichiarare l’encoding del set di caratteri utilizzato è importante per chiunque produca XHTML/HTML o CSS.
- http://www.w3.org/International/tutorials/tutorial-char-enc/
- http://www.w3.org/International/O-charset.html
¨ 1.3 il codice (X)HTML del sito è valido?
Il codice valido viene renderizzato più velocemente del codice contenente errori. I browser sono diventati maggiormente standard compliant, e diventa di conseguenza più importante la necessità di scrivere codice (X)HTML standard.
¨ 1.4 il codice CSS del sito è valido?
Bisogna verificare che non ci siano errori sia nel codice HTML sia nel CSS delle pagine prodotte, poiché errori in questo ambito risulteranno nella visualizzazione del documento.
¨ 1.5 vengono usati hack CSS di un qualche tipo?
Di fondo, l’uso degli hack è una scelta personale, che implica il grado di conoscenza di queste tecniche e lo specifico design che state cercando di ottenere.
- http://css-discuss.incutio.com/?page=CssHack
- http://css-discuss.incutio.com/?page=CssHack
- http://css-discuss.incutio.com/?page=ToHackOrNotToHack
- http://centricle.com/ref/css/filters/
¨ 1.6 il foglio di stile contiene classi o id superflui?
Osservando le pagine sul web, si nota che gli sviluppatori acquisiscono nuove capacità qualche volta producendo ottimo CSS ma scarso XHTML. Nello specifico, il codice HTML tende a riempirsi di div e id non necessari. Questo produce pagine HTML difficili da gestire e fogli di stile in “sovrappeso”.
¨ 1.7 il codice è semanticamente ben strutturato?
Un markup semanticamente corretto usa gli elementi html secondo lo scopo previsto. Il markup XHTML possiede significati semantici per un vasto parco di user agent (browser che non gestiscono i fogli di stile CSS, browser testuali, PDA, motori di ricerca, ecc.)
- http://www.maxdesign.com.au/presentation/benefits/index04.htm
- http://www.w3.org/2003/12/semantic-extractor.html
¨ 1.8 il sito contiene link interrotti?
I link interrotti possono innervosire gli utenti e potenzialmente portarli altrove. inoltre, i link interrotti producono risultati errati nei motori di ricerca.
¨ 1.9 come si comporta il sito in termini di velocità/dimensioni della pagina?
Non farmi aspettare… Questo è il pensiero comune di ogni utente delle vostre pagine, anche se usa una connessione veloce.
¨ 1.10 il sito contiene errori JavaScript?
Internet Explore per Windows permette di attivare un debugger che si aprirà in una nuova finestra mostrando gli eventuali errori JavaScript presenti. Questa opzione è disponibile in Opzioni Internet>Avanzate. Fate clic sulla casella di controllo Disattiva debug degli script per attivarla.
2. Grado di separazione fra struttura dei contenuti e presentazione
¨ 2.1 Il sito prevede l’uso di CSS per tutti gli aspetti di impaginazione e presentazione (font, colori, spaziature, bordi ecc)?
Usare i fogli di stile per controllare layout e impaginazione
¨ 2.2 le immagini a puro scopo decorativo vengono caricate dal CSS o appaiono nel codice (X)HTML?
L’obbiettivo di ogni sviluppatore web dovrebbe essere quello di rimuovere tutti gli elementi presentazionali dal codice html, mantenendolo pulito e semanticamente corretto.
3. Accessibilità per gli utenti
¨ 3.1 ogni immagine descrittiva possiede un attributo alt di contenuto testuale equivalente o vuoto per le immagini decorative?
Fornire un’equivalente testuale per ogni elemento che non lo sia
¨ 3.2 sono state utilizzate unità di misura relative invece che assolute per le dimensioni del testo?
Usare unità di misura relative invece che assolute per gli attributi nel markup e nei valori delle proprietà dei fogli di stile
- http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
- http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
- http://www.clagnut.com/blog/348/
¨ 3.3 se la dimensione del testo viene aumentata, il layout del sito resta stabile?
Provate questo semplice test. Caricate il vostro sito in un browser che permetta di modificare le dimensioni del testo e aumentatele con i comandi del broswer (in Firefox, premete CTRL++; in Explorer, selezionate Visualizza>Carattere>Grande o Molto grande). La pagina è comunque leggibile? Un buon sviluppatore web non dovrebbe pensare che chiunque usi il browser impostato con le dimensioni del testo di default.
¨ 3.4 il sito possiede skip menu visibili?
Deve essere fornito un modo per saltare la lettura dei link di navigazione ripetuti.
Raggruppate il link, identificate il gruppo e provvedete a fornire un metodo per saltare il gruppo
…questo problema non si presenta solamente agli utenti non vedenti.
- http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
- http://www.niehs.nih.gov/websmith/508/o.htm
¨ 3.5 i moduli del sito (form) sono accessibili?
i moduli sono uno degli elementi più difficili da utilizzare per le persone disabili, non è come leggere del testo.
- http://www.htmldog.com/guides/htmladvanced/forms/
- http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
- http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
- http://accessify.com/tutorials/better-accessible-forms.asp
¨ 3.6 le tabelle del sito sono accessibili?
Per le tabelle dati, identificate righe e colonne con l’appropriato markup
- http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
- http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
- http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
- http://www.webaim.org/techniques/tables/
¨ 3.7 la luminosità e il contrasto dei colori sono sufficienti?
verificate che il contrasto fra sfondo e colore di primo piano sia sufficiente
- http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-contrast
- http://www.juicystudio.com/services/colourcontrast.asp
¨ 3.8 per evidenziare informazioni importanti si ricorre al solo colore?
verificate che tutte le informazioni veicolate con il colore siano disponibili anche in sua assenza
Ci sono fondamentalmente tre forme di cecità ai colori: deuteranopia, (un deficit per il rosso/verde), protanopia (un’altra foma di deficit per il rosso/verde) e tritanopia (un deficit per il giallo/blu, molto raro).
- http://colorfilter.wickline.org/
- http://www.toledo-bend.com/colorblind/Ishihara.html
- http://www.vischeck.com/vischeck/vischeckURL.php
¨ 3.9 i menu a discesa restano aperti abbastanza a lungo quando selezionati (per gli utenti con capacità motorie ridotte)?
Gli utenti con capacità motorie trovano I menu a discesa diufficili da usarese il tempo di apertura è troppo breve.
¨ 3.10 i link sono descrittivi (per gli utenti non vedenti)?
Il testo dei link dovrebbe essere abbastanza significativo per dare un senso quando letto fuori contesto – sia di per sé, sia come parte di una sequenza di collegamenti. Il testo del link dovrebbe anche essere breve e incisivo.
4. Accessibilità per tipologia di accesso
¨ 4.1 il sito funziona in modo accettabile sia con browser obsoleti sia con browser aggiornati?
Prima di cominciare a costruire un lay-out basato su sui CSS, andrebbe deciso quali browser supportare e a che livello.
¨ 4.2 se il foglio di stile CSS è disabilitato, il contenuto è lo stesso accessibile?
Alcuni utenti potrebbero visitare il vostro sito con un browser che non supporta CSS, o un browser con CSS disabilitati. Se il contenuto è ben strutturato, non sarà un problema.
¨ 4.3 se le immagini sono disattivate o non supportate, il contenuto è lo stesso accessibile?
Alcuni utenti navigano con la visibilità dellle immagini disabilitata, soprattutto persone con connessioni lente. I contenuti dovrebbero essere accessibili per queste persone.
¨ 4.4 come funziona il sito con un browser testuale come Lynx?
Linx è un browser testuale, funziona come se immagini e CSS fossero disabilitati nel browser.
¨ 4.5 come funziona il sito quando viene stampato?
Qualsiasi documento (X)HTML può avere una versione stampabile senza toccare una riga di codice nel markup.
- http://www.alistapart.com/articles/goingtoprint/
- http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print
¨ 4.6 come funziona il sito su un palmare?
Il tipo di dispositivo da supportare dipende realmente dal target, ma il numero di utenti che navigano con palmari e smart-phones è in crescita csotante.
¨ 4.7 il sito possiede metadati dettagliati?
I metadata sono informazioni per il web dirette a diversi sistemi informativi
¨ 4.8 come si comporta il sito a risoluzioni e dimensioni della finestra del browser diverse?
È un presupposto comune tra gli sviluppatori che la risoluzione media degli schermi sia in aumento. Si da per assodato oggi che la risoluzione dello schermo sia 1024px di larghezza. Ma che cosa succede per gli utenti con piccoli schermi e gli utenti con dispositivi portatili? Sono parte del target o dovranno essere penalizzati?
5. Usabilità di base
¨ 5.1 si distingue una chiara gerarchia visuale?
Organizzare e dare priorità ai contenuti usando la relazione tra dimensioni e importanza del contenuto stesso.
¨ 5.2 i livelli dei titoli possono essere identificati facilmente?
Utilizzare elementi di intestazione per esprimere la struttura documento e usarli secondo le specifiche
¨ 5.3 il sistema di navigazione del sito è semplice da comprendere?
¨ 5.4 il sistema di navigazione del sito è omogeneo?
Se ogni pagina del tuo sito ha uno stile di presentazione coerente, i visitatori troveranno più facile navigare tra le pagine e trovare le informazioni
¨ 5.5 il linguaggio utilizzato è coerente e appropriato?
L’uso di un linguaggio chiaro e semplice consente una comunicazione efficace. Può essere davvero difficile leggere testi mal scritti e magari con errori di grammatica, soprattutto se la lingua usata non è la lingua principale del visitatore.
¨ 5.6 il sito possiede una pagina contenente una mappa del sito e i contatti? ed è facile trovarla?
La maggior parte delle mappe non riescono a trasmettere più livelli di informazioni riguardo l’architettura del sito. Gli utenti spesso cercano la mappa del sito senza trovarla. La complessità è comunque un problema: una mappa che dovrebbe essere una mappa, non una sfida di navigazione.
¨ 5.7 per i siti di grandi dimensioni, esiste uno strumento di ricerca?
Pur non essendo necessari su piccolo siti, strumenti di ricerca adeguati forniscono agli utenti maggiori e migliori possibilità di navigazione.
¨ 5.8 ogni pagina del sito possiede un link alla home page?
Alcuni utenti, una volta compiuto il loro percorso di navigazione, vogliono ritornare alla home page del sito, che diventa il punto di partenza per una nuova esplorazione dei contenuti.
¨ 5.9 i link appaiono sottolineati?
Per massimizzare la percezione dei link e indurre a seguirli, colorare e sottolineare il testo del collegamento.
¨ 5.10 i link visitati sono distinti da un colore univoco?
Il visitatore deve essere messo in condizione di sapere quali sono le pagine che ha già visitato.
6. Gestione del sito
¨ 6.1 il sito possiede una esaustiva pagina di errore 404 che funzioni a ogni livello del sito?
Hai richiesto una pagina – o digitando un URL direttamente nella barra degli indirizzi o cliccando su un link e ti sei ritrovato nel bel mezzo del cyberspazio da nessuna parte. Un sito web user-friendly vi darà una mano, mentre molti altri semplicemente non fanno nulla, contando nella capacità del browser di spiegare qul’ è il problema.
¨ 6.2 gli URL hanno una forma comprensibile?
La maggior parte dei motori di ricerca (con poche eccezioni, e cioè Google) non indicizzano pagine che hanno un punto di domanda o altri caratteri (come un segno di uguale o una “e “commerciale) nell’URL … A che serve un sito, se nessuno può trovarlo?
- http://www.sitepoint.com/article/search-engine-friendly-urls
- http://www.websitegoodies.com/article/32
¨ 6.3 l’URL funziona senza “www”?
Anche se questo non è critico, e in alcuni casi non è nemmeno possibile, è sempre bene dare alle persone la scelta di entrambe le opzioni. Se un utente digita il tuo nome a dominio senza il www senza alcun esito, questo potrebbe essere uno svantaggio per l’utente e per voi.
¨ 6.4 il sito possiede una favicon?
Una Favicon è una immagine inclusa su quasi tutti i siti sviluppati professionalmente. La Favicon consente al webmaster di promuovere ulteriormente il sito, e per creare un’immagine ancora più personalizzata all’interno del browser dell’utente
Tags: accessibilità, checklist, usabilità, Web standards
Ah bello, grande, complimenti!!