In questo articolo vi presenteremo una particolare sezione delle specifiche CSS2: i fogli di stile per l'audio ovvero gli Aural style sheets (fogli di stile uditivi o 'aurali'), strumenti utilissimi per la progettazione di pagine Web ad alta accessibilità.
Con l'avvento delle interfacce grafiche, l'incremento della facilità di utilizzo dei calcolatori ne ha permesso l'accesso alle funzionalità alla fascia di utenza non professionale. Il web è pienamente riconducibile nelle sue linee di sviluppo a questa modello che ha, però, ignorato il fatto che molti utenti del calcolatore hanno problemi di accesso alla rete derivanti da ipovedenza. Studi recenti stimano in 11 milioni gli statunitensi con problemi di vista di cui 1,5 milioni sono ciechi.
Per la fruizione dei contenuti ipertestuali sul Web si ricorre ad applicazioni che utilizzano una voce sintetizzata per la lettura del testo di una pagina web (screen reader): esempi di screen reader sono Simply Web 2000, pwWebSpeak e Jaws per Windows. Per coloro che utilizzano sistemi operativi Unix-based, segnalo Emacspeak. La categoria di software citata soffre dell'incapacità di fornire le inflessioni tipiche della lingua parlata inoltre sono di disturbo per gli udenti. La voce sintetizzata da loro utilizzata va a sommare la dizione dei contenuti ipertestuali a numerose informazioni aggiuntive e a segnali acustici.
A fine di tutela di questa numerosa fascia di utenza, lo standard CSS2 include il supporto ai fogli di stile auditivi, che forniscono numerose funzionalità per il supporto di oggetti audio nelle pagine web.
Quando inizieranno a diffondersi browser con supporto per i fogli di stile auditivi, si potrà immergere l'utente in una esperienza audio tridimensionale senza dover ricorrere a plug-in o applet java. A ciò si aggiunga il fatto che tali software (ad esempio Real Audio e Flash) sono spesso vietati nel download per precise politiche societarie. I fogli di stile utilizzano solo un brower e una comune connessione HTTP.
L'introduzione delle tecnologie multimediali nel CSS2 permette ai progettisti e agli sviluppatori di ottimizzare per varie piattaforme la conversione dei contenuti dei documenti. Alcune proprietà dei fogli di stile dipendono dalle piattaforme: per esempio font-family è inutile in un sintetizzatore vocale e pause-before non ha senso su un dispositivo Braille; diverse tipologie possono richiedere valori differenti per proprietà condivise. CSS2 fornisce due diverse modalità per realizzare quest'obiettivo: utilizzare la proprietà @media, o l'attributo media all'interno del tag <link>.
I nomi delle tipologie di media riconosciuti presenti nelle specifiche CSS2 sono stati stabiliti in base ai dispositivi destinatari:
|
Per approfondimenti maggiori rimandiamo alla Guida ai CSS.
Passiamo ora allo studio delle proprietà e dei valori specifici dei CSS uditivi.
Proprietà Volume
La proprietà volume è utilizzata per controllare l'ampiezza dell'onda sonora. Non è scontato sottolineare come il controllo di questa sia possibile anche lato client da parte dell'utilizzatore agendo sugli strumenti per la regolazione dell'emissione sonora. La proprietà volume può assumere i seguenti valori:
number, percentage, silent, x-soft, soft, medium, loud, x-loud, inherit
number è un qualsiasi numero compreso tra 0 e 100: 0 imposta il livello al minimo udibile, 100 al valore massimo impostabile.
H1 { volume: 75 }
H2 { volume: 60 }
Percentage è calcolato in relazione al modello audio ereditato. Il valore espresso nell'elemento figlio sarà da intendersi come percentuale dell'elemento padre.
Nell'esempio seguente il volume della pagina è stato impostato all' 80% dell'impostazione del volume dell'utente (questa istruzione può essere scritta anche nella forma volume:80) e il testo racchiuso tra <h1> e </h1> sarà ascoltato al 75% del volume della pagina, pari al 70% dell'impostazione del volume dell'utente (0.80x0.75=0.60, equivalente a volume:60).
Body { volume: 80% }
H1 { volume: 75% }
Silent significa "nessun suono" e non ha lo stesso valore di 0, il quale imposta il più piccolo sonoro udibile. L'utilizzo di silent non significa che l'audio non viene riprodotto ma solo che non viene reso disponibile in output. Si tratta di un comportamento analogo a quello del pulsante mute (disattiva) su un lettore CD: il brano avanza normalmente , ma non si sente alcun suono.
x-soft equivale a number = 0.
Soft equivale a scrivere number = 25.
Medium equivale a scrivere number = 50. È il valore di default che viene utilizzato quando il valore per la proprietà volume non viene specificato.
loud equivale a scrivere number = 75.
x-loud equivale a scrivere number = 100.
Proprietà Speak
La proprietà speak determina se e come un elemento sonoro dovrà essere riprodotto, e può assumere i seguenti valori:
normal, none, spell-out, inherit
Normal fa in modo che un elemento e tutti i suoi figli utilizzino le regole di pronuncia del linguaggio fornito dall'agente di rendering (server o client, secondo l'applicazione). Si tratta del valore di default.
Body { speak: normal }
None rende non udibile un elemento. Diversamente dall'istruzione volume: silent l'istruzione speak: none passa oltre l'elemento, come avviene alla pressione del tasto skip (successivo) su un lettore cd. Tuttavia, i figli dell'elemento, possono ignorare questa impostazione ed essere letti.
Nell'esempio seguente, la lista ordinata appartenente alla classe "vecchioconvertini" (<ol class = "vecchioconvertini">) viene saltata, ma gli oggetti della classe appartenenti alla classe "nuovoconvertini" (<li class ="nuovoconvertini">) verrebbero ancora letti, anche se sono contenuti in un oggetto <ol class = "vecchioconvertini"></ol>
OL.vecchioconvertini { speak: none }
LI.nuovoconvertini { speak: normal }
Per essere sicuri della non lettura dell'elemento figlio bisognerà impostare su none la Tre proprietà speciali: display, float clear dei css.
Spell-out permette di ascoltare il testo scandito carattere per carattere, anzichè parola per parola; ciò serve essenzialmente per leggere correttamente una abbreviazione o un acronimo.
Pause
Pause ha tre proprietà: pause-before, pause-after e pause, che è un metodo breve per impostare le prime due proprietà.
Pause-before
Questa proprietà serve ad impostare il tempo dopo il quale il suono deve essere eseguito.
Pause-after
Questa proprietà imposta il tempo che deve trascorrere dopo la lettura di un elemento. Sia per la proprietà pause-before che per pause-after possono essere impostati i valori:
time, percentage, inherit
Time rappresenta la lunghezza complessiva della pausa in secondi (s) o millisecondi (ms).
H3 { pause-before: 40ms }
H3 { pause-after: 70ms }
Percentage rappresenta la lunghezza della pausa, espressa come una percentuale dell'inverso della proprietà speech-rate in seguito affrontata. Di norma la proprietà pause viene impostata al valore del tempo medio per parola (60 parole al minuto pari a 1 parola per secondo). Con un esempio, se viene impostato un valore di speck-rate di 240, allora il tempo medio per parola sarà di 60/240 ppm= 250ms.
È possibile impostare una pausa sonora naturale basandosi su quanto tempo si impiega a pronunciare una parola. Se si imposta speech-rate : 120, che significa avere una velocità di lettura pari a 120 parole per minuto (o 500ms per parola), dovremo impostare pause-before : 80% per avere una pausa di 400ms (500ms X 0.80) prima che ogni elemento venga letto. Questo è il metodo normalmente usato per specificare la pausa, anche se è possibile per l'utente cambiare il valore della proprietà speech-rate; si noti che pause di lunghezza fissa possono provocare problemi nella comprensione del contenuto, quindi non sono mai consigliabili.
Pause
La proprietà pause è una scorciatoia per l'impostazione delle due proprietà precedenti. Richiede entrambi i valori per pause-before e per pause-after. Nel caso in cui venga passato un solo valore, la proprietà pause lo userà per impostarle entrambe. Di due valori impostati il primo sarà attribuito a pause-before il secondo a pause-after. Vediamo un esempio tratto direttamente dal w3c.
H1 { pause: 20ms }/* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
Cue
Come per la proprietà pause, anche cue ha tre proprietà: cue-before, cue-after e cue.
Le proprietà cue sono utilizzate per fornire agli utenti le cosiddette icone uditive che identificano in maniera sonora i segnali appena riprodotti e/o un particolare elemento, come per esempio i marcatori di un elenco puntato. Espressa correttamente, la proprietà cue marca gli elementi semantici.
Se le proprietà di pause sono specificate l'ordine di esecuzione della lettura di un elemento risulta essere il seguente:
cue-before, pause-before, <element>, pause-after, cue-after
Ciò significa che la lettura dell'icona uditiva precederà la pausa impostata precedentemente alla lettura dell'elemento. L'icona uditiva e l'elemento vengono trattati separatamente.
Cue-before
Questo elemento esegue uno specifico file sonoro prima che l'elemento è stato tradotto in forma sonora.
Cue-after
Questa proprietà esegue uno specifico file sonoro dopo che l'elemento è stato tradotto in forma sonora. Le proprietà cue possono assumere i seguenti valori:
uri none inherit
Il valore uri deve identificare un file audio, altrimenti sarà ignorato e considerato come impostato a none.
H3 { cue-before: url ("musica/sottofondo.wav")}
H3 { cue-after: url ("musica/sottofondo2.wav")}
none indica che non deve essere utilizzato alcun suono.
H3.secondo { cue-before: none}
H3.secondo { cue-after: none}
Cue
Cue combina entrambe le impostazioni fornite da cue-before e cue-after. Richiede i valori di entrambe le proprietà cue-before e cue-after, uno dopo l'altro. Nel caso in cui venga passato un solo valore, la proprietà cue lo userà per impostarle entrambe. Il comportamento è del tutto simile, quindi, alla proprietà play.
Riprendendo gli esempi sopra:
H3 { cue-before: url ("musica/sottofondo.wav")}
H3 { cue-after: url ("musica/sottofondo2.wav")}
equivale a:
H3 { cue-before: url("musica/sottofondo.wav")url("musica/sottofondo2.wav")}
H3.secondo { cue: none }
Proprietà play-during
Play-during è una proprietà di mixing. Esse permettono di regolare con precisione l'interazione tra suoni diversi.
Play-during
Questa proprietà regola la riproduzione di un file sonoro durante la lettura di un elemento. il suo valore non viene ereditato dagli elementi padre, e può essere uno dei seguenti:
url mix repeat auto none
Il valore uri è obbligatorio e rappresenta la locazione del file sonoro da eseguire.
h1 { play-during: url ("tantiauguriate.wav")}
Il valore mix continua nell'esecuzione del brano di accompagnamento ereditato dalla proprietà play-during dell'elemento padre mixandolo con quello indicato bel valore uri. Se nell'elemento corrente non è indicato il valore mix, l'unico suono che viene eseguito è quello indicato nel valore url dello stesso. Nel seguente esempio H1 è figlio dell'elemento BODY
body { play-during: url ("tantiauguriate.wav")}
h1 { play-during: url ("happybirthday.mp3") mix}
Nell'esempio i 2 brani verranno eseguiti in contemporanea.
Il valore repeat permette di ripetere il file sonoro, nel caso in cui la sua durata sia inferiore a quella richiesta per la lettura del contenuto dell'elemento; permette inoltre di interrompere la riproduzione del brano se è più lunga della durata della lettura dell'elemento. Se il valore repeat non è presente il file sonoro verrà eseguito una sola volta.
h1 { play-during: url ("happybirthday.au") repeat}
Il comportamento, è del tutto simile alla proprietà background-repeat
Il valore auto fa in modo che il file sonoro dell'elemento padre verrà eseguito durante la lettura del contenuto dell'elemento corrente. Nell'esempio, happybirthday.aiff continua a suonare durante la lettura del contenuto dell'elemento h1.
body { play-during: url ("happybirthday.aiff")}
h1 { play-during: auto }
Il valore none, infine, non introduce nessun suono di sottofondo durante la rappresentazione sonora dell'elemento corrente. Il suono di ogni elemento padre viene fermato per l'intera durata della versione sonora dell'elemento figlio, per poi riprendere al suo termine.
body { play-during: url ("happybirthday.wav")}
h1 { play-during: none }
Proprietà audio tridimensionali: azimuth ed elevation
La gestione dell'audio tridimensionale non è accessoria alle proprietà precedenti. Il costante incremento di impianti multicanale permette di raggiungere un'ampia fascia di utenza. Si aggiunga che l'audio tridimensionale fornisce una rappresentazione maggiormente naturale del suono, ivi compreso il parlato.
Le proprietà spaziali del suono sono descritte dalle proprietà azimuth e elevation.
Azimuth
La proprietà azimuth controlla la distribuzione dell'elemento da sinistra a destra. La collocazione spaziale del suono viene misurata in gradi (deg) su un intervallo che va da - 360° a + 360° tutti localizzati direttamente di fronte all'utilizzatore. La proprietà azimuth può assumere i seguenti valori:
angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, leftwards, rightwards, inherit
Il valore angle rappresenta il numero di gradi di spostamento di un elemento rispetto alla posizione 0 gradi, esattamente di fronte all'utente. Il movimento in senso orario rispetto all'utente viene considerato positivo, quello in senso contrario negativo: la destra dell'utente corrisponderà dunque ad uno spostamento di 90 gradi in senso orario (o -270 gradi in senso antiorario), la schiena a 180 gradi e il lato sinistro a 270 gradi in senso orario o -90 gradi in senso antiorario. I seguenti esempi sono equivalenti:
h2 { azimuth: 110deg }
h2 { azimuth: -250deg }
Il modificatore behind può essere utilizzato per rappresentare il posizionamento delle casse audio rispetto alla schiena dell'utente ruotando la gradazione corrente di 180 gradi in senso orario.
Passando agli altri valori assumibili dalla proprietà azimuth, i gradi sono rappresentati dalla seguente tabella:
|
La sintassi per utilizzare correttamente i valori è:
h2 { azimuth: left-side }
h3 { azimuth: right behind }
P.comment { azimuth: behind far-right }
Leftwards ruota la collocazione del suono di 20 gradi in senso antiorario rispetto all'angolo corrente, anche nel caso in cui la sorgente si trovi già dietro l'utente.
Rightwards ruota il suono di 20 gradi in senso antiorario rispetto all'angolo corrente, anche nel caso in cui la sorgente si trovi già dietro l'utente.
Elevation
La proprietà elevation rappresenta la collocazione dell'altezza del suono rispetto all'utente, in un intervallo che va da 90 gradi, equivalente alla posizione sulla testa dell'utente a - 90 gradi (sotto i piedi dell'utente). Al valore 0 corrisponde la posizione frontale. I valori di questa proprietà possono essere ereditati e possono assumere i valori:
angle, below, level, above, higher, lower, inherit
Il valore angle rappresenta l'altitudine espresso in gradi di un elemento rispetto alla posizione 0. I valori positivi sono attribuiti ai movimenti verso l'alto mentre, simmetricamente, ai valori negativi corrispondono movimenti verso il basso.
A below corrispondono -90 gradi, a level 0 gradi e above corrisponde a 90 gradi. Il valore higher aggiunge 10 gradi all'altezza corrente. Resta fermo, come è facile intuire il limite di 90 gradi mentre lower sottrae i soliti 10 gradi fino al limite di -90 gradi.
Proprietà vocali
Le proprietà delle caratteristiche vocali permettono ai progettisti di intervenire sulle tipologie di lettori e sulle modalità espressive degli stessi.
Speech rate
Questa proprietà determina la velocità di lettura del testo. Essa può assumere i valori:
number, x-slow, slow, medium, fast, x-fast, slower, faster, inherit
Il valore number si riferisce alla velocità con la quale il testo viene letto. Ai fini della determinazione quantitativa si utilizza come unità di misura il numero di parole per minuto (ppm: parole per minuto o wpm per gli anglofili).
Per speech-rate:
- x-slow corrisponde a 80 ppm;
- slow corrisponde a 120 ppm;
- medium corrisponde a 180-200 ppm (il range è funzionale alle differenti velocità di lettura connesse alla lingua);
- fast corrisponde a 300 ppm;
- x-fast corrisponde a 500 ppm;
faster aggiunge 40 ppm alla speech-rate ereditata dall'elemento padre, slower li sottrae.
Voice-family
Voice-family non è altro che la corrispondente versione aural della proprietà visuale font-family. Vediamo subito i valori che può assumere:
generic-voice, specific-voice, inherit
Il valore generic-voice, corrisponde a una famiglia vocale generica e può essere male, female o child. Specific-voice richiede il nome dell'istanza specifica di una voce ( per esempio: Convertini, Pippo, Mimmo, bue, commentatore calcistico). Interessante notare la non ancora disponibilità di una lista di voci per questo attributo.
Pitch
Pitch rappresenta la frequenza media della voce parlante espressa in Hertz. Ad un valore in Hz maggiore corrisponderà un tono della voce più elevato. I valori di default dipendono da voice-family. Al valore male corrisponde pitch 120 mentre a female corrispondono 210 pitch. La proprietà pitch può assumere i seguenti valori:
frequency, x-low, low, medium, high, x-high, inherit
Frequency permette di impostare la frequenza media della voce parlante. Gli altri valori, invece, non si riferiscono a una specifica frequenza ma dipendono dalle impostazioni di voice-family dell'elemento con l'unico vincolo del rispetto di un ordine di progressività dal più basso al più alto.
Pitch-range
Pitch-range rappresenta l'intervallo di frequenza al di sopra del quale una voce può cambiare intonazione. Può assumere i valori:
number, inherit
Il valore per number deve essere compreso tra 0 e 100 (50 è il valore di default). 0 è un valore monotono mentre i valori sopra 50 danno luogo a voci molto animate o agitate.
Stress
Questa proprietà determina l'altezza dei toni locali nell'intonazione di una voce associata all'elemento. In linguaggi molto accentati, a diverse proposizioni vengono associati valori differenti di stress. La proprietà stress viene utilizzata in abbinamento a pitch-range. Può assumere i seguenti valori:
number, inherit
Anche in questi caso, il valore per number deve essere compreso tra 0 e 100 con 50 come valore di default. Il valore di variabilità che questo valore rappresenta sarà diverso da lingua a lingua.
h1 { pitch: 120; pitch-range:70; stress:55 }
Richness
Questa proprietà determina il calore e la profondità di una voce, cioè le armoniche che la compongono e può assumere i valori:
number, inherit
Il valore number è compreso tra 0 e 100 con 50 come default. Più alto è il valore assegnato a richness, maggiore sarà l'udibilità della voce in spazi ampi. Valori bassi producono una voce meno intensa che tenderà a perdersi in spazi ampi. Inutile sottolineare come l'impostazione corretta di questo valore da parte dello sviluppatore dipenda dalla conoscenza del luogo di ascolto, possibile solo attraverso indagine in reti Intranet. Sarà buona norma non discostarsi fortemente dal valore di default.
Proprietà del parlato
Le proprietà del parlato permettono di rappresentare in forma sonora le intestazioni delle tabelle, la punteggiatura e i numeri.
Speak-header
La proprietà speak-header si applica solo alle tabelle delle quali sono state definite le intestazioni. Essa determina quante volte le intestazioni devono essere ripetute durante la lettura dei dati di una tabella e può assumere i valori:
once, always, inherit
Il valore once è il valore di default e fa in modo che l'intestazione della tabella venga letta una volta sola all'inizio di ogni colonna di celle. Il valore always provoca la lettura dell'intestazione prima di ogni cella facente capo a una determinata intestazione.
Speak-punctuation
Questa proprietà determina se l'agente auditivo debba interpretare o meno la punteggiatura utilizzando una pausa appropriata nel testo letto o chiamando la punteggiatura per nome quando il testo viene reso in forma sonora. Può assumere tre valori:
code, none, inherit
Il valore code farà in modo che la punteggiatura sia nominata esplcitamente durante la lettura del testo; per esempio se è presente l'istruzione speak-punctuation:none il testo "html.it" verrà reso dall'agente auditivo come "html punto it".
Il valore none, invece, trasforma la punteggiatura, quando presente, in una appropriata pausa di lettura ed è il valore di default.
Speak-numeral
Attraverso questa proprietà si determina se i numeri debbano venire letti per intero o come singole cifre. Tale proprietà assume i seguenti valori.
digits, continuous, inherit
Il valore digits specifica che i numeri, se presenti, devono essere resi leggendone le singole cifre: 511 viene letto come "cinque uno uno". Il valore continuous fa in modo che i numeri, se presenti, vengano letti per intero. È il valore di default per questa proprietà; 511 in questo caso viene letto come "cinquecentoundici".
