Accessibilità dei siti web

Benevenuti,
questa pagina é dedicata alla mia professione, da 8 anni mi occupo di grafica e web design, a questi due settori associo le mie grandi passioni ossia il disegno e la fotografia, questa unione mi permette di realizzare progetti di comunicazione visiva a tutto tondo.

Questo blog non é in larga parte accessibile, per diversi motivi:
• 2. questo sviluppando un template accessibile, ma finché non sará pronto evito di pubblicarlo
• 3. questo template attualmente on line é fighissimo perció me lo tengo!

Da più di un anno mi occupo per conto della Nike Web Consulting anche dell´ottimizzazione del codice dei siti e degli applicativi web alla luce delle direttive del W3C e della legge Stanca. Credo che sia necessario adeguare i supporti web a un codice pulito e a una semantica corretta. Attualmente sto lavorando sull´ottimizzazione di applicativi gestionali per conto di CONSIP e Ragioneria Generale dello Stato, ritengo questa esperienza una grandissima e utilissima palestra in cui misurarmi con le problematiche più accentuate di usabilità delle pagine web.
Mai come in queste situazioni si fa molto complessa la logica con cui applicare i 22 requisiti della legge Stanca, soprattutto in situazioni dove vengono presentate pagine "miste" ossia con la struttura tipica di una pagina web (menú di primo e secondo livello, bread crump, parti testuali descrittive) e la presenza di moduli tipo questionario o meccanismi di automazione del calcolo (per cui massiccia presenza di controlli, tabelle dati semplici e complesse con doppie intestazioni).
Chiaramente la maggior parte delle soluzioni si trovano nell´utilizzo delle regole css i cui faccio massiccio uso.

qui di seguito una mia F.A.Q. list per tutto ció che riguarda l’ottimizzazione del codice:

SOMMARIO:

• 1. utilizzo delle intestazioni di pagina
• 2. inserimento di ancoraggi nascosti
• 3. una pagina piú fogli di stile
• 4. determinare la grandezza dei font
• 5. sciogliere gli acronimi (es. W3C)
• 6. utilizzo del tag <filedset>

INTESTAZIONI
• Utilizzare in maniera coerente le intestazioni (tag h), il che significa che é necessario seguire la gerarchia di h1, h2, h3 etc in ogni pagina, per cui se ad esempio il titolo della pagina é in h1 non possiamo mettere subito dopo un h3, ma definire immediatamente un h2
  mi é capitato molto spesso di partire in questo modo:
  nella testata inserire il logo in h1 (magari reso link che porta sempre alla home page) titolo della pagina h2, titoli delle varie sezioni h3, titoli delle notizie o dei paragrafi in h4, di solito il mio css parte cosí:

h1{
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:large;
font-weight:normal;
color:#000000;
}

h2, h3{
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
color:#000000;
}

h4, h5{
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
color:#000000;
}
  
  l’utilizzo delle virgolette (“”) nella dichiarazione del font family, forza il browser a cercare nei font di sistema per l’appunto il carattere virgolettato

torna al sommario

ANCORAGGI
• inserire ancoraggi all’interno delle pagine prodotte permette una navigazione più agevole e soprattutto permette agli utilizzatori di screen reader di navigari più velocemente all’interno del sito. E´ consigliato inserire degli ancoraggi nascosti sopra la testata del sito in maneira tale da agevolare la navigazione senza bisogno di dover passare per i menù di navigazione (spesso c’è la necessità di inserire più di un menù)
  
  Per nascondere le ancore io uso questa tecnica:
  .AncNsc{height:0;width0; overflow:0;top:-1000em}
  In questo modo le ancore non daranno fastidio alla presentazione della pagina nel browser (top:-1000em manda il testo ben lontano!) e gli utilizzatori di screen reader saranno velocemente indirizzati ai contenuti principali della pagina.

torna al sommario

MULTI CSS
• Un metodo di lavoro che ultimamente sta risultando valido e economico ai fini della gestione dei fogli di stile é quello di creare un foglio di stile per ogni elemento essenziale del sito.
  la struttura sará quindi cosí:
  • master.css – unico file che conterrá i link ai vari fogli di stile che ci servono per il nostro sito
  • body.css – css che conterrá le regole che determinano gli elementi principali della pagina (body, paragrafo, intestazioni etc)
  • table.css – css che conterrá le regole che determinano gli elementi delle tabelle presentazionali, tabelle dati e fieldset (table, td, th, tr, caption, fieldset, legend, summary)

torna al sommario

GRANDEZZA DEI FONT
• Un a delle principali preoccupazioni quando si disegna una interfaccia è relativa alla corretta renderizzazione di quanto creato sui browser più diffusi e su alcuni datati (es. IE7, IE6, Mozzilla Firefox 3, Mozzilla Firefox 2, Opera9, Opera8, Safari etc), una delle prime differenze che si nota nelle diverse renderizzazioni tra i browser è relativa ai font, per quanto riguarda la grandezza io preferisco usare sempre le Keyword (small, medium, large)
  per cui una classe tipica la scriverò così
  p{font-family:"Arial", Helvetica, sans-serif; font-size:small; color:#00000;}

torna al sommario

SCIOGLIERE GLI ACRONIMI
• sciogliere gli acronimi presenti nei testi pubblicati è una regola che andrebbe sempre seguita, per vari motivi, spesso sono acronimi in altre lingue (inglese) oppure non sono di dominio comune (ma acnhe se lo fossero, è sempre buona cosa dichiararli). Capita spesso di trovarsi testi pieni di acronimi, soprattutto nell’ambito della pubblica amministrazione che sono sconosciuti alla maggior parte dell’utenza.
  Un esempio potrebbe essere questo:
  
  W3C
  
  al passaggio del mouse sopra la scritta W3C appare una label che illustra l’acronimo.

torna al sommario

UTILIZZO DEL TAG <filedset>
• l’utilizzo di questo tag è fondamentale quando dobbiamo utilizzare dei form (ad esempio per la registrazione di un utente), ma il suo utilizzo deve essere circoscritto solo in presenza di controlli come input text, etc
  Importante anche l’utilizzo del tag <legend> che serve per definire l’argomento del fieldset ad esempio "Anagrafica Utente"
  
  
  
<fieldset>
<legend>cerca nel sito</legend>
<form>
<input name="testo" type="text" />
<input name="cerca" type="button" />
</form>
</fieldset>


torna al sommario

Lascia un commento

Click here to cancel reply.

Username (required) :
Email (required) :
Web Site :
Commento :

CAPTCHA Code