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.