Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile> I vantaggi dei frame senza i frame


I vantaggi dei frame senza i frame

In questo articolo vengono esposte alcune tecniche che consentono di riprodurre certi vantaggi dei deprecati frame, evitandone l'utilizzo.

a cura di: Mario Picarelli | 15 novembre 2005


1. Breve excursus legislativo sull'uso dei frame

Conclusosi con successo l'iter parlamentare della legge Stanca, con l'emanazione del decreto ministeriale del primo marzo 2005, l'uso dei frame nei siti web italiani della pubblica amministrazione può considerarsi ormai definitivamente proibito.

La struttura a frame (a cornice) è uno strumento efficace per l'organizzazione dei contenuti, ma presenta parecchi inconvenienti:

  • innanzitutto, alcuni screen reader (software di navigazione per i non vedenti) non sono in grado di leggerli;
  • i motori di ricerca hanno difficoltà ad indicizzarli: catturando l'URL di una pagina interna, si rischia pertanto di indirizzare l'utente a una pagina avulsa dal contesto, compromettendo irrimediabilmente la navigazione;
  • non è possibile stampare integralmente una pagina strutturata a cornici, ma soltanto il frame attivo, su cui cioè l'utente ha cliccato per ultimo prima di avviare la procedura di stampa.

Prima di illustrare un paio di tecniche alternative all'uso dei frame, ripercorrerò a grandi linee le tappe del percorso legislativo che ha condotto all'attuale normativa. Fin dalla legge Campa-Palmieri (da cui il disegno di legge Stanca ha tratto spunto), è stata segnalata la necessità di conformare i siti web della pubblica amministrazione ai criteri di accessibilità formulati dal W3C. Le linee guida del W3C prescrivono in generale alternative testuali alle informazioni veicolate in forma visiva o sonora:

1.1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante "alt", "longdesc" o contenuto nell'elemento stesso). Questo comprende: immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di immagini sensibili, animazioni (ad es. GIF animate), applets e oggetti programmati, arte ASCII, frame, script, immagini usate come richiamo per elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video e video.

Nell'elenco compaiono anche i frame, che vanno perciò dotati di un appropriato sistema testuale di titolazione e di descrizione:

12.1 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. [Priorità 1]
Per esempio, in HTML, usare l'attributo "title" con l'elemento frame.
Tecniche per il punto di controllo 12.1

12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli. [Priorità 2]
Per esempio, in HTML, usare "longdesc" oppure un collegamento descrittivo.
Tecniche per il punto di controllo 12.2

È buona norma inoltre, qualora questi accorgimenti non fossero sufficienti, fornire una presentazione alternativa della pagina:

6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. [Priorità 2]
Per esempio, in HTML, usare noframes alla fine di ogni insieme di frame. Per alcune applicazioni, gli script lato server possono essere più accessibili degli script lato client.
Tecniche per il punto di controllo 6.5

Un documento successivo alla proposta di Legge Stanca, "Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'ccessibilitā e le metodologie tecniche per la verifica dell'accessibilità", pubblicato nel maggio 2004 con il proposito di chiarire i criteri per la verifica dell'accessibilitā prima dell'emanazione del decreto, si limita a sconsigliare l'uso dei frame piuttosto che a proibirlo:

È sconsigliato in generale l'uso dei frame nella realizzazione di nuovi siti. Ove non evitabile una definizione a frame (DTD frameset) avere cura che il codice interno ai frame sia conforme alle specifiche della DTD rigorosa e che ogni frame abbia un titolo significativo per facilitarne l'identificazione e la navigazione. Se necessario, descrivere anche lo scopo dei frame e la loro interazione. (Requisito 2)

Questa posizione sembra coerente con le direttive del W3C: lungi dal vietare la struttura a cornici, le linee guida 12.1 e 12.2 si limitano infatti ad alcune prescrizioni sul loro uso. Ma, a prescindere dalla presunta indulgenza delle linee guida, il fatto stesso che i frame richiedano una DTD meno rigorosa della Strict, è di per sè eloquente. Commentando punto per punto lo Studio sulle linee guida, Michele Diodati avanza alcune considerazioni pratiche sull'uso dei frame:

Dare un titolo sensato ai frame è sufficiente, in linea teorica, per renderli accessibili. Ma consideriamo la pratica piuttosto che la teoria. La pratica ci dice che, di solito, il menu di navigazione sta in un frame ed i contenuti in un altro (spesso con contorno di altri vari frame, a complicare le cose). Ciò significa che l'utente che naviga con un sintetizzatore vocale, ogni volta che vuole cambiare pagina è costretto a ritornare al frame con il menu, per poi passare nuovamente, dopo aver scelto un qualsiasi collegamento, al frame con il contenuto selezionato.

Infine, riproponendo pressochè invariato il secondo requisito tecnico della legge Stanca, il decreto ministeriale dell'1 marzo 2005 taglia la testa al toro:

Non è consentito l'uso dei frame nella realizzazione di nuovi siti. In sede di prima applicazione, per i siti Web esistenti già realizzati con frame è consentito l'uso di HTML 4.01 o XHTML 1.0 con DTD frameset, ma con le seguenti avvertenze:

  • a) evitare di utilizzare, all'interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definire 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 (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
  • b) fare in modo che ogni frame abbia un titolo significativo per facilitarne l'identificazione e la navigazione; se necessario, descrivere anche lo scopo dei frame e la loro relazione;
  • c) pianificare la transizione a XHTML almeno nella versione 1.0 con DTD Strict dell'intero sito dandone comunicazione alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie e al Centro nazionale per l’informatica nella pubblica amministrazione.

Insomma, se proprio non si riesce a fare a meno dei frame, si deve comunque cercare di separare il più possibile la forma dal contenuto tramite i CSS, lo standard elaborato dal W3C per la presentazione visiva delle pagine web. Nella maggior parte dei casi, comunque, è possibile aggirare il problema evitando l'uso dei frame, conservandone al contempo i vantaggi: i fogli di stile dispongono infatti di regole per l'impaginazione a livelli in grado di riprodurre con efficacia una struttura a riquadri. Delegando ai CSS questo compito, si evita di introdurre elementi di presentazione all'interno del codice XHTML (le cornici).

Nei prossimi capitoli descriverò alcune tecniche che permettono di emulare la gestione con i frame delle parti fisse e invariabili di un sito.

Con una struttura a cornici è possibile mantenere fisse solo alcune sezioni della pagina: la suddivisione in parti fisse e parti scorrevoli permette per esempio di scorrere contenuti molto lunghi tenendo sempre sott'occhio e a portata di "click" il menu di navigazione, oppure di tener fissi l'intestazione o il footer.
Nel primo capitolo illustrerò una tecnica compatibile con tutti i principali browser (IE 5.5, IE 6.0, Mozilla, Netscape, Opera) per ottenere questo effetto senza ricorrere ai frame.

La struttura a cornici permette inoltre di sostituire nel corso della navigazione alcuni riquadri, mantenendone invariati altri: è sufficiente inserire in appositi frame le parti comuni a tutte le pagine di un sito (per esempio, il menu di navigazione o l'intestazione), evitando così di riscrivere una stessa porzione di codice per ogni pagina.
Nel secondo capitolo descriverò due tecniche, una lato server (SSI) e una lato client (JavaScript), che consentono di godere di questo vantaggio senza usare i frame.

torna su

2. Fissare un riquadro senza frame

2.1 Menu fisso, contenuto scorrevole

Con una struttura a frame, è possibile effettuare lo scrolling di una sezione mantenendo fissi gli altri riquadri (vedi esempio "Menu fisso, contenuto scorrevole" ).
L'istruzione CSS position:fixed, fissando la posizione di un elemento indipendentemente dallo scorrimento del resto della pagina, riproduce perfettamente questa caratteristica. È per esempio possibile affiancare un contenuto scorribile ad un menu fisso.

#menuFisso {
position: fixed;
}

Applicando questo stile, il menu rimarrà immobile a dispetto del resto della pagina, ma solo con alcuni browser: sfortunatamente, infatti, IE applica l'istruzione in maniera errata. C'è un modo per aggirare il problema: infatti, se non è possibile fissare il posizionamento di un elemento con IE, è però possibile renderlo scorribile.

Innanzitutto, per IE va mantenuto il posizionamento assoluto:

#menuFisso {
position: absolute;
}

In secondo luogo, occorre un hack per riservare l'istruzione position:fixed ai browser in grado di intepretarla correttamente.

body>#menuFisso {
position: fixed;
}

L'hack serve a nascondere la regola a IE: incapace di comprendere il selettore figlio >, IE semplicemente ignorerà l'istruzione, continuando a tener per buono il valore di posizionamento precedente (position:absolute).
Nel foglio di stile, è necessario che questa istruzione compaia dopo. Infatti, quando una proprietà viene definita più volte per lo stesso elemento (come in questo caso), il meccanismo di lettura "a cascata" dei CSS dà la priorità alla regola che, in ordine di apparizione, compare dopo.

Le regole di stile per ottenere con IE un box fisso senza ricorrere ai frame sono le seguenti:

body {
overflow: hidden;
}
#contenitore {
height: 100%;
overflow-y: auto;
}

La regola overflow-y:auto genera una barra di scorrimento per visualizzare la porzione di contenuto che eccede in altezza la dimensione del contenitore. Con questo stratagemma, si ottiene l'effetto desiderato: il contenuto scorre, il resto della pagina (menu compreso) rimane fisso.

Per riservare queste regole a IE, è sufficiente includerle in un commento condizionale, che permette di circoscrivere ai browser menzionati (nella fattispecie, IE) la lettura della porzione di codice in esso contenuta.

<!—[if IE]>
.........
<![endif]>

Perchè la tecnica funzioni anche su IE 6.0, è necessario forzarlo ad entrare in Quirks Mode (modalità "retrocompatibile", che simula cioè il comportamento delle versioni precedenti del browser). Un semplice trucco per ottenere questo risultato è inserire un commento prima del DOCTYPE.

<!--commento per forzare IE 6.0 ad entrare in Quirks Mode-->

In alternativa al commento, è sufficiente aggiungere prima del DOCTYPE la consueta dichiarazione della versione dell'XML (attualmente, l'unica possibile è l'1.0) e del set di caratteri usati:

<?xml version="1.0" encoding="iso-8859-1"?>

In questo modo, la tecnica sarà compatibile con tutte le versioni di IE.

Un ultimo accorgimento: per far sì che la barra di scorrimento generata con l'istruzione overflow:auto imiti verosimilmente quella originale del browser, ci si deve assicurare che i margini del box siano adiacenti ai confini dello schermo. La presenza benché minima di un margine rischierebbe di svelare il trucco: per spaziare il contenuto dai confini del box, occorre perciò ricorrere al padding, e non al margin.

2.2 Footer e intestazione fissi, contenuto scorrevole

Oltre al menu, capita spesso che anche l'intestazione e il footer vengano inseriti in frame fissi. La tecnica del paragrafo precedente può essere sfruttata per ottenere un'intestazione fissa sempre visibile all'inizio della finestra e un footer fisso sempre visibile al fondo della finestra (vedi esempio "Footer e intestazione fissi, contenuto scorrevole").

Per i browser che supportano il posizionamento fisso, come nel caso precedente, è sufficiente impostare la regola position:fixed per i blocchi contenenti il footer e l'intestazione, nascondendo l'istruzione a IE tramite il child selector >.

body>#titoloFisso {
position: fixed;
}

body>#footerFisso {
position: fixed;
}

Per IE, occore qualche riga di codice in più. Come nel paragrafo precedente, per garantire una corretta applicazione delle istruzioni, occorre che le seguenti regole precedano nel foglio di stile, in ordine di apparizione, quelle riservate ai browser che supportano il posizionamento fisso.

body {
padding-top: 3em;
padding-bottom: 3em;
}

#titoloFisso {
position:absolute;
top: 0;
height: 3em;
}

#footerFisso {
position: absolute;
bottom: 0;
height: 3em;
}

Innanzitutto, intestazione e footer vanno posizionati in maniera assoluta, rispettivamente, all'inizio della pagina (top: 0) e al fondo (bottom: 0).
Al corpo del documento vanno aggiunti valori di padding-top e di padding-bottom pari, rispettivamente, alle altezze dell'intestazione e del footer (nella fattispecie, 3em e 2em).
In questo modo, ci si assicura che l'intestazione preceda il contenuto e che il contenuto non si sovrapponga al footer con lo scrolling.

Per garantire la compatibilità con IE, il browser va settato in modalità Quirks Mode, inserendo un commento prima del DOCTYPE.

Poi, vanno incluse in un commento condizionale le seguenti regole di stile specifiche per IE:

<!—[if IE]>
body {
overflow-y: hidden;
}
#contenuto { height: 100%; overflow: auto; }<![endif]>

L'intero contenuto della pagina - tranne il footer e l'intestazione - viene incluso in un div con proprietà overflow impostata ad auto.
Nel documento, questo blocco segue il div dell'intestazione e precede il div del footer.

In questo caso, però, il trucco non riesce del tutto: la barra di scorrimento del div contenitore, iniziando al di sotto dell'intestazione e terminando in prossimità del footer , rivela la sua natura fittizia. Con la proprietà position settata a fixed, invece, la barra (essendo quella originale del browser) scorre dall'inizio fino alla fine della finestra senza produrre questo fastidioso effetto.

torna su

3. Gestire le parti comuni di un sito senza frame

3.1 Una soluzione lato server: SSI

In una struttura a frame, le modifiche apportate alle parti comuni del sito (per esempio, l'intestazione o il menu di navigazione) si ripercuotono in tutte le pagine. In questo modo, includendo queste parti in appositi frame, sarà sufficiente modificare soltanto un file, e non una per una tutte le pagine.
Per godere di questo vantaggio evitando i frame, è possibile gestire lato-server l'inclusione della porzione invariabile di codice tramite un'istruzione SSI (Server Side Includes). Questo tipo di inclusione viene effettuata dal server prima della spedizione del codice al browser, per cui la sintassi del comando SSI varierà a seconda del server e della piattaforma usati.
Ad esempio, per una piattaforma con sistema operativo Windows NT o Windows 2000 e come web server IIS, una volta creato il file contenente il codice comune, sarà sufficiente richiamarlo con la seguente istruzione:

<!--#include file="percorso/nomeFile.inc"-->

Il percorso (assoluto o relativo) può anche essere riferito ad una directory virtuale IIS con la seguente istruzione:

<!--#include virtual="percorso/nomeFile.inc"-->

A differenza del server IIS, che ammette qualsiasi estensione per le pagine contenenti l'istruzione SSI, Apache richiede di specificare l'estensione .shtml (server-parsed HTML): in questo modo, il server riconosce le pagine dotate di comandi di inclusione e processa solo queste, trascurando le altre.
Inoltre, se si usa l'istruzione #include file con Apache, occorre assicurarsi che il file da includere si trovi nella stessa directory della pagina principale; per impostare un altro percorso, è sufficiente ricorrere all'alternativa #include virtual.

3.2 Una soluzione lato-client: JavaScript

Innanzitutto, occorre inserire il codice relativo alla parte comune in una variabile di tipo stringa.

menu=“<div id=’menuFisso’>” +
“<ul>” +
“<li><a href=’one.html’>list item one</a></li>” +
“<li><a href=’two.html’>list item two</a></li>” +
“<li><a href=’three.html’>list item three</a></li>” +
“</ul>” +“</div>”;

Dato che il ritorno a capo non è ammesso, è consigliabile segmentare la stringa e distribuirla su più righe connesse mediante l'operatore di concatenamento +. Ciascuna stringa è aperta e chiusa da doppi apici, per cui eventuali valori di attributo dei tag vanno inseriti tra singoli apici.

La porzione di codice memorizzata nella variabile va salvata in un file .js esterno, che sarà sufficiente richiamare nell'head delle pagine in cui va effettuata l'inclusione:

<script language="JavaScript" 
src="percorso/nomeFile.js">

Poi, in ciascuna pagina, va inserito nel punto desiderato il seguente script:

<script language="JavaScript">
document.write(menu);
</script>

Il metodo write dell'oggetto document scrive il codice memorizzato nella variabile menu del file esterno.

A differenza della tecnica di inclusione lato-server, la gestione delle parti comuni tramite JavaScript funziona a prescindere dalla piattaforma. Tuttavia, presenta il solito inconveniente: alcuni utenti potrebbero avere JavaScript disattivato o addirittura non installato. Inoltre, i motori di ricerca ignoreranno il contenuto della variabile definita nel file esterno.

torna su

4. Webografia

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]