Imágenes sin texto alternativo

Tres imágenes sin atributo alt. Los lectores de pantalla no pueden anunciarlas.

La última imagen tiene un texto alternativo genérico; el módulo de texto alternativo de IA debería proporcionar una sugerencia mejor.

Textos de enlace genéricos

Más información sobre nuestros servicios aquí.

¿Conoces tus obligaciones con la BFSG? haga clic aquí.

Más información: más, más, ►.

Violaciones de contraste

Gris claro sobre blanco (~1,6:1): muy por debajo del umbral WCAG de 4,5:1.

Coral claro sobre blanco (~ 2,4:1): un color típicamente bonito para la marca, pero no accesible.

Blanco sobre coral claro (~2,4:1) — el mismo problema desde una perspectiva diferente.

Gris claro sobre un gris ligeramente más claro (~ 1,2:1): el clásico para temas „minimalistas".

Controles de teclado rotos

Los siguientes "botones" son divs no semánticos sin índice de tabulación ni rol ARIA. Los clics del ratón funcionan, pero los clics de la tecla Tabulación no.

Y aquí hay un enlace sin href, que tampoco se puede enfocar:

Forma rota

Ni una sola etiqueta de referencia, ni un conjunto de campos alrededor del grupo de radio, los campos obligatorios solo se indican con asteriscos, ni un aria-describedby para la visualización de errores.

Orden de tabulación alterado y falta de enfoque

Cuatro enlaces con valores de tabindex positivos: el orden de tabulación está invertido con respecto al orden visual.

Además: `outline:none` elimina por completo el anillo de enfoque. Los usuarios de teclado no pueden ver dónde se encuentran.

Mini botones

Botones de tan solo 20×20 píxeles; el tamaño mínimo según WCAG 2.5.5 es de 44×44 píxeles.

Prácticamente inutilizable en dispositivos táctiles.

Animación continua sin protección de movimiento reducida

El bloque naranja gira sin cesar, incluso si el visitante ha configurado el sistema operativo para que el movimiento sea menor.

Mezcla de idiomas sin duración

Ofrecemos soluciones de accesibilidad. Nuestro equipo está comprometido con la inclusión digital en toda Europa. Contáctanos para una consulta gratuita sobre tu sitio web de WordPress.

También en francés sin marcar: Nous offrons dessolutions d'accessibilité numérique pour les sites WordPress.

acordeón roto

Acordeón basado en div sin rol, aria-expanded, aria-controls.

Puntos de referencia desaparecidos

Esta sección no contiene áreas semánticas (ni navegación, ni apartado, ni rol="región"). Los lectores de pantalla no pueden saltar entre áreas.

• Enlace A
• Enlace B
• Enlace C

Tabla de datos sin celdas de encabezado

Vídeo sin subtítulos reconocibles

Inserta cualquier vídeo que no tenga un elemento `track` para subtítulos; el módulo del plugin debería marcarlo.

(Probablemente la fuente no exista; esto solo trata sobre el patrón de marcado).

Texto de pared complejo

Implementar aplicaciones web accesibles que cumplan con los estándares WCAG 2.1 requiere un conocimiento interdisciplinario de la semántica HTML, las especificaciones ARIA, las técnicas de visualización CSS y las tecnologías de asistencia, como lectores de pantalla, pantallas Braille y sistemas de conversión de voz a texto. La interacción de estas tecnologías, especialmente en aplicaciones dinámicas de una sola página que utilizan frameworks como React, Vue o Angular, debe garantizarse mediante la gestión de regiones en tiempo real y una correcta gestión del enfoque. Esto resulta difícil de lograr sin la especialización adecuada y varios años de experiencia práctica.

Texto desplazable estilo marquesina

Movimiento de desplazamiento automático sin botón de pausa y sin protección contra movimientos bruscos.