PRINCIPIO 1: PERCEPTIBLE - LA INFORMACIÓN Y LOS COMPONENTES DE LA INTERFAZ DE USUARIO DEBEN SER PRESENTADOS A LOS USUARIOS DE MODO QUE ELLOS PUEDAN PERCIBIRLOS.

El objetivo de este principio es que toda la información y los componentes de la interfaz de usuario se presenten a los usuarios de forma que estos puedan percibirlos a través de los sentidos. Es decir, esta información no puede pasar desapercibida para todos sus sentidos.

Este principio lo conforman cuatro pautas:

PAUTA 1.1 ALTERNATIVAS TEXTUALES

Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.

El objetivo de las alternativas textuales es proporcionar un contenido equivalente y accesible en caso de que no se pueda mostrar el contenido no textual. Si todo contenido no textual dispone de una alternativa textual que proporcione la misma información o funcionalidad nos aseguramos que esa información estará disponible para todos los usuarios.

La alternativa textual estará disponible para los productos de apoyo (como lectores de pantalla) o agentes de usuario que transforman ese texto en información perceptible por los usuarios con discapacidad (voz, braille, etc.) o limitaciones técnicas.

PAUTA 1.2 MEDIOS TEMPODEPENDIENTES

Proporcionar alternativas para los medios tempodependientes.

Esta pauta se refiere al contenido que se presenta en un medio tempodependiente. Se entiende por medios tempodependientes a aquellos elementos (medios de comunicación) que muestran su contenido según una línea temporal, es decir, a lo largo de tiempo. Por ejemplo, una animación, una canción o una película son medios tempodependientes pues necesitan de cierto tiempo para mostrar todo su contenido y en un momento dado sólo muestran una parte del mismo (por ejemplo, en una película pausada se muestra un único fotograma).

Este tipo de contenido requiere de una serie de medidas de accesibilidad específicas, como transcripciones textuales, subtitulado, audiodescripciones o un intérprete en lengua de señas.

PAUTA 1.3 ADAPTABLE

Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.

Toda la información debe estar disponible de forma que pueda ser percibida por todos los usuarios, independientemente de la forma en la que accedan a los documentos. Por ejemplo, los usuarios de lectores de pantalla acceden al documento en forma de voz, los que no dispongan de navegadores gráficos lo harán sin CSS, etc. Si toda la información está disponible de forma que pueda ser determinada mediante software entonces se puede presentar a los usuarios de diferente manera (visual, auditiva, táctil, etc.). Por el contrario, si la información depende únicamente de la forma en la que se presente el contenido (tamaño, estilo, color, etc.) entonces los productos de apoyo no podrán interpretar esa información y transmitírsela a los usuarios.

En líneas generales se trata de usar el marcado estructural y semántico adecuado para transmitir toda la información y las relaciones entre el contenido (encabezados, listas, párrafos, tablas de datos, etc.), crear un orden de lectura correcto para las distintas formas de presentación (lector de pantalla, navegador de texto, sin hojas de estilo, etc.) así como proporcionar la información de forma que sea independiente de características sensoriales (color, posición, tamaño, etc.)

PAUTA 1.4 DISTINGUIBLE

Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

El objetivo de esta pauta es lograr que la presentación por defecto del contenido resulte lo más fácil de percibir que se pueda para las personas con discapacidad. Trata principalmente sobre el uso adecuado del color para transmitir información, uso de un contraste suficiente entre la información de primer plano y la información de fondo (tanto visual como auditiva), permitir que los usuarios configuren el tamaño del texto según sus necesidades, así como dar un formato al texto para mejorar su legibilidad (ancho de columnas, interlineado, alineación, etc.).

Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.

El texto se considera accesible prácticamente para todos los usuarios ya que puede ser manejado por lectores de pantalla, navegadores no visuales y lectores braille. Puede redimensionarse y mostrarse de forma que mejor cumpla l as necesidades de los usuarios (de forma visual, táctil, por voz, o cualquier combinación)

El objetivo de las alternativas textuales es el de proporcionar un contenido equivalente y accesible en caso de que no se pueda mostrar el contenido no textual. Si todo contenido no textual dispone de una alternativa textual que proporcione la misma información o funcionalidad nos aseguramos que esa información estará disponible para todos los usuarios:

• El contenido original estará disponible para agentes de usuario con las características técnicas necesarias para mostrarlo.
• La alternativa textual estará disponible para los productos de apoyo (como lectores de pantalla) o agentes de usuario que transforman ese texto en información perceptible por los usuarios con discapacidad (voz, braille, etc.) o limitaciones técnicas.

Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto en las situaciones enumeradas a continuación:

• Controles, Entrada de datos: Si el contenido no textual es un control o acepta datos introducidos por el usuario, entonces tiene un nombre que describe su propósito. (Véase la pauta 4.1 para requisitos adicionales sobre los controles y el contenido que acepta entrada de datos).
• Contenido multimedia tempodependiente: Si el contenido no textual es una presentación multimedia con desarrollo temporal, entonces las alternativas textuales proporcionan al menos una identificación descriptiva del contenido no textual. (Véase la pauta 1.2 para requisitos adicionales sobre contenido multimedia).
• Pruebas: Si el contenido no textual es una prueba o un ejercicio que no sería válido si se presentara en forma de texto, entonces las alternativas textuales proporcionan al menos una identificación descriptiva del contenido no textual.
• Sensorial: Si el contenido no textual tiene como objetivo principal el crear una experiencia sensorial específica, entonces las alternativas textuales proporcionan al menos una identificación descriptiva del contenido no textual.
• CAPTCHA: Si el propósito del contenido no textual es confirmar que quien está accediendo al contenido es una persona y no una computadora, entonces se proporcionan alternativas textuales que identifican y describen el propósito del contenido no textual y se proporcionan formas alternativas de CAPTCHA con modos de salida para distintos tipos de percepciones sensoriales, con el fin de acomodarse a las diferentes discapacidades.
• Decoración, Formato, Invisible:Si el contenido no textual es simple decoración, se utiliza únicamente para definir el formato visual o no se presenta a los usuarios, entonces se implementa de forma que pueda ser ignorado por las ayudas técnicas.

Objetivo:

Hacer que la información transmitida mediante contenido no textual se accesible a través de alternativas textuales.

Los lectores de pantalla detectan la presencia de imágenes y del resto del contenido no textual, pero no pueden interpretar su contenido. Es decir, sabrán que se encuentran ante una imagen, por ejemplo, pero no sabrán si se trata de la fotografía de una casa, de un coche, o una caricatura. Como desarrolladores es nuestra responsabilidad el comunicar al lector de pantalla, y por tanto al usuario final, cuál es la información o función proporcionada por el contenido no textual.

Cuando creemos una alternativa textual lo primero que debemos tener en cuenta es cómo se presentará la página (o cómo "se escuchará") cuando las imágenes o el contenido no textual no se muestren. Con base en ello, debemos escribir aquellas alternativas textuales que mejor funcionen como reemplazo del contenido no textual. Es decir, aquellas que mejor transmitan la información o la funcionalidad que se pretendía transmitir con el contenido original.

Beneficiarios:

Beneficia especialmente a personas con dificultades para percibir el contenido visual y/o auditivo: por ejemplo, personas con ceguera, baja visión, sordera, baja audición, así como aquellas con dificultades de comprensión del contenido visual y/o auditivo. También beneficia a aquellos usuarios que por limitaciones técnicas no pueden acceder al contenido visual y/o auditivo. Por último, los buscadores web también se benefician al basarse en el contenido textual para indexar los contenidos.

ALTERNATIVA TEXTUAL CORTA

Cuando una alternativa textual corta puede cumplir el mismo propósito y presentar la misma información que el contenido no textual. Proporcionar una alternativa textual corta para el contenido no textual que cumpla la misma función y presente la misma información que el contenido no textual.

Se trata de aquellas imágenes que aportan información pero no requieren de equivalentes textuales largos. El texto alternativo debe proporcionar la misma información que se pretendía transmitir con la imagen original.

Lo más importante a la hora de proporcionar un texto alternativo para una imagen es tener presente cuál es el contenido o información qué la imagen quiere transmitir o cuál es su funcionalidad.

• Deben cumplir el mismo propósito y transmitir la misma información .
• No se trata de describir los detalles gráficos (a no ser que eso sea lo adecuado), sino de proporcionar la misma información o funcionalidad.
• El texto alternativo debe ser breve y lo más informativo posible .
• El texto alternativo debe servir como reemplazo del contenido no textual .

Para ello, podemos plantearnos una serie de cuestiones que nos ayudarán a escoger una alternativa textual adecuada:

• ¿Por qué está aquí el contenido no textual?
• ¿Qué información está transmitiendo?
• ¿Cuál es su propósito?
• Si no pudiese usar el contenido no textual ¿qué palabras usaría para transmitir la misma información y/o función?

Usar el atributo "alt" en los elementos <img>

Para proporcionar un texto alternativo para las imágenes usaremos el atributo alt.

A continuación podemos ver varios ejemplos de imágenes cuyo texto alternativo contiene la información que se pretendía transmitir con la imagen:

<img src="warning.png" alt="¡Importante!" />

<img src="pdf.png" alt="en formato PDF" />

<img src="hemisferic.png"
alt="El Hemisfèric representa un gran ojo humano abierto al mundo" />

Un caso especial son aquellas imágenes que transmiten información textual. Por norma general, en estos casos la información que transmiten es el texto que contienen, con lo que éste debe ser el texto alternativo de la imagen.

<img src="urgencias.png" alt="Servicio / Urgencias 24 horas" />

Ejemplo:Para este tipo de imágenes es importante que incluyamos en el texto alternativo toda la información textual que contiene la imagen y que es necesaria para su comprensión. Por otra parte, los detalles gráficos no son relevantes (salvo excepciones).

<img src="contactenos.png" 
alt="CONTÁCTENOS: Teléfono: 234 56 78, Correo: contacto@empresa.com, Redes sociales: @empresa" />

En el ejemplo anterior, la información más importante es el número de teléfono, la dirección de correo electrónico y las redes sociales. Un texto alternativo que sólo diga "Contáctenos" es incompleto porque nos dice sobre lo que informa la imagen pero no da la información fundamental.

Por otra parte, entrar en detalles como que hay un cubo de color azul o que tiene tres dibujos, el de un teléfono, el de un sobre y el de un símbolo de arroba es totalmente irrelevante y no se debe incluir en el texto alternativo.

Usar una alternativa textual en una imagen perteneciente a un grupo de imágenes de forma que describa a todo el grupo :

Si tenemos un grupo de imágenes contiguas las cuales transmiten una información de forma conjunta en vez de individualmente entonces podemos usar el texto alternativo de una de las imágenes para describir todo el grupo. De esta forma se evitan repeticiones innecesarias en los textos alternativos del resto de imágenes del grupo.

Esto se entiende mejor con un ejemplo. Imaginemos que tenemos un sistema de puntuación de algún tipo de artículo en el cual la valoración obtenida se indica mediante estrellas del 1 al 5. Cada estrella está formada por una imagen de un color u otro, dependiendo de la puntuación.

<img src="estrella_on.png" alt="3 de 5" />
<img src="estrella_on.png" alt="" />
<img src="estrella_on.png" alt="" />
<img src="estrella_off.png" alt="" />
<img src="estrella_off.png" alt="" />

En vez de proporcionar un texto alternativo para cada imagen, podemos usar el atributo alt de la primera imagen para describir a todo el grupo: indicar la puntuación.

El resto de imágenes deben estar situadas de forma contigua y ser ignoradas por los lectores de pantalla para que resulten transparentes a los usuarios. Para ello su texto alternativo debe estar vacío y tampoco deben tener un atributo title. De esta forma los lectores de pantalla sólo leerán el texto alternativo de la primera imagen, el cual ya transmite toda la información.

Si una imagen funciona como enlace, describir su propósito .

En el caso de que la imagen funcione como un enlace, entonces debemos combinar el texto alternativo de la imagen con el texto del enlace (si lo hay) de forma que entre ambos describan el destino del enlace, evitando repeticiones innecesarias.

Podemos diferenciar varios casos:

La imagen es el único elemento del enlace: en este caso, en el texto alternativo de la imagen debemos describir el destino del enlace.

<a> 
<img src="imprimir.png" alt= "Imprimir" /> 
</a>

El enlace contiene texto además de la imagen y dicho texto describe adecuadamente el enlace. en este caso se considera suficiente con el texto del enlace. La imagen, como no aporta información adicional, se considera decorativa y su texto alternativo debe estar vacío.

<a> 
<img src="imprimir.png" alt= "" /> 
</a>

El enlace contiene texto además de la imagen y la imagen complementa la información de dicho texto. en este caso, como la imagen está aportando información adicional al texto del enlace, debemos proporcionar dicha información en el texto alternativo.

<a> 
Archivos 
<img src="pdf.png" alt="en formato PDF" />
</a>

Combinar imágenes y enlaces contiguos al mismo recurso.Es frecuente que los enlaces vayan acompañados de imágenes como iconos, miniaturas, etc., aunque no siempre se realiza de la forma correcta.

En ocasiones, la imagen se incluye en un enlace diferente aunque apunte al mismo destino. Por ejemplo, el título de una noticia y la foto ilustrativa, situada de forma contigua, a veces se marcan como dos enlaces diferentes a la misma noticia.

Ejemplo incorrecto:

<a href="noticias.htm"> 
2.	<img src="news.png" alt="Noticias" /> 
3. </a> 
4. <a href="noticias.htm"> 
5. 	Noticias 
6. </a>

Los usuarios de lectores de pantalla, o aquellos que naveguen con el tabulador y el teclado, percibirán la existencia de dos enlaces contiguos al mismo recurso, lo cual puede generar confusión.

Para evitar este problema y evitar repetir el enlace, algunos desarrolladores dejan vacío el texto alternativo de la imagen, pero esto incumple el criterio de conformidad 1.1.1. Como la imagen es el único elemento del enlace, se trata de una imagen funcional y no puede considerarse como decorativa.

Ejemplo incorrecto:

<a href="noticias.htm"> 
<img src="news.png" alt="" /> 
</a> 
<a href="noticias.htm"> 
Noticias 
</a>

En otras ocasiones, la imagen se incluye en el mismo enlace pero en su texto alternativo se repite el texto del enlace. Estamos en un caso similar al primero, donde existe una redundancia de información que puede generar confusión.

<a href="noticias.htm"> 
<img src="news.png" alt="Noticias" /> 
3. 	Noticias
</a> 

El objetivo es evitar repeticiones innecesarias de enlaces, así como de la información transmitida en el texto alternativo de las imágenes y el texto de los enlaces.

Usar el atributo alt de las imágenes usadas como botones de envío de formularios (<input> de tipo "image").Cuando usemos imágenes como botones de envío de formularios (<input> de tipo "image") debemos usar el atributo alt para proporcionar un texto que describa la función de la imagen. En el texto alternativo no intentaremos describir la imagen.

<input type="image" src="lupa.gif" alt="Buscar" />

Aunque según la especificación de HTML se puede usar el atributo alt en todos los elementos <input>, sólo debemos usarlo en aquellos de tipo "image".

Proporcionar alternativas textuales para las zonas activas de los mapas de imagen.Un mapa de imagen es una imagen dividida en diferentes zonas mediante el elemento <area>, cada una de las cuales funciona como un enlace. Si usamos mapas de imagen, para cada zona activa debemos proporcionar alternativas textuales que identifiquen el destino de los enlaces. Para ello usaremos el atributo alt de los elementos <area>.

<img src="mapa.png" alt="Colombia. Seleccione un departamento" 
title="Colombia" usemap="#colombia" /> 
<map name="colombia"> 
<area coords="12,11,79,39" href="guajira.htm" alt="Guajira" /> 
<area coords="45,22,16,39" href="magdalena.htm" alt="Magdalena" /> 
... ... 
</map>

La imagen principal a partir de la cual se crea el mapa de imagen también debe disponer de un texto alternativo.

Aunque no sea obligatorio, sí es recomendable proporcionar enlaces redundantes en forma de texto para cada zona activa del mapa de imagen. Es decir, usar el elemento <a> para repetir en el documento los mismos enlaces disponibles en el mapa de imagen. Por ejemplo, usar una lista de enlaces a continuación del mapa de imagen.

Proporcionar alternativas textuales para ASCII art, emoticonos y "leetspeak".

Los dibujos realizados mediante caracteres (ASCII art), además de resultar molestos, carecen de significado para los usuarios de lectores de pantalla que los percibirán como una secuencia de caracteres sin sentido alguno. Por tanto, para no perder la información que transmiten, hemos de proporcionar una alternativa textual. Por otra parte, para evitar las molestias producidas por la lectura de una cadena de caracteres sin sentido (generalmente bastante extensa) es recomendable proporcionar una forma de evitarlos.

La alternativa textual la podemos proporcionar inmediatamente antes o después del dibujo.

En el caso de los ASCII art largos, para que los usuarios de lectores de pantalla los puedan evitar, proporcionaremos además un enlace antes del mismo que permita saltarlos.

<p> 
<a href="#post-art">Saltar dibujo de Kity con caracteres 
</p> 
<pre> 
<!--Aquí incluímos el dibujo--> 
</pre> 
<p><a name="post-art"></a>Texto a continuación del dibujo ...

Los ASCII art cortos, escritos dentro del texto normal, como emoticonos o "leetspeak" (generalmente palabras formadas por letras y números), se pueden marcar como abreviaturas con el elemento <abbr> y dar su significado en el atributo title.

Ejemplo

<abbr title="Trabajo digno">tr@b@j0 d16n0</abbr>

Ejemplo

<abbr title="alegre">:-)</abbr>

También se pueden sustituir por imágenes con su correspondiente texto alternativo.

<img src="alegre.gif" alt="alegre" />

Usar el cuerpo del elemento <object>

Al igual que como vimos antes con las alternativas textuales cortas, podemos usar el cuerpo del elemento <object> para proporcionar la alternativa textual larga.

Ejemplo:

<object type="application/x-shockwave-flash"
			data="flash/presentacion.swf"
			height="200" width="300"> 
			En este lugar se ubica el contenido alternativo al objeto. 
			</object>

En el cuerpo del elemento <object> podemos incluir la alternativa textual o bien otro contenido alternativo no textual (imágenes, otros elementos <object>, etc.) que a su vez disponga de sus correspondientes alternativas textuales.

Proporcionar una descripción larga cerca del contenido no textual, incluyendo una referencia a su ubicación en la descripción corta.

Otra forma general de proporcionar una descripción larga, útil sobre todo cuando la tecnología no dispone de los mecanismos específicos para hacerlo, es incluir directamente dicha descripción cerca del contenido no textual. De esta forma los usuarios no tienen que ir a otra ubicación para su consulta. Además, se permite que todos los usuarios puedan ver la descripción lo que puede resultar útil para cualquiera que no haya captado todos los detalles del contenido no textual.

En la alternativa textual corta debemos indicar la ubicación de la descripción larga. Asimismo, la descripción larga debe estar situada cerca del contenido no textual tanto de forma visual como en el orden de lectura lineal.

Ejemplo:

<img src="grafico1.gif"
alt="Gráfico de tiempos de entrenamiento de los corredores. 
Descripción a continuación." />; 
<p> 
El corredor 1 sobresale de los corredores 2 y 3 en su 
entrenamiento en todos los meses, salvo en junio... 
</p>

ALTERNATIVA TEXTUAL LARGA

Cuando una alternativa textual corta no puede cumplir el mismo propósito y presentar la misma información que el contenido no textual.

Las descripciones largas se deben proporcionar de forma adicional a las alternativas textuales cortas. En caso de que un contenido no textual requiera de una descripción larga:

• La alternativa textual corta debe identificar el contenido o proporcionar una breve descripción del mismo.
• La descripción larga debe proporcionar la información necesaria para cumplir el mismo propósito y presentar la misma información que el contenido no textual.

La combinación de ambas debe poder sustituir el contenido original sin perder información. Para proporcionar una descripción larga podemos usar alguna de las técnicas indicadas a continuación.

Proporcionar una descripción larga para el contenido no textual, de tal manera que cumpla la misma función y presente la misma información usando alguna técnica específica para descripciones largas.

Para proporcionar una alternativa textual larga en (X)HTML podemos usar alguna de las siguientes técnicas indicadas a continuación según cuál sea el tipo de contenido no textual (elemento <img> u <object>).

Usar el atributo longdesc del elemento <img>

El mecanismo estándar en (X)HTML para proporcionar descripciones largas a las imágenes es el atributo longdesc.

En el atributo longdesc se indica la URI de la página que contiene la descripción larga del contenido no textual.

<img src="grafico1.gif"
alt="Gráfico de ventas primer cuatrimestre 2009"
longdesc="grafico1.html" />

En el ejemplo anterior, en la página grafico1.html incluimos la descripción de la gráfica.

Podemos usar una misma página para incluir todas las descripciones largas de las imágenes complejas del sitio web. Asimismo, también podemos incluir la descripción larga en la misma página en la que se encuentra el contenido no textual. En todo caso, si la descripción de la imagen no es el único contenido de la página, el atributo longdesc debe enlazar justo a la descripción correspondiente (enlace interno o ancla). También debemos indicar el final de la descripción (por ejemplo, con un texto del estilo "Fin de la descripción de la imagen ...") para que los usuarios sepan que el contenido a continuación ya no pertenece a esa descripción.

CONTROLES DE FORMULARIO

Cuando el contenido no textual es un control o acepta entrada de usuario Proporcionar una alternativa textual que identifique el propósito del contenido no textual

Cuando el control de formulario se trate de un elemento <input> de tipo imagen (type="image") entonces podemos usar la técnica vista anteriormente para alternativas textuales cortas para este tipo de controles de formulario:

• * Usar el atributo alt de las imágenes usadas como botones de envío de formularios (<input> de tipo "image").

Usar elementos <label> para asociar las etiquetas con los controles de formulario .

El elemento <label> sirve para marcar el texto que funciona como etiqueta de los controles de formulario.

Para establecer una relación de uno a uno entre la etiqueta y el control de formulario debemos asociarla explícitamente usando el atributo for. El valor de este atributo debe ser igual al valor del atributo id del control del formulario. El valor del atributo id debe ser único.

Se deben usar elementos <label> para los elementos <textarea>, <select> e <input> de tipo "text", "checkbox", "radio", "file" y "password" .

No se usa para los siguientes elementos:

• <button>: se usa su contenido como etiqueta.
• <input> de tipo "image": se usa el atributo alt como etiqueta.
• <input> de tipo "submit" y "reset": se usa el atributo value como etiqueta.
• <input> de tipo "hidden": no se usa etiqueta .

El elemento <label> debe identificar adecuadamente el control de formulario y debe situarse:

• * Antes del control para elementos <input> de tipo "text", "file", "password" y para <textarea> y <select>
• * Después del control para elementos <input> de tipo "checkbox" y "radio"

A continuación se muestra un ejemplo en el que se realiza asociación explícita entre la etiqueta y el control de formulario.

<label for="nombre"> nombre: </label> 
<input type="text" id="nombre" name="nombre" />

Usar el atributo title para identificar los controles de formulario cuando no se pueda usar el elemento <label>

Podemos usar el atributo title para etiquetar los controles de formulario e identificar su propósito cuando no usemos el elemento <label>. Por ejemplo, cuando en el diseño de la página no existe un texto que pueda etiquetarse como <label> o cuando el mostrar una etiqueta pueda generar confusión.

Si no hay un elemento <label> los lectores de pantalla, y los agentes de usuario en general, pueden leer o mostrar el valor del atributo title.

Por ejemplo, si usamos tres campos para solicitar una fecha (día, mes y año) podemos usar el atributo title para identificar cada control en vez de incluir una etiqueta para cada uno.

<fieldset>
<legend>FECHA DE INGRESO
<input name="dia" type="text"
title="Día (dos dígitos)" size="2" /> /
<input name="mes" type="text"
title="Mes (dos dígitos)" size="2" /> /
<input name="anio" type="text"
title="Año (cuatro dígitos)" size="4" />
</fieldset>

Otro ejemplo puede ser el del campo donde se introduce el término a buscar en un buscador. Podemos no poner una etiqueta si usamos el atributo title para identificarlo.

<input name="busqueda" type="text" size="20"
title="Término para la búsqueda" />
<input type="image" src="lupa.gif" alt="Buscar" />

MULTIMEDIA, EXAMEN O CONTENIDO SENSORIAL

Cuando el contenido no textual es un medio tempo-dependiente (audiovisual, incluyendo contenido que es sólo audio o sólo vídeo); un test o ejercicio que podría no ser válido si se presenta en texto; o contenido cuya principal función es crear una experiencia sensorial específica.

PROPORCIONAR UNA ETIQUETA DESCRIPTIVA USANDO ALGUNA TÉCNICA DE DESCRIPCIÓN CORTA

A veces podemos tener contenido para el que no es posible proporcionar una alternativa textual equivalente que cumpla la misma función o proporcione la misma información. Por ejemplo, es el caso de test que no se pueden presentar en texto sin que pierdan su validez, como puede ser el caso de test visuales.

En estos casos debemos proporcionar una etiqueta descriptiva que, aunque no proporcione la misma información, al menos identifique el contenido que se muestra. Para ello usaremos alguna de las técnicas para alternativas textuales cortas vistas antes. Por ejemplo, mediante el atributo "alt" del elemento <img>.

Por ejemplo, en la siguiente imagen podemos ver un test de secuencia lógica de formas para el que es prácticamente inviable proporcionar una descripción textual que proporcione toda la información necesaria para poder completarlo correctamente.

<img src=" test.png" alt=" Test lógico de secuencia de formas" />

El siguiente ejemplo puede resultar más ilustrativo. Aquí tenemos un test de daltonismo el cual es eminentemente visual. No podemos describir el contenido de las imágenes (decir las formas que contiene la imagen) sin desvirtuar el propio test. En este caso todo lo que podemos hacer es identificar el contenido, es decir, explicar qué es pero sin proporcionar la misma información mostrada en la imagen.

<img src="test2.png" alt="Test visual de daltonismo" />

Esto mismo es aplicable al contenido multimedia, para el que al menos hay que proporcionar una alternativa textual que identifique su contenido. En la pauta 1.2 se estudia en detalle cómo proporcionar equivalentes textuales completos y otras medidas de accesibilidad para el contenido multimedia.

PROPORCIONAR UNA ALTERNATIVA TEXTUAL CORTA PARA EL CONTENIDO NO TEXTUAL CON EL NOMBRE ACEPTADO O UN NOMBRE DESCRIPTIVO

Podemos tener contenido cuya función principal sea crear una experiencia sensorial específica, como puede ser el caso de piezas musicales, cuadros y expresiones artísticas en general. Este tipo de contenido, por su naturaleza, pierde su validez si no es percibido por el sentido para el que fue creado.

Por ejemplo, una canción no es posible transmitirla en texto. Es cierto que, yendo al extremo, es posible proporcionar su letra o su partitura, pero se pierde su esencia musical y no se consigue el objetivo con el que se incluye: el ser escuchada.

<img src="test2.png" alt="Test visual de daltonismo" />

En estos casos debemos identificar el contenido con alguna de las técnicas de alternativas textuales cortas vistas antes. Para ello tenemos dos opciones:

• Usar, si existe, el nombre que le dio el autor de la obra u otra persona y que esté comúnmente aceptado.
• Si no tiene un nombre conocido, proporcionar un breve nombre descriptivo que identifique el contenido. Por ejemplo, "Pieza musical original tocada por los alumnos del primer nivel de Batuta".

De esta manera todos los usuarios sabrán cuál es el contenido aunque no puedan percibirlo. Una persona sorda puede querer saber cómo se llama una pieza musical, aunque no pueda oírla. De igual forma, una persona ciega puede querer saber cuál es el motivo de la imagen, aunque no la pueda apreciar como debiera.

<img src=" memoria.png" alt="La persistencia de la memoria, por Salvador Dalí (1931)" /> 

Si existe alguna razón especial por la que se ha incluido dicho contenido en la página, también se debería explicar.

PROPORCIONAR UNA ETIQUETA QUE DESCRIBA EL PROPÓSITO DEL CONTENIDO QUE ES "SÓLO AUDIO" Y "SÓLO VÍDEO" EN DIRECTO USANDO ALGUNA DE LAS TÉCNICAS PARA ALTERNATIVAS TEXTUALES CORTAS.

Cuando el contenido se trate de un audio en directo o de un vídeo (sin audio) también en directo, como el caso de una webcam, entonces también proporcionaremos una etiqueta descriptiva que identifique el contenido. Al ser un contenido en directo es muy complejo, y en ocasiones inviable, proporcionar alternativas que sean completamente equivalentes. Al menos identificando el contenido conseguimos que los usuarios sepan de qué se trata, aunque no puedan acceder al mismo.

<object classid="java:webcam.class" width="500" height="300"> 
Webcam en directo con las condiciones del tránsito de la avenida central. 
</object>

Aunque no sea obligatorio, sí es recomendable que para el contenido no textual en directo proporcionemos un equivalente textual que proporcione información similar. Así, podemos incluir un enlace a una página que contenga información textual y actualizada relacionada con la de nuestro contenido. Por ejemplo, en el caso de la webcam, podemos proporcionar un enlace a una página con información del tráfico y del tiempo.

CUANDO EL CONTENIDO NO TEXTUAL ES UN CAPTCHA.

Proporcionar una alternativa textual que describa el propósito del CAPTCHA Y asegurar que la página web contiene otro CAPTCHA con el mismo propósito pero en una modalidad sensorial diferente.

Se denomina Captcha a los test usados en computación para diferenciar entre usuarios humanos y ordenadores. Captcha es el acrónimo de Completely Automated Public Turing test to tell Computers and Humans Apart (Prueba de Turing pública y automática para diferenciar máquinas y humanos).

El test más habitual es incluir en una imagen letras o palabras distorsionadas para que el usuario las reconozca y las introduzca con el teclado. Las letras se distorsionan para evitar que las pueda reconocer un programa automático de reconocimiento de caracteres (OCR). El principal uso que se le da en la web a este tipo de test es evitar que los robots de spam u otro tipo de software automático accedan a zonas restringidas de nuestro sitio, como pueden ser el registro de usuarios, foros, envío de formularios, etc.

El problema de este tipo de test es que también impiden al acceso a los usuarios que no puedan ver la imagen. No es posible proporcionar una alternativa textual que proporcione la misma información que la imagen (la palabra o caracteres distorsionados) porque de esa forma estamos rompiendo el propósito del captcha. Al igual que un lector de pantalla puede leer la alternativa textual, también lo podrá hacer cualquier otro software malintencionado.

Por tanto, lo que tenemos que hacer cuando usemos un captcha es proporcionar una alternativa textual que lo identifique y describa su propósito.

EJEMPLO:

<img src= "captcha.gif" alt= "Introduzca las letras de la imagen" />

Además de la alternativa textual que lo identifique, también tenemos que proporcionar a su vez otro captcha en una modalidad sensorial diferente. Por ejemplo, usando un captcha auditivo en el que se incluye un audio donde se pronuncia una palabra que hay que reconocer sobre un ruido de fondo. El concepto es el mismo que el de los captchas visuales, pero en audio. Otra opción es, por ejemplo, usar un test con preguntas lógicas. Etc.

Hemos de tener en cuenta que los captchas siempre van a presentar algún problema de accesibilidad para algún tipo de usuario. Los captchas visuales presentan problemas de accesibilidad para los usuarios que no pueden ver; los auditivos son inaccesibles para aquellos usuarios que no pueden oír; los lógicos pueden representar un problema para usuarios con problemas cognitivos; etc. Aunque es complejo cubrir todas las situaciones, se considera suficiente usar al menos dos modalidades diferentes de captchas.

Además de lo comentado, existen una serie de recomendaciones que nos servirán para mejorar la accesibilidad de las páginas que contengan captchas: * Proporcionar más de dos modalidades de captchas

• Proporcionar acceso a un servicio de atención al cliente para poder evitar el captcha
• No emplear captchas para usuarios autorizados

CONTENIDO DECORATIVO

Cuando el contenido no textual debe ser ignorado por los productos de apoyo . (se trata de contenido decorativo).

Marcar el contenido no textual de forma que sea ignorado por los productos de apoyo usando alguna de las siguientes técnicas :

Usar un texto alternativo vacío y no usar el atributo title de los elementos <img> para aquellas imágenes que deban ser ignoradas por los productos de apoyo (imágenes decorativas).

Las imágenes que se usan con fines decorativos y que no aportan información deben incluirse de forma que sean ignoradas por los productos de apoyo (por ejemplo, lectores de pantalla) y sean transparentes para los usuarios. Se trata, por ejemplo, de las imágenes usadas como espaciadores, invisibles o transparentes, líneas o bordes de determinados elementos y, en general, imágenes de relleno que no aportan información (fondos, complementos gráficos irrelevantes, etc.).

Para que estas imágenes sean ignoradas por los lectores de pantalla tenemos que:

• Usar un texto alternativo vacío (alt="") o con un espacio en blanco (alt=" "). Preferiblemente un texto alternativo vacío.
• No incluir un atributo "title" o que al menos esté vacío title="".

El objetivo es evitar que los lectores de pantalla lean textos alternativos superfluos que, además de no aportar información, entorpecen la navegación y comprensión de los documentos a los usuarios de este tipo de productos de apoyo.

Si la imagen no tiene texto alternativo entonces los lectores de pantalla no leerán nada. Aunque no sea necesario un texto alternativo, como el uso del atributo alt es obligatorio, entonces se debe poner un texto alternativo vacío.

Por otra parte, existen lectores de pantalla que si no encuentran un texto alternativo entonces leen el contenido del título. Para evitar esto también es necesario que las imágenes carezcan de título.

USAR CSS PARA INCLUIR LAS IMÁGENES DECORATIVAS

La mejor forma de incluir las imágenes decorativas es desde las hojas de estilo. De esta forma evitamos incluir marcado adicional en el contenido de los documentos (X)HTML.

Podemos emplear varias propiedades para incluir las imágenes desde las hojas de estilo como, por ejemplo, background, background-image, list-style-image, etc.

Debemos tener en cuenta que sólo podemos incluir desde las hojas de estilo las imágenes decorativas que no aportan ningún tipo de información.

Un fallo habitual es incluir imágenes que sí aportan información desde las hojas de estilo. Hemos de tener en cuenta que si accedemos al documento sin soporte de hojas de estilo entonces no podremos ver las imágenes y perderemos la información que proporcionan. Por tanto, todas las imágenes incluidas desde las hojas de estilo han de ser puramente decorativas.

En el supuesto caso de que, por cuestiones de estilo, necesitemos incluir alguna imagen de contenido desde las hojas de estilo debemos hacerlo de forma que se siga proporcionando la misma información en forma de texto en el contenido del documento, asegurándonos que esa información está disponible cuando no se soporten las hojas de estilo.

PRINCIPIO 1: PERCEPTIBLE - LA INFORMACIÓN Y LOS COMPONENTES DE LA INTERFAZ DE USUARIO DEBEN SER PRESENTADOS A LOS USUARIOS DE MODO QUE ELLOS PUEDAN PERCIBIRLOS.

El objetivo de este principio es que toda la información y los componentes de la interfaz de usuario se presenten a los usuarios de forma que estos puedan percibirlos a través de los sentidos. Es decir, esta información no puede pasar desapercibida para todos sus sentidos.

1.2 MEDIOS TEMPODEPENDIENTES: Proporcionar alternativas para los medios tempodependientes.

Esta pauta se refiere al contenido que es un medio tempodependiente. Se entiende por medios tempodependientes a aquellas herramientas de almacenamiento y transmisión de información que muestran su contenido siguiendo una línea temporal, es decir, durante un periodo de tiempo determinado. Por ejemplo, una animación, una canción o una película son medios tempodependientes pues necesitan de cierto tiempo para mostrar todo su contenido y en un momento dado sólo muestran una parte del mismo (por ejemplo, en una película pausada se muestra un único fotograma).

Tipos de medios tempodependientes:

Sólo audio

Presentación tempodependiente que sólo contiene audio (sin vídeo ni interacción). Dentro de este grupo englobamos el contenido sonoro que se incluye en un sitio web para su descarga o escucha online, incluyendo el contenido en directo. Por ejemplo, una grabación de un discurso, una canción o un programa de radio online (en directo).

Sólo vídeo

Presentación tempodependiente que sólo contiene vídeo (sin audio ni interacción). Aquí podemos incluir las habituales animaciones y anuncios en movimiento que no disponen de audio

. Multimedia sincronizado

Audio o vídeo sincronizado con otro formato para presentar información y/o con elementos de interacción que dependen del tiempo. Por ejemplo, una película se considera que es "multimedia sincronizado" al tener el audio y el video sincronizados entre sí.

A su vez, por cada uno de los diferentes tipos de medios tempodependientes tenemos que diferenciar entre los que están previamente grabados de aquellos que se emiten en directo.

Grabado

Contenido que al incluirse en una página web ya está grabado con anterioridad a su publicación.

Directo

Información capturada de un evento del mundo real y transmitida al receptor sin un retraso mayor que el propio de la emisión. Si la información está generada completamente por ordenador (por ejemplo, una versión hablada de un documento realizada de forma automática a partir de un texto), NO se considera en directo.

Ejemplo:

Esta pauta utiliza el siguiente video como ejemplo general de aplicación de todos los aspectos discutidos.

Leer Transcripción del Video

Para contenido sólo audio grabado y contenido sólo vídeo grabado, se cumple lo siguiente, excepto cuando el audio o el vídeo es un contenido multimedia alternativo al texto y está claramente identificado como tal:

• Sólo audio grabado: Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido sólo audio grabado.
• Sólo vídeo grabado: Se proporciona una alternativa para los medios tempodependientes o se proporciona una pista sonora que presenta información equivalente al contenido del medio de sólo vídeo grabado.

Objetivo:

Hacer que la información proporcionada por el contenido pregrabado (sólo audio o sólo vídeo) esté disponible para todos los usuarios.

Beneficiarios:

En general, beneficia a aquellos usuarios con dificultad para percibir o comprender la información visual y/o auditiva, incluyendo a aquellos con limitaciones técnicas que les impidan acceder a esos contenidos. También beneficia a los buscadores web que se basan en la información textual para indexar los contenidos.

Transcripción textual para contenido que es SÓLO AUDIO

En la transcripción textual de los contenidos que son sólo audio se deben incluir los diálogos y sonidos más significativos necesarios para su comprensión. En caso de que existan diálogos será necesario identificar a cada hablante.

• Diálogos
• Identificación de hablantes
• Música
• Risas
• Aplausos
• Sonidos significativos en general

Un ejemplo de transcripción textual puede ser el siguiente:

Narrador: 
 Dos niños, Manuel y Jorge, juegan sentados en el suelo 
 Manuel: 
 !Dámelo, es mio! 
 Jorge: 
 De eso nada. Lo gané yo jugando, así que olvídalo.

Transcripción textual para contenido que es SÓLO VÍDEO

En caso de que el contenido sea sólo vídeo, sin una pista de audio, la transcripción textual debe incluir las descripciones del escenario, acciones, expresiones, lenguaje corporal, etc. En general, descripciones de todo el contenido visual importante.

• Acciones
• Personas
• Expresiones corporales
• Escenarios
• Texto en pantalla
• Contenido visual relevante en general

Otros ejemplos:

La grabación de un discurso

El enlace a un archivo de audio dice: "Discurso del jefe a la asamblea". Otro enlace a una transcripción textual aparece inmediatamente después del enlace al archivo de audio.

La grabación de una conferencia de prensa

Un sitio web incluye un enlace al archivo de audio de una conferencia de prensa. La página también contiene un enlace a una transcripción textual de la conferencia de prensa. La transcripción incluye palabra por palabra todo lo que el hablante dice. Identifica quién está hablando y cualquier otro sonido importante que forma parte de la grabación, como aplausos, risas, preguntas de la audiencia y demás.

Una animación que muestra cómo funciona el motor de un automóvil

Una animación muestra cómo funciona el motor de un automóvil. El archivo no tiene sonido y forma parte de un tutorial que describe cómo funciona un motor. Como el texto del tutorial ya incluye una explicación detallada, la animación es una simple alternativa al texto y su correspondiente texto alternativo tan sólo debe incluir una descripción breve de la animación y remitir al texto del tutorial para más información.

Un archivo sólo visual con una pista de audio

Una película muda incluye una pista de audio que contiene una descripción de la acción que se desarrolla en el video.

Se proporcionan subtítulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentación es un contenido multimedia alternativo al texto y está claramente identificado como tal.

Objetivo:

Permitir a personas con discapacidades auditivas ver la presentación multimedia original sin perder información.

Beneficiarios:

Beneficia a las personas con problemas de audición, o que les cuesta comprender el contenido auditivo (por ejemplo, usuarios cuya lengua materna es diferente de la usada en la página web)

Ejemplo:

Un tutorial subtitulado Una presentación de video enseña cómo se ata un nudo. Los subtítulos dicen:

(música)
Utilizar una cuerda para atar nudos era una destreza importante para los marineros, soldados y cazadores.

Se proporciona una alternativa textual completa para los medios tempodependientes o una audiodescripción para el contenido de vídeo grabado en los multimedia sincronizados, excepto cuando ese contenido es un contenido multimedia alternativo al texto y está claramente identificado como tal.

Objetivo:

Permitir a personas con discapacidades visuales acceder a la presentación multimedia sin perder información o, al menos, dispongan de una transcripción textual completa.

Beneficiarios:

Beneficia a personas que puedan tener dificultades para ver vídeo u otros medios tempo- dependientes, así como a personas con problemas cognitivos para interpretar la información visual.

Beneficios específicos

Este Criterio de Cumplimiento puede ayudar a las personas con Ejemplos:

Una película con descripción sonora

Descripción: Un título, "Enseñando sobre la evolución". La profesora muestra fotografías de aves con picos largos y delgados. 
Profesora: "Todas estas fotografías fueron tomadas en el Parque Nacional de Florida.
"Descripción: La profesora da a cada estudiante dos varas planas de madera. 
Profesora: "Hoy van a simular que son especies de aves zancudas que tienen un pico como éste.
"Descripción: La profesora lleva dos de las varas hacia su boca y les da forma de pico...

Textos alternativos completos incluyendo cualquier interacción para un video de entrenamiento

Una empresa compra un video de entrenamiento para utilizar con sus empleados y la pone en la intranet de la empresa. El video explica cómo usar una nueva tecnología y se ve a una persona hablando y mostrando cosas al mismo tiempo. Como no hay lugar entre los diálogos para ingresar una descripción sonora de lo que muestra el video, la empresa proporciona una transcripción textual completa que todos los empleados, incluyendo aquellos que no pueden ver el video, pueden utilizar para comprender mejor lo que se está presentando.

Se proporcionan subtítulos para todo el contenido de audio en directo de los multimedia sincronizados.

Objetivo:

Permitir a personas con discapacidades auditivas ver presentaciones en directo sin perder información.

Beneficiarios:

Beneficia a las personas con problemas de audición, o que les cuesta comprender el contenido auditivo (por ejemplo, usuarios cuya lengua materna es diferente de la usada en la página web)

Las transcripciones textuales están orientadas, principalmente, a cubrir el caso de que la presentación multimedia no se puede reproducir (por ejemplo, ausencia de plugin) y como alternativa final válida para todos los usuarios. Sin embargo, para cubrir las necesidades principales de los usuarios con algún tipo de discapacidad existen otras medidas de accesibilidad más adecuadas. Por ejemplo, los subtítulos para las personas con algún tipo de discapacidad auditiva.

Los subtítulos permiten a las personas con discapacidades auditivas acceder a toda la información de forma sincronizada con la presentación multimedia. Es decir, pueden ver el contenido multimedia al mismo tiempo que leen los subtítulos y no están limitados a acceder únicamente a una transcripción textual que, aunque proporciona toda la información, limita significativamente su experiencia de usuario.

A diferencia de los subtítulos habituales, el subtitulado para sordos (captioning) incluye todos los contenidos sonoros, tanto los diálogos como los sonidos ambientales y todo sonido significativo necesario para comprender el contenido multimedia.

• Diálogos
• Identificación de hablantes
• Música
• Risas
• Aplausos
• Sonidos significativos en general

A continuación se puede ver un ejemplo de subtitulado en formato srt para sordos, de una escena de una la película. Como se puede observar, en los subtítulos no se incluyen únicamente los diálogos, sino también todo sonido significativo (ruidos, formas de entonación, etc.) necesario para comprender la escena.

137 
00:08:45,969 --> 00:08:47,687 
(Off Teresa gritando) 
¡Y ni se te ocurra conducir 

138 
00:08:47,729 --> 00:08:50,448 
ese asno inútil! 
Coge el caballo nuevo. 

139 
00:08:51,369 --> 00:08:54,042 
(susurra) 
Es su forma de demostrar afecto... 

140 
00:09:06,889 --> 00:09:12,680 
(Ruidos de manivelas, hierros 
y puertas metálicas que se abren) 

141 
00:09:24,689 --> 00:09:26,919 
(Campanas) 

142 
00:09:35,049 --> 00:09:37,358 
¡PPPFFF! (Flatulencia)

143 
00:09:54,209 --> 00:09:59,237 
Bueno... 
(golpes metálicos) 

144 
00:10:12,129 --> 00:10:16,759 
¡Mi querido Sancho! Pasa. ¡Je, je! 
Te estábamos esperando. 

145 
00:10:16,929 --> 00:10:18,920 
- ¿Dónde está Quijote? 
- ¡Sancho! 

146 
00:10:22,209 --> 00:10:24,518 
Vayamos al grano que 
tengo el burro en doble fila.

Si el contenido multimedia tiene varias pistas de audio en diferentes idiomas, deberíamos proporcionar subtítulos para todos los idiomas usados.

Ejemplo:

Un Webcast: Una agencia de noticias proporciona un webcast en vivo, subtitulado.

Se proporciona una audiodescripción para todo el contenido de vídeo grabado dentro de contenido multimedia sincronizado.

Objetivo:

Permitir a personas con discapacidades visuales acceder a la presentación multimedia sin perder información.

Si la información visual ya está incluida en el audio existente, o no hay información visual relevante, no es necesaria una audiodescripción.

Beneficiarios:

Beneficia a personas que puedan tener dificultades para ver video u otros medios tempo- dependientes, así como a personas con problemas cognitivos para interpretar la información visual.

La audiodescripción es una narración con información sobre los elementos visuales clave de la presentación multimedia (acciones, escenarios, lenguaje corporal, gráficos y texto mostrado, etc.). De forma similar a los subtítulos, las descripciones auditivas están sincronizadas con la banda visual y, en este caso, son útiles para que las personas con discapacidades visuales puedan seguir la acción y la información no auditiva de las presentaciones multimedia. Es decir, de lo que se ve en las imágenes.

• Acciones
• Personas
• Expresiones corporales
• Escenarios
• Texto en pantalla
• Contenido visual relevante en general

Se debe prestar especial atención a que la audiodescripción no interfiera con el audio original (diálogos, sonidos más importantes, etc.). Es similar a la voz de un narrador que va explicando de palabra lo que ocurre en la imagen, aprovechando los silencios y sin interferir con el audio original.

Si la información visual importante ya está incluida en el audio existente, o no hay información visual relevante, no es necesaria una audiodescripción.

Las audiodescripciones se pueden proporcionar en una segunda pista de audio, seleccionable por el usuario, que incluya la audiodescripción. Para ello se puede usar alguna tecnología de sincronización de contenido multimedia como SMIL 1.0 o SMIL 2.0. En caso de que no se puedan usar tecnologías de sincronización se pueden proporcionar dos versiones de la presentación multimedia, la versión normal y la versión con la audiodescripción.

Un caso especial de audiodescripción son las alternativas en audio. Se usan para dar alternativas auditivas a contenido que es sólo vídeo. En vez de incluir el audio en el contenido original se puede proporcionar un archivo de audio que describa el contenido visual importante. El enlace al archivo de audio debe estar inmediatamente antes o después del vídeo.

Ejemplo:

Una película con descripción sonora

Descripción: Un título, "Enseñando sobre la evolución". La profesora muestra fotografías de aves con picos largos y delgados.

Profesora: "Todas estas fotografías fueron tomadas en el Parque Nacional de Florida."

Descripción: La profesora da a cada estudiante dos varas planas de madera.

Profesora: "Hoy van a simular que son especies de aves zancudas que tienen un pico como éste."

Descripción: La profesora lleva dos de las varas hacia su boca y les da forma de pico...

Se proporciona una interpretación en lengua de señas para todo el contenido de audio grabado dentro de contenido multimedia sincronizado.

Objetivo:

Permitir a las personas sordas cuya lengua principal es la lengua de signos entender el contenido de presentaciones multimedia.

Para ciertas personas, como las que tienen sordera prelocutiva, su lengua principal es la lengua de signos y el lenguaje escrito es como un segundo lenguaje que no dominan de igual forma.

El lenguaje de signos permite transmitir entonación y emoción, lo cual no es posible mediante subtítulos. Por tanto, proporcionan una información más rica y próxima al contenido original.

Beneficiarios:

Beneficia a quienes se comunican por lengua de signos.

Para ciertas personas, como las que tienen sordera prelocutiva, su lengua principal es la lengua de señas y el lenguaje escrito es como un segundo lenguaje que no dominan de igual forma.

El lenguaje de señas permite transmitir entonación y emoción, lo cual no es posible mediante subtítulos. Por tanto, proporcionan una información más rica y próxima al contenido original. Al igual que los subtítulos, deben transmitir los diálogos y los sonidos más significativos necesarios para comprender el contenido multimedia.

El intérprete de lengua de señas lo podemos incluir en la pista de vídeo de la presentación multimedia original.

Esto tiene como desventaja que sólo se puede redimensionar junto con el vídeo original, por tanto debemos evitar tamaños pequeños o una baja resolución que dificulte su visualización. Si el tamaño del vídeo por defecto es pequeño, debemos permitir verlo a pantalla completa o redimensionarlo para verlo al tamaño suficiente.

Otra posibilidad es proporcionar el intérprete de lengua de señas en otra pista de vídeo sincronizada con la presentación multimedia, bien en un área de visualización aparte o superpuesta sobre el vídeo original. Es recomendable que se pueda redimensionar de forma independiente para facilitar ver los movimientos faciales del signante, de las manos y el cuerpo.

Ejemplos:

Ejemplo1: Una empresa está haciendo un importante anuncio para todos sus empleados. La reunión se celebra en la sede principal y se transmite a través de la web. Se proporciona una interpretación en lengua de señas en el lugar de la reunión. El video en vivo incluye una vista completa tanto del intérprete como de la persona que habla.

Ejemplo 2: El mismo anuncio que se describe en el ejemplo 1 es transmitido también a través de la web a los empleados. Cómo sólo hay una pantalla disponible, el intérprete de lengua de señas se muestra en una esquina de la pantalla.

Ejemplo 3: Una universidad ofrece una versión en línea de una conferencia mediante la creación de una presentación multimedia con el profesor exponiendo. La presentación incluye la imagen del profesor haciendo uso de la palabra y demostrando cierto experimento científico. Se ha creado una interpretación de la conferencia en lengua de señas y se la muestra a través de la web junto con la presentación multimedia.

Cuando las pausas en el audio de primer plano son insuficientes para permitir que la audiodescripción comunique el significado del vídeo, se proporciona una audiodescripción ampliada para todos los contenidos de vídeo grabado dentro de contenido multimedia sincronizado.

Objetivo:

Permitir a las personas con discapacidades visuales acceder a la presentación multimedia sin perder información y más fielmente que con una audiodescripción estándar.

Beneficiarios:

Beneficia a personas que puedan tener dificultades para ver vídeo u otros medios tempo- dependientes, así como a personas con problemas cognitivos para interpretar la información visual.

Las audiodescripciones ampliadas son audiodescripciones en las que, si los silencios entre los diálogos existentes no son suficientes para describir el contenido visual, se pausa la presentación el tiempo necesario para incluir la audiodescripción adicional.

Como esto entorpece la visualización para el resto de usuarios, se deben usar técnicas que permitan activar y desactivar las audiodescripciones (SMIL) o bien proporcionar versiones alternativas de la presentación multimedia: una con la audiodescripción ampliada y otra sin ella. Si la versión alternativa está en otra página, debe haber un enlace que permita acceder a ella.

Ejemplo:

Video de una clase: Un profesor de física está dando una clase en la universidad. Mientras habla, realiza bosquejos a mano alzada en la pizarra. En cuanto termina de discutir el problema, borra el dibujo y realiza otro, al mismo tiempo que sigue explicando y haciendo gestos con la otra mano. El video se interrumpe entre cada tema para proporcionar una descripción sonora extendida de los dibujos y gestos del profesor; luego se continúa transmitiendo el video.

Se proporciona una alternativa para los medios tempodependientes, tanto para todos los contenidos multimedia sincronizados grabados como para todos los medios de sólo vídeo grabado.

Objetivo:

Lograr que el contenido visual y auditivo esté disponible para usuarios con baja visión que tienen dificultades para leer los subtítulos y, por otro lado, para quienes tienen problemas auditivos que les dificultan oír los diálogos o las audiodescripciones.

Beneficiarios:

Beneficia a personas con dificultades visuales o auditivas, con limitaciones técnicas o que, en general, acceden principalmente al contenido textual.

Transcripción textual para contenido que es MULTIMEDIA SINCRONIZADO

Cuando se trate de contenido multimedia sincronizado, la transcripción textual es completa, incluyendo descripciones de todo el contenido visual y auditivo que sea relevante.

En estas trascripciones textuales completas han de incluirse los diálogos hablados, así como todos los sonidos significativos, aparezcan o no en pantalla (música, risas, aplausos. etc.). Asimismo, también se deben incluir las descripciones del contenido visual necesarias para comprender la presentación multimedia (como por ejemplo: acciones, escenarios, lenguaje corporal, gráficos, texto mostrado, etc.)

Información auditiva:

• Diálogos
• Identificación de hablantes
• Música
• Risas
• Aplausos
• Sonidos significativos en general

Información visual:

• Acciones
• Personas
• Expresiones corporales
• Escenarios
• Texto en pantalla
• Contenido visual relevante en general

Ejemplos:

Textos alternativos completos para una presentación multimedia de un video de capacitación:

Un centro social compra un video de capacitación para sus clientes y lo sube a la intranet del centro. El video incluye la explicación sobre cómo utilizar una nueva tecnología y presenta a una persona hablando y mostrando cosas al mismo tiempo. El centro social proporciona una alternativa textual completa de la presentación multimedia para que todos sus clientes, incluyendo aquellos que no pueden ver las demostraciones ni oír las explicaciones, puedan entender lo que se presenta.

Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido de sólo audio en directo.

Objetivo:

Hacer que la información de audio en directo, como conferencias, charlas en directo, radio webcast, etc. esté disponible para personas con discapacidades auditivas.

Beneficiarios:

Beneficia a personas con discapacidades auditivas, con limitaciones técnicas o que, en general, acceden principalmente al contenido textual.

Transcripción textual para contenido que es SÓLO AUDIO en DIRECTO

Las WCAG 2.0 tienen en cuenta la emisión de contenidos de audio en directo para los que se puede proporcionar una transcripción textual. Cuando el contenido es sólo audio en directo, como puede ser un programa de radio, existen dos situaciones posibles:

El contenido del audio se conoce previamente :

• Hay ocasiones en las que el contenido de audio se conoce previamente, como puede ser el caso de discursos, ponencias, guiones de obras de teatro, actuaciones o programas, etc. En estos casos se pueden aprovechar esos guiones existentes y proporcionarlos como alternativa al audio en directo, bien en la misma página o en una página aparte enlazada.

El contenido de audio no se conoce previamente :

• Si no conocemos el contenido del audio porque no existe un guión previo (se trata de una entrevista o tertulia, por ejemplo) entonces es necesario un servicio de transcripción de texto en tiempo real o bien emplear técnicas de paso de voz a texto.
• Para la transcripción de texto en tiempo real se pueden emplear técnicas de mecanografía rápida o taquigrafía. También se pueden emplear técnicas de estenotipia o taquigrafía computarizada, en las que una persona (estenotipista) emplea un dispositivo (estenógrafo) para transcribir en tiempo real. Mediante un software especial se combina el contenido multimedia con la transcripción textual en forma de subtítulos. En estos casos, la transcripción textual se puede proporcionar en otra parte de la página.
• En las técnicas de paso de voz a texto se puede emplear un software de reconocimiento de voz para realizar la transcripción y luego realizar una rápida corrección antes de la publicación para eliminar los posibles errores. Otra forma de evitar o minimizar los errores es que el audio original lo doble una persona con la modulación y entonación de voz correcta para que el software la pueda reconocer más fácilmente.

Ejemplos:

Ejemplo 1: Una empresa de relaciones públicas utiliza un servicio de subtitulado basado en la web para cubrir eventos en vivo; los subtítulos se incorporan en un marco de la página web, que incluye los controles para el audio.

Ejemplo 2: Se transmite en vivo por la web la obra de un grupo de teatro alternativo. Como los actores en gran parte se apegan al guión y el presupuesto para el programa es limitado, los productores proporcionan un enlace (con el permiso del autor) al guión original de la obra.

Ejemplo 3: Un sistema de audio a través de la web utiliza un formato que permite incluir también textos y gráficos, como Flash o Silverlight. Un taquígrafo crea los subtítulos de un evento en vivo que luego son mezclados sobre la marcha para producir los subtítulos que se pueden ver en el reproductor.

Ejemplo 4: Un Director Ejecutivo dará un comunicado de prensa por teléfono a los medios para responder a una noticia; el audio se graba y se transmite por internet pero, debido a las limitaciones de tiempo, no se puede utilizar un servicio de subtitulado. Como el ejecutivo leerá un comunicado escrito de antemano, la compañía proporciona simultáneamente una transcripción del mensaje.

PRINCIPIO 1: PERCEPTIBLE - LA INFORMACIÓN Y LOS COMPONENTES DE LA INTERFAZ DE USUARIO DEBEN SER PRESENTADOS A LOS USUARIOS DE MODO QUE ELLOS PUEDAN PERCIBIRLOS.

El objetivo de este principio es que toda la información y los componentes de la interfaz de usuario se presenten a los usuarios de forma que estos puedan percibirlos a través de los sentidos. Es decir, esta información no puede pasar desapercibida para todos sus sentidos.

PAUTA 1.3 ADAPTABLE : Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.

Toda la información debe estar disponible de forma que pueda ser percibida por todos los usuarios, independientemente de la forma en la que accedan a los documentos. Por ejemplo, los usuarios de lectores de pantalla acceden al documento en forma de voz, los que no dispongan de navegadores gráficos lo harán sin CSS, etc. Si toda la información está disponible de forma que pueda ser determinada mediante software entonces se puede presentar a los usuarios de diferente manera (visual, auditiva, táctil, etc.). Por el contrario, si la información depende únicamente de la forma en la que se presente el contenido (tamaño, estilo, color, etc.) entonces los productos de apoyo no podrán interpretar esa información y transmitírsela a los usuarios.

En líneas generales se trata de usar el marcado estructural y semántico adecuado para transmitir toda la información y las relaciones entre el contenido (encabezados, listas, párrafos, tablas de datos, etc.), crear un orden de lectura correcto para las distintas formas de presentación (lector de pantalla, navegador de texto, sin hojas de estilo, etc.) así como proporcionar la información de forma que sea independiente de características sensoriales (color, posición, tamaño, etc.).

Cuando hablamos de diferentes formatos o formas de presentación nos referimos, por ejemplo, a:

• Página sin hoja de estilos
• Página en formato sólo de texto
• Página en audio mediante un lector de pantalla
• Página en braille por medio de una línea braille
• Etc.

Los criterios de conformidad bajo esta pauta están encaminados a asegurar que toda la información que se transmita a través de la presentación también esté disponible de forma que se pueda mostrar a los usuarios en diferentes formatos. En líneas generales se trata de:

Información y Relaciones: Se debe usar marcado estructural y semántico para transmitir toda la información y las relaciones existentes en el contenido.

Secuencias Significativas: El contenido debe mantener un orden de lectura correcto para los distintos formatos en los que se puede presentar (navegador gráfico, sin hoja de estilo, lector de pantalla, etc.)

Características Sensoriales: La información debe ser independiente de las características sensoriales. Es decir, la información no debe depender únicamente de aspectos como el color, la posición o el tamaño de los elementos.

La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.

Objetivo

:

El objetivo es asegurar que la información y las relaciones existentes en el contenido transmitidas a través de la presentación también estén disponibles cuando se cambie el formato de presentación (por ejemplo, cuando se accede con un lector de pantalla o cuando se sustituyen las hojas de estilo del sitio por hojas de estilo de los usuarios).

La mayoría de los usuarios pueden percibir la estructura de los documentos de forma visual, a través de la presentación. Por ejemplo:

• Los encabezados se destacan del resto del contenido mediante el tipo y/o un tamaño de letra proporcional a su importancia.
• Los elementos de lista tienen una viñeta para diferenciarlos y se suelen mostrar indentados.
• Los párrafos se separan con una línea en blanco.
• El texto enfatizado se reconoce porque usa un tipo de fuente en negrita o en cursiva.
• Un mismo color de fondo o un borde puede indicar la agrupación de varios elementos relacionados.
• Etc.

Vemos que a través de la presentación es posible reconocer la estructura y las relaciones existentes en el contenido.

Por ejemplo, se puede reconocer de un vistazo el tamaño y, en consecuencia, la importancia y nivel de los encabezados. Esto facilita, por ejemplo, entre otras cosas, "ojear" o "explorar" el contenido saltando de encabezado en encabezado buscando la información que nos interesa.

Sin embargo, existen usuarios que no pueden percibir esta información visual (p. ej. personas con ceguera que usan lectores de pantalla). Para que estos usuarios puedan acceder a esta información es necesario indicar explícitamente la función estructural o valor semántico del contenido, de forma que esta información se pueda determinar mediante software. Es decir, que los agentes de usuario, productos de apoyo y otras aplicaciones de software sean capaces de reconocer la estructura y semántica del contenido para transmitirla a los usuarios.

Así, en (X)HTML debemos usar el marcado estructural y semántico adecuado para cada contenido. Por ejemplo, si identificamos los encabezados con los elementos adecuados (<h1> - <h6>) los lectores de pantalla podrán reconocerlos e informar de su presencia y de su nivel a los usuarios. Por otra parte, los usuarios de éstos productos de apoyo también podrán "explorar" el documento navegando por los encabezados, saltando de un encabezado al siguiente.

En el caso de que la tecnología que estemos usando no disponga de los mecanismos necesarios para marcar la estructura y semántica del contenido, entonces debemos proporcionar esa información en el texto, bien de forma explícita en forma de texto o mediante convenciones.

Beneficiarios:

Beneficia a personas con diferentes discapacidades al permitir a los agentes de usuario adaptar el contenido de acuerdo a sus necesidades.

¿CÓMO CUMPLIR?

En líneas generales se trata de separar la estructura y la información de la presentación y usar los elementos semánticos adecuados para marcar la estructura y el texto especial o enfatizado.

Cada tecnología accesible tiene sus propios mecanismos para proporcionar la información estructural y semántica. En el caso de HTML y XHTML se han de usar los elementos de marcado adecuados para cada tipo de contenido.

Marcar la estructura del contenido usando los elementos semánticos adecuados. Por ejemplo, en (X)HTML esto se traduce en:

• Usar elementos de encabezado (<h1> - <h6>) para los encabezados de sección
• Marcar los párrafos con <p>
• Usar los elementos de lista (<ul>, <ol> y <dl>) para las listas
• Marcar los encabezados en las tablas de datos (<th>) y relacionarlos con las celdas de datos (<td>)
• Etc.

Usar los elementos semánticos adecuados para marcar el texto especial o enfatizado. Por ejemplo, en (X)HTML:

• Usar <em> y <strong> para el texto enfatizado
• Usar <q> para las citas cortas en línea (frases dentro de otro párrafo)
• Usar <blockquote> para las citas largas en bloques de texto (párrafos).
• Usar <cite> para identificar las referencias
• Usar <abbr> para abreviaturas y <acronym> para acrónimos
• Usar <a> para enlaces
• Etc.

Usar los elementos de acuerdo a su significado, no por su apariencia.

Por ejemplo, usar <blockquote> para marcar una cita larga y no para indentar el texto, o usar los elementos de encabezado para marcar aquel texto que es un encabezado, y no cualquier texto sólo porque queramos que se vea grande y en negrita.

Ejemplo:

<p>La accesibilidad web <strong>beneficia</strong> 
además a las personas <em>sin</em> discapacidad.</p> 

<p>Obama dijo que su gobierno estará a "<q>la altura 
de los desafíos</q>" planteados por la crisis</p> 

<p>Extracto del libro <cite>El Quijote</cite> de 
Miguel de Cervantes:</p> 
<blockquote cite="http://www.elquijote.com/cap1"> 
<p>En un lugar de la mancha, de cuyo nombre 
no quiero acordarme...</p> 
</blockquote>

No debemos usar únicamente elementos de presentación para transmitir información estructural o semántica. Por ejemplo, si un texto es un encabezado no sirve únicamente con ponerlo en letra grande y negrita sino que también tenemos que marcarlo con el elemento de encabezado adecuado (<h1> - <h6>).

Un fallo habitual es usar marcado inapropiado para el contenido, por ejemplo, únicamente con fines decorativos.

Marcar el contenido estructural y semántico con los elementos adecuados permite que los productos de apoyo y otros agentes de usuario puedan determinar su significado. Esto además facilita la interacción a los usuarios de productos de apoyo. Por ejemplo, los usuarios de productos de apoyo pueden:

• Realizar transformaciones basadas en la estructura, como obtener un listado de los encabezados o de los enlaces de la página, reordenar secciones, etc.
• Interactuar basándose en la estructura, como saber previamente el número de elementos de una lista, saltar el contenido hasta el comienzo de la siguiente lista, saltar entre encabezados para ir a otras secciones de la página, saltar al final de la página, etc.
• Modificar la presentación basándose en la estructura como, por ejemplo, usar una hoja de estilos (CSS) alternativa con estilos adecuados a sus necesidades (hoja de estilos de alto contraste, texto grande, etc.).

Usar <h1> - <h6> para identificar los encabezados

Los encabezados definen la estructura principal de las páginas, dividiéndolas en diferentes secciones y subsecciones.

Debemos usar los elementos de encabezado ( <h1> - <h6>) para marcar los títulos de las diferentes secciones en las que se divide la estructura de las páginas.

Un uso correcto de los encabezados implica:

• Usar los elementos de encabezado (<h1> - <h6>) para marcar aquellos textos que sean títulos de sección.
• No simular encabezados mediante la aplicación de estilos directamente sobre el texto por medio de etiquetas y atributos presentacionales de (X)HTML o propiedades de CSS. Si un texto se resalta del resto porque es un encabezado, entonces hemos de márcarlo como tal (<h1> - <h6>).
• Por el contrario, no emplear los elementos de encabezado únicamente para conseguir efectos de formato (dar estilo al texto como, por ejemplo, letra grande y en negrita). Para lograr únicamente efectos de formato debemos emplear las hojas de estilo o las características de presentación de la tecnología usada.
• Usar los diferentes niveles de encabezados (<h1> - <h6>) de forma coherente a la importancia y jerarquía de los mismos.
• No usar encabezados de secciones vacías, sin contenido. Según la especificación de (X)HTML los encabezados son breves descripciones del contenido de la sección que preceden. Esto implica que no puede haber encabezados de secciones vacías ya que en tal caso no se trataría realmente de encabezados al no existir tales secciones.

Usar <ol>, <ul>, <dl> para las listas

Las listas ordenadas (<ol>), no ordenadas (<ul>) o de definición (<dl>) son elementos estructurales que permiten la agrupación de elementos relacionados. El uso de estos elementos allí donde son apropiados enriquece la estructura y la semántica de los documentos.

Un uso correcto de los elementos de lista implica:

• Usar los elementos de lista apropiados para cada propósito.
• Listas ordenadas (<ol>)
• Listas no ordenadas (<ul>)
• Listas de definición (<dl>)
• No simular las listas mediante la inclusión de caracteres (asteriscos, guiones, letras o números para listas ordenadas, etc.) o de imágenes para simular viñetas de listas. Debemos marcar las listas con los elementos adecuados y si queremos usar imágenes personalizadas como viñetas lo mejor es incluirlas desde las hojas de estilo con la propiedad list-style-type y list-style-image o como fondos de los elementos de lista (background-image).
• No usar los elementos de lista con fines únicamente de presentación como, por ejemplo, para dar sangría al texto.

A continuación se explican los tres tipos de listas que podemos emplear.

Listas no ordenadas

En este tipo de lista el orden de los diferentes elementos que componen la lista carece de relevancia. Un ejemplo de lista no ordenada puede ser una enumeración de los ingredientes de una receta de cocina.

La lista no ordenada se marca con el elemento <ul> y los elementos de lista con <li>.

Ejemplo:

<ul> 
	<li>100 g de harina</li> 
	<li>10 g de azúcar</li> 
	<li>1 taza de agua</li> 
	<li>2 huevos</li> 
	<li>sal, pimienta</li> 
</ul> 

Listas ordenadas

Una lista ordenada, al contrario que en el caso anterior, contiene información para la cual es importante el orden de cada uno de los elementos, como puede ser la secuencia de pasos para realizar una receta de cocina.

La lista ordenada se marca con el elemento <ol> y los elementos de lista con <li>.

Ejemplo:

<ol> 
  <li>Mezcle los ingredientes secos íntimamente.</li> 
  <li>Vierta los ingredientes líquidos.</li>
  <li>Remueva durante 10 minutos.</li>
  <li>Hornear durante una hora a 300 grados.</li>
</ol>

Listas de definición

Con las listas de definición se pueden proporcionar definiciones para diferentes palabras y términos (aunque pueden tener otras aplicaciones). A diferencia de los otros tipos de listas, constan de dos partes: término y definición.

Las listas de definición pueden tener varios términos para una definición así como varias definiciones para un mismo término. A continuación se muestra un ejemplo de un glosario.

La lista se marca con el elemento <dl>, el término con <dt> y la definición con <dd>.

<dl> 
  <dt>Accesibilidad</dt>
    <dd>
      <p>Posibilidad de que un sitio o servicio Web...</p>
    </dd>

  <dt>Aplicación</dt>
    <dd>
      <p>Programa preparado para una utilización específica...</p> 
    </dd>
    <dd>
      <p>Operación por la que se hace corresponder...</p>
    </dd>
 
   <dt>Ordenador</dt>
   <dt>Computador</dt>
     <dd>
       <p>Máquina electrónica dotada de una memoria ...</p>
     </dd>
</dl>

Es posible usar también las listas de definición para marcar texto cuya estructura corresponda con la proporcionada por este tipo de lista, sin necesidad de que se trate estrictamente de términos y definiciones. Por ejemplo, se pueden usar para identificar un diálogo, usando el término para indicar los personajes y las definiciones para el texto de los diálogos.

Usar marcado de tablas para presentar la información tabular

Cuando presentemos información tabular debemos usar tablas de datos e identificar adecuadamente las celdas con los elementos correspondientes según cuál sea su función: celdas de encabezado o celdas de datos.

• No debemos simular tablas de datos con el elemento <pre> y el tabulador para crear las columnas ya que de esta manera no hay estructura. En este caso la información tabular sólo se transmite a través de la presentación.
• Debemos usar en su lugar los elementos <table> para crear la tabla, <tr> para las filas de la tabla, <th> para los encabezados y <td> para los datos .

A continuación se muestra un ejemplo de tabla de datos sencilla en la que se identifican los encabezados con el elemento <th>.

<table>
  <caption>Exportaciones Enero de 2012</caption> 
  <tr>
    <th>Productos</th
	 <th>Millones de pesos</th>
    <th>Porcentaje del total</th>
  </tr> 
  <tr> 
    <td>Petroleo</td>
    <td>60000</td>
    <td>42,55</td>
  </tr>
</table>

<table> 
  <caption>Exportaciones Enero de 2012</caption>  
  <tr>
    <td></td>
      <th>Millones de pesos</th>
      <th>Porcentaje del total</th>
  </tr>
  <tr>
    <th>Petroleo</th>
    <td>600000</td>
    <td>42,55</td> 
  </tr>
</table>

Asociar las celdas de encabezado y las celdas de datos en las tablas de datos mediante el atributo scope .

Los lectores de pantalla permiten navegar entre las celdas de las tablas de datos y, si están marcadas correctamente, informan a los usuarios sobre cuáles son los encabezados correspondientes a la celda actual. De esta forma los usuarios conocen la información de contexto necesaria para interpretar los datos.

Para establecer estas relaciones se puede usar el atributo scope para indicar el ámbito sobre el que actúa el encabezado.

• Con el valor "row" para encabezados de fila.
• Con el valor "col" para encabezados de columna.
• Con el valor "rowgroup" para encabezados de grupos de filas.
• Con el valor "colgroup" para encabezados de grupos de columnas.

A continuación se muestra un ejemplo del uso del atributo scope:

Exportaciones Enero de 2012

<table> 
  <caption>Exportaciones Enero de 2012</caption>  
  <tr>
    <td></td>
      <th scope="col">Millones de pesos</th>
      <th scope="col">Porcentaje del total</th>
  </tr>
  <tr>
    <th scope="row">Petroleo</th>
    <td>600000</td>
    <td>42,55</td> 
  </tr>
</table> 

El atributo scope también se puede aplicar sobre celdas de datos (<td>) que queramos que actúen a modo de encabezados. Por ejemplo, porque no consideremos que se necesiten marcar como encabezados pero usando scope se facilita la lectura de la tabla.

En tablas sencillas con encabezados sólo en la primera fila o columna no es necesario usar scope ya que se considera suficiente con identificar los encabezados (mediante el elemento <th>).

Algunos agentes de usuario tienen problemas de compatibilidad con el atributo scope cuando se usa para establecer relaciones en tablas complejas (<tt>'''"rowgroup"'''</tt>, <tt>'''"colgroup"'''</tt>). Debido a estos problemas, para tablas complejas con más de una fila y/o columna de encabezados '''es preferible usar los atributos''' <tt>'''id</tt> y <tt>headers'''</tt>.

Asociar las celdas de encabezado y las celdas de datos en las tablas de datos mediante los atributos id y headers

En las tablas de datos sencillas los lectores de pantalla reconocen correctamente las relaciones entre los datos y los encabezados. Sin embargo, en tablas complejas (aquellas en las que las celdas de datos se asocian con más de un encabezado de fila y/o columna) los lectores de pantalla y otros productos de apoyo pueden tener problemas para reconocer estas relaciones, dando como resultado lecturas incorrectas o incompletas de las tablas. Al leer un dato, puede que no informen sobre cuales son sus encabezados o lo hagan de forma incorrecta.

Al relacionar los datos con los encabezados mediante los atributos id y headers los lectores de pantalla serán capaces de informar a los usuarios sobre cuáles son los encabezados correspondientes a la celda actual, independientemente de la complejidad de la tabla.

El atributo headers se usa en las celdas de datos (<td>) para indicar cuáles son sus encabezados, usando para ello el valor del atributo id que identifica los elementos <th> correspondientes.

A continuación se muestra un ejemplo para mostrar cómo se relacionan las celdas de datos y de encabezados mediante id y headers.

Comercio exterior – Enero de 2012

<table> 
<caption>Comercio Exterior - Enero de 2012/caption> 
<tr>
<td rowspan="2"></td> 
<th colspan="2" id="exp">Exportaciones</th> 
<th colspan="2" id="imp">Importaciones</th>
</tr> 
<tr> 
<th id="mil_exp">Millones de pesos</th>
<th id="pct_exp">Porcentaje del total</th>
<th id="mil_imp">Millones de pesos</th>
<th id="pct_imp">Porcentaje del total</th>
</tr> 
<tr> 
<th id="pet">Petroleo</th>
<td headers="pet exp mil_exp">600000</td>
<td headers="pet exp pct_exp">42,55</td> 
<td headers="pet imp mil_imp">900000</td> 
<td headers="pet imp pct_imp">53,57</td>
</tr> 
</table> 

Un fallo habitual es proporcionar información insuficiente o incorrecta para determinar inequívocamente las relaciones entre datos y encabezados. Por ejemplo, por usar identificadores id repetidos, por no asociar los datos con todos sus encabezados o por asociarlos con encabezados incorrectos.

Otro fallo es usar estos elementos y atributos propios de tablas de datos (<th>, scope, id y headers) en tablas de maquetación. Se recomienda evitar las tablas de maquetación, pero en caso de usarse han de ser lo menos intrusivas posibles. Si se emplean estos elementos y atributos en las tablas de maquetación los lectores de pantalla las leerán como si se tratasen de tablas de datos interfiriendo así con la correcta lectura de la página.

Usar el elemento <caption> para asociar las tablas de datos con su título

Cuando las tablas de datos tienen un título que identifica su contenido éste hemos de marcarlo con el elemento <caption>. De esta forma se relaciona el título con la tabla de datos a nivel del marcado, y no sólo visualmente. Además, este elemento permite a los lectores de pantalla saltar directamente a los títulos de las tablas.

El elemento <caption> se sitúa justo a continuación de la etiqueta de apertura de la tabla.

EJEMPLO:

<table>
<caption>Comercio Exterior - Enero de 2007</caption> 
... 

Usar el atributo summary para dar una visión general de las tablas de datos

Mediante el atributo summary se proporciona una breve descripción de cómo se organizan los datos o se navega por la tabla. Esta información está disponible para los usuarios de lectores de pantalla y no se muestra visualmente. Es especialmente útil en tablas con una estructura compleja, como cuando existen varias filas o columnas de encabezados, aunque también resulta útil en tablas de datos sencillas.

A continuación podemos ver una tabla con una estructura compleja para la que es necesario proporcionar una información de resumen que la describa.

Comercio exterior – Enero de 2012

<table summary="Información sobre las 
importaciones y exportaciones en enero de 2012
(en millones de pesos y porcentaje del total)
de productos energéticos y de alimentación.">
<caption>Comercio Exterior - Enero de 2012</caption>

El atributo summary se puede usar tanto si la tabla ya incluye un elemento <caption> como si no. Con el título se identifica la tabla, mientras que con el atributo summary se proporciona un resumen del contenido de la tabla o se explica como navegar por ella en caso que tenga una estructura compleja. Se trata de información complementaria. En el caso de que empleemos ambos, éstos no pueden proporcionar la misma información.

Un fallo habitual es proporcionar la misma información en el atributo <tt>summary</tt> y en el elemento <tt><caption></tt>.

Proporcionar una descripción para grupos de controles de formulario mediante los elementos <fieldset> y <legend>

Cuando en un formulario existan varios grupos de controles de formulario relacionados entre sí, cada grupo debe estar contenido dentro de un elemento <fieldset>. Asimismo, cada elemento <fieldset> debe tener un elemento <legend> donde se incluya la descripción del grupo de controles.

Esto se debe realizar siempre que existan grupos de controles de formulario relacionados, pero es especialmente importante para los grupos de controles de tipo "radio" y "checkbox" (con el mismo valor en el atributo name).

<fieldset> 
  <legend>Opciones Especiales</legend> 
  <input id="opt1" type="checkbox"
    name="extras" value="Az_met" />
  <label for="opt1">Azul metalizado</label> 
  <input id="opt2" type="checkbox"
    name="extras" value="Rj_vvt" /> 
  <label for="opt2">Rojo velvet</label> 
  <input id="opt3" type="checkbox" 
    name="extras" value="Vd_lim" /> 
  <label for="opt3">Verde lima</label> 
  <input id="opt4" type="checkbox" 
    name="extras" value="Gr_Rat" /> 
  <label for="opt4">Gris ratón</label> 
</fieldset>

Para que esta técnica resulte efectiva se recomienda evitar la anidación excesiva de varios grupos de controles de formulario.

El elemento <fieldset> muestra por defecto una línea que rodea a los controles para que se puedan reconocer visualmente. Mediante CSS podemos modificar su presentación, pero en dicho caso se recomienda mantener la agrupación visual de los controles.

Si en el formulario existen pocos controles, no hay grupos de controles, y los controles están claramente identificados mediante el elemento <label> entonces no es necesario usar <fieldset>.

Usar <optgroup> para agrupar los elementos option dentro de un <select>

En ocasiones, las opciones mostradas en las listas de selección se organizan en grupos de opciones relacionadas entre sí. En vez de realizar estas agrupaciones artificialmente mediante la inclusión de opciones falsas, como líneas de puntos o guiones ("..........", "----------") debemos usar el marcado semántico adecuado.

Para ello, en (X)HTML usaremos el elemento <optgroup>, en el que incluiremos las opciones (<option>) de cada grupo. Para que los usuarios puedan identificar cada grupo los etiquetaremos con el atributo label del elemento <optgroup>.

A continuación podemos ver un ejemplo de uso de este elemento.

<select name="Razas de Animales">
  <optgroup label="Perros">
    <option value="p_cocker">Cocker</option> 
    <option value="p_bobtail">Bobtail</option> 
    <option value="p_dalmata">Dálmata</option> 
  </optgroup>
  <optgroup label="Gatos">
    <option value="g_siames">Siamés</option>
    <option value="g_persa">Persa</option>
  </optgroup>
</select>

Es importante tener en cuenta que no se pueden anidar los elemento <optgroup>, así que sólo puede haber un nivel de agrupación dentro de cada <select>.

Usar marcado semántico cuando se emplea el color como pista

La mayor parte de los usuarios pueden localizar y comprender la información transmitida mediante el color. Sin embargo, los usuarios con problemas visuales no podrán percibir dicha información. Si además del color usamos marcado semántico para proporcionar la información entonces los agentes de usuario y productos de apoyo podrán acceder a esta información y transmitirla a los usuarios. Por ejemplo, los navegadores gráficos podrán usar una presentación visual diferente para diferentes elementos semánticos y los lectores de pantalla podrán usar una entonación diferente.

Por ejemplo, en un formulario en vez de marcar los campos obligatorios únicamente mediante el color, se puede emplear el elemento <strong> para enfatizar el texto de las etiquetas. Al comienzo del formulario se puede incluir un mensaje de aviso del tipo "los campos obligatorios se muestran en rojo y con énfasis (negrita)".

Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software una secuencia correcta de lectura.

Objetivo:

El objetivo de este criterio de conformidad es lograr que los agentes de usuario puedan proporcionar presentaciones alternativas del contenido manteniendo el orden de lectura correcto para su comprensión.

Se considera una secuencia correcta de lectura toda secuencia donde las palabras o párrafos se presentan en un orden que no cambia el significado del contenido.

El contenido de la página puede tener diferentes órdenes de lectura todos ellos correctos y no necesariamente uno sólo. Es importante que se pueda determinar por software al menos una secuencia de contenido que tenga sentido. Si esto no se cumple puede provocar confusión a los usuarios, por ejemplo, cuando los lectores de pantalla lean el contenido en un orden incorrecto.

Para entender bien cómo se cumple este criterio de conformidad es necesario comprender los conceptos de secuencia significativa y secuencia no significativa.

Una secuencia significativa es aquella en la que el orden de su contenido no se puede cambiar sin afectar a su significado. Así, se consideran que son secuencias significativas:

• Listas ordenadas: el orden de los elementos de la lista afecta al significado de la misma.
• Texto: el orden en el que se leen las palabras del contenido textual afecta a su significado.
• Etiquetas y campos de formulario: el orden de lectura relativo entre las etiquetas y los campos de los formularios afecta a su comprensión (relacionar la etiqueta con el campo correcto).
• Etc.

Sin embargo, el orden del contenido en una secuencia no siempre es significativo. Por ejemplo, si la página contiene dos artículos independientes entre sí, el orden de lectura relativo de los artículos puede no afectar a su significado ya que no están relacionados, aunque el contenido dentro de cada artículo sí pueda tener una secuencia significativa. Asimismo, el orden relativo entre la sección principal del contenido de la página y la navegación no afecta a su significado. Se puede leer primero la navegación y luego el contenido o al revés, y ambos órdenes de lectura no afectan al significado de la página. En estos casos hay varios órdenes de lectura correctos para la página que pueden satisfacer este criterio de conformidad.

Así, algunas secuencias no significativas pueden ser:

• Listas desordenadas.
• Artículos o noticias independientes entre sí.
• Cabecera y navegación de la página.
• Etc.

Por tanto, pueden existir varias secuencias correctas de lectura siempre que cada una de ellas respete el orden de lectura dentro de las secuencias significativas, aunque no necesariamente el orden de las secuencias no significativas.

Si se puede determinar mediante software al menos una secuencia correcta de lectura aseguramos que el significado del contenido original se mantendrá cuando se usen presentaciones alternativas. Como, por ejemplo, cuando se accede con:

• Un lector de pantalla.
• Sin soporte de hojas de estilo (navegador de texto, etc.).
• Con una hoja de estilos alternativa.
• Tablas linearizadas (de forma lineal)
• Etc.

Beneficiarios:

Beneficia especialmente a las personas que dependen de lectores de pantalla para acceder al contenido.

¿CÓMO CUMPLIR?

ORDENAR TODO EL CONTENIDO DENTRO DE LAS SECUENCIAS SIGNIFICATIVAS

El objetivo es que el orden del contenido que se presenta a los productos de apoyo (p. ej. lectores de pantalla) permita a los usuarios comprender dicho contenido.

Mediante hojas de estilo se puede posicionar el contenido de forma que visualmente se muestre con un orden coherente pero que, sin embargo, esté desordenado en el código (X)HTML. Al desactivar las hojas de estilo, al acceder con un navegador de texto o mediante un lector de pantalla, el orden de lectura será incorrecto y se perderá el significado de la página. Lo mismo puede ocurrir si se emplean tablas de maquetación.

Es posible maquetar los contenidos para mejorar la apariencia visual mientras se mantiene un orden de lectura correcto. Por ejemplo, posicionando el contenido basándose en el marcado estructural y respetando el orden dentro de las secuencias significativas. Es decir, ordenar primero el contenido de forma correcta, darle la estructura adecuada y, finalmente, aplicar las propiedades necesarias de las hojas de estilo para maquetarlo.

Esto asegura que el significado del contenido se mantiene incluso aunque no se apliquen los estilos.

Debemos asegurarnos que el orden del contenido en el código (X)HTML siga un orden de lectura correcto, que tenga sentido. Para ello es necesario mantener el orden dentro de las secuencias significativas.

En el caso de las secuencias no significativas (en las que el orden no importa), no es necesario establecer un orden específico. Así, en el caso de que tengamos dos artículos independientes entre sí (sin un orden relativo que respetar entre ellos), podemos ordenarlos en el contenido libremente. Lo mismo ocurre con el orden relativo entre la sección principal del contenido de la página y la navegación, pudiendo situar primero la navegación y luego el contenido, o al revés. Generalmente, en estos casos el orden de lectura no afecta al significado de la página. Sin embargo, como decíamos antes, dentro de las secuencias significativas sí debemos mantener un orden correcto de lectura para que no se pierda su significado.

MARCAR SECUENCIAS DENTRO DEL CONTENIDO COMO SIGNIFICATIVAS

En algunos casos especiales es posible que tengamos que marcar específicamente algunas secuencias dentro del contenido como significativas. En este caso nos referimos a partes del contenido (secuencias dentro del contenido), y no al conjunto completo de la página.

Así, en una misma página podemos incluir texto en varios idiomas con diferente orden de lectura. Por ejemplo, si incluimos un texto en hebreo, el cual se lee de derecha a izquierda, dentro de una página en español es necesario indicar su dirección de lectura. Para ello podemos emplear:

Atributo dir para indicar los cambios anidados en la dirección de lectura del texto. Por ejemplo:

<p> 
El título es 
<em lang="he" dir="rtl">oerbeh ne otxeT</em>. 
</p>

Marca Unicode para indicar la dirección de lectura en los textos de los idiomas mezclados. Se puede usar la marca Unicode directamente o emplear entidades:

• Izquierda a derecha (left-to-right mark): ‎ o ‎ (U+200E)
• Derecha a izquierda (right-to-left mark): ‏ o ‏ (U+200F)

Otro caso especial es cuando queremos dar un formato al texto separando visualmente las letras entre sí. Si incluimos caracteres en blanco entre las letras de las palabras los lectores de pantalla leerán cada letra por separado, y no las palabras completas. Para evitar este problema, y asegurarnos una lectura correcta, podemos usar la propiedad letter-spacing de CSS para controlar la separación entre los caracteres de las palabras, sin modificar el contenido original añadiendo espacios en blanco.

Las instrucciones proporcionadas para entender y operar el contenido no dependen exclusivamente de las características sensoriales de los componentes como su forma, tamaño, ubicación visual, orientación o sonido.

Nota: Para los requisitos relacionados con el color, véase la Pauta 1.4

.

Objetivo:

El objetivo es asegurar que todos los usuarios pueden acceder al contenido y comprender las instrucciones para usarlo, incluso cuando no puedan percibir la forma, tamaño o información sobre la localización espacial u orientación.

Algunas personas con discapacidad no son capaces de percibir la forma, tamaño o posición del contenido debido a las características de su discapacidad y/o de los productos de apoyo que usan. Por ejemplo, una persona ciega que use un lector de pantalla no podrá entender la información basada en características visuales del contenido.

A veces este tipo de información es útil para usuarios con limitaciones cognitivas, pues les ayuda a comprender mejor las instrucciones. Por tanto, este criterio de conformidad no impide usar este tipo de información siempre y cuando también se proporcione esa información de otra forma.

Beneficiarios:

Beneficia especialmente a las personas con ceguera o con baja visión que dependen de lectores de pantalla para acceder al contenido.

¿CÓMO CUMPLIR?

Proporcionar una identificación textual de los elementos que de otra manera dependerían únicamente de información sensorial para poder comprenderlos .

Debemos asegurar que no hacemos referencia a elementos de la página web únicamente en función de su forma, tamaño, posición, orientación o sonido, sino también de forma que la información proporcionada no dependa únicamente de características sensoriales. Por ejemplo, al hacer referencia a un botón de formulario se puede mencionar su función, o la etiqueta que lo describe, en vez de dar únicamente información sensorial como su forma o color.

Así, en vez de usar mensajes del estilo "Pulse el botón redondo de la izquierda" o "Pulse en la flecha de la derecha", debemos sustituirlos por mensajes del tipo "Pulse sobre el botón redondo de la izquierda con la etiqueta IR" o "Pulse en el botón en forma de flecha con la etiqueta SIGUIENTE situado a la derecha".

Nota: Los términos "arriba" y "abajo" se aceptan si en el idioma usado se entienden como referencias al contenido anterior y posterior, respectivamente. Así, si el contenido al que se hace referencia está en el lugar adecuado y la referencia es precisa se pueden usar instrucciones del estilo "presionar el botón de debajo" o "volver arriba", por ejemplo.

La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.

El objetivo de este principio es que toda la información y los componentes de la interfaz de usuario se presenten a los usuarios de forma que estos puedan percibirlos a través de los sentidos. Es decir, esta información no puede pasar desapercibida para todos sus sentidos.

PAUTA 1.4 DISTINGUIBLE

Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

lograr que la presentación por defecto resulte lo más fácil de percibir que sea posible para las personas con discapacidad.

En esta pauta se tratarán principalmente los siguientes conceptos:

• Uso adecuado del color para transmitir información. * Contraste suficiente entre la información (visual y auditiva) de primer plano y la de fondo.
• Tamaño del texto configurable por el usuario
• Formato del texto para mejorar su legibilidad (ancho de columnas, interlineado, alineación, etc.).

El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

Nota: Este criterio de conformidad trata específicamente acerca de la percepción del color. En la Pauta 1.3 se recogen otras formas de percepción, incluyendo el acceso por software al color y a otros códigos de presentación visual.

Objetivo:

Asegurar que todos los usuarios pueden acceder a la información que se transmite por el color. Es decir, cuando se usan colores con un significado asignado.

Si se emplea el color como único medio para transmitir cierta información se está negando esta información a los usuarios que no puedan diferenciar determinados colores, que no usen pantallas en color o que usen dispositivos de salida no visuales, como los lectores de pantalla.

Por ejemplo, si queremos ofrecer los resultados de un test debemos evitar aportar información sólo a través del color diciendo "la opción correcta se marca en rojo".

• A
• B
• C

En su lugar debemos emplear una forma alternativa que no se base sólo en el color. Por ejemplo: "la opción correcta se marca en rojo y aparece entre paréntesis".

• A
• B
• (C)

Es importante señalar que este criterio de conformidad no impide el uso del color para transmitir información, siempre y cuando éste no sea el único medio empleado.

Beneficiarios:

Beneficia a personas con problemas de percepción del color (incluidas personas mayores), usuarios de lectores de pantalla o de agentes de usuario con capacidades limitadas.

¿CÓMO CUMPLIR?

Existen dos aproximaciones diferentes según se use el color del texto, fondos u otro contenido para proporcionar información o bien cuando se use el color en las imágenes para proporcionar información.

USO DEL COLOR DEL TEXTO, FONDOS U OTRO CONTENIDO PARA PROPORCIONAR INFORMACIÓN

Asegurar que la información transmitida por diferencias de color está además disponible en el texto

La forma más sencilla de evitar el uso del color como único medio para transmitir información es proporcionar dicha información en formato de texto.

Así, por ejemplo, en un formulario podemos indicar los campos obligatorios incluyendo la palabra "obligatorio" en las etiquetas correspondientes.

De forma similar, en vez de proporcionar directamente la información en texto, se pueden emplear "pistas" textuales que transmitan la misma información. Por ejemplo, en el caso del formulario, se pueden indicar los campos obligatorios mediante un asterisco (pista textual) y explicar, antes del formulario, que "los campos marcados con asterisco son obligatorios"

Asegurar que hay pistas visuales adicionales cuando se usa el color del texto para transmitir información

La técnica anterior era aplicable, de forma general, a cualquier caso donde se use el color del contenido para transmitir información (color del texto, colores de fondo u otro contenido).

La técnica actual trata de forma específica el uso del color del texto para transmitir información. Por ejemplo:

• Palabras que son enlaces dentro de bloques de texto (párrafos).
• Elementos de una lista que se diferencian entre ellos mediante el color del texto. Por ejemplo, una lista de noticias en la que las noticias de última hora se muestran en color rojo.

Cuando hablamos de pistas visuales adicionales para el texto nos estamos refiriendo a variaciones en el estilo del texto (tamaño, negrita, itálica, subrayado, etc.) que nos permita diferenciar visualmente un texto de otro sin basarse exclusivamente en el color.

Por ejemplo, en vez de usar únicamente el color para diferenciar una palabra destacada, usar además alguna variación en el estilo de la palabra destacada. De esta forma nos aseguramos que los usuarios con problemas de percepción de color podrán diferenciarla fácilmente.

Esta técnica es aplicable también a los enlaces incluidos dentro de bloques de texto.

Enlace normal

En color: Puede visitar la página del <u>Servicio Público de Empleo</u> para más información.

En Blanco y negro: Puede visitar la página del <u>Servicio Público de Empleo</u> para más información.

Enlace que solo se diferencia por el color

En color: Puede visitar la página del Servicio Público de Empleo para más información.

En Blanco y negro: Puede visitar la página del Servicio Público de Empleo para más información.

Los enlaces sin subrayar no se diferencian del texto que los rodea cuando no se puede percibir el color.

Nota: Esta técnica sólo pide que se añadan pistas visuales adicionales. Esto puede parece una solución insuficiente de cara a la accesibilidad puesto que la información exclusivamente visual es ignorada por los lectores de pantalla, los cuales se basan en el marcado estructural y semántico para obtener información sobre el contenido.

Sin embargo, hemos de tener en cuenta que este criterio de conformidad se está refiriendo únicamente a la percepción visual para poder distinguir un contenido de otro. La información estructural y semántica del contenido, que sí pueden reconocer los lectores de pantalla, se trata en los criterios de conformidad 1.3.1 y 1.3.3 (por ejemplo, uso de <tt><em></tt>, <tt><strong></tt>, información textual, etc.).

Si se emplea únicamente el color para identificar los enlaces y controles, usar un contraste de al menos 3:1 con el texto que los rodea y pistas visuales adicionales cuando reciben el foco .

Esta técnica se puede aplicar cuando no se cumple la técnica anterior (por ejemplo, por cuestiones de diseño) al usar enlaces dentro de bloques de texto que se diferencian del resto del texto únicamente por el color, sin usar subrayado u otra pista visual adicional.

En ese caso se debe cumplir que:

• El contraste debe ser de al menos 3:1 entre el color del enlace y el color del resto del texto. Un contraste de al menos 3:1 permite diferenciar los enlaces y controles incluso a la mayoría de personas que no puedan percibir o diferenciar los colores.
• Se emplean pistas visuales adicionales cuando reciben el foco. Por ejemplo, cambiando el tamaño de la fuente, el estilo (negrita, itálica, etc.) o la decoración (subrayado, etc.). Estas pistas visuales usadas al recibir el foco sirven de ayuda para quienes, aún con un contraste de 3:1, tengan dificultades para su diferenciación.

Para comprobar el correcto contraste entre los colores de primer plano y los colores de fondo se puede emplear la herramienta ''contrastchecker'', para comprobar diferencias de color y de luminosidad. Esta herramienta está disponible en: <tt>http://webaim.org/resources/contrastchecker/</tt>.

En el criterio de conformidad 1.4.3 se tratará con más detalle el tema del contraste.

Si no hay un gran número de enlaces se recomienda siempre el subrayado, ya que el contraste de 3:1 puede ser insuficiente para personas con problemas visuales severos relacionados con la percepción del negro y del blanco (visión en escala de grises).

USO DEL COLOR EN IMÁGENES PARA PROPORCIONAR INFORMACIÓN

Usar patrones además del color

En las imágenes, sobre todo en las gráficas, es habitual el uso del color para transmitir información. En estos casos, debemos usar algún mecanismo adicional al color para transmitir la información, como puede ser el uso de patrones.

Por ejemplo, en la gráfica de líneas mostrada a continuación se emplea el color como único medio para transmitir información. Una persona daltónica que no diferencie el color verde del color rojo no será capaz de interpretar correctamente la gráfica.

Si el audio de una página web suena automáticamente durante más de 3 segundos, se proporciona ya sea un mecanismo para pausar o detener el audio, o un mecanismo para controlar el volumen del sonido que es independiente del nivel de volumen global del sistema

.

Nota: En la medida en que cualquier contenido que no satisfaga este criterio puede interferir con la capacidad del usuario de emplear la página en su conjunto, todo contenido de la página web (tanto si satisface o no otros criterios de conformidad) debe satisfacer este criterio. Véase Requisito de Conformidad 5: No interferencia.

Objetivo:

Evitar interferencias entre el sonido de la página y la lectura por parte del lector de pantalla.

Cuando un sonido se reproduce de forma automática en una página web debemos tener en cuenta que este sonido crea una interferencia con el lector de pantalla al reproducirse ambos sonidos de forma simultánea, haciendo difícil, sino imposible, comprender la información transmitida.

Este criterio de conformidad no se refiere exclusivamente a sonidos de fondo incluidos en una página, sino a cualquier sonido existente, incluidos los reproductores multimedia. Por ejemplo, si incluimos un vídeo en nuestra página, y este vídeo incluye sonido, debemos hacerlo de forma que el vídeo no se reproduzca automáticamente a no ser que se aplique alguna de las técnicas indicadas a continuación.

Beneficiarios:

Beneficia a usuarios de lectores de pantalla y productos de apoyo similares

¿CÓMO CUMPLIR?

PARA CUMPLIR ESTE CRITERIO DE CONFORMIDAD TENEMOS QUE APLICAR ALGUNA DE LAS TÉCNICAS INDICADAS A CONTINUACIÓN.

Apagar automáticamente el sonido al cabo de tres segundos

Se admite que un sonido se reproduzca de forma automática si ese sonido es lo suficientemente corto de forma que se detenga automáticamente al cabo de tres segundos como máximo.

De esta forma, aunque se provoca cierta interferencia con los lectores de pantalla, su duración es limitada y lo suficientemente corta como para no resultar perjudicial.

Proporcionar un control al comienzo de la página que permita apagar los sonidos reproducidos automáticamente

Si el sonido no se detiene de forma automática al cabo de tres segundos, entonces debemos proporcionar un control que permita a los usuarios detener dicho sonido.

Hemos de tener en cuenta que mientras se está reproduciendo el sonido, y hasta que se localiza y activa el control, el sonido estará interfiriendo con el lector de pantalla. Por tanto el control debe estar lo más cerca posible del comienzo de la página (tanto en el orden de tabulación como de lectura lineal) para que los usuarios lo puedan localizar fácil y rápidamente.

Además, el control debe ser operable mediante teclado y estar correctamente etiquetado con un texto que explique claramente su función.

Reproducir los sonidos sólo bajo demanda de los usuarios

La mejor opción es no incluir sonidos que se reproduzcan automáticamente y dejar que sea el usuario el que controle la reproducción del mismo. Como es lógico, el sonido debe estar inicialmente apagado.

Al menos, debemos proporcionar controles para iniciar y detener el sonido. Si además incluimos un control para manejar el volumen debemos hacerlo de forma que sea independiente del volumen del sistema. Es decir, que cuando el usuario baje el volumen del sonido lo haga exclusivamente sobre el sonido de la página y no sobre el sonido del sistema, ya que en este caso estaría disminuyendo también el volumen del lector de pantalla.

La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos:

Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.
Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Objetivo:

Proporcionar el suficiente contraste entre el primer plano y el fondo para que las personas con baja visión puedan leer el contenido

Las personas con baja visión tienen dificultades para leer textos con un bajo contraste con el color de fondo, siendo este problema más acusado en las personas con deficiencias en la percepción del color.

Es necesario comprobar que el contraste entre el color de primer plano y el color de fondo de los diferentes elementos (texto, imágenes, etc.) es siempre el suficiente para garantizar su correcta percepción.

Como excepciones se contemplan los siguientes casos en los que sí se permite el uso de un contraste reducido:

Texto puramente decorativo: Texto cuya única función es estética, sin proporcionar información y sin tener funcionalidad. El texto es puramente decorativo si las palabras se pueden reordenar o sustituir sin cambiar su propósito. Por ejemplo, la portada de un diccionario que incluye como fondo una seria de palabras aleatorias con un color claro.

Componentes de interfaz de usuario inactivos: Cuando un control de formulario está desactivado y no se puede usar es habitual que éste se muestre en gris y con muy poco contraste sobre el color de fondo. En este caso se permite el uso de contrastes reducidos. En relación con el criterio de conformidad 1.4.1 (Uso del color), NO se considera que los componentes de interfaz de usuario inactivos proporcionen información únicamente por el color porque no se pueden usar y no reciben el foco al navegar con el teclado.

Imágenes con texto y otro contenido visual relevante: Imágenes que contienen otro contenido visual relevante además del texto, o éste se trata de texto "accidental" (por ejemplo, texto visible en un cartel de una fotografía en la calle).

Esta excepción se incluye para diferenciar las imágenes que contienen texto de las imágenes de texto. Las imágenes de texto, es decir, el texto renderizado en un formato no textual con el objetivo de ser leído y lograr un determinado efecto visual para reemplazar al texto, no son una excepción.

Logotipos: Los logotipos son una excepción ya que su presentación se considera esencial al atender a un diseño gráfico específico, y que no se puede cambiar, asociado a una identidad corporativa.

En relación con los logotipos o nombre de marca, es importante señalar que las guías de estilo corporativas NO se consideran una excepción.

Beneficiarios:

Beneficia a personas con problemas visuales relacionados con el contraste o la percepción del color (incluidas personas mayores).

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos que aplicar alguna de las técnicas indicadas a continuación.

Asegurar que el contraste entre el texto (e imágenes de texto) y el fondo detrás del texto es el suficiente

Debemos comprobar que el contraste entre el color de primer plano y el color de fondo de los diferentes elementos (texto, imágenes, etc.) es siempre el suficiente para garantizar su correcta percepción.

El nivel de contraste necesario varía dependiendo del tamaño del texto:

Texto normal (menor de 18pt o 14pt y negrita): contraste de al menos 4.5:1

Texto grande (al menos 18pt o 14pt y negrita): contraste de al menos 3:1

Nota: Excepto para las fuentes muy delgadas o inusuales, estas medidas son suficientes para considerar el texto grande en la mayor parte de tipografías.

Cuando se incluyan imágenes que transmitan información textual se recomienda que el color de fondo y el color de primer plano, además de tener el suficiente contraste, sean colores planos y no tengan degradados, texturas o entramados que puedan dificultar la lectura. Así, por ejemplo, se recomienda evitar posicionar texto sobre imágenes con contenido (fotografías, dibujos, etc.) debido a la dificultad de asegurar un correcto contraste en la totalidad de combinaciones de colores de primer plano y fondo existentes en la imagen.

Aunque las siguientes técnicas no son necesarias para cumplir este criterio de conformidad, sí son recomendables para mejorar la accesibilidad de la página web:

• Usar texto en lugar de imágenes de texto
• En las gráficas, aunque se usen leyendas, usar un contraste suficiente entre los colores empleados para facilitar su percepción.
• Usar un fondo claro, en lugar de un fondo blanco, detrás de texto en color negro para obtener un contraste suficiente pero no extremo .

En el supuesto caso de que tengamos que incluir texto sobre un fondo que varíe en luminosidad relativa (o que tenga un tramado de fondo) se puede aclarar o sombrear el área que está justo detrás del texto, o el contorno de las letras, para asegurar un contraste suficiente.

Algunos fallos comunes relacionados con el contraste entre primer plano y fondo son:

• Usar imágenes de fondo (por ejemplo, incluidas mediante hojas de estilo) con un contraste insuficiente con el texto situado en primer plano sobre ellas, o usar imágenes de texto con un contraste insuficiente entre el texto mostrado y el fondo.
• Especificar en las hojas de estilo un color de primer plano sin especificar un color de fondo (y viceversa), ya que se pueden producir solapamientos de contenidos (debido a la capacidad de posicionamiento de las hojas de estilo) que den lugar a combinaciones con escaso o nulo contraste. Los colores de primer plano y fondo pueden estar especificados en la misma regla de CSS o a través de herencia. También es necesario especificar ambos colores aunque se usen imágenes de fondo por si no se cargan las imágenes.

Proporcionar un control con un contraste suficiente que permita a los usuarios cambiar a una presentación que tenga un contraste suficiente.

Si el diseño de la página no tiene el suficiente contraste y, por las circunstancias que sean, no podemos cambiarlo, una opción es proporcionar una versión alternativa de la página con alto contraste.

Cuando incluyamos una versión alternativa en "alto contraste" debemos cumplir las siguientes condiciones:

• El enlace o control usado para cambiar a la versión alternativa debe tener un contraste suficiente.
• La versión alternativa debe incluir la misma información y funcionalidad que la página original.
• La versión alternativa debe cumplir todos los criterios de conformidad del nivel de conformidad deseado.

La forma más sencilla de cumplir esta técnica, siempre que no existan imágenes o contenido no textual con un contraste insuficiente, es que la versión alternativa la creemos simplemente mediante el uso de hojas de estilo alternativas y proporcionemos un mecanismo que nos permita cambiar entre la hoja de estilos normal y la hoja de estilos de alto contraste.

Objetivo: Asegurar que el texto renderizado visualmente, incluidos los controles basados en texto se pueden redimensionar de forma que puedan ser leídos por personas con problemas de visión sin necesidad del uso de ayudas técnicas como magnificadores de pantalla.

Debemos permitir el redimensionado del texto para facilitar la lectura a los usuarios con problemas de visión.

El reescalado del texto es, en principio, responsabilidad de los navegadores y agentes de usuario. Como desarrolladores, nuestra responsabilidad es, al menos, crear contenido que no interfiera con el correcto reescalado del texto por parte de los navegadores o agentes de usuario. Es necesario tener en cuenta que no es suficiente con que el texto se pueda redimensionar, sino que también ha de hacerlo de forma que siga siendo legible.

La maquetación del sitio debe adaptarse adecuadamente a los diferentes tamaños del texto, de forma que no se produzcan desbordamientos o solapamientos del contenido que dificulten o impidan su percepción.

Básicamente, la tarea del desarrollador se reduce a una de las siguientes opciones:

No impedir el redimensionado del texto y asegurar que éste se realiza adecuadamente, sin desbordamientos o solapamientos de contenido.

Dar soporte directo al reescalado del texto (por ejemplo, mediante scripts de servidor y diferentes hojas de estilo).

Un tamaño de un 200% sobre el tamaño original se considera suficiente para la mayoría de los casos ya que:

Es fácil de lograr en la mayoría de diseños y maquetaciones.

Complementa a magnificadores de pantalla antiguos que tenían una ampliación mínima de un 200%

Por encima de 200% los inevitables problemas de maquetación pueden dificultar la usabilidad de la página.

Por encima de 200% se obtienen mejores resultados con una herramienta de zoom o con un magnificador de pantalla.

Beneficiarios:

Beneficia a personas con problemas visuales para leer el texto pequeño

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos que aplicar alguna de las técnicas indicadas a continuación.

USAR UNA TECNOLOGÍA QUE DISPONGA DE AGENTES DE USUARIO DE USO COMÚN QUE SOPORTEN ZOOM

El objetivo es asegurar que el contenido se puede redimensionar uniformemente usando navegadores web que tengan función de zoom. La función de zoom debe preservar las relaciones espaciales en la página y mantener toda la funcionalidad disponible.

Los navegadores más importantes que disponen de la herramienta de zoom son:

• Internet Explorer 7 y superior
• Google Chrome 3 y superior
• Firefox 3 y superior
• Opera 9 y superior
• Safari 4 y superior

USAR UNIDADES DE MEDIDA RELATIVAS PARA EL CONTENIDO Y ASEGURAR QUE LOS CONTENEDORES REDIMENSIONAN CON EL TEXTO

Debemos permitir el redimensionado del texto para facilitar la lectura a los usuarios con problemas de visión. Para ello usaremos unidades de medida relativas para definir el tamaño del texto en lugar de expresarlo en valores absolutos o en píxeles.

Así, para el texto podemos usar las siguientes unidades relativas de las hojas de estilo:

Porcentajes (%) para el tamaño de la fuente.

Unidad em para el tamaño de la fuente. * Nombres para tamaños de fuente (xx-small, x-small, small, medium, large, x-large, xx- large, así como smaller o larger).

Asimismo, la maquetación del sitio debe adaptarse adecuadamente a los diferentes tamaños del texto, permitiendo el redimensionado de los contenedores de forma que no se produzcan desbordamientos o solapamientos del contenido que dificulten o impidan su percepción.

Para asegurar que los contenedores redimensionan con el texto podemos:

Usar una maquetación líquida: adaptar el contenido al espacio horizontal disponible sin que se produzca scroll horizontal. Para ello se puede especificar el ancho de los contenedores en porcentajes y flotado de elementos. Este tipo de maquetación es el más afectivo para el diseño de páginas.

Usar una maquetación elástica: para ello se usa la unidad em para definir el ancho y/o alto de los contenedores de texto (o que admitan entrada de texto).

PROPORCIONAR CONTROLES EN LA PÁGINA PARA QUE LOS USUARIOS PUEDAN AUMENTAR EL TAMAÑO DEL TEXTO HASTA UN 200%

Todos los navegadores suelen incluir opciones para aumentar el tamaño del texto. Sin embargo, proporcionar en la página web un mecanismo adicional para cambiar el tamaño del texto es útil para usuarios con baja visión que no usan magnificadores de pantalla y que no están acostumbrados a las opciones del navegador.

Por ejemplo:

Personas mayores no habituadas al uso de ordenadores.

Personas con discapacidades cognitivas.

El uso de controles visibles e incluidos directamente en la página puede resultar más sencillo para este tipo de personas.

Para implementar correctamente esta técnica, el control debe permitir aumentar progresivamente el tamaño del texto de la página hasta al menos un 200% de su tamaño por defecto. Para los controles se pueden usar enlaces, botones, o imágenes enlazadas que sean fáciles de localizar, con un tamaño grande y suficiente contraste. Deben estar correctamente etiquetados de forma que se reconozca claramente cuál es su función (texto del botón o enlace, texto alternativo de las imágenes, títulos, etc.).

La técnica usada para cambiar el texto dinámicamente puede ser el uso de hojas de estilo alternativas.

ASEGURAR QUE NO SE PIERDE CONTENIDO O FUNCIONALIDAD CUANDO REDIMENSIONE EL TEXTO Y LOS CONTENEDORES NO REDIMENSIONEN

Debemos asegurarnos que al aumentar el tamaño del texto, al menos hasta un 200%, no se produzcan desbordamientos o solapamientos de contenido que dificulten su percepción. Por ejemplo, porque algunos contenidos se salgan de su contenedor y se posicionen sobre otro contenido.

Esto debemos comprobarlo siempre, pero es potencialmente más peligroso cuando los contenedores no redimensionan al cambiar el tamaño del texto. Por ejemplo, al usar unidades absolutas para definir el ancho y alto de los contenedores.

Si con las tecnologías que se están utilizando se puede conseguir la presentación visual deseada, se utiliza texto para transmitir la información en vez de imágenes de texto, excepto en los siguientes casos.

Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario.

Esencial: Una forma particular de presentación del texto resulta esencial para la información que se transmite.

Nota: Los logotipos (textos que son parte de un logo o de un nombre de marca) se consideran esenciales.

Objetivo:

Crear presentaciones para formatos específicos de texto de forma que los usuarios que necesiten una presentación determinada del texto la puedan ajustar a sus necesidades. Esto incluye a personas que requieren que el texto se muestre con una determinada fuente, tamaño, color de fondo y primer plano, alineación o espaciado entre líneas.

Algunas personas, para poder percibir o comprender la información textual, requieren que el texto se muestre con una determinada fuente, tamaño, color de fondo y primer plano, alineación o espaciado entre líneas. Si la información textual se transmite mediante imágenes los usuarios no podrán modificar la presentación del texto para adecuarla a sus necesidades.

Si con la tecnología empleada podemos lograr la presentación visual deseada para el texto, entonces debemos usar texto en vez de imágenes para transmitir la información textual. Si, por el contrario, no es posible darle el estilo deseado al texto, o no podemos asegurar que se verá correctamente en la mayoría de navegadores (fuentes poco habituales, sin derecho para su distribución, usando técnicas poco soportadas, etc.), en tonces está permitido usar imágenes.

En este criterio de conformidad se contemplan además otras dos excepciones:

La presentación del texto es esencial para transmitir la información: si la presentación cambia entonces se altera la información o funcionalidad del contenido y no puede lograrse de otra forma.

Este criterio de conformidad permite usar imágenes de texto para lograr una determinada presentación usando tipografías especiales no disponibles comúnmente. En el criterio de conformidad "1.4.9 - Imágenes de texto (Sin excepciones)" esta posibilidad no existe.

Beneficiarios:

Beneficia a personas con baja visión, con dificultades para leer texto o con problemas cognitivos que afectan a la capacidad de lectura.

¿CÓMO CUMPLIR?

Este criterio de conformidad no desaconseja el uso de imágenes para el contenido gráfico normal. Únicamente restringe su uso para transmitir información textual reproducible mediante (X)HTML + CSS.

A nivel general, sea cual sea la tecnología que empleemos, la técnica básica para cumplir este criterio de conformidad es separar la estructura de la presentación. En las imágenes de texto no existe tal separación ya que la información (el texto) y la presentación visual forman parte de la imagen.

La separación de estructura y presentación, además de mejorar la accesibilidad, es importante porque supone:

• Mayor facilidad para modificar el estilo de un sitio web.
• Código más claro y sencillo.
• Reducción de los tiempos de carga de las páginas.
• Código más fácil de mantener.
• Personalización del estilo por parte de los usuarios.
• Mayor compatibilidad con diferentes dispositivos.

Si usamos (X)HTML, disponemos de las hojas de estilo (CSS) para separar la estructura de los documentos de su presentación.

USAR HOJAS DE ESTILO PARA CONTROLAR LA PRESENTACIÓN DEL TEXTO

Mediante hojas de estilo podemos controlar la presentación visual del texto sin necesidad de usar imágenes de texto. Esto permitirá a los usuarios modificar la presentación del texto para adaptarla a sus necesidades. Por ejemplo, configurando el navegador para aplicar hojas de estilo de usuario con la presentación adecuada (alto contraste o tipografías, tamaños y colores determinados, etc.)

El uso de imágenes de texto presenta los siguientes problemas de accesibilidad:

No se pueden redimensionar cuando se cambia el tamaño del texto en el navegador

No se les pueden aplicar las combinaciones de colores especificados en la configuración de los navegadores o en las hojas de estilo de usuario.

Por tanto, es preferible proporcionar la información textual en formato de texto y usar una combinación de marcado estructural y semántico junto con hojas de estilo para lograr una presentación visual determinada.

Las siguientes propiedades de CSS se pueden usar para dar estilo al texto y evitar la necesidad de usar imágenes de texto:

color: color del texto o los contenedores de texto. 
font-family: fuente usada para el texto. 
text-align: alineación del texto (izquierda, derecha, ...). 
font-size: tamaño del texto. 
font-style: estilo del texto (normal, itálica, ...). 
font-weight: grosor de la fuente (normal, negrita, ...). 
line-height: altura de la línea de texto. 
text-transform: control sobre la presentación de mayúsculas y minúsculas. 
letter-spacing: espaciado entre letras dentro de las palabras. 
background-image: imagen de fondo para los bloques de contenido (p. ej. para mostrar como fondo del texto). 
::first-line: pseudoclase que se puede usar para modificar la presentación de la primera línea de un bloque de texto. 
::first-letter: pseudoclase que se puede usar para modificar la presentación de la primera letra de un bloque de texto. 
::before y ::after: pseudoclases que se pueden usar para incluir contenido decorativo no textual antes o después de los bloques de texto. 

Procuraremos usar fuentes que estén ampliamente disponibles o proporcionar varias fuentes alternativas controlando que la presentación sea correcta en todas ellas.

p::first-letter { 
   color: #ff0000; 
   font-size: xx-large; 
} 

p::first-line { 
   color: #0000ff; 
   font-variant: small-caps; 
}

La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.

Textos grandes: Los textos de gran tamaño y las imágenes de textos de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

Incidental: Los textos o imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.

Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Objetivo:

Proporcionar el suficiente contraste entre el primer plano y el fondo para que las personas con baja visión puedan leer el contenido.

Las personas con baja visión tienen dificultades para leer textos con un bajo contraste con el color de fondo, siendo este problema más acusado por las personas con deficiencias en la percepción del color.

Es necesario comprobar que el contraste entre el color de primer plano y el color de fondo de los diferentes elementos (texto, imágenes, etc.) es siempre el suficiente para garantizar su correcta percepción.

Beneficiarios:

Beneficia a personas con problemas visuales relacionados con el contraste o la percepción del color (incluidas personas mayores).

Para cumplir con este criterio de conformidad se emplean las mismas técnicas que para el criterio de conformidad 1.4.3, de Nivel AA, con la única variación del ratio de contraste aplicado con el objetivo de facilitar la percepción para un mayor número de personas.

Para el contenido de sólo audio grabado que (1) contiene habla en primer plano, (2) no es un CAPTCHA sonoro o un logo en audio, y (3) que no es una vocalización cuya intención principal es servir como expresión musical (como el canto o el rap), se cumple al menos uno de los siguientes casos:

• Ningún sonido de fondo: El audio no contiene sonidos de fondo.
• Apagar: Los sonidos de fondo pueden ser apagados.
• 20 dB: Los sonidos de fondo son, al menos, 20 decibelios más bajos que el discurso en primer plano, con la excepción de sonidos ocasionales que duran solamente uno o dos segundos.

Nota: Por la definición de "decibelio", el sonido de fondo que cumple con este requisito es aproximadamente cuatro veces más silencioso que la locución principal.

Objetivo:

Asegurar que los sonidos de fondo son lo suficientemente bajos para que las personas con problemas de audición puedan diferenciar las voces del resto de sonidos.

Beneficiarios:

Beneficia a personas con baja audición – Hipoacusia.

¿CÓMO CUMPLIR?

MEZCLAR LOS ARCHIVOS DE AUDIO DE FORMA QUE LOS SONIDOS SEAN AL MENOS 20 DECIBELIOS MÁS BAJOS QUE LAS VOCES .

Se considera que 20 dB de diferencia de volumen es suficiente para asegurar que las personas con baja audición no tendrán grandes dificultades para comprender la narración.

Atendiendo a la definición de decibelios, el que un sonido sea 20 dB mayor que otro es equivalente a que suene cuatro veces más alto. De todos modos, la forma más precisa de asegurarnos que estamos cumpliendo este criterio de conformidad es comprobarlo con algún programa de edición de audio.

En la siguiente imagen se muestra un ejemplo de una grabación en la que existe un contraste suficiente entre la narración de primer plano y los sonidos de fondo.

Se puede apreciar cómo en la sección en la que está sonando la narración principal junto con los sonidos de fondo la amplitud del sonido (volumen) es mucho mayor que en la sección donde sólo hay el sonido de fondo.

En la siguiente imagen se puede comprobar el caso contrario.

El volumen del sonido es prácticamente igual cuando suena la narración de primer plano y el fondo como cuando únicamente están los sonidos de fondo.

En la presentación visual de bloques de texto, se proporciona algún mecanismo para lograr lo siguiente:

• 1. Los colores de fondo y primer plano pueden ser elegidos por el usuario.
• 2. El ancho no es mayor de 80 caracteres o signos (40 si es Chino, Japones o Coreano – CJK).
• 3. El texto no está justificado (alineado a los márgenes izquierdo y derecho a la vez).
• 4. El espacio entre líneas (interlineado) es de, al menos, un espacio y medio dentro de los párrafos y el espacio entre párrafos es, al menos, 1.5 veces mayor que el espacio entre líneas.
• 5. El texto se ajusta sin ayudas técnicas hasta un 200 por ciento de modo tal que no requiere un desplazamiento horizontal para leer una línea de texto en una ventana a pantalla completa.

Objetivo:

Asegurar que el texto se presenta visualmente de forma que se puede percibir sin que su disposición interfiera con la legibilidad del mismo.

Algunas personas con problemas cognitivos, de aprendizaje, de lectura o de baja visión no podrán percibir el texto, o tendrán dificultades para su lectura, si éste no se presenta visualmente de acuerdo a sus necesidades.

1. Selección del color de primer plano y fondo: algunas personas con problemas cognitivos o visuales necesitan combinaciones especiales de colores de primer plano y de fondo.
2. Ancho de las líneas de texto: algunas personas con discapacidades visuales o problemas de lectura tienen dificultades para leer líneas largas de texto. Por ejemplo, pueden tener problemas para mantener la línea de lectura.
3. Texto sin justificar: algunas personas con discapacidades cognitivas tienen problemas para leer el texto que está justificado a ambos lados debido a las grandes variaciones en el espaciado de palabras (produciendo "ríos de blanco" y/o palabras demasiado juntas).
4. Espaciado entre líneas: algunas personas tienen dificultad para localizar las líneas cuando están muy juntas. Por ejemplo, pueden tener problemas para encontrar la línea siguiente al terminar una línea o para reconocer los diferentes párrafos.
5. Redimensionado del texto: las personas con baja visión, problemas cognitivos o problemas de lectura pueden requerir aumentar el tamaño del texto. Para no interferir con la lectura, al redimensionar el texto no se debe producir un scroll horizontal para leer una línea de texto.

Beneficiarios:

Beneficia a personas con problemas visuales, cognitivos, de lenguaje, lectura y aprendizaje.

¿CÓMO CUMPLIR?

ASEGURAR QUE LOS USUARIOS PUEDEN SELECCIONAR EL COLOR DE PRIMER PLANO Y EL COLOR DE FONDO .

Las personas con algún tipo de discapacidad visual o cognitiva necesitan tener la posibilidad de seleccionar el color del texto y el color de fondo. En ocasiones necesitan combinaciones de colores que en principio pueden no resultar obvias para las personas sin discapacidad. Por ejemplo:

• Algunas personas con baja visión necesitan combinaciones de colores con alto contraste (p. ej. texto blanco sobre fondo negro).
• Otras personas, por el contrario, pueden necesitar combinaciones con poco contraste (p. ej. texto gris oscuro sobre fondo gris claro) porque les afecta una gran luminosidad.
• Algunas personas con dificultades para percibir los colores necesitan combinaciones específicas de colores del texto y del fondo (p. ej. texto en color gris sobre fondo amarillo).

El control sobre el color y otros aspectos sobre la presentación del texto (los veremos en los siguientes requisitos) mejoran enormemente su capacidad de lectura y comprensión de los documentos.

Para cumplir este requisito tenemos varias posibilidades:

• Usar una navegador que permita cambiar el color de primer plano y del fondo de los bloques de texto.
• Proporcionar en la página una herramienta de selección de los colores de primer plano y de fondo.

Por tanto, si usamos (X)HTML no es necesario que hagamos nada para cumplir este requisito porque los navegadores ya permiten que los usuarios puedan configurar las combinaciones de colores según sus necesidades.

No obstante, si la página tiene contenido secundario para el que es necesario mantener una agrupación visual, debemos asegurarnos que dicha agrupación se mantiene cuando los usuarios cambian los colores de primer plano y los colores de fondo. Para ello podemos hacer lo siguiente:

• Especificar en las hojas de estilo el color del texto y fondo del contenido secundario, como banners o mecanismos de navegación, sin especificar un color del texto ni del fondo para el contenido principal.
• Especificar en las hojas de estilo los bordes para delimitar las áreas de contenido, sin especificar un color del texto ni del fondo para el contenido principal.

ASEGURAR QUE EL ANCHO NO ES MAYOR DE 80 CARACTERES

Algunas personas con problemas visuales o de lectura pueden tener problemas para seguir líneas largas de texto o para encontrar la línea siguiente al acabar una línea. El ancho de las líneas no debería ser superior a 80 caracteres o símbolos (40 si se trata de chino, japonés o coreano).

Para cumplir este requisito es suficiente con no interferir en la reubicación del texto cuando se disminuye el tamaño de la ventana (hasta una cuarta parte del ancho de la pantalla). El objetivo es permitir que los usuarios puedan redimensionar la ventana hasta conseguir un ancho de línea ideal sin que se produzca scroll horizontal para leer una línea de texto.

En (X)HTML y CSS los navegadores reubican automáticamente el texto cuando se redimensiona la ventana del navegador, siempre que el autor de la página no haya especificado el ancho de los contenedores en unidades absolutas (como píxeles o puntos). Por tanto, la mejor forma que tenemos de cumplir este requisito es usar unidades de medida relativas para definir el ancho de los contenedores de texto.

Por ejemplo, en CSS podemos usar porcentajes para los anchos (width):

EJEMPLO (CSS):

 1. #contenido_principal {width: 90%}  

O también, por ejemplo, unidades em junto con la propiedad max-width:

 1. #contenido_principal {max-width: 70em} 

No es obligatorio usar unidades de medida relativas para todos los contenedores, sólo para aquellos que sean los contenedores principales del contenido textual de la página. Se permite el uso de maquetaciones mixtas en las que algunos contenedores se definen con unidades relativas (contenido principal) y otros con unidades absolutas (menús, columnas con anuncios, etc.) siempre que se adapten correctamente a los diferentes tamaños de la ventana del navegador.

Lo realmente importante es que se pueda redimensionar el navegador para que las líneas de texto sean de 80 caracteres o menos sin que se requiera un scroll horizontal para leer una línea de texto.

Para cumplir este requisito es suficiente con alinear el texto sólo a un lado (text-align: left; o bien text-align: right;). En caso de que un texto tenga que estar justificado a ambos lados, debemos proporcionar un mecanismo para eliminar la justificación del texto. Por ejemplo, un botón o enlace al comienzo de la página que permita cambiar a una hoja de estilos alternativa en la que el texto no esté justificado.

ASEGURAR QUE EL ESPACIO ENTRE LÍNEAS ES AL MENOS DE UN ESPACIO Y MEDIO DENTRO DEL PÁRRAFO, Y EL ESPACIO ENTRE PÁRRAFOS ES AL MENOS 1.5 VECES MAYOR QUE EL ESPACIO ENTRE LÍNEAS

Algunas personas con discapacidades cognitivas tienen dificultad para localizar las líneas cuando están muy juntas. Por ejemplo, pueden tener problemas para encontrar la línea siguiente al terminar una línea o para reconocer los diferentes párrafos.

En la siguiente imagen se puede ver un texto de ejemplo en el que el espaciado entre líneas es insuficiente.

Por el contrario, en la siguiente imagen se usa un espaciado mayor entre líneas y párrafos de forma que se mejora la legibilidad del texto.

Para cumplir este requisito es suficiente con especificar en las hojas de estilo un espaciado entre líneas adecuado (line-height), entre 1.5 y 2 espacios. El espaciado entre párrafos lo especificaremos con sus márgenes (margin, margin-top o margin-bottom).

EJEMPLO CSS:

p {line-height: 150%; margin-bottom: 2em;} 

En caso de que la presentación por defecto de un texto tenga que tener un interlineado sencillo, debemos proporcionar un mecanismo para aumentar el espaciado entre líneas y párrafos. Por ejemplo, un botón al comienzo de la página que permita cambiar a una hoja de estilos alternativa en la que se aumente la altura de la línea y que el espacio entre párrafos sea a su vez al menos 1.5 veces mayor que el espaciado entre líneas.

Asegurar que se puede redimensionar el texto sin ayudas técnicas hasta un 200% de forma que no haya scroll horizontal para leer una línea de texto en una ventana a pantalla completa .

Las personas con baja visión, problemas cognitivos o de lectura pueden requerir aumentar el tamaño del texto. Para no dificultar su lectura no debe existir scroll horizontal para leer una línea de texto. El reescalado del texto ya lo hemos tratado en el criterio de conformidad 1.4.4, aunque entonces no se requería evitar el scroll horizontal.

El requisito de evitar el scroll horizontal no se pide para los dispositivos de pantalla pequeña, ya que puede haber palabras largas que no entren en una línea y fuercen el scroll. Este requisito se aplica a navegadores en pantallas de escritorio, con la ventana maximizada y a la resolución más usada a lo largo de los últimos años. Las URIs demasiado largas se consideran una excepción y pueden desbordar la pantalla ya que se considera que no es texto destinado a leerse.

Un tamaño de un 200% sobre el tamaño original se considera suficiente para la mayoría de los casos ya que:

• Es fácil de lograr en la mayoría de diseños y maquetaciones.
• Complementa a magnificadores de pantalla antiguos que tenían una ampliación mínima de un 200%.
• Por encima de 200% los inevitables problemas de maquetación pueden dificultar la usabilidad de la página.
• Por encima de 200% se obtienen mejores resultados con una herramienta de zoom o con un magnificador de pantalla.

Para cumplir este requisito podemos usar una maquetación líquida junto con unidades de medida relativas para el contenido. Por ejemplo, en las hojas de estilo, podemos usar las siguientes propiedades:

• %, em o nombres para especificar el tamaño del texto.
• % para el tamaño de los contenedores.

Las imágenes de texto sólo se utilizan como simple decoración o cuando una forma de presentación particular del texto resulta esencial para la información transmitida.

Nota: Los logotipos (textos que son parte de un logo o de un nombre de marca) se consideran esenciales.

Objetivo:

Crear presentaciones para formatos específicos de texto de forma que los usuarios que necesiten una presentación determinada del texto la puedan ajustar a sus necesidades.

Algunas personas, para poder percibir o comprender la información textual, requieren que el texto se muestre con una determinada fuente, tamaño, color de fondo y primer plano, alineación o espaciado entre líneas. Si la información textual se transmite mediante imágenes los usuarios no podrán modificar la presentación del texto para adecuarla a sus necesidades.

En el criterio de conformidad 1.4.5, de nivel AA, se admitía que si con la tecnología empleada no podíamos lograr la presentación visual deseada para el texto, entonces podíamos usar imágenes de texto en vez de texto. En este criterio de conformidad no se contempla dicha posibilidad. La única excepción es cuando la presentación del texto es esencial para transmitir la información.

Beneficiarios:

Beneficia a personas con baja visión, con dificultades para leer texto o con problemas cognitivos que afectan a la capacidad de lectura.

¿CÓMO CUMPLIR?

Se emplean las mismas técnicas que para el criterio de conformidad 1.4.5, de nivel AA, con la única variación de que en este criterio de conformidad no se contempla el caso del uso de imágenes de texto para lograr presentaciones del texto no reproducibles mediante CSS.