Manche Inhalte ändern sich schnell. Beispiele sind Formfehler, Ladezeiten und Mini-Einkaufswagen. Diese sagt der Screenreader an.
ARIA-Live-Regionen sind HTML-Bereiche mit einer Eigenschaft: aria-live="polite" oder "assertive". Wenn sich diese Bereiche ändern, sagt der Screenreader die Änderung. Der Nutzer muss nicht dorthin gehen. Beispiele: Fehlermeldungen im Formular, "Produkt ist im Einkaufswagen", Anzahl der Suchergebnisse.
Regel WCAG 4.1.3 ist wichtig. Sie gilt bei Änderungen ohne Fokus-Wechsel. Ohne Live-Region merkt der Nutzer nicht immer die Änderung. Zum Beispiel, "Bitte E-Mail angeben" wird gezeigt. Oder die Suche hat 0 Treffer. Das kann frustrieren.
15 Minuten Gespräch: Wir prüfen, ob es wichtig für Ihre Seite ist. Weitere Infos: Überblick zu BFSG, Leistungen, BAFA-Hilfe, häufige Fragen.
Regiones en vivo de ARIA
El lector de pantalla anuncia el contenido dinámico (errores de formulario, pantalla de carga, minicarritos).
¿Qué significa "ARIA Live Regions"?
Las regiones ARIA en vivo son áreas HTML con el atributo aria-live="polite"" o ""asertivo"". Cuando cambia el contenido de estas áreas, el lector de pantalla anuncia automáticamente el cambio, sin que el usuario tenga que navegar hasta allí. Ejemplos: mensaje de error de formulario, "producto en el carrito de compra", número de resultado de búsqueda.
Obligación y beneficio — WCAG 4.1.3.
WCAG 4.1.3 (Mensajes de estado) El nivel AA se aplica siempre que se produzca un cambio de estado visual sin que cambie el foco. Sin una región activa, un usuario de lector de pantalla no se dará cuenta de que se ha mostrado "Introduzca su dirección de correo electrónico" ni de que la búsqueda no ha arrojado resultados. La consecuencia es la frustración y el abandono del intento.
Cómo lo resolveremos específicamente.
aria-live="polite""para actualizaciones no críticas (cargador, resultados de búsqueda).aria-live="asertivo""Solo para mensajes urgentes (caducidad de la sesión, errores críticos).rol="estatus""para mensajes de estado yrol="alerta""para mensajes de error: regiones activas implícitas.- El contenedor debe estar en el DOM desde el principio (aunque esté vacío), de lo contrario la función en vivo no funcionará.
- Esta lógica es exactamente la que se aplica en la comprobación rápida de DigElite:
<div id="check-result" role="status" aria-live="polite">.
Componentes básicos relacionados de nuestro conjunto de módulos
-
Navegación completa con teclado
WCAG 2.1.1Todas las funciones son accesibles sin necesidad de ratón. Imprescindible para usuarios de lectores de pantalla, útil para todos los demás.
-
Jefe de Higiene y Estructura
WCAG 1.3.1Estructura limpia para lectores de pantalla y motores de búsqueda: un encabezado H1 por página, sin saltos.
-
Escáner de contraste con auditoría automática
WCAG 1.4.3Se realiza una comprobación continua del contraste en el sistema interno: se informa de cualquier regresión antes de que el equipo editorial se dé cuenta.
-
Saltar enlaces y puntos de referencia semánticos
WCAG 2.4.1El teclado salta directamente al contenido principal, sin tener que navegar por el menú de navegación ni el encabezado.
¿Necesitas este módulo en concreto?
Consulta inicial de 15 minutos: aclararemos si es relevante para su sitio web.
Más información:
Descripción general de BFSG ·
Descripción general del rendimiento ·
Financiación de BAFA ·
Preguntas frecuentes
