Seconda Parte – Fissare i paletti

I vincoli progettuali

Prima di iniziare ad implementare, come buona prassi è bene fare un’analisi accurata su cosa implementare e come.

Il nostro scopo è costruire un calendario che visivamente si presenti come un qualsiasi calendario di qualsiasi altro sito facendo uso di xHTML e CSS. Disabilitando i CSS il nostro calendario non dovrà perdere affatto di significato. Anzi dovrà acquisirne per essere apprezzato ancor più di quanto lo possa essere stato nella sua forma decorativa.

Cosa dovremmo vedere quindi?

Se i CSS sono abilitati la nostra visione dovrà essere di un calendario in forma “tabellare”. Se i CSS fossero disabilitati, la nostra visione dovrà essere di un elenco di N settimane ciascuna riportante sette giorni.

Ogni giorno riportante gli eventi dovrà essere identificato da un link ad una ipotetica pagina degli eventi.

Per consentire ad un cieco di saltare subito all’evento successivo, bisognerà prevedere che il giorno contrassegnato dagli eventi sia seguito da un link indicante: vai alla pagina successiva.

Inoltre si vuole prevedere un navigatore di base che consenta a chi usa uno screen reader di passare immediatamente al primo evento, e alle varie settimane del calendario, indicando per ciascuna settimana il numero di eventi che ci saranno.  

Prepariamo il piano di gioco

Come buona regola bisogna armarsi di tanta pazienza e molto sangue freddo quando si decide di sviluppare qualcosa che sia accessibile, gradevole di aspetto e comunque funzionale.
Tenendo fede ai vincoli progettuali iniziamo con il definire alcune regole di stile che ci torneranno utili continuamente nella definizione del calendario.

  1. #box-calendario .hidden{
  2.         font-size: 1px;
  3.         position: absolute;
  4.         left: -9999px;
  5.         width:0px;
  6.         height: 0px;
  7.         overflow: clear;
  8. }

Questa regola ci consentirà di simulare un altra regola che solitamente viene utilizzata nei fogli di stile per nascondere degli elementi ed assicurarsi che gli stessi elementi soggetti a questa regola non occupino dello spazio. La regola di cui sto parlando è: display: none;

La differenza tra l’utilizzare il Display: none; e la regola che abbiamo definito è nel modo in cui uno screen reader interpreta le due. La soluzione proposta garantisce che qualsiasi screen reader riesca a leggere comunque quello che vi è scritto pur non mostrando di fatto quello che è presente a video.

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Diego La Monica
Diego La Monica
Programmatore esperto nei linguaggi del Web, ha scritto diversi articoli di carattere tecnico. Ha partecipato allo sviluppo di alcuni progetti OpenSource e ha tenuto diversi corsi per lo sviluppo di applicazioni web con strumenti Open Source. Le sue competenze in materia di analisi e sviluppo software gli hanno consentito di sviluppare un Framework Javascript per rendere più agevole lo sviluppo di applicazioni e siti web di ultima generazione cross-browser e multi piattaforma. La sua membership in IWA, gli ha consentito di partecipare ad alcuni gruppi di lavoro del W3C: HTML5 Working Group e Protocols and Formats Working Group al quale attualmente partecipa attivamente. Inoltre per IWA ha incarichi di responsabilità per la gestione e coordinamento delle Mailinglist tecniche e supporto alla manutenzione dei siti web.  Grazie alle sue competenza in materia di Standards, Usabilità ed Accessibilità ha avuto incarichi da diverse PA per lo  sviluppo e la resa di accessibilità dei siti istituzionali oltre ad avere incarichi per la manutenzione di software orientato al Web.

Commenti

Nessun commento

    Rispondi

    Link e informazioni