vai al menu sezioni pagina

'Accesso libero' dal sito 4elementi.info ~ accessolibero

sei su: Home [0] > Creiamo? > Accessolibero


Contenuti

primo stadio murale con figure umane su mansardasecondo stadio murale con figure umane su mansarda

menu di navigazione [2] ~ contenuti [3] ~ menu lingua [7]


La pagina che abbiamo creato è leggibile, ma mancano importanti elementi di definizione e orientamento.

Ogni pagina web deve contenere informazioni preliminari circa il tipo di codifica utilizzato, la lingua e il set di caratteri.
Questo blocco di informazioni andrà a sostituire il tag <html> che forse siamo abituati a inserire in automatico quando impostiamo un documento... hehehe...

Per le specifiche della dichiarazione della Dtd vi rimando alla guida di Roberto Scano Capitolo 4 (file pdf 1.044 kb), da pagina 11 a pagina 19.
La grammatica più accessibile è la XHTML 1.0 Strict.

Pensiamo adesso a rendere meglio navigabile il documento.

Inseriamo in ogni sezione (già contrassegnata da un'intestazione) un'àncora (così il titolo, nell'intestazione <h1> sarà preceduta dal tag <a> con l'attributo 'name': <a name="titolo">.
Ripetiamo la stessa operazione per le sezioni 'contenuti' e 'note'.

E' opportuno creare un menu che permette di raggiungere con un click le sezioni del documento: questo soprattutto ad uso di chi non legge lo schermo ma il codice, principalmente i non vedenti.
Il vantaggio di questa procedura consiste nel permettere all'utente che sfoglia il sito e legge la pagina in modo sequenziale di saltare, ogni volta che gira le pagine, i menu di navigazione e tutti i blocchi di testo che non intende rileggere.

Considerato che questa opzione è utile unicamente a chi non vede lo schermo e la grafica, creiamo una nuova classe che rende invisibile il nuovo menu:
seguendo il consiglio mutuato dalla guida di Roberto Scano utilizziamo questo codice
.invisibile{
width:0;
position:absolute;
height:0;
overflow:hidden;
top:-200em;}

e non <display:none> che nasconderebbe il testo anche ai lettori vocali dei non vedenti.

Creiamo un nuovo tag <div> cui assegniamo la classe invisibile, inseriamo un'intestazione <h2> e creiamo un'àncora con indirizzo <a name = "sezionipagina">, che richiameremo poi da altri punti della pagina con il link <a href = "#sezionipagina">.
All'interno inseriamo i collegamenti alle altre sezioni della pagina con la stessa sintassi, ad esempio <a href = "#contenuti"> e strutturati come lista non ordinata con il tag <ul>.

Per richiamare il menu di navigazione invisibile è opportuno inserire un link allo stesso alla fine di ogni sezione, o meglio di quelle non vicinissime al menu delle sezioni di pagina, come è la sezione titolo, in modo da ritornare al menu sezioni pagina solo se questo non risultasse raggiungibile al click nello scorrimento della pagina.
Utilizziamo al proposito la classe 'invisibile' che potremo attribuire a un tag <p> o a un tag <span>.

Infine utilizziamo una riga di codice all'interno di un tag <p> o <span> cui attribuirò la classe "invisibile" per contrassegnare l'inizio di ogni menu o sottomenu (prima o dopo il tag <ul> o <ol>): questo renderà semplice ai non vedenti indivisuare l'inizio e la fine di un elenco.
Possiamo anche indicare all'inizio di ogni lista il numero delle voci che la compone.

La pagina web così completata può dirsi accessibile, nella sua semplicità.
Visualizza la stessa pagina senza il Foglio di stile e il codice per confrontare tutte le opzioni consigliate sopra.

vai al menu sezioni pagina

Certificati di accessibilità e contatto con il webmaster

webmaster: dalziani [6]

xhtml valido

css valido

vai al menu sezioni pagina

Menu di navigazione

vai al menu sezioni pagina

Menu di scelta della lingua

vai al menu sezioni pagina
fine documento