Un análisis detallado del primer pilar de las WCAG, con reglas técnicas y consejos para un sitio web verdaderamente inclusivo.
¡Bienvenido a la primera parte de nuestra serie sobre accesibilidad web! En los próximos cuatro artículos, profundizaremos en la WCAG (Pautas de accesibilidad al contenido web) principios, conocidos por las siglas VERTER. Estos principios forman la base para crear experiencias digitales abiertas a todos y se definen como: Perceptible, operable, comprensible, y Robusto.
Hoy, nos centramos en la piedra angular de la accesibilidad: Perceptibilidad.
¿Qué significa que un sitio sea perceptible?
El principio de perceptibilidad exige que la información y los componentes de la interfaz de usuario sean presentables para los usuarios de manera que puedan percibir, es decir, a través de la vista, el oído o el tacto. En otras palabras, el contenido no puede ser indetectable para todos los sentidos del usuario. Si una persona con discapacidad visual no puede acceder a la información de una imagen o un usuario con discapacidad auditiva no puede entender un vídeo, tu sitio no es perceptible.
Niveles de conformidad con las WCAG
Antes de profundizar en los detalles técnicos, es importante entender cómo se clasifican las directrices de las WCAG. Para cada principio, las reglas se clasifican en una de las tres categorías siguientes, que indican el grado de accesibilidad alcanzado:
- Nivel A: Este es el nivel mínimo de conformidad. El incumplimiento de estas pautas crea barreras importantes para los usuarios con discapacidades.
- Nivel AA: Este nivel incluye todos los requisitos del nivel A, además de otros adicionales. Es el estándar de referencia para la mayoría de la legislación mundial, incluida la Ley Europea de Accesibilidad (EAA), y proporciona un nivel de accesibilidad medio y sólido.
- Nivel AAA: El nivel de conformidad más alto y complejo. Incluye todos los requisitos de los niveles A y AA y, por lo general, lo adoptan organizaciones especializadas o para contenido dirigido a un público específico con necesidades distintas.
Guía técnica detallada sobre el principio de perceptibilidad
A continuación, hemos tomado y estructurado las reglas técnicas y los consejos exactamente como se definen en las directrices oficiales para proporcionar una herramienta práctica para desarrolladores y creadores de contenido.
1.2 Proporcione alternativas textuales para cualquier contenido que no sea texto
1.2.1. [AAA] Contenido no textual
- Todas las imágenes y botones de imagen deben tener un texto alternativo sugerente.
- Para las imágenes de fondo, se prefieren los fondos generados por CSS. Si se utilizan imágenes como fondo, deben tener un texto alternativo nulo marcado explícitamente.
- Los botones del formulario deben tener un valor descriptivo.
- Las entradas del formulario deben tener etiquetas de texto descriptivas.
- El contenido multimedia debe identificarse mediante un texto descriptivo y accesible.
- Cualquier marco utilizado debe tener un título.
Consejos:
- ARIA: Usa aria-label, aria-labelledby o aria-describedby para agregar etiquetas o alternativas de texto.
- Generalidades: Para un grupo de imágenes que deben interpretarse de forma colectiva, se puede añadir una opción alt no nula a la primera imagen para describir el grupo, mientras que las demás tienen textos alternativos explícitamente nulos.
- HTML/XHTML: Para aumentar la accesibilidad, se recomienda que los enlaces tengan una representación tanto textual como gráfica. Se recomienda utilizar un único elemento que contenga tanto el texto como la imagen, pero la imagen debe tener un atributo alt explícitamente nulo.
- HTML/XHTML: Como variación del caso anterior, el texto alternativo de la imagen puede no ser nulo si la imagen es un icono que transmite un mensaje visual. Por ejemplo, si el icono sugiere que al hacer clic en el enlace se abre un archivo PDF, el texto alternativo de la imagen debería advertir de ello a los usuarios no videntes.
- HTML/XHTML: Para los elementos del applet, la alternativa de texto se creará utilizando el atributo alt y proporcionando texto dentro del elemento del applet. Ambos son necesarios, ya que la compatibilidad con el elemento applet varía de un agente de usuario a otro.
- HTML/XHTML: Para las imágenes utilizadas como botones de formulario, el texto alternativo se proporcionará mediante el atributo alt del elemento de entrada de tipo img.
- HTML/XHTML: los elementos de entrada de tipo texto, casilla de verificación, radio, archivo, contraseña, así como elementos de área de texto y selección, se pueden asociar a una etiqueta mediante un elemento de etiqueta cuyo atributo for debe tener el mismo valor que el atributo id del elemento etiquetado. Este método no se puede usar para etiquetar entradas de tipo envío, restablecimiento, img o tipo botón.
- HTML/XHTML: En los casos en los que no se puede usar un elemento de etiqueta (ya sea por falta de espacio o porque no tiene sentido), el atributo title se puede usar para etiquetar los campos de interacción del formulario.
- HTML/XHTML: los elementos del objeto pueden contener la alternativa textual en su cuerpo o pueden contener una imagen/vídeo que, a su vez, tiene su alternativa textual proporcionada a través de su propio atributo alt.
1.3 Ofrecer alternativas para los medios basados en el tiempo
1.3.1. [A] Solo audio y solo vídeo (pregrabado)
- Todo el contenido de solo audio debe ir acompañado de una transcripción aumentada con elementos descriptivos (relacionados con los elementos necesarios para la comprensión).
- Todo el contenido exclusivo de vídeo debe ir acompañado de una descripción de audio o texto.
Consejos:
- Generalidades: La alternativa textual para un podcast puede ser su guion (si está disponible), enriquecido con descripciones de elementos de sonido de fondo.
- Generalidades: La alternativa de texto para una presentación PPT convertida en un vídeo mudo contendrá tanto la descripción del contenido de las diapositivas como las animaciones/efectos necesarios para su comprensión.
- Generalidades: La alternativa de audio para una presentación PPT convertida en vídeo mudo describirá el contenido de las diapositivas, así como las explicaciones que el presentador haya proporcionado en apoyo de ciertos puntos de esas diapositivas.
- HTML/XHTML: los elementos de vídeo se pueden asociar a elementos de pista en HTML5. El atributo src del elemento de pista puede especificar un archivo que contenga la descripción de audio de la película sincronizada con los eventos de la película.
1.3.2. [A] Subtítulos (pregrabados)
- Todo el contenido de audio y vídeo pregrabado debe tener subtítulos sincronizados, a menos que el contenido de audio y vídeo sea en sí mismo una alternativa multimedia al texto (y esté claramente marcado como tal).
Consejos: - HTML/XHTML: El elemento de pista se puede usar para proporcionar subtítulos para un elemento de vídeo.
1.3.3. [A] Descripción de audio o medio alternativo (pregrabado)
- Para todo el contenido de audio y vídeo pregrabado, se debe proporcionar una alternativa: una descripción textual (que es más que un simple subtítulo) o una descripción de audio.
1.3.4. [AA] Subtítulos (en vivo)
- Todo el contenido multimedia en directo con un componente de audio debe ir acompañado de subtítulos sincronizados.
Consejos: - Generalidades: Los servicios de traducción en tiempo real se pueden utilizar para generar dichos subtítulos.
1.3.5. [AA] Descripción de audio (pregrabada)
- Para todo el contenido de audio y vídeo pregrabado, debe haber una opción para seleccionar una banda sonora alternativa que contenga la descripción de audio de las imágenes presentadas.
1.3.6. [AAA] Lenguaje de señas (pregrabado)
- Para todo el contenido de audio, también se debe proporcionar interpretación en lenguaje de señas.
1.3.7. [AAA] Descripción de audio extendida (pregrabada)
- Para cualquier contenido de audio y vídeo en el que el sonido de fondo no tenga pausas lo suficientemente largas como para permitir una audiodescripción sincronizada suficientemente completa, se debe proporcionar una versión multimedia segmentada adecuadamente para incluir una audiodescripción ampliada.
1.3.8. [AAA] Media Alternative (pregrabado)
- Para cualquier contenido de audio y vídeo o solo vídeo, también se debe ofrecer una alternativa descriptiva (texto que pueda leer un lector de pantalla).
1.3.9. [AAA] Solo audio (en vivo)
- Para cualquier contenido que solo sea de audio, también se debe ofrecer una alternativa multimedia que dependa de la vista (subtítulos en tiempo real, vídeo en directo con el equivalente en lengua de signos, etc.).
1.4 Crea contenido que se pueda presentar de diferentes maneras sin perder información o estructura
1.4.1. [A] Información y relaciones
- El marcado semántico en el código HTML debe usarse adecuadamente (para encabezados, listas, énfasis, etc.).
- Los datos tabulares deben estar estructurados en tablas con títulos y resúmenes.
- Las entradas del formulario deben estar marcadas con etiquetas textuales y agrupadas adecuadamente.
1.4.2. [A] Secuencia significativa
- El orden de lectura y navegación de la página debe ser lógico; los lectores de pantalla deben tener acceso a la información sobre el orden de los bloques de la página.
1.4.3. [A] Características sensoriales
- Las instrucciones para comprender y utilizar el contenido no deben basarse en características visuales (por ejemplo, «está en la columna de la izquierda» o «haga clic en el cuadrado rojo»).
- Las instrucciones para entender y manejar el contenido no deben basarse en señales auditivas (por ejemplo, «espere a que suene el pitido»).
1.5 Facilitar a los usuarios ver y escuchar el contenido, incluida la separación del primer plano del fondo
1.5.1. [A] Uso del color
- El color no debe usarse como el único medio para transmitir información o administrar interacciones.
- Para distinguir los enlaces del resto del texto, no basta con que tengan un color diferente, a menos que el contraste con el fondo sea de al menos 3:1 y la acción de seleccionar o pasar el ratón sobre el enlace vaya acompañada de la aparición de un diferenciador (como un subrayado).
1.5.2. [A] Control de audio
- Si una página contiene audio que se reproduce automáticamente, debe haber mecanismos en la página para detener, pausar, ajustar o silenciar el sonido.
1.5.3. [AA] Contraste (mínimo)
- El texto y las imágenes del texto deben tener un contraste mínimo de 4. 5:1.
- El texto grande (al menos en negrita de 18 o 14 puntos) debe tener un contraste mínimo de 3:1.
- El texto de fondo o el texto de los logotipos están exentos de estas condiciones.
1.5.4. [AA] Cambiar el tamaño del texto
- La página debe permanecer funcional y legible cuando se redimensiona hasta un 200% de su tamaño original.
1.5.5. [AA] Imágenes de texto
- Si la información se puede transmitir utilizando solo texto (posiblemente formateado), se debe evitar el uso de imágenes que contengan ese texto.
- Una excepción a esta regla es cuando la imagen del texto se puede generar dinámicamente y personalizar según los requisitos del usuario.
1.5.6. [AAA] Contraste (mejorado)
- El texto y las imágenes del texto deben tener un contraste mínimo de 7:1.
- El texto grande (al menos en negrita de 18 o 14 puntos) debe tener un contraste mínimo de 4. 5:1.
- El texto de fondo o el texto de los logotipos están exentos de estas condiciones.
1.5.7. [AAA] Ruido de fondo bajo o nulo
- El ruido de fondo de una conversación debe ser inexistente o poder rechazarse para evitar causar problemas en la comprensión de las palabras.
- Si no se puede ajustar el ruido de fondo, debe tener un volumen al menos 20 dB inferior al de la conversación.
1.5.8. [AAA] Presentación visual
- Para la presentación visual de los bloques de texto, debe existir un mecanismo que permita el ajuste de modo que se respeten las siguientes reglas:
- El usuario puede seleccionar el color del fondo y del texto.
- El ancho se puede establecer en un máximo de 80 caracteres por línea.
- La alineación del texto NO debe justificarse (alineada con los márgenes izquierdo y derecho).
- El espacio entre las líneas de un párrafo debe ser de al menos 1,5 y entre los párrafos de al menos 2,5.
- Cambiar el tamaño del texto hasta un 200% del tamaño inicial no debe requerir el desplazamiento horizontal.
- El usuario puede seleccionar el color del fondo y del texto.
1.5.9. [AAA] Imágenes de texto (sin excepción)
- Nunca se deben usar imágenes de texto en lugar del texto real.
Simplificando la perceptibilidad con Wawsome
La implementación manual de estas reglas puede ser un proceso laborioso y propenso a errores. Impresionante está diseñado para automatizar y simplificar este esfuerzo.
- Correcciones impulsadas por IA: Nuestra plataforma agrega automáticamente texto alternativo descriptivo a las imágenes y a las etiquetas ARIA esenciales, lo que garantiza que ningún contenido que no sea texto permanezca invisible para las tecnologías de asistencia.
- Personalización del usuario: El widget Wawsome da control a los visitantes. Pueden ajustar el contraste, los colores, el espaciado y el tamaño del texto, activar filtros para los daltónicos o elegir perfiles predefinidos para diversas necesidades, lo que garantiza una legibilidad óptima para todos.
Explore estas potentes funciones y muchas más de iniciar una prueba gratuita de 7 días ¡hoy!
Conclusión
La perceptibilidad es más que una lista de requisitos técnicos; es la base sobre la que se construye una experiencia digital verdaderamente inclusiva. Al garantizar que todos los usuarios puedan percibir tu contenido, abres la puerta a una comunicación eficaz y demuestras un compromiso genuino con cada miembro de tu audiencia.
En nuestro próximo artículo, abordaremos el segundo principio de las WCAG: Operabilidad. Le mostraremos cómo garantizar que todos los usuarios puedan navegar e interactuar con su sitio, independientemente del dispositivo o método de entrada que utilicen.