Pagine (X)HTML

Tutti i nuovi siti, applicazioni, modelli di pagina per la Regione Emilia-Romagna devono essere realizzati in XHTML 1.0 Strict o successivi, utilizzando elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico.

Per siti ed applicazioni già esistenti è ammesso l'uso di HTML o XHTML Transitional a patto che si eviti di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS per ottenere lo stesso effetto grafico.

Si richiede di rispettare tutte le specifiche W3C anche per particolari tipologie di contenuti (MathML, SVG, ecc.).

Requisiti delle pagine (X)HTML

TUTTE le pagine devono avere codice valido (almeno XHTML 1.0 Strict per le nuove realizzazioni).
Definire la lingua prevalente della pagina attraverso l’attributo LANG del tag HTML:
questo è utile sia ai motori di ricerca che ai più recenti screen readers che possono così impostare automaticamente il sintetizzatore vocale per parlare nella lignua corretta. I codici di lingua più comuni sono: IT per l’italiano, EN per l’inglese, FR per il francese, ES per lo spagnolo, DE per il tedesco.
Ogni pagina deve avere un titolo significativo (non più di 40 caratteri esclusi quelli del nome del sito):
che permetta all´utente di riconoscere il contesto: se il titolo si compone di più voci, partire sempre dalla più specifica per arrivare alla più generica.
Ogni pagina deve avere dei link (anche nascosti) per saltare al contenuto o al menù:
questi link si devono trovare subito dopo l'apertura del <body> e possono essere associati a degli accesskey. Sono utili a chi non vede per raggiungere rapidamente punti significativi della pagina.
Ogni pagina deve avere un link per tornare alla Home Page:
meglio ancora se contiene il percorso di navigazione (la lista dei link alle pagine da attraversare per raggiungere la pagina visualizzata, a partire dalla home page, vedi esempi).
Se necessario deve esserci la corretta titolatura dei differenti livelli ed importanza (da h1, il titolo dei contenuti della pagina, ad h6):
Un titolo è corretto che preceda un blocco di contenuti (un menù o un paragrafo) ma non che sia un link di un menù; la struttura della pagina è utile ai motori di ricerca ed è utile per navigare i contenuti anche saltando da una intestazione all´altra.
Tutti (e solo) gli elenchi di elementi devono essere marcati come <ul>, <ol> o <dl>:
gli elementi di lista si devono usare solo per elenchi e non per ottenere particolari effetti grafici.

Suggerimenti

Per facilitare la navigazione è bene che le pagine abbiano tutte la stessa struttura, e che contengano alcuni elementi fondamentali (quali menu, percorso di navigazione, testata ecc.).
Per migliorare i risultati delle ricerche, si consiglia anche di inserire un sommario del contenuto nel META tag DESCRIPTION (esempio: <meta name="description" content="testo del sommario">). Tenete presente che il sommario viene anche presentato dai alcuni motori di ricerca dopo il TITLE quando espongono i risultati della ricerca. Il motore di ricerca dei siti della Regione è Google, e di norma presenta la parte di testo delle pagine che contiene le parole cercate.
Si consiglia di presentare il contenuto principale all´inizio della pagina (all´inizio del codice sorgente HTML): il sito risulta più fruibile, e inoltre i motori di ricerca danno maggiore evidenza ai contenuti più vicini all´inizio della pagina.
È buona norma fornire la dicitura completa di acronimi e abbreviazioni. Può essere inserita nel testo della pagina oppure tramite l´uso l´attributo "title" degli elementi ABBR e ACRONYM.
Se all´interno del documento si usano termini in una lingua differente (ad es.: inglesi) occorre definire la lingua nell'elemento HTML che li contiene, ad esempio usare: <SPAN LANG="EN"> english text </SPAN> (più che altro per termini non di uso comune o frasi).
Per quei contenuti che hanno una contestualizzazione temporale (es. bandi con scadenze o segnalazione di eventi) è necessario inserire in ogni pagina la data di ultimo aggiornamento nel formato italiano (es.: 4 dicembre 2002); mentre dove è possibile definire un referente, una persona addetta a ricevere segnalazioni e suggerimenti per quell´argomento, bisogna indicarne il nome, la e-mail, il numero di telefono.
Infine, controllate il peso delle vostre pagine: una pagina di 100 KB con un modem a 56 kb si scarica in circa 15 secondi, ma la maggior parte dei navigatori si sofferma su una pagina meno di 10 secondi!

Esempi

Intestazione dei documenti (X)HTML da utilizzare

Per i nuovi siti e applicazioni utilizzare questa intestazione XHTML 1.0 nel documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" >

Per le altre DTD fare riferimento al sito W3C .

Titolo della pagina

I titoli (TITLE) dovrebbero sempre indicare il contenuto, al pari degli H1 nelle pagine. I TITLE se possibile dovrebbero essere brevi. Per questa pagina ad esempio:

Pagine (X)HTML - ("Linee guida per siti ed applicazioni Web -") Regione Emilia-Romagna

Percorso (detto anche molliche, briciole di pane, breadcrumbs)

Se il titolo (H1) segue immediatamente le briciole è corretta questa struttura (usata anche in questo sito):

(vuoto)/Torna a:/Percorso: Home > Livello 1 >...> livello precedente

Se il titolo non segue immediatamente le molliche di pane:

Sei in/Percorso/(vuoto): Home > Livello 1 >...> livello precedente > pagina corrente

Link nascosti per saltare ai contenuti (skip-link)

A seconda della struttura della pagina sono necessari uno o più link per permettere di arrivare rapidamente ad alcuni tipi di contenuti. Gli accesskey più comunemente utilizzati sui siti della Regione sono:

h - per il link alla HomePage;
k - per saltare la barra di navigazione e andare subito al contenuto principale della pagina;
c - per andare al form di Ricerca;
n - per saltare al menù principale del sito;

Codice HTML da inserire nella pagina:

<body>
<ul class="skip">
    <li><a href="#cerca" > Cerca nel sito</a> </li>
    <li><a href="#contenutopagina" title="Salta ai contenuti" accesskey="k">Salta ai contenuti</a> </li>
   <li><a href="#menu" title="Salta al menu principale" accesskey="n">Salta al menu principale</a> </li>
</ul>
...
<form id="ricerca" .....
<input id="cerca" accesskey="c" name="cerca" type="text" />
.....
<a id="contenutopagina" name="contenutopagina" tabindex="0"></a>
.....

Il codice CSS per nasconderli si trova nella sezione Fogli di stile

Titoli nella pagina

I titoli (H1, ..., H6) dovrebbero essere utilizzati per strutturare i contenuti. Per facilitare la navigazione a chi usa gli screen-reader è marcare con delle intestazioni anche i menù. Ecco un esempio:

...
<h1>Titolo del sito (facoltativo e spesso nascosto)</h1>
...
<h1>Titolo pagina (uguale o simile al TITLE)</h1>
...
<h2>Titolo di un paragrafo nel testo</h2>
...
...
<h3>Titolo di un menù</h3>
<ul>
<li>voce di menù</li>
...

Verifiche sulla struttura delle pagine

Per verificare la correttezza del codice XHTML di una pagina consigliamo di utilizzare Mozilla Firefox e l'HTML Validator attivando entrambi i parser (vedi sezione link).
In alternativa si può usare la Web Developer Toolbar

Pagine on-line: Tools > Validate HTML
Pagine off-line: Tools > Validate local HTML

Tutte le verifiche possono essere fatte anche con la barra dell'accessibilità (versione 2.0), controllando:

Codice (per pagine on-line): Controlla> Validatore HTML del W3C > Valida l'HTML
Codice (per pagine off-line): Controlla> Validatore HTML WDG> Valida l'HTML
DTD: Informazioni > Visualizza il DOCTYPE
Lingua: Informazioni > Visualizza gli attributi LANG
Skip-link: Informazioni > Visualizza i link [nuova finestra]
oppure da CSS >Disabilita il foglio di stile
Accesskey: Struttura> Accesskey
Intestazioni: Struttura> Intestazioni
oppure da Struttura> Struttura delle intestazioni
Liste: Struttura> Elementi di lista

Sono possibili analoghe verifiche anche con Opera, di cui però non aprofondiremo i dettagli.

Linee guida per siti ed applicazioni web della Regione Emilia-Romagna

Menu principale

Pagine (X)HTML

Requisiti delle pagine (X)HTML

Suggerimenti

Esempi

Intestazione dei documenti (X)HTML da utilizzare

Titolo della pagina

Percorso (detto anche molliche, briciole di pane, breadcrumbs)

Link nascosti per saltare ai contenuti (skip-link)

Titoli nella pagina

Verifiche sulla struttura delle pagine

Menu della sezione

Per Tecnici

Approfondimenti

Link esterni

Allegati