Contingut dinàmic, missatges d'estat i canvis de focus

Les pàgines actuals canvien sense recarregar-se: s'afegeix un producte al carretó, s'aplica un filtre, es valida un formulari, es carreguen més resultats, apareix un avís de sessió a punt de caducar. Qui veu la pantalla percep el canvi a l'instant; qui fa servir un lector de pantalla només se n'assabenta si el focus es mou al contingut nou o si el canvi s'anuncia mitjançant una regió activa. Aquesta lliçó t'ensenya a avaluar aquests moments amb tecnologies de suport, que és on fallen moltes aplicacions web que superen sense problemes una revisió estàtica.

Les tres preguntes davant de cada canvi

Per a cada acció que modifica la pàgina sense recarregar-la, atura't just després d'executar-la, no moguis el cursor i respon tres preguntes:

1. On és el focus ara? Amb NVDA, NVDA+Tab llegeix l'element que té el focus. Si respon amb el nom de la pàgina o amb res, el focus s'ha perdut.
2. Què s'ha anunciat? Consulta el visor de veu: és la prova objectiva del que va sentir la persona usuària.
3. Puc arribar al contingut nou i entendre'l? Navega des de la posició actual: el contingut afegit és en un lloc lògic del DOM, a prop d'on es va produir l'acció, o al final de la pàgina?

Missatges d'estat (4.1.3) a la pràctica

Les WCAG 2.2 defineixen un missatge d'estat com un canvi de contingut que no és un canvi de context i que informa de l'èxit o el resultat d'una acció, de l'estat d'espera d'una aplicació, del progrés d'un procés o de l'existència d'errors. El criteri 4.1.3 Missatges d'estat (AA) exigeix que aquests missatges es puguin determinar mitjançant un rol o unes propietats, de manera que les tecnologies de suport els presentin sense que rebin el focus. D'aquí un matís important: si el missatge rep el focus, el 4.1.3 no s'aplica, perquè el mateix moviment del focus el comunica.

Exemples típics: «3 articles al carretó», «Cercant…», «S'han trobat 24 resultats», «Esborrany desat», «Pas 2 de 4 completat», «Hi ha 2 errors al formulari».

Com provar-ho

• Executa l'acció amb el lector actiu i queda't quiet. Escolta i revisa el visor de veu.
• Si no s'anuncia res, busca a l'inspector del navegador una regió activa: role="status" (anunci educat, espera que el lector acabi), role="alert" (anunci immediat, interromp), role="log", aria-live o l'element <output>, que té rol d'estat implícit.
• Repeteix-ho en una altra combinació de la línia base: l'anunci de regions actives és una de les àrees amb més diferències entre lectors, com vas veure a la lliçó de VoiceOver i TalkBack.
• Valora també l'excés: un role="alert" que interromp a cada pulsació de tecla no incompleix el 4.1.3, però fa la pàgina inutilitzable a la pràctica i mereix una observació.

Errors d'implementació i el seu símptoma

• La regió es crea alhora que el seu contingut. Molts lectors només anuncien canvis en regions que ja existien a la pàgina: inserir de cop un div amb rol i text sol produir silenci.
• El framework substitueix el node sencer. Si la regió es torna a renderitzar com un element nou, l'efecte és el mateix que en el cas anterior: anuncis irregulars o absents.
• La regió està oculta amb display: none o dins d'un contenidor amb aria-hidden="true": no s'anuncia.
• L'avís és només visual, un missatge emergent (toast) que desapareix en tres segons sense rol ni propietat: fallada del 4.1.3.

Implementació que sol quedar-se en silenci:

const aviso = document.createElement('div');
aviso.setAttribute('role', 'status');
aviso.textContent = 'Producte afegit al carretó';
document.body.append(aviso);

Implementació robusta: la regió és a l'HTML inicial, buida, i l'script només en canvia el text.

<!-- A l'HTML de la pàgina, des de la càrrega -->
<div id="estado-carrito" role="status"></div>

// En afegir el producte
document.getElementById('estado-carrito').textContent =
  'Producte afegit. Carretó: 3 articles';

El focus després de les accions i en les aplicacions d'una sola pàgina

En una SPA (single page application, aplicació d'una sola pàgina), prémer un enllaç canvia la vista sense carregar una pàgina nova. El lector no detecta que hagi canviat res: si el títol no s'actualitza i el focus es queda a l'enllaç premut o es perd, la persona usuària no sap on és. Prova-ho així: activa l'enllaç amb NVDA, prem NVDA+T (ha canviat el títol?), NVDA+Tab (on és el focus?) i Fletxa avall (la lectura continua al contingut nou o a l'antic?). El que s'espera és que el focus vagi a l'encapçalament principal de la nova vista o al seu contenidor.

El focus també es perd quan s'elimina l'element que el tenia: esborrar una fila d'una llista, tancar una etiqueta de filtre, substituir un panell sencer. El navegador el retorna a l'inici del document i la pulsació següent de Tab comença des de la capçalera. Amb botons de «Carregar-ne més», comprova que el focus es queda al botó o passa al primer resultat nou, i que s'anuncia el nombre de resultats afegits.

Temps i processos asíncrons

El criteri 2.2.1 Temps ajustable (A) exigeix que, si hi ha un límit de temps, la persona usuària el pugui desactivar, ajustar o ampliar; en el cas d'ampliar-lo, que se l'avisi abans que expiri, que disposi d'almenys 20 segons per ampliar-lo amb una acció simple i que ho pugui fer almenys deu vegades. Hi ha excepcions (temps real, límits essencials i límits de més de 20 hores). Amb tecnologies de suport la pregunta clau és si l'avís arriba: un bàner visual sense rol ni moviment del focus no existeix per a qui fa servir un lector, i un botó d'«Ampliar la sessió» situat al final del DOM pot ser inassolible en els segons disponibles.

Les seus electròniques i la banca en línia solen tancar la sessió després d'uns minuts d'inactivitat. Per no esperar durant l'auditoria, demana al client un entorn de preproducció amb el temps de sessió reduït. Comprova també els estats d'espera: un indicador de càrrega que gira sense text ni regió d'estat deixa la persona usuària sense saber si l'acció s'està processant, i l'espera forma part de la definició de missatge d'estat.

Resum

• Davant de cada canvi sense recàrrega, respon tres preguntes: on és el focus, què s'ha anunciat i si es pot arribar al contingut nou.
• El 4.1.3 Missatges d'estat s'aplica als missatges que no reben el focus; s'avalua executant l'acció amb el lector i revisant el visor de veu.
• Les regions actives han d'existir abans de rebre el text; crear-les alhora que el seu contingut o tornar-les a renderitzar sol produir silenci.
• En les SPA i en eliminar elements, comprova el títol, la posició del focus i la continuïtat de la lectura (2.4.2, 2.4.3).
• Els avisos de temps han d'arribar a qui fa servir tecnologies de suport i permetre ampliar la sessió (2.2.1); provoca els estats dinàmics per poder-los avaluar.