Un esempio di Javascript unobtrusive e progressive enhancement

Il tema dell'accessibilità e dell' usabilità non è nuovo agli sviluppatori di applicazioni. In alcuni contesti, come nella realizzazione di applicazioni per windows, per mac o per linux, lo sviluppo di gui usabili ed accessibili è ormai prassi consolidata. Gli stessi sistemi operativi offrono agli sviluppatori oggetti, metodi e soluzioni per lo sviluppo di questo tipo di interfacce. Nello sviluppo di applicazioni web, soprattutto quelle basate su xhtml e javascript, questa metodologia di sviluppo non è sempre seguita e la realizzazione di applicazioni accessibili è lasciata completamente alla competenze dello sviluppatore.

Le tecniche utilizzate per la realizzazione di applicazioni web usabili ed accessibili seguono i paradigmi di programmazione definiti "unobtrusive javascript" e "progressive enhancement". Molto grossolanamente ciò significa realizzare interfacce grafiche in cui la presentazione sia realizzata indipendentemente dalla logica di utilizzo in modo tale da rendere utilizzabile l'applicazione in qualunque contesto (con browser diversi, con o senza supporto css, con o senza supporto javascript). In particolare, l'utilizzo di codice javascript deve tener conto di quella che viene definita "graceful degradation" cioè della adattabilità del codice realizzato ad essere eseguito su client che hanno supporto limitato al javascript o non ne hanno affatto.

L'esempio che propongo riprende un recente ed ottimo post di Mario Spada  proprio su questo argomento. Il codice presentato da Mario è molto interessante e, in pieno stile "progressive enhancement", può essere ulteriormente modificato.

Gli script che ho realizzato consentono di stampare una tabella e, qualora il client che la visualizza abbia un adeguato supporto javascript, vengono create a runtime delle checkbox che permettono all'utente di selezionare le righe che intende stampare. Cliccando sulla checkbox presente nell'intestazione della tabella, possono essere selezionate o deselezionate automaticamente tutte le righe.

Le parti più interessanti del codice sono presenti nella funzione init eseguita al caricamento della pagina.

• function init(){
  • //Add a column to header
  • var myTableHeaderRow = document.getElementById('myTableHeader').getElementsByTagName('tr');
  • var tmpColumn = document.createElement('td');
  • var tmpCheckBox = document.createElement('input');
  • tmpCheckBox.name="checkboxAll";
  • tmpCheckBox.type="checkbox";
  • tmpCheckBox.className="DONTEverPrint";
  • tmpCheckBox.onclick = function() {
    • checkDecheck(this.checked);
  • }
  • tmpColumn.appendChild(tmpCheckBox);
  • myTableHeaderRow[0].insertBefore(tmpColumn, myTableHeaderRow[0].firstChild);
  •  
  • //Add a column (and a checkbox inside) to each row
  • var myTableRows = document.getElementById('myTableBody').getElementsByTagName("tr");
  • for (i = 0; i < myTableRows.length; i++) {
    • var tmpColumn = document.createElement("td");
    • var tmpCheckBox = document.createElement("input");
    • tmpCheckBox.name="checkbox"+i;
    • tmpCheckBox.type="checkbox";
    • tmpCheckBox.className="DONTEverPrint";
    • tmpCheckBox.onclick = function() {
      • select_row(this,'#cccccc');
    • }
    • tmpColumn.appendChild(tmpCheckBox);
    • myTableRows[i].insertBefore(tmpColumn, myTableRows[i].firstChild);
    • myTableRows[i].className = 'DONTPrint';
  • }
• } 

Una demo dell'esempio è disponibile qui.

Ulteriori miglioramenti possibili

Lo sviluppo del codice ha richiesto l'uso della funzione "getElementsByTagName". Questa funzione ha in effetti qualche problema di compatibilità cross-browser ed andrebbe riscritta come indicato in questo post.

Pur se il codice xhtml risulta valido, la realizzazione della tabella può essere ulteriormente migliorata in termini di accessibilità per aumentare il grado di compatibilità con i più noti screen reader come indicato in questo post.