Proporcionando textos alternativos cortos para contenido no textual que sirva al mismo propósito y presente la misma información que el contenido no textual [Técnica G94 – WCAG 2.1] (Accesibilidad Web 69)


Se aplica a

Todas las tecnologías.

Criterio 1.1.1 – Existencia de alternativas textuales

Descripción

El objetivo de esta técnica es crear un texto alternativo que sirva al mismo propósito y presente la misma información que el contenido no textual origintal.

Como resultado, es posible eliminar el contenido no textual y reemplazarlo con el texto alternativo sin que la funcionalidad o información se pierdan.

Este texto alternativo podria no necesariamente describir el elemento no textual en si, sino que debe servir al mismo proposito y proveer la misma información que este.

Esto, en ocasiones puede resultar en unt texto alternativo que parece una descripción del contenido no textual. No obstante esto solo será cierto si es la mejor forma de servir al mismo propósito que el contenido que describe

Si es posible, el texto alternativo corto debe transmitir completamente el proósito y la información. Si no es posible resumirlo en una descripción corta, entonces la descripción corta debe proveer un resumen breve de la información y una descripción larga deberá ser usada para transmitir la información al completo.

La descripción alternativa debe ser capaz de sustituir plenamente el conteido no textual. Si el contenido no textual es eliminado de la página y sustituido por el texto, la página debe proporcionar igualmente la misma función e informacón. El texto alternativo debe breve pero lo mas informativo posible.

A la hora de decidir que texto incluir en la descripcion alternativa, suele ser una buena idea considerar las siguientes preguntas:

  • ¿Porqué hay un contenido no textual aquí?
  • ¿Qué información presenta?
  • ¿Qué propósito cumple?
  • Si no pudiera usar el contenido no textual, ¿que palabras usaría para aportar la misma función y/o información?

Cuando un contenido no textual contiene palabras que son importantes para enender el contenido, la descripción alternativa debe incluir estas palabras.

Si el texto en la imagen es más de lo que puede ser incluido en una descripción alternativa corta, debe usarse una combinación de descripción corta y una descripción larga en la que se incluya el texto completo.

Ejemplos

  • Un botón de búsqueda que usa la imagen de una lupa. El texto alternativo sera «buscar» y no «lupa».
  • Una fotografía muestra como crear un nudo, incluyendo flechas mostrando como las cuerdas van formándolo. El texto alternativo tiene que describir como se realiza dicho nudo paso a paso, no lo que aparece en la imagen.
  • Una fotografía muestra un juguete visto de frente. El texto alternativo describirá la vista frontal del juguete.
  • Una animación muestra como cambiar un neumático. La descripción alternativa corta debe descrir cual es el propósito de la animación, y la descripción larga como cambiar el neumático paso a paso.
  • Un logo de la compañía «TechTron» aparece junto a cada uno de los productos que son realizados por ella. Cada unad e ellas tendrán como texto alternativo «TechTron».
  • Una gráfica muestra las ventas de Octubre. Debe ir acompañada de una descripción corta que reze «Gráfico de ventas de Octubre», y de una descripción larga que proporcione toda la información reflejada en la gráfica.
  • La cabecera de la web contiene una imagen con las palabras «La Historia de la Guerra» con letras decoradas. El texto alternativo de dicha imagen debe ser «La Historia de la Guerra».
  • Una imagen de una serie de libros en una estanteria contiene áreas interactivas que proporcionan significado en cuanto a navegación a páginas concretas sobre un libro particular. El texto alternativo debe ser «Los libros están disponibles para ser comprados en esta sección. Seleccione un libro para obtener más detalles sobre el», que describe la imagen y su naturaleza interactiva.

Técnicas relacionadas

  • G92: Proporcionando descripciones largas para contenido no textual que sirva al mismo propósito y presente la misma información.
  • G95: Proporcionando textos alternativos cortos que aporten una breve descripciñon del contenido no textual.
  • G196: Usando un texto alternativa en un elemento de un grupo de imagenes que describe todos los elementos del grupo.
  • H2: Combinando enlaces adyacentes a imagenes y texto para un mismo recurso.
  • H24: Proporcionando texto alternativo para los elementos de area en un mapa de imágenes.
  • H36: Usando atributos alt en imagenes que se usan como botones de tipo submit.
  • H35: Proporcionando alternativas textuales para elementos de tipo «applet»
  • H37: Usando atributos alt en elementos de imagen.
  • H53: Usando el cuerpo de un elemento de tipo «object»
  • H86: Proporcionando alternativas textuales para arte ASCII, emoticonos y «let’s speak»

Tests

Procedimiento

  1. Elimine, oculte o enmascare el contenido no textual.
  2. Reemplácelo con el texto alternativo.
  3. Compruebe que nada se ha perdido (el propósito del contenido no textual coincide con el aportado por el texto alternativo)
  4. Si el contenido no textual contiene palabras que sean importantes para la comprensión del contenido, dichas palabras deben estar incluidas en el texto alternativo.

Resultados esperados

  • Compruebe que el punto 3 es verdadero.
  • Si el contenido no textual contiene palabras que son importantes para comprender el contenido, compruebe que el punto 4 tembién sea cierto.

Reglas para el test

Las siguientes son Reglas para las pruebas que están relacionadas con esta técnicas. No es necesario usar estas en particular.

Las reglas de test (en Inglés) sirven para comprobar la conformidad con WCAG, pero son métodos definidos y aprobados. Para más información de como usarlas, consulte el documento (en Inglés) «Understanding Test Rules for WCAG Success Criteria

Bibliografía


Quizá te interese leer más sobre WCAG 2.1 - Técnicas

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>