Riepilogo dei requisiti e verifiche

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.

Requisiti di menu e liste

Tutti gli elenchi di voci di menù devono essere fatti in testo e marcati come <ul> o <ol>
(in questo modo gli elementi sono marcati secondo la loro semantica, di lista appunto).
La distanza verticale o orizzontale tra i link del menù deve essere di almeno 0,5em
per mantenere una migliore leggibilità e facilità nel selezionare i singoli elementi.
Marcare con un'intestazione il titolo di ciascun menù
e non marcare come intestazioni le singole voci.

Requisiti dei CSS

I CSS devono avere codice valido.
I contenuti e le funzionalità della pagina devono essere ancora fruibili e mantenere il loro significato d'insieme o la loro corretta struttura semantica anche quando si disabilitano i fogli di stile.
Tutte le caratteristiche legate all'aspetto si devono trovare solo in fogli di stile esterni
non è ammesso l'uso di stili inline o all'interno della pagina.
Se i contenuti possono venire stampati, deve essere presente uno stile per la stampa
di norma questo vale per i siti Web e non per le applicazioni.
Le dimensioni dei font e degli elementi dei campi di input devono essere specificate e devono essere definite con unità di misura relative (em o %)
alcuni browser (es. Internet Explorer 6) non sono in grado di ingrandire correttamente i caratteri o i campi dei moduli se non si utilizzano unità di questo tipo.
I contenuti si devono adattare alle preferenze dell'utente
si devono poter ingrandire i caratteri o cambiare le dimensioni della finestra del browser senza che ci sia perdita di informazioni; è possibile realizzare pagine elastiche che riempiono cioè tutta la pagina, o pagine ingrandibili, di dimensioni fisse ma che si ingrandiscono con l'aumentare delle dimensioni dei font sui browser

Requisiti dei frame

Non è consentito l’uso dei frame (o degli iframe) nella realizzazione di nuovi siti

Requisiti per i colori

Funzioni ed informazioni devono essere disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
Si deve sempre distinguere il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto

Requisiti del testo

Le dimensioni dei caratteri delle pagine devono essere espresse in em o %.
I testi devono restare comprensibili (senza sovrapposizioni o perdita di informazioni) anche su Internet Explorer 6, ad 800x600 impostato coi caratteri grandi.

Requisiti delle immagini

Fornire una alternativa testuale equivalente per ogni immagine,
l’alternativa testuale deve essere commisurata alla funzione o contenuto dell'immagine.
Sono vietati oggetti e scritte lampeggianti o in movimento.
Testi in forma di immagini sono ammessi solo per loghi o banner.
Le immagini protette da © Copyright dovranno avere l´esplicito consenso dell´autore.
Se presenti, il logo della Regione o di Ermes devono essere inseriti come negli esempi: senza modifiche all'immagine, collegati al portale e con il corretto alternativo.

Requisiti delle mappe immagine

Utilizzare mappe immagine sensibili di tipo lato client
salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche.
In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa.

Requisiti dei link

Usare testi che siano significativi anche se letti indipendentemente dal proprio contesto.
Rendere selezionabili e attivabili tramite la tastiera i collegamenti presenti in una pagina.
La distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi deve essere di almeno 0,5 em.

Requisiti delle tabelle di dati

Identificare le intestazioni di righe e colonne.
Nelle tabelle complesse (con più di un livello di intestazione) associare le celle di dati e le celle di intestazione

Requisiti delle tabelle di layout

Il contenuto della tabella deve essere comprensibile anche quando questa viene letta in modo linearizzato.
Usare solo <td> e non utilizzare elementi e attributi delle tabelle dati (es. th, scope, tbody ecc.).

Requisiti dei form

Associare in maniera esplicita le etichette ai rispettivi campi.
Posizionare le etichette vicino ai campi (o sopra, o immediatamente a lato).
Le distanze orizzontale e verticale tra i pulsanti di un modulo deve essere di almeno 0,5em..
Le dimensioni dei pulsanti devono essere tali da rendere chiaramente leggibile l’etichetta in essi contenuta (padding di almeno 0,5em ai lati).
Si deve poter ingrandire il carattere anche nei campi dei moduli (su IE5.5, IE6).

Requisiti dei contenuti multimediali

Fornire un'alternativa testuale equivalente.
Garantire che siano sempre distinguibili il contenuto informativo e lo sfondo ricorrendo a differenti livelli sonori (in caso di parlato con sottofondo musicale).

Requisiti di script, applet e plug-in

Le pagine devono funzionare anche quando questo tipo di oggetti sono disabilitati o non supportati: se questo non fosse possibile si deve fornire una spiegazione testuale equivalente.
Per la validazione dei dati inseriti in un form è necessaria la verifica lato server: una verifica preliminare tramite Javascript è utile ma non sufficiente.
Funzionalità e informazioni di script e applet devono essere direttamente accessibili.
I gestori di eventi devono essere indipendenti da uno specifico dispositivo di input: devono funzionare anche con il solo uso della tastiera.
Se è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare l’utente, e indicare il tempo massimo consentito.

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

Menu principale

Riepilogo dei requisiti e verifiche

Requisiti delle pagine (X)HTML

Requisiti di menu e liste

Requisiti dei CSS

Requisiti dei frame

Requisiti per i colori

Requisiti del testo

Requisiti delle immagini

Requisiti delle mappe immagine

Requisiti dei link

Requisiti delle tabelle di dati

Requisiti delle tabelle di layout

Requisiti dei form

Requisiti dei contenuti multimediali

Requisiti di script, applet e plug-in

Menu della sezione

Per Tecnici

Approfondimenti