En aquest tema, explorarem com assegurar que les interaccions complexes i el contingut dinàmic siguin accessibles per a tots els usuaris, incloent aquells que utilitzen tecnologies assistencials. A mesura que les aplicacions web es tornen més interactives i dinàmiques, és crucial garantir que aquestes funcionalitats siguin accessibles.

1. Interaccions Complexes:

   • Inclouen elements com menús desplegables, pestanyes, diàlegs modals, i ginys personalitzats.
   • Sovint requereixen interaccions amb el teclat i suport per a lectors de pantalla.

2. Contingut Dinàmic:

   • Es refereix a contingut que es carrega o canvia sense recarregar la pàgina, com ara actualitzacions en temps real o contingut carregat mitjançant AJAX.
   • Pot ser difícil d'accedir per a usuaris de tecnologies assistencials si no es gestiona correctament.

• Roles i Propietats ARIA: Utilitza ARIA per definir el paper i l'estat dels elements dinàmics. Per exemple, utilitza aria-expanded per indicar si un menú està obert o tancat.

  <button aria-expanded="false" aria-controls="menu">Menú</button>
  <ul id="menu" role="menu" hidden>
    <li role="menuitem">Opció 1</li>
    <li role="menuitem">Opció 2</li>
  </ul>
  

• Alertes ARIA: Utilitza aria-live per notificar els usuaris de canvis dinàmics en el contingut.

  <div aria-live="polite">
    El contingut s'ha actualitzat.
  </div>
  

• Assegura't que tots els elements interactius siguin accessibles mitjançant el teclat. Utilitza atributs com tabindex per controlar l'ordre de navegació.

  <button tabindex="0">Clic aquí</button>
  

• Quan es mostra un diàleg modal, mou la focalització al diàleg i retorna-la a l'element original quan es tanca.

  const openModal = () => {
    const modal = document.getElementById('modal');
    modal.style.display = 'block';
    modal.focus();
  };
  

• Proves amb Lectors de Pantalla: Assegura't que els lectors de pantalla puguin anunciar correctament els canvis en el contingut dinàmic.
• Proves de Teclat: Verifica que tots els elements interactius siguin accessibles mitjançant el teclat.

Objectiu: Crear un menú desplegable accessible.

1. Crea un botó que controli la visibilitat d'un menú.
2. Utilitza ARIA per indicar l'estat del menú.
3. Assegura't que el menú sigui accessible mitjançant el teclat.

• Oblidar l'ús de aria-live: Sense aria-live, els usuaris de lectors de pantalla poden no ser conscients dels canvis dinàmics.
• No gestionar la focalització correctament: Això pot causar que els usuaris es perdin en la interfície, especialment en diàlegs modals.

Les interaccions complexes i el contingut dinàmic poden millorar significativament l'experiència de l'usuari, però només si es fan accessibles. Mitjançant l'ús de WAI-ARIA, la navegació amb teclat i la gestió adequada de la focalització, podem assegurar que tots els usuaris tinguin accés igualitari a les funcionalitats de la web. En el següent tema, explorarem com aplicar aquests principis a les aplicacions d'una sola pàgina (SPAs).