Negli interventi delle scorse settimane, abbiamo discusso i motivi per cui sia importante cominciare a comprendere le possibilità che WAI-ARIA ci offre per arricchire il nostro sito di contenuti accessibili.
Oggi vorrei mostrarvi l’importanza degli attributi Live Region, che ci permettono di avvisare il browser dei cambiamenti che si verificano all’interno della pagina senza che l’utente debba essere sull’elemento interessato.
A titolo di esempio, creiamo un semplice blocco di citazioni a scorrimento. Se già non disponete di uno Screen Reader, vi consiglio di scaricare ChromeVox.
HTML e CSS
Creiamo innanzitutto il nostro markup HTML, sfruttando il tag blockquote:
[code type=”markup”]
[/code]
Oltre a specificare l’id dell’elemento, che sfrutteremo poi all’interno dello script javascript, inseriamo i seguenti attributi:
- aria-live: specifica come la tecnologia assistiva dovrà enunciare il cambiamento all’interno della pagina, in questo caso specificato a polite, aspettando quindi che l’utente sia inattivo o che termini l’operazione corrente.
- tabindex: per rendere l’elemento del blockquote accessibile da tastiera.
Aggiungiamo ora uno stile all’elemento
[code type=”css”]
#liveRegionQuotes{
position: relative;
padding: 50px 100px 50px;
background-color: rgb(238, 238, 238);
width: 440px;
font-size: 30px;
font-style: italic;
border: 1px solid rgb(201, 201, 201);
}
#liveRegionQuotes:before{
position: absolute;
left: 0px;
top: 60px;
font-size: 6em;
line-height: 90px;
color: rgb(197, 197, 197);
content: ‘\0022’;
}[/code]
Javascript
Passiamo ora alla creazione dello script. Specifichiamo innanzitutto i parametri necessari al funzionamento.
[code type=”javascript”]
var quotes = new Array(
“When Life Gives You Questions, Google has Answers”,
“If at first you don’t succeed, call it version 1.0”,
“There are 10 types of people in the world: those who understand binary, and those who don’t”
);
var timer = 8000;
var index=0;
var blockquoteID = “liveRegionQuotes”;
window.onload = liveQuote;
[/code]
Scriviamo le frasi che vogliamo far comparire all’interno del nostro blocco e stabiliamo il tempo che intercorre tra l’una e l’altra. Preleviamo l’id dell’elemento che vogliamo dinamicizzare e chiamiamo infine il metodo per farle scorrere al caricamento della pagina.
[code type=”javascript”]
function liveQuote(){
updateLiveRegion(blockquoteID, quotes[index++]);
if (index > 2){
index=0;
}
window.setTimeout(liveQuote, timer);
}
[/code]
Chiamiamo quindi il metodo che aggiorna il blocco delle citazioni, resettando il contatore quando raggiunge il numero massimo degli elementi dell’array, e stabiliamo un tempo pari al valore specificato nel nostro timer.
[code type=”javascript”]
function updateLiveRegion(liveRegionID, quote){
textNode = document.createTextNode(quote);
targetNode = document.getElementById(liveRegionID);
while (targetNode.firstChild) {
targetNode.removeChild(targetNode.firstChild);
}
targetNode.appendChild(textNode);
}
[/code]
Creiamo infine un elemento contenente la nostra citazione, che andrà a rimpiazzare quella presente, a seguito della sua rimozione.
Potrete trovare l’esempio completo a questo link.
Dopo aver preparato il codice, apriamo la pagina con Chrome e abilitiamo l’estensione di ChromeVox. Se tutto è andato a buon fine, a ogni cambiamento di frase nel nostro blockquote, lo screen reader ci leggerà quella nuova, senza necessariamente avere il focus su di esso.
Se proviamo a cambiare il valore dell’attributo aria-live in assertive, vediamo come lo screen reader ci leggerà le frasi della pagina anche durante un’operazione in corso.
Conclusioni
Tutte le tecniche di accessibilità che abbiamo visto fin’ora sono molto utili, ma ricordiamoci sempre di usarle con discrezione.
Per questo ultimo caso, ad esempio, cerchiamo di pensare quando l’attributo aria-live possa effettivamente dare un’informazione utile o di aiuto all’utente che naviga il nostro sito, altrimenti rischiamo di disorientare e infastidire l’utente. Un sito di notizie, quotazioni in borsa, scommesse e risultati delle partite potrebbero ad esempio giovare di questa utile aggiunta di ARIA.
