Home > realizzare > accessibilità: fogli di stile > Aural CSS: i fogli di stile uditivi
Con i CSS2 è teoricamente possibile ottimizzare i parametri di lettura di una pagina web da parte di un lettore vocale. Tali proprietà sono tuttavia ancora mal supportate dai browser. Quella che segue è una breve guida all'utilizzo dei fogli di stile auditivi.
A cura di: Sebastiano Nutarelli | 2 febbraio 2006
Come noto molte persone (non vedenti, ipovedenti gravi, ma non solo) fruiscono dei servizi online tramite dispositivi/sintetizzatori vocali (screen reader, lettori vocali, etc).
Tra i più noti:
L'introduzione delle tecnologie multimediali nelle specifiche dei CSS2 renderebbe possibile (solo nel momento in cui tutte le proprietà saranno supportate dai principali browser vocali) ottimizzare per i dispositivi di lettura vocale la conversione dei contenuti delle pagine web, personalizzando la voce in lettura, accenti, inflessi, volume, provenienza del suono.
È possibile realizzare un CSS audio (da collegare tramite la proprietà @media, o la valorizzazione dell'attributo media="aural" all'interno del tag <link>) che risponde ad una particolare sezione delle specifiche CSS2: appunto gli Aural Style Sheets.
Tali specifiche hanno introdotto nuove proprietà che avranno utilità e saranno valorizzate solo se si fruisce dei contenuti presenti su una pagina web tramite il dispositivo per il quale sono state studiate e introdotte: font-size risulterà inutile per un sintetizzatore vocale e volume (proprietà che regola il volume in lettura, come vedremo) non avrà senso per un browser visuale come Mozilla Firefox o Internet Explorer.
| Proprietà | Valori |
|---|---|
azimuth |
angle |
cue |
cue-before |
cue-after |
none |
cue-before |
none |
elevation |
angle |
pause |
pause-before |
pause-after |
time |
pause-before |
time |
pitch |
frequenza |
pitch-range |
number |
play-during |
auto |
richness |
number
|
speak |
normal |
speak-header |
always |
speak-numeral |
digits |
speak-punctuation |
none |
speech-rate |
number |
stress |
number |
voice-family |
generic-voice |
volume |
number |
azimuthLa proprietà azimuth controlla la distribuzione spaziale del suono da sinistra verso destra.
La collocazione del suono è misurata in gradi (deg) su un intervallo che va da -360° a +360° tutti localizzati direttamente di fronte all'utilizzatore.
Valori ammessi:
left-side (270 gradi o -90 gradi);left-side behind (270 gradi o -90 gradi);far-left (300 gradi o -60 gradi);far-left behind (240 gradi o -120 gradi);left (320 gradi o -40 gradi);left behind (220 gradi o -140 gradi);center-left (340 gradi o -20 gradi);center-left behind (200 gradi o -160 gradi);center (0 gradi);center behind (180 gradi o -180 gradi);center-right (20 gradi o -340 gradi);center-right behind (160 gradi o -200 gradi);right (40 gradi o -320 gradi);right behind (140 gradi o -220 gradi);far-right (60 gradi o -300 gradi);far-right behind (120 gradi o -240 gradi);right-side (90 gradi o -270 gradi);right side behind (90 gradi o -270 gradi).h1{
azimuth: left-side;
}
h2{
azimuth: right behind;
}
cueLa proprietà cue compatta le impostazioni fornite da cue-before e cue-after.
Richiede i valori di cue-before e cue-after posti in sequenza.
Come visti per altre valorizzazioni (padding:0;) se gli viene settato un solo valore questo verrà utilizzato per entrambe le proprietà.
#box h1{
cue:url ("/contributi/audioAll.wav");
}
#box h3{
cue-before: url("musica/sottofondo.wav")
url("musica/sottofondo2.wav");
}
#box h3.secondo{
cue:none;
}
cue-after La proprietà cue-after esegue uno specifico file sonoro dopo che l'elemento è stato tradotto in forma sonora.
Le proprietà cue-after può assumere i seguenti valori:
url (identifica un file audio);none (indica che non deve essere utilizzato alcun suono).
#box h1{
cue-after: url("/contributi/audio2.wav");
}
Esegue un file sonoro (indicato via css) dopo che l'elemento è stato tradotto in forma sonora.
cue-before La proprietà cue-before esegue uno specifico file sonoro prima che l'elemento è stato tradotto in forma sonora.
Le proprietà cue-before può assumere i seguenti valori:
url (identifica un file audio);none (indica che non deve essere utilizzato alcun suono).
#box h1{
cue-before: url("/contributi/audio.wav");
}
Esegue un file sonoro (indicato via css) prima che l'elemento sia stato tradotto in forma sonora.
elevationLa proprietà elevation permette di indicare il posizionamento del suono rispetto all'utente in altezza, spaziando in un intervallo da 90 a – 90 gradi, equivalenti rispettivamente a sopra la testa dell'utente e sotto i piedi dell'utente.
La posizione del suono fronte utente corrisponde al valore zero.
La proprietà elevation ammette i seguenti valori:
angle (indica in gradi, valori positivi verso l'alto e valori negativi verso il basso);below (indica l'altitudine di un elemento rispetto alla posizione frontale).level (corrrisponde 0 gradi);above (corrisponde a 90 gradi); higher e lower aggiungono e sottraggono rispettivamente 10 gradi all'altezza corrente fino a 90 e –90 gradi. pause-after La proprietà pause-after imposta il tempo che deve trascorrere dopo la lettura di un elemento.
Per la proprietà pause-after possono essere impostati i valori:
time (rappresenta la lunghezza complessiva della pausa in secondi (s) o millisecondi (ms);percentuale (rappresenta la lunghezza della pausa, espressa come una percentuale).h2{
pause-after:40ms;
}
pause-before La proprietà pause-before imposta il tempo che deve trascorrere prima la lettura di un elemento.
Per la proprietà pause-before possono essere impostati i valori:
time (rappresenta la lunghezza complessiva della pausa in secondi (s) o millisecondi (ms);percentuale (rappresenta la lunghezza della pausa, espressa come una percentuale).
h2{
pause-before:60ms;
}
pauseLa proprietà pause è una scorciatoia per l'impostazione delle proprietà pause-before e pause-after.
Richiede entrambi i valori di pause-before e per pause-after (in questa sequenza) e caso in cui venga passato un solo valore verrà impostato per tutte la valorizzazione indicata una volta sola.
#box p.primo{
pause: 20ms;
}
#box p.altri{
pause-before: 30ms;
pause-after: 40ms;
}
pitchLa proprietà pitch è la frequenza media espressa in Hertz (Hz) della voce parlante.
Ad un valore in Hz maggiore corrisponderà una frequenza più elevata.
Per i valori di default fa riferimento alla valorizzazione della proprietà voice-family.
A male corrisponde pitch=120 mentre a female corrispondono pitch=210.
La proprietà pitch può assumere i seguenti valori:
frequency;x-low;low;medium;high;x-high.Frequency permette di impostare la frequenza media della voce parlante.
Le altre valorizzazioni, 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-rangeLa proprietà pitch-range indica l'intervallo di frequenza al di sopra del quale una voce può cambiare intonazione.
Il valore che può assumere ls proprietà pitch-range è:
numberLa valorizzazione per number deve essere compresa 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.
play-duringLa proprietà play-during regola la riproduzione di un file sonoro durante la lettura di un elemento.
Il suo valore non viene ereditato dagli elementi padre.
La proprietà play-during ammette i seguenti valori:
url (continua nell'esecuzione dell'audio ereditato dall'elemento padre (se quest'ultimo aveva la proprietà play-during indicata) mixandolo con quello indicato nella valorizzazione della proprietà per l'elemento corrente (figlio);mix (continua nell'esecuzione del brano di accompagnamento ereditato dalla proprietà play-during dell'elemento padre mixandolo con quello indicato bel valore uri);repeat (se non è presente l'audio viene comunque eseguito ma una volta sola) manda in loop l'esecuzione dell'audio correlato (utile nel caso in cui la durata dello stesso sia inferiore a quella richiesta per la lettura del contenuto dell'elemento) e allo stesso tempo permette di interrompere la riproduzione dell'audio se questa è più lunga del tempo richiesto per la lettura del contenuto dell'elemento);auto (garantisce che il file audio dell'elemento padre venga eseguito mentre è in corso la lettura del contenuto dell'elemento corrente figlio); none (impedisce la riproduzione di suoni di sottofondo durante la lettura dell'elemento corrente (compresa l'interruzione della riproduzione dei suoni di sottofondo di ogni elemento padre che perdura per l'intera durata della lettura dell'elemento figlio, per poi riprendere regolarmente).
#box h3{
play-during: url("file.wav");
}
#box h5{
play-during: url("audio2.wav") mix;
}
#box h5{
play-during: url("audio2.wav") repeat;
}
#box{
play-during: url("audio.wav");
}
#box h1{
play-during: auto;
}
#box{
play-during: url("file.wav");
}
#box p{
play-during: none;
}
richnessLa proprietà richness indica calore e profondità di una voce.
LA proprietà richness ammette il seguente valore:
numberLa valorizzazione per number deve essere compresa tra 0 e 100 (50 è il valore di default).
Mediamente è buona precauzione non scostarsi troppo dai valori di default a meno che non si conosca a fondo l'ambiente in cui l'utente fruirà del servizio dato. Maggiore sarà la valorizzazione e maggiore sarà l'udibilità della voce in ampi spazi e, viceversa, minore sarà la valorizzazione e minore sarà l'udibilità della voce in ampi spazi.
È possibile dunque implementare tale proprietà, discostandosi nettamente dai valori di default specialmente se si tratta di una intranet aziendale, della quale si potrebbero conoscere a priori, ad esempio, condizioni ambientali di consultazione in aule/locali molto ampi.
speakLa proprietà speak determina se e come un elemento sonoro dovrà essere riprodotto, e può assumere i seguenti valori:
normal (valore di default) fa in modo che un elemento (e tutti i suoi figli) utilizzino l'impostazione della pronuncia e il linguaggio fornito dal dispositivo utilizzato lato server o client (a seconda dell'applicazione); none (non rende udibile un elemento ma diversamente dall'istruzione volume: silent l'istruzione speak: none ignora l'elemento del tutto);spell-out (porta il dispositivo a leggere facendo lo "spelling", cosa che può tornare utile per leggere correttamente e con puntualità abbreviazioni e acronimi).
#boxMenù p{
speak: normal;
}
speak-headerLa proprietà speak-header vale solo nel contesto di tabelle con intestazioni e veicola quante volte le intestazioni stesse verranno ripetute durante la lettura della tabella.
La proprietà speak-header ammette i seguenti valori:
once (valore di default); l'intestazione della tabella viene letta una volta sola all'inizio di ogni colonna;always (veicola la lettura dell'intestazione per ogni cella corrispondente alla stessa). speak-numeralLa proprietà speak-numeral determina se i numeri debbano venire letti per intero o come singole cifre.
La proprietà speak-numeral ammette i seguenti valori:
digit (specifica che i numeri, se presenti, devono essere resi leggendone le singole cifre: 349 viene letto come "tre-quattro-nove");continuous (valorizzazione di default) fa in modo che i numeri presenti, vengano letti per intero. "349" in questo caso viene letto come "trequattronove").speak-puntuactionLa proprietà speak-puntuaction determina se il dispositivo auditivo debba leggere o meno la punteggiatura utilizzando una pausa appropriata nel testo letto o citando la punteggiatura per tipologia durante la lettura
La proprietà speak-puntuaction ammette i seguenti valori:
code (fa in modo che la tipologia di punteggiatura sia citata durante la lettura del testo. Per esempio il testo "lau.it" verrà letto "lau punto it";none (è il valore di default e rende in lettura ogni elemento di punteggiatura come una breve pausa/interruzione).speech-rateLa proprietà speech-rate regola la velocità di lettura del testo.
La proprietà speech-rate ammette i seguenti valori:
number (si riferisce alla velocità con la quale il testo viene letto);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);slower (sottrae 40 ppm alla speech-rate ereditata dall'elemento padre);faster (aggiunge 40 ppm alla speech-rate ereditata dall'elemento padre).stressLa proprietà stress determina l'altezza dei toni nell'intonazione di una voce associata all'elemento.
In linguaggi molto accentati, a diverse proposizioni vengono associati valori differenti di stress.
La proprietà stress ammette il valore:
number (deve essere compresa tra 0 e 100).
#box h1{
pitch:110;
pitch-range:80;
stress:60;
}
voice-familyLa proprietà voice-family non è altro che la corrispondente versione aural della proprietà visuale font-family.
Valorizzazioni possibili:
generic-voice (corrisponde a una generica famiglia vocale e può essere implementata con male, female o child);specific-voice (richiede il nome specifico di una voce o di un interprete anche se non è ancora disponibile una lista di voci per questo attributo).volumeLa proprietà volume permette di regolare il livello del volume (che resterà comunque ulteriormente controllabile lato client tramite i tradizionali dispositivi di regolazione).
La proprietà volume ammette i seguenti valori:
number (è un numero compreso tra 0 e 100, si imposta il livello dal valore audio minimo al valore massimo);silent (porta ad un output "silente" ma non ha lo stesso valore di 0, il quale imposta il più piccolo sonoro percepibile (quindi l'audio viene riprodotto ma non viene reso disponibile in output);percentage (è calcolato in relazione all’eredità del livello audio. soft (equivale a scrivere number=25);x-soft (equivale a number=0);medium (equivale a scrivere number=50).volume non viene specificato);loud (equivale a scrivere number=75);x-loud (equivale a scrivere number=100).
div.nomeClasse{
volume: 90;
}
h1{volume: 85%;
}
Nell'esempio il volume della pagina è stato impostato al 90% dell'impostazione del volume dell'utente.
Questa istruzione può essere scritta anche nella forma volume:90 e il testo racchiuso tra <h1> e <h1> sarà ascoltato al 85% del volume della pagina.
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità