Les Aplicacions d'una Sola Pàgina (SPAs) són aplicacions web que carreguen una única pàgina HTML i dinàmicament actualitzen el contingut a mesura que l'usuari interactua amb l'aplicació. Aquestes aplicacions ofereixen una experiència d'usuari fluida i ràpida, però també presenten desafiaments únics en termes d'accessibilitat. En aquesta secció, explorarem com assegurar que les SPAs siguin accessibles per a tots els usuaris.
Conceptes Clau
-
Història de Navegació i URL:
- Les SPAs sovint canvien el contingut sense actualitzar l'URL, la qual cosa pot ser problemàtica per a la navegació i l'accessibilitat.
- Utilitza l'API de l'historial del navegador per gestionar els canvis d'URL i permetre que els usuaris utilitzin els botons de retrocés i avançar del navegador.
-
Actualització de Contingut Dinàmic:
- Assegura't que els canvis de contingut dinàmic siguin anunciats adequadament a les tecnologies assistencials.
- Utilitza ARIA live regions per notificar els usuaris de canvis importants en el contingut.
-
Gestió del Focus:
- Quan el contingut canvia, el focus del teclat ha de moure's de manera lògica per guiar l'usuari a la nova informació.
- Implementa una gestió del focus adequada per evitar que els usuaris es perdin en la interfície.
-
Navegació del Teclat:
- Assegura't que tota la funcionalitat de l'aplicació sigui accessible mitjançant el teclat.
- Proporciona indicadors visuals clars per al focus del teclat.
-
Carregament Progressiu:
- Implementa tècniques de carregament progressiu per assegurar que el contingut essencial sigui accessible fins i tot si el JavaScript no està disponible o falla.
Exemples Pràctics
Exemple 1: Gestió de l'Historial
// Utilitzant l'API de l'historial per actualitzar l'URL sense recarregar la pàgina function updatePage(url, title) { history.pushState(null, title, url); document.title = title; // Actualitza el contingut de la pàgina aquí }
Exemple 2: ARIA Live Regions
// Actualitzar el contingut de la regió en viu function notifyUser(message) { const notificationElement = document.getElementById('notification'); notificationElement.textContent = message; }
Exercicis Pràctics
Exercici 1: Implementar la Gestió del Focus
Objectiu: Quan un usuari fa clic en un botó per carregar nou contingut, el focus del teclat ha de moure's al nou contingut.
Instruccions:
- Crea un botó que, en ser clicat, carregui nou contingut en un div.
- Assegura't que el focus del teclat es mogui al div amb el nou contingut.
Solució:
<button id="loadContent">Carregar Contingut</button> <div id="content" tabindex="-1"> <!-- Contingut dinàmic --> </div>
document.getElementById('loadContent').addEventListener('click', function() { const contentElement = document.getElementById('content'); contentElement.innerHTML = '<p>Nou contingut carregat!</p>'; contentElement.focus(); });
Errors Comuns i Consells
- Oblidar l'actualització de l'URL: Assegura't d'actualitzar l'URL per reflectir l'estat actual de l'aplicació, facilitant la navegació i els marcadors.
- No gestionar el focus adequadament: Sempre verifica que el focus del teclat es mogui de manera lògica i intuïtiva després de canvis de contingut.
Conclusió
Les SPAs ofereixen una experiència d'usuari rica i interactiva, però requereixen una atenció especial per assegurar que siguin accessibles. Mitjançant la gestió adequada de l'historial, el focus, i l'ús de tècniques com les ARIA live regions, podem crear aplicacions que siguin accessibles per a tots els usuaris. En el següent tema, explorarem com internacionalitzar i localitzar aplicacions web per fer-les accessibles a una audiència global.
Curs d'Accessibilitat Web
Mòdul 1: Introducció a l'Accessibilitat Web
- Què és l'Accessibilitat Web?
- Importància de l'Accessibilitat Web
- Visió General de les Lleis i Estàndards d'Accessibilitat
- Introducció a WCAG
Mòdul 2: Comprensió de les Discapacitats i les Tecnologies Assistencials
- Tipus de Discapacitats
- Visió General de les Tecnologies Assistencials
- Com les Persones amb Discapacitats Utilitzen la Web
Mòdul 3: Principis del Disseny Accessible
- Perceptible: Fer el Contingut Accessible als Sentits
- Operable: Interfície d'Usuari i Navegació
- Comprensible: Informació i Operació
- Robust: Compatibilitat amb Tecnologies Actuals i Futures
Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS
- HTML Semàntic
- Formularis Accessibles
- Ús de Rols i Propietats ARIA
- Contrast de Color i Redimensionament de Text
Mòdul 5: Accessibilitat en JavaScript i Multimèdia
- Creació de Ginys JavaScript Accessibles
- Accessibilitat del Teclat
- Contingut de Vídeo i Àudio Accessible
- Proporcionar Alternatives de Text per a Imatges
Mòdul 6: Prova i Avaluació de l'Accessibilitat
- Tècniques de Prova Manual
- Eines de Prova Automatitzades
- Prova d'Usuari amb Tecnologies Assistencials
- Interpretació d'Informes d'Accessibilitat