Fallo Común F74 de WCAG 2.1: No etiquetar una alternativa de medios sincronizados al texto como alternativa

Jano Llorca Lis

La accesibilidad digital busca garantizar que todas las personas, incluidas aquellas con discapacidades, puedan acceder a la información sin barreras. Un aspecto clave de la accesibilidad es proporcionar alternativas para los contenidos multimedia, como videos y audios, de manera que sean comprensibles para usuarios con discapacidades auditivas o visuales.

Sin embargo, un error frecuente es no etiquetar correctamente los medios sincronizados que sirven como alternativas al texto. Este incumplimiento de las WCAG 2.1 afecta directamente a usuarios que dependen de estos medios para comprender la información presentada en un sitio web.

Un problema común

Imagina que un sitio web ofrece una guía detallada en texto sobre cómo completar un formulario de solicitud de crédito. También incluye un video con instrucciones visuales y auditivas, pero sin indicar que este video es una alternativa a la guía escrita. Como resultado, los usuarios pueden no encontrar la versión en su formato preferido, lo que impacta negativamente en la accesibilidad de la página.

Acerca de este fallo

Este fallo ocurre cuando un medio sincronizado (como un video o audio con subtítulos y descripciones) no está claramente etiquetado como una alternativa al texto correspondiente.

¿Por qué es un problema?

Los usuarios que dependen de contenido multimedia pueden no encontrarlo fácilmente si no está etiquetado como una alternativa al texto.
Puede generar confusión en usuarios que buscan una versión accesible de la información textual.
Incumple con los Criterios de Conformidad 1.2.2 (Subtítulos para contenido pregrabado) y 1.2.8 (Alternativa de medios sincronizados para contenido pregrabado) de las WCAG 2.1.

Escenarios donde ocurre este fallo:

Una página incluye un video explicativo, pero no indica claramente que es una alternativa a la versión en texto.
Un podcast con instrucciones detalladas está en la página, pero no se menciona como una alternativa a la información escrita.
Un video instructivo aparece en una sección separada de la página, sin un vínculo claro a la información textual correspondiente.

Ejemplos

Ejemplo incorrecto 1: Video sin etiqueta de alternativa

🔴 Problema:

No hay indicación de que el video es una alternativa al texto.
Un usuario con discapacidad visual o auditiva no sabría si debe ver el video o leer el texto.

Solución correcta: Etiquetar claramente el video como alternativa

<h2>Cómo llenar tu declaración de impuestos</h2>

<p>Para completar el formulario, puedes leer las instrucciones a continuación o ver el siguiente video que explica los mismos pasos.</p>

<video controls aria-labelledby="video-instrucciones">

  <source src="guia-impuestos.mp4" type="video/mp4">

  Tu navegador no soporta la reproducción de video.

</video>

<p id="video-instrucciones"><strong>Video alternativo:</strong> Explicación visual de cómo llenar tu declaración de impuestos.</p>

✅ ¿Qué mejora?:

Se agregó una descripción antes del video, indicando que es una alternativa al texto.
Se usó aria-labelledby para mejorar la accesibilidad del video.

Ejemplo incorrecto 2: Podcast sin referencia al texto

🔴 Problema:

No se indica que el audio es una alternativa al texto.
Los usuarios pueden no entender la relación entre el texto y el audio.

Solución correcta: Etiquetar el audio como alternativa

✅ ¿Qué mejora?:

Se agregó una explicación antes del audio.
Se etiquetó correctamente la alternativa de medios.

Ejemplo correcto: Solución ideal

Para garantizar el cumplimiento del Criterio de Conformidad 1.2.2 y 1.2.8, la alternativa en medios sincronizados debe estar claramente etiquetada como tal.

<article>

  <h2>Guía paso a paso para llenar el formulario de solicitud de crédito</h2>

  <p>En la siguiente sección, encontrarás una descripción detallada de cada campo del formulario.</p>

  <section>

    <h3>Versión en video</h3>

    <p>Si prefieres una explicación en video, aquí tienes una versión con lenguaje de señas y subtítulos:</p>

    <video controls>

<source src="formulario-instrucciones.mp4" type="video/mp4">

<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">

<track src="sign-language.mp4" kind="sign">

Tu navegador no soporta el elemento de video.

</video>

    <p>Este video es una alternativa accesible a la guía escrita.</p>

  </section>

</article>

✅ ¿Qué mejora?:

Etiqueta clara: Se indica que el video es una alternativa accesible a la guía escrita.
Subtítulos y lenguaje de señas: Se proporcionan subtítulos y una versión en lenguaje de señas.
Texto explicativo: Se explica la equivalencia entre el video y el contenido en texto para orientar a los usuarios.

Errores comunes y cómo evitarlos

Errores frecuentes:

No indicar que el contenido multimedia es una alternativa al texto.
Separar el video o audio del contenido textual sin vincularlos adecuadamente.
No usar aria-labelledby o etiquetas claras para describir el contenido alternativo.

Cómo evitar estos errores:

Siempre incluir una referencia textual clara antes del contenido multimedia.
Usar atributos como aria-labelledby o proporcionar una descripción con <p> cerca del contenido multimedia.
Asegurar que los usuarios comprendan la relación entre el texto y el contenido multimedia en la página.

Preguntas frecuentes

¿Es obligatorio proporcionar alternativas en texto para videos y audios?

Sí, según las WCAG 2.1, los videos deben tener subtítulos y una alternativa de medios sincronizados cuando son una alternativa al texto.

¿Qué pasa si el video no tiene subtítulos pero es una alternativa al texto?

Si el video ya es una alternativa a una descripción en texto, no necesita subtítulos, pero debe estar claramente etiquetado como tal.

¿Puedo usar solo color o iconos para indicar una alternativa de medios?

No, ya que algunos usuarios pueden no percibir estos elementos. Es fundamental usar texto descriptivo.

¿Cómo verifico si mi página cumple con este criterio?

Revisa si todos los medios sincronizados en tu página tienen una indicación clara de que son una alternativa al texto y asegúrate de que están correctamente etiquetados.

¿El audio debe contener exactamente la misma información que el texto?

Debe transmitir la misma información clave, aunque la forma de presentación puede ser diferente.

¿Qué hacer si mi sitio tiene múltiples alternativas de medios?

Etiqueta claramente cada alternativa para que los usuarios puedan elegir la que mejor se adapte a sus necesidades.

Recursos relacionados

Pruebas y validación

Procedimiento

Identifica los videos y audios en la página.
Verifica si están etiquetados como alternativa al texto correspondiente.
Confirma que la relación entre el contenido textual y el multimedia es clara.

Resultados esperados

✅ Si la alternativa multimedia está correctamente etiquetada, el contenido cumple con WCAG.
❌ Si no está etiquetada o no es evidente la relación con el texto, el contenido no cumple.

Etiquetar correctamente las alternativas de medios sincronizados al texto es esencial para la accesibilidad. Asegurar que los usuarios puedan identificar y acceder a la alternativa que mejor se adapte a sus necesidades mejora la inclusión digital.

📢 ¿Necesitas ayuda con la accesibilidad de tu web? Contáctanos para una auditoría gratuita.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.