1 – Ogni pagina deve dichiarare un doctype XHTML Strict 1.0 e il codice XHTML contenuto deve essere valido in accordo a tale doctype. Il codice CSS dovrebbe essere aderente se e quando possibile alle specifiche del linguaggio.
2 – Il codice css deve essere applicato alla pagina mediante inclusione (non incorporato né inline). Lo stesso vale per eventuale codice javascript anche se un numero minimo di istruzione inline (meno di 4/5) e per pochi elementi, è accettabile.
3 – Gli elementi che non apportano signficato semantico alla pagina devono essere trattati come background o altre proprietà con i fogli di stile e non come elementi di primo piano o testo*. Ne sono esempio ricorrente i bordi curvi che permettono di delimitare delle aree, linee di separazione tra voci di menu orizzontale, frecce o marker sui link, gli spazi tra i vari elementi che devono essere gestiti tramite margini o padding.
Non sono tollerabili immagini spaziatrici o spazi testuali che servano a solo scopo presentazionale.
Sono invece immagini di primo piano gli elementi grafici che a) possono essere cliccati o cliccabili (ad es. un logo, un pulsante); b) elementi, anche non cliccabili, purché rilevanti per la comprensione del testo (ad es. un organigramma aziendale, lo schema di un processo produttivo).
*(In caso di immagini .png l’uso può essere valutato caso per caso).
4 – Il layout non deve essere costruito mediante a tabelle, ma definito con generici macroblocchi. Le tabelle vanno utilizzate esclusivamente per dati che siano naturalmente in relazione di riga/colonna con riepilogo di riga e/o colonna (un orario scolastico, un bilancio, le voci del carrello di un e-shop prima del checkout). I form non devono essere costruiti a tabelle salvo esplicite eccezioni.
5 – Il layout dev’essere costruto cercando di rispettare il significato delle informazioni in esso contenuto evitando quando possibile un uso eccessivo o superfluo di elementi generici: un menu, ad esempio, è una lista non ordinata di link, l’indirizzo di un’azienda può essere racchiuso dal tag [address], i titoli in pagina vanno gestiti con gli appositi header h1…h6. Inoltre il layout va costruito in modo da non pregiudicarne l’integrità in caso di una ragionevole espansione dei testi in verticale (ad es. quando il carattere del browser viene ingrandito o aumentano le voci di un menu verticale)
6 – Raggruppamento degli stili: id e/o classi non dovrebbero essere applicati a troppi elementi in pagina poiché potrebbero generare eccessivo disordine e creare dei conflitti con stili applicati successivamente. La struttura del codice e i marcatori stessi, inoltre, dovrebbero essere usati per creare regole CSS discendenti a partire da un’unica classe e/o elemento (ad es. #menu, #menu li, #menu li a, menu li a:hover)
7 – Significato degli stili: è consigliato evitare l’uso di nomi di id e classi che riflettano l’aspetto presentazionale, in favore di significati semantici e immediatamente comprensibili. Evitare ad esempio di chiamare una classe ‘testorosso’ o ‘titolo20px’.
8 – Font non di sistema: va concordata preventivamente la gestione di testi con font non di sistema per poter consentire un’eventuale localizzazione successiva o la loro semplice gestione senza elementi grafici.
9 – Indicizzabilità: il codice utilizzato non deve pregiudicare in alcun modo una normale indicizzazione della pagina da parte dei motori di ricerca: il testo nascosto è tollerato per pochi elementi testuali e, qualora dovesse essere applicato a titoli di primo livello e/o a link, l’uso dev’esserne preventivamente concordato.
10 – I commenti al codice non sono espressamente richiesti, ma la loro presenza – soprattutto in caso di lunghi blocchi di codice – è consigliabile ed apprezzata (soprattutto per indicare la fine e l’inizio di un blocco)
Nota bene: La lista dei browser per cui è richiesta la compatibilità è descritta nell'allegato ... [omissis]