Archivi tag: corso

Costi e vantaggi nel garantire l’accessibilità web

Pubblicato il da

Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Garantire l’accessibilità ad un sito è sicuramente un’operazione costosa. Innegabili sono però i vantaggi dati da un sito accessibile, sia in termini di business, sia di audience. Rendere un sito accessibile va quindi al là dell’adeguamento alle norme di legge e delle operazioni di marketing.

Questioni di business

Quasi sempre lo scopo di un sito è attirare visitatori per vendere un bene o per proporre un servizio. Più alto è il numero dei visitatori soddisfatti dal sito, maggiore sarà la probabilità che diventino visitatori assidui. I visitatori assidui sono quelli che più facilmente si trasformano in clienti abituali.

Se un sito è accessile, è sicuramente usabile. Un sito è usabile quando svolge il compito prefisso, quando è usato efficacemente dagli utenti, quando è semplice da imparare e semplice da ricordare.

Per costruire un sito accessibile ed usabile bisogna preoccuparsi di realizzare una navigazione chiara e consistente. Chiara perchè deve essere interpretata dall’utente in pochi secondi, consistente perchè deve accompagnare il visitatore durante tutta l’esperienza del sito, senza cambiare radicalmente di pagina in pagina.

Le persone disabili rappresentano una buona parte della popolazione. Facilitare l’accesso a questa fascia non è solo doveroso, ma può incrementare sensibilmente il numero di utenti ai propri servizi.

Il computer può rappresentare lo strumento più efficace che una persona disabile ha per fare acquisti od ottenere un servizio.

Conformità agli standard

Come vedremo in seguito, uno dei presupposti nella creazione di un sito accessibile è la perfetta aderenza agli standard del W3c.

Lo sforzo non è sempre facile (inutile negarlo), ma ha un buon numero di conseguenze positive.

Supporto per tutti i browser

Utilizzare i tag e le soluzioni standard facilita la visualizzazione del sito su diverse piattaforme. Adottare delle specifiche proprietarie, al contrario, potrebbe provilegiare un browser agli altri, con conseguente calo dell’usabilità e dell’accessibilità. Questo sembra a prima vista semplice da ottenere, ma all’oggi solo un’esigua percentuale di siti supera brillantemente il validator del W3c. È molto più facile utilizzare giochi con l’Html per ottenere visivamente l’effetto voluto scostandosi però dagli standard.

Notate che “supporto per tutti i browser” non è sinonimo di “visualizzare le pagine in browser diversi in modo identico”. Usare correttamente gli standard del W3c porta quasi sempre a discrepanze di visualizzazione, come spazi tra le celle di dimensioni leggermente diverse ed elementi delle form con comportamenti eterogenei. Un design ben realizzato è quello che rende la pagina gradevole ed utilizzabile tenendo conto delle possibile differenze.

Portabilità

Un sito conforme agli standard è un sito portabile. Non solo è facilitata la visualizzazione in diversi browser, ma la traduzione del sito verso altre periferiche, come Pda e cellulari, è estremamente più facile. Come abbiamo già avuto modo di dire è sicuramente meglio partire dagli standard Xhtml e Xml: già così il processo di traduzione è notevolmente semplificato.

Motori di ricerca

L’adozione degli standard per l’accessibilità facilita il lavoro dei motori di ricerca al momento dell’indicizzazione del sito. Alcune caratteristiche dei siti accessibili potrebbero addirittura premiare il sito in un motore di ricerca:

  • l’inserimento dell’attributo alt e longdesc per le immagini può essere scandito dal motore che ne può ricavare utili informazioni per l’indicizzazione
  • il contenuto alternativo degli script può essere letto dal motore
  • il motore può ricavare dati anche dall’ attributo title dei link
  • il corretto utilizzo dei tag Html per distinguere gli header e il contenuto consente al motore di premiare le intestazioni rispetto al corpo del documento

Questioni di immagine

Rendere il sito accessibile ad una vasta platea è indice di serietà da parte del costruttore. Quante volte siamo entrati in un sito solo per scoprire che funziona correttamente ad una risoluzione di 1024×768 con Internet Explorer e Windows?

Se un sito è l’immagine dell’azienda, un sito accessibile è indice che stiamo colloquiando con qualcuno disposto al dialogo e attento alle esigenze degli utenti.

I costi

Garantire un buon livello di accessibilità ad un sito è un’operazione che ha dei costi. I costi possono variare sensibilmente, soprattutto se si sta progettando un nuovo sito o adattando un sito esistente. Esistono comunque dei costi di manutenzione, richiesti per mantenere il livello di accessibilità al crescere del sito.

Costruire un sito accessibile

È sicuramente meglio includere le politiche di accessibilità già da subito, durante la progettazione di un sito.

Vi accorgerete che rendere un sito accessibile significa scendere a compromessi. Prima di tutti scordatevi di usare trucchi nell’Html per superare i limiti dei browser.

Un esempio tra tutti: i bordi del browser. Internet Explorer e Netscape lasciano qualche pixel di spazio tra il bordo del navigatore e i contenuti della pagina. Il designer è solito inserire nel tag body qualcosa del tipo: <body topmargin=”0″ bottommargin=”0″ marginheight=”0″ marginwidth=”0″ leftmargin=”0″ rightmargin=”0″>. Si tratta di attributi non standard che tutti usano, ma che nell’ottica di un sito Accessibile (con la A maiuscola) dovrebbero essere evitati.

Stesso discorso per la navigazione, la grafica e l’uso dei plug-in. Rendere la navigazione del sito chiara ed efficace e consentire a tutti un accesso alle informazioni può all’inizio sembrarvi limitante. Non si tratta però di un limite: dovete maturare la vostra competenza ed unire la vostra creatività alle richieste di un sito accessibile.

Adottare degli standard e delle metodologie efficaci, come una navigazione coerente e i Css può anche essere un’operazione vantaggiosa e ridurre in qualche caso i tempi di sviluppo dell’intero sito.

Rendere accessibile un sito esistente

È la cosa più complessa da fare.

È difficile costruire un sito veramente accessibile partendo da una vecchia versione. Di solito si preferisce allora aumentare l’accessibilità del sito dove l’intervento è più semplice (inserire i tag e gli attributi accessibili nei nuovi contenuti, aumentare i contrasto nelle barre di navigazione, ritoccare i Css).

Alcune linee guida per l’accessibilità (che vedremo in dettaglio) sono invece decisamente difficili da incorporare in un secondo momento:

  • la linearizzazione efficace delle tabelle
  • l’opportuno uso del markup
  • la costruzione di pagine conformi agli standard
  • la creazione di un layout “liquido”

Come se non bastasse, molti siti sono frutto dell’unione di template Html con dati prelevati da un sistema di “Content Management“, cioè un database. Se i requisiti per l’accessibilità non sono stati previsti da chi ha costruito il programma, avete poche chance di rendere il sito realmente accessibile. Un esempio è avere la possibilità di caricare nel sistema delle immagini, ma di non poter inserire la descrizione per gli alt o per i longdesc. Rendere accessibile il sito può voler dire riscrivere parti dell’applicativo, ammesso che questo sia stato “costruito” in casa. Se è un prodotto a pacchetto, non vi resta che sperare in un aggiornamento.

Costi di manutenzione

Non basta creare un sito accessibile e poi dimenticarsene. Anche se non modificherete i template delle pagine ogni nuovo articolo, scheda, modifica devono essere controllati per verificare il rispetto dei requisiti di accessibilità prefissi. Difficile fornire delle statistiche attendibili. Prendendo come esempio gli articoli di FucinaWeb.com, la stesura di codice Xhtml valido con alt-text delle immagini accessibili, l’uso di tabelle e markup efficace e la fase di test aumentano la normale tempistica di sviluppo di circa il 15-20%.

Costi di addestramento

Abbiamo detto che per garantire un buon livello di accessibilità non è sufficiente controllare le pagine con uno strumento di verifica automatico.

È necessario eseguire dei test manuali e soprattutto porsi nei panni di chi accede al sito.

Non è una conoscenza che matura in poco tempo e soprattutto riguarda diverse figure professionali, tra cui le maggiormente coinvolte sono:

  • il designer che prepara l’interfaccia grafica del sito
  • lo sviluppatore che realizza le applet e gestisce form e maschere di ricerca
  • l’editor che inserisce i contenuti del sito

Si tratta di conoscenze che non è sufficiente acquisire una volta. Gli standard e le linee guida per l’accessibilità sono ancora allo stato embrionale. C’è ancora molto da dire e fare per rendere un sito accessibile (e non solo dal punto di vista di chi crea il sito, ma anche dei produttori di browser). Chi si occupa di accessibilità deve essere pronto a rimanere costantemente aggiornato.

Potete affidare lo studio di accessibilità ad un consulente esterno. Ricordate però che tutti i contenuti (anche quelli futuri) dovranno essere verificati per garantirne l’accessibilità.

ASP.NET: i List Controls – Lavorare con gli insiemi di dati

Pubblicato il da

Corso ASP.NET: settima puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

I List Controls sono dei controlli creati per agire sui dati. Sono utilizzati per visualizzare dati provenienti da collezioni e da database.

Anche se l’esempio che segue utilizza delle collezioni di dati fittizie per popolare i List Controls, il procedimento è il medesimo qualunque sia la sorgente dati a cui connettersi.

Una pagina con List Controls

Ecco alcuni List Controls:

Alcuni List Controls

Si tratta di ComboBox, CheckBox e Radio Buttons.

ASP.NET semplifica enormemente la costruzione del “legame” tra codice e dati, favorendo il più possibile la separazione tra codice e contenuto.

Analizziamo quindi il codice sorgente delle parti significative della pagina:

 90     <div class="titolo">DropDownList Control</div>
 91     
 92      <p>Selezionare una voce dall’elenco</p>
 93 
 94      <asp:DropDownList id="frutti" runat="server">
 95        <asp:ListItem value="Fr">Fragola</asp:ListItem>
 96        <asp:ListItem value="La">Lampone</asp:ListItem>
 97        <asp:ListItem value="Ci">Ciliegia</asp:ListItem>
 98      </asp:DropDownList>
 99 
100      <br /><br />
101 
102      <asp:Button id="button1" Text="Invia" OnClick="Button1_Click" runat="server"/>

Nel codice sopra riportato non è presente niente di eccezionale. È dichiarato un controllo di tipo DropDownList contenente alcuni controlli ListItem. Lo scopo è quello di realizzare una serie di tag di tipo select. Conclude il codice (riga 102) un pulsante per l’invio della selezione.

106     <div class="titolo">ListBox Control</div>
107 
108      <p>Selezionare una voce dall’elenco</p>
109 
110      <asp:ListBox id="artisti" rows="2" selectionmode="Multiple" runat="server">
111        <asp:ListItem value="Pi">Picasso</asp:ListItem>
112        <asp:ListItem value="Kl">Klee</asp:ListItem>
113        <asp:ListItem value="Mo">Modigliani</asp:ListItem>
114      </asp:ListBox>
115 
116      <br /><br />
117 
118      <asp:Button id="button2" Text="Invia" OnClick="Button2_Click" runat="server"/>

Qui è invece dichiarato un oggetto di tipo ListBox, molto simile al DropDownList, ma che presenta i dati su più righe. Notare la presenza dell’attributo selectionmode=”Multiple” che consente la selezione di più voci tenendo premuto il pulsante Ctrl.

Agire sui List Controls da codice

Se osserviamo con attenzione il codice e lo confrontiamo con il risultato a video, notiamo che:

  • a video la DropDownList contiene un valore “Mango” non presente nel codice
  • a video la ListBox contiene 3 artisti (Dalì, Magritte, Mirò) non presenti nel codice

Gli elementi mancanti sono stati aggiunti da codice, in particolare nell’evento Page_Load:

 17 Sub Page_Load(sender as Object, e as EventArgs)
 18 
 19   ‘Se il Mango non e’ gia’ presente, lo aggiungo
 20   Dim lsiFrutto as New ListItem("Mango","Ma")
 21   If Not frutti.Items.Contains(lsiFrutto) Then
 22    frutti.Items.Add(lsiFrutto)
 23  End If
 24 
 25   ‘Aggiungo altri artisti
 26  Dim i as integer
 27  Dim aArtisti As String(,) = New String(,) {{"Dal","Da"}, {"Magritte","Ma"}, {"Mir","Mi"}}
 28 
 29  For i = 0 to UBound(aArtisti)
 30     If Not artisti.Items.Contains(New ListItem(aArtisti(i,0),aArtisti(i,1))) Then
 31      artisti.Items.Add(New ListItem(aArtisti(i,0),aArtisti(i,1)))
 32    End If
 33   Next i
 34   
 35 End Sub

Nel primo caso è controllata la presenza di una voce “Mango” nell’insieme Items dell’oggetto “frutti”; nel caso non sia trovata è aggiunta all’elenco.

Nel secondo caso il procedimento è leggermente più complesso, ma la filosofia di fondo non cambia:

  • è dichiarato un array con i tre artisti
  • con un ciclo è controllata la presenza di uno dei tre artisti tra quelli già presenti
  • se l’artista non è già presente viene aggiunto alla lista

L’esempio ha evidentemente poco senso in un caso reale, ma dimostra una volta di più come il codice Visual Basic rimanga ben separato dal codice Html della pagina.

L’ultimo List Control presentato sulla pagina è il RadioButtonList Control. Niente di nuovo rispetto a quanto già visto, a parte la possibilità di ordinare verticalmente od orizzontalmente i radio button. Lo rende disponibile la linea:

137  <asp:CheckBox id="chkOrientamento" class="txt" OnCheckedChanged="chkOrientamento_CheckedChanged" AutoPostBack="true" Text="Orizzontale" runat="server" />

Non appena si clicca per cambiare l’ordinamento è richiamato l’evento chkOrientamento_CheckedChanged che alternativamente imposta la proprietà RepeatDirection:

 62 Sub chkOrientamento_CheckedChanged(sender As Object, e As EventArgs)
 63   If sender.Checked = True Then
 64     sport.RepeatDirection = RepeatDirection.Horizontal
 65   Else
 66     sport.RepeatDirection = RepeatDirection.Vertical
 67   End If
 68 End Sub

Invio della form

Ma che cosa succede quando premiamo “invia” nella form?

 37 Sub Button1_Click(sender As Object, e As EventArgs)
 38   risposta.Text = "Hai selezionato ‘" & frutti.SelectedItem.Text & "’ con valore ‘" & frutti.SelectedItem.Value & "’."
 39 End Sub

Nel primo caso (DropDownList) è utilizzato l’oggetto SelectedItem per risalire all’elemento selezionato.


 41 Sub Button2_Click(sender As Object, e As EventArgs)
 42   
 43   Dim objElemento as ListItem
 44   Dim strMessaggio as String
 45   
 46   For Each objElemento in artisti.Items
 47     If objElemento.Selected Then
 48       strMessaggio += "Hai selezionato ‘" & objElemento.Text & "’ con valore ‘" & objElemento.Value & "’.<br />"
 49     End If
 50   Next

Nel caso del ListBox control è necessario invece ciclare tra tutti i possibile elementi, perché ne possono essere stati selezionati più d’uno.

 56 Sub Button3_Click(Source As Object, e As EventArgs)
 57  If sport.SelectedIndex > – 1 Then
 58  risposta.Text = "Hai selezionato il radiobutton ‘" & sport.SelectedItem.Text & "’."
 59  End If
 60 End Sub

Infine, il RadioButtonList control ha un comportamento molto simile al DropDownList Control.

Sommario

I List Controls sono un comodo strumento per visualizzare insiemi di dati. Evitano la stesura di cicli contenenti codice ed Html, rappresentando un’ottima soluzione per praticare la separazione codice/contenuti.

Cos’è l’accessibilità web

Pubblicato il da

Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Viviamo un periodo di grande attenzione verso le problematiche di accesso ai siti web.

Enti locali, comuni, province e regioni devono attrezzarsi per garantire l’accessibilità dei propri siti, come richiesto dall’Aipa.

Anche le aziende private si sono accorte dell’importanza dell’accessibilità e dell’usabilità per estendere il numero di potenziali clienti.

L’America, sempre attenta alle esigenze delle persone disabili, sta sfornando almeno tre manuali sull’argomento, oltre a rendere disponibile un buon numero di siti.

Perché un corso di accessibilità web

Questo corso ha diversi obiettivi:

  • Inquadrare il significato e il ruolo dell’accessibilità web
  • Illustrare i benefici dati dall’accessibilità web
  • Far riconoscere un sito accessibile da uno non accessibile
  • Presentare delle linee guida corredate da un buon numero di esempi per migliorare l’accessibilità di un sito

Altri siti e manuali hanno realizzato degli esempi ad hoc in cui esaminano le tecniche utili per migliorare l’accessibilità di un sito.

Tutti gli esempi presentati nel corso delle nostre puntate saranno invece tratti dai menu e dalle pagine del sito FucinaWeb.

Questo approccio ha il vantaggio di farvi capire:

  • come l’accessibilità web non sia una chimera che si applica solo a banali esempi, ma anche ad un intero sito
  • come non sempre sia facile garantire l’applicazione di tutte le linee guida. A volte includere una funzionalità può incidere su un’altra caratteristica che il sito deve possedere. Bisogna cioè scendere a compromessi

In altre parole questo è un corso di accessibilità web ospitato da un sito che si sforza di essere accessibile.

Definizione di accessibilità web

In generale, l’accessibilità è la possibilità di accedere a un luogo o a una risorsa.

L’accessibilità web, in particolare, indica la possibilità di accedere efficacemente ad un sito web, alla sua interfaccia e al suo contenuto in situazioni diverse.

Alcuni esempi di situazioni sono:

  • Connessione ultraveloce dall’ufficio con schermo 21 pollici
  • Connessione da casa con modem 56k e schermo 15 pollici
  • Fruizione del sito da parte di una persona non vedente
  • Utilizzo di un browser vecchio di due anni

Poiché non è sempre possibile e semplice riuscire a integrare in un sito tutte queste esigenze, devono essere stabilite delle priorità.

La priorità più alta va data a quelle situazioni che non è possibile modificare, o non è possibile modificare facilmente.
Una persona disabile continuerà ad esserlo anche quando è collegata al vostro sito: garantirne l’accesso è fondamentale.

Collegarsi con un browser obsoleto è invece una situazione risolvibile: è quasi sempre possibile aggiornare il software o al massimo cambiare computer. È certamente costoso, ma fattibile.

Standard per l’accessibilità web

Esistono all’oggi due serie di linee guida che si prefiggono di migliorare l’accessibilità web:

  • Le Wcag rilasciate dal W3c, che riguardano anche l’accessibilità dei browser
  • Lo standard Section 508, un decreto legge statunitense che ogni agenzia federale deve applicare

Nel corso approfondiremo entrambe le soluzioni, anche criticandole e integrandole con nuovi esempi e considerazioni.

In Italia la Pubblica Amministrazione si sta sensibilizzando al tema ed è orientata all’adozione delle specifiche Wcag.

Non è un problema di software

La verifica di un sito accessibile non avviene esclusivamente via software. Programmi con Bobby di Cast, A-Prompt di Trace aiutano ad evidenziare lacune e punti di miglioramento, ma questo non è che il primo passo.

I problemi di accessibilità nascono soprattutto da errori di architettura o di progettazione che è possibile risolvere solo applicando le linee guida nel contesto del sito in esame. Proprio per questo è meno costoso includere soluzioni accessibili prima di costruire un sito che in fasi successive, dove potrebbe essere necessaria un’operazione di profondo redesign.

Chi ne trae beneficio

Persone disabili

È indubbio che per le persone disabili l’accessibilità rappresenta la differenza tra il poter usare o meno un sito.

Alcune patologie che rendono problematico l’accesso ad un sito sono:

  • problemi alla vista (come cecità e daltonismo)
  • problemi all’udito
  • dislessia
  • problemi motori, soprattutto degli arti superiori

Migliorare l’accessibilità di un sito significa tenere in considerazione questa varietà di patologie e consentire la fruizione:

  • senza l’uso del mouse
  • con possibilità di ingrandire il testo
  • senza che i colori portino informazioni essenziali
  • usando un linguaggio chiaro e non ambiguo
  • con software di sintesi vocale
  • con le trascrizioni di tutti i video e gli elementi sonori

Hardware o software limitato

Anche chi dispone di hardware o software limitati incontra nei problemi nel corso della navigazione sul web:

  • pagine troppo lente da caricare
  • impossibilità di visualizzazione con browser datati
  • difficoltà di percezione a basse risoluzioni video
  • necessità di installare plug-in

Le possibili soluzioni sono in questo caso:

  • design liquido che si adatta allo schermo
  • contenuti alternativi oltre a quelli disponibili con plug-in
  • realizzazione di pagine leggere

Da questo si capisce come accessibilità ed usabilità di un sito siano discipline che vanno di pari passo. Per essere felicemente fruibile da tutti un sito dev’essere sia accessibile sia usabile.