I fogli di stile

I fogli di stile, strumenti per facilitare e centralizzare la gestione della visualizzazione delle pagine Web all’interno di un sito, sono ormai di uso comune. Possono gestire praticamente tutti gli aspetti legati alla presentazione grafica della pagina. Possono essere condivisi per l’intero sito, con effetti limitati alla pagina corrente e/o parte di essa. La peculiarità gerarchica secondo cui uno stile specifico prevale su uno condiviso, permette di giocare “annidando” le soluzioni in modo anche funambolico ma non sempre efficace e razionale.

Uno “stile”, qualsiasi elemento gestisca, ne “obbliga” in linea di principio la rappresentazione grafica, sottraendola all’interpretazione del browser, dei parametri di visualizzazione del sistema operativo e delle proprietà di visualizzazione dello schermo. Il rischio che un foglio di stile si trasformi da risorsa a barriera è elevatissimo e a volte drammatico.

Una rilevante percentuale delle pagine Web sono inaccessibili agli utenti ipovedenti a causa del cattivo utilizzo dei fogli di stile. Un foglio di stile che obbliga i parametri di visualizzazione del testo (dimensione, tipo di carattere, attributi, ecc.) e il contrasto tra testo e sfondo, ha buone probabilità di rendere la pagina inaccessibile, se non si prevedono adeguate scappatoie.

Le soluzioni sono essenzialmente due:

  • implementare più fogli di stile, intercambiabili tra loro, capaci di soddisfare le molteplici esigenze percettive dei navigatori;
  • consentire la disattivazione dei fogli di stile, onde riconsegnare la gestione della visualizzazione della pagina alle impostazioni predefinite presenti sul computer dell’utilizzatore.

E’ vero che i browser dispongono di funzioni in grado di aggirare il problema (ad es. Accesso facilitato di IE: menù Strumenti|Opzioni Internet, scheda Generale, Accesso facilitato); ma è anche vero che forzare la visualizzazione di un pagina Web progettata per essere presentata con un determinato aspetto, potrebbe dare risultati peggiori e comunque insoddisfacenti e grotteschi. Inoltre, non si può pretendere che il navigatore sappia e voglia, all’occorrenza, intervenire sui parametri di visualizzazione del proprio computer.

Indicazioni.

Nel caso, non obbligatorio…, di utilizzo dei fogli di stile:

  • implementare più soluzioni, intercambiabili tra loro, capaci di soddisfare le molteplici esigenze percettive dei navigatori;
  • permettere la disattivazione dei fogli, facendo in modo che la pagina conservi una sua armonia e logica.

La risoluzione dello schermo

Si è già accennato nel corso della presente trattazione alle insidie derivanti dalla risoluzione dello schermo (e dalla grandezza in pollici del monitor dell’utente…).

Il presupposto è che non tutti possono permettersi un monitor di grandi dimensioni (ragioni economiche e/o logistiche), e molti tra i navigatori ipovedenti preferiscono una minore risoluzione dello schermo; meglio oggetti più grandi e relativamente meno definiti, che “perfetti” ma invisibili.

A ciò va aggiunto anche che la dimensione di diversi oggetti grafici e relativi contenuti testuali non è gestibile attraverso le proprietà dello schermo: finestre di segnalazione di errori, le finestre che gestiscono gli elementi presenti nel Pannello di controllo di Windows, i puntatori del mouse (oltre certi limiti), ecc. Dunque anche a causa di questi limiti, l’utilizzatore ipovedente è quasi costretto a mantenere la risoluzione dello schermo il più possibile bassa.

Le ripercussioni di questa scelta sulla visualizzazione delle pagine Web possono essere devastanti, nella misura in cui le pagine stesse non sono progettate secondi criteri di dimensionamento degli oggetti proporzionali, ma assoluti.

La maggior parte degli elementi grafici visualizzabili in una pagina Web può essere dimensionata “in percentuale”, rispetto allo spazio disponibile a schermo o in termini “assoluti” (pixel, cm, mm, ecc.).

Il problema naturalmente non è tanto quello dell’altezza, ma della larghezza degli elementi grafici. Ad es., se una tabella o un altro elemento grafico sono larghi 1000 pixel, mentre lo schermo dell’utilizzatore è settato su 800 x 600, comparirà la barra di scorrimento orizzontale nella parte bassa della finestra del browser; questo significa che il navigatore sarà costretto a spostare continuamente la barra da destra a sinistra per consultare il contenuto della pagina.

Dunque non si può prescindere dall’impostare la larghezza degli oggetti in percentuale; una tabella larga il 100% (meglio ancora il 95%) della finestra, sarà sempre interamente visibile con qualsiasi risoluzione video.

Come si diceva, con l’aumentare della risoluzione, diminuisce la dimensione degli oggetti, testo compreso. Questo significa che se impostiamo un contenuto testuale “corpo 10” ad una risoluzione video 800 x 600, chi visualizza il testo ad una risoluzione maggiore, farà fatica a leggere.

Se inseriamo un’immagine 1000 x 1000 pixel in una pagina web, praticamente nessun navigatore potrà averne una ragionevole visione d’insieme. Come detto in precedenza, le immagini dovrebbero essere dimensionate in modo da essere interamente visibili all’interno di una schermata ad una risoluzione relativamente bassa (800 x 600); quindi non più alte di 300 e non più larghe di 700-750 pixel.

Indicazioni.

  • dimensionare gli oggetti presenti nella pagina in modo relativo/proporzionale (in percentuale);
  • dimensionare il testo, le immagini e ogni altro elemento, in modo che possa essere percepibile in maniera ottimale a bassa e alta risoluzione;
  • dimensionare le immagini in modo che siano interamente visibili nella schermata, anche a bassa risoluzione (800 x 600);
  • progettare le pagine Web impostando la risoluzione dello schermo utilizzato per lo sviluppo a 800 x 600; così si avrà la certezza quasi matematica di non fare pasticci…

La visualizzazione e il sistema operativo

Molti l’hanno intravista, ma pochi osano metterci mano; gli ipovedenti, forse per necessità, ci provano più di altri. Mi riferisco alla scheda Aspetto della finestra Proprietà dello schermo di Windows.

In questa finestra e possibile selezionare una “Combinazione” di visualizzazioni e crearne di personalizzate, allo scopo di visualizzare gli elementi grafici del SO nel modo più idoneo rispetto alle proprie necessità percettive. Sfondi delle finestre, proprietà del testo, dimensioni delle barre, dei menù, delle icone ecc.; la maggior parte degli elementi grafici sono personalizzabili in modo che in assenza di specifiche indicazioni all’interno di ciascuna applicazione, il SO le utilizzi per la presentazione a schermo.

Quasi sempre gli attributi/proprietà grafiche degli oggetti utilizzati dal SO (caselle di testo, pulsanti, etichette, sfondi delle finestre ecc.), possono essere settate in maniera personalizzata, ovvero lasciando il valore Predefinito/Standard/Default. Se non si specifica alcun valore personalizzato, la visualizzazione dell’elemento avviene in base ai valori impostati nella Combinazione di visualizzazione selezionata nella scheda Aspetto nella finestra Proprietà dello schermo di cui sopra.

Questo meccanismo è in grado di influenzare anche la visualizzazione delle pagine Web. Ciò significa che in assenza di indicazioni specifiche, le pagine saranno visualizzate secondo i parametri standard utilizzati dal computer del navigatore. Quale foglio di stile è così intelligentemente versatile?!…

Non si pretende che i contenuti web siano privi di qualsiasi caratterizzazione, anzi; però se si sceglie di utilizzare i fogli di stile o si adottano soluzioni grafiche complesse e ardite, bisognerebbe comunque permettere all’utente di visualizzare le pagine nel modo più consono alle sue esigenze percettive, magari cercando di evitare eccessive perdite a livello estetico.

Indicazioni.

Prevedere la possibilità da parte del navigatore di utilizzare la propria Combinazione di visualizzazione degli elementi grafici del SO, lasciando o prevedendo l’opzione Predefinito/Standard/Default, nel settaggio degli attributi degli elementi utilizzati.

I “filtri” del browser

Anche i Browser dispongono ormai di strumenti di controllo della visualizzazione che intervengono generalmente a valle di quelli messi a disposizione dal SO. Questi filtri riguardano principalmente:

  • la visualizzazione delle immagini;
  • i colori utilizzati nelle pagine;
  • gli stili dei caratteri;
  • tipi di caratteri predefiniti all’interno del browser;
  • colori dei link.

L’utilizzo di questi strumenti impoverisce significativamente il contenuto delle pagine, fino a renderle ancor meno accessibili. Questo perché gli sviluppatori puntano molto e sempre più sui contenuti grafici in quanto tali, svincolati da qualsiasi contesto logico e funzionale.

Indicazioni.

  • Verificare cosa succede ai contenuti Web implementati se si applicano dei filtri.
  • Cercare di rendere i contenuti il più possibile logici e gradevoli anche se fruiti per mezzo di filtri.