UNIDAD 2. PRINCIPIO 1.

PERCEPTIBLE EN NIVEL AA INTRODUCCIN Este principio tiene como objetivo que toda la informacin y los componentes de la interfaz de usuario se le presenten a este de forma que pueda percibirlos a travs de los sentidos. decir, estos datos no pueden Es

pasar

desapercibidos para todos los sentidos del usuario. Este principio es conformado por cuatro pautas:
Tomada de: http://ticsaudioforos.files.wordpress.com/2010/02

Pauta 1. Alternativas textuales: Todo contenido no textual puede convertirse en otros formatos que las personas necesiten para evitar que la informacin no sea percibida por el usuario. De esta manera se podr utilizar textos para describir imgenes, audio, video u otros objetos que lo requieran. Incluso se adapta a lectores de pantalla.

Pauta 2. Medios tempodependientes. Consiste en contenido dependiente del tiempo es decir, audio y video donde puede implementar el uso de transcripciones textuales, subtitulado, audiodescripciones o interpretacin en lengua de seas, para que sea accesible.

Pauta 3. Adaptable. Consiste en que el contenido se pueda adaptar a diferentes formas sin perder informacin para cualquier tipo de usuario desde los que utilizan lectores de pantalla hasta dispositivos mviles, tambin software desactualizado.

Pauta 4. Distinguible. Se trata de que los usuarios vean y oigan el contenido completamente. Puede utilizarse prcticas como:

Uso adecuado del color semntico (color que transmite informacin). Relacin adecuada de contraste y brillo. Tamao del texto configurable. Formato del texto configurable.

A continuacin, se da a conocer en detalle cada una de las pautas.

Pauta 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, smbolos o en un lenguaje ms simple. El objetivo de las alternativas textuales es proporcionar al usuario contenido equivalente y accesible en caso de que no se pueda mostrar el otro tipo de

contenido no textual. Es decir, si en la pgina web se utiliza contenido no textual como imgenes, audio, video, objetos Flash, applets de Java, 3D u otros, se debe asegurar que todos esos elementos estn respaldados con una descripcin textual de su contenido, para que las personas que no los puedan percibir no dejen de recibir la informacin que transmiten. Esta alternativa estar disponible para ser usada por las tecnologas de apoyo como lectores de pantalla.

Contenido no textual (Nivel A)

Todo contenido no textual que se presenta al usuario y tiene una alternativa textual que cumple el mismo propsito, excepto en las situaciones enumeradas a continuacin:

Controles, entrada de datos. Contenido multimedia tempodependiente. Pruebas. Sensorial. Captcha. Decoracin, formato, invisible.

Qu pretende? Asegurar que cualquier tipo de informacin transmitida mediante contenido no textual tenga uno textual. Los lectores de pantalla y los navegadores web detectan la presencia de imgenes y de contenido no textual a travs de sus correspondientes etiquetas, pero no interpretan su contenido. Es decir, pueden identificar una imagen, pero no pueden interpretar la informacin que esta proporciona. Por ello, es importante saber proveer siempre Q una alternativa textual que le permite a los navegadores y tecnologas de apoyo encontrar una descripcin alternativa de los elementos.

A quin puede beneficiar? Puede beneficiar a las personas que no puedan percibir este tipo de contenido debido a limitaciones sensoriales o a aquellos que no cuenten con la tecnologa apropiada para visualizar este tipo de contenido, como por ejemplo personas ciegas, con baja visin o sordas; tambin, a aquellos con velocidades bajas de conexin (mdem de 56k) o cuyos navegadores no cuenten con los plugins adecuados (Flash, Java, audio, video). Adems, se beneficia el posicionamiento en los buscadores debido a que estos no pueden indexar contenido no textual.

Buenas prcticas para cumplir con este criterio

Proporcionar alternativas textuales en las imgenes con el atributo alt. Debe

proporcionarse un texto alternativo a las imgenes, siempre que estas sean

utilizadas para dar informacin y no como elementos decorativos. El texto alternativo de una imagen se proporciona mediante el
Imagen tomada de: http://www.flickr.com atributo alt; y brida contenido no textual (Nivel A) a travs el atributo alt.

Objetos Flash y applets

Cuando se incluyan elementos mediante la etiqueta <object> (imgenes, videos, aplicaciones, etc.) debe ofrecerse contenido alternativo dentro de la etiqueta, que ser visualizado por el navegador o detectado por la ayuda tcnica si el objeto no es visualizado.

Por ejemplo: <object type="application/x-shockwave-flash" data="swf/grafica_estadisticas.swf" height="200" width="300"> Ac debe agregarse el contenido textual alternativo.

</object>

En el caso de los applets de Java, deben proporcionarse las alternativas textuales mediante el atributo <alt> y dentro del cuerpo de la etiqueta <applet>.

Por ejemplo:
<applet code="nombre.class" width="300" height="300" alt="Applet Java: descripcin del applet">En este lugar se ubica el contenido alternativo del applet.</applet>

Descripciones completas de las imgenes cuando el texto alternativo no resulte suficiente Cuando la informacin que transmite una imagen es tan compleja que no resulta suficiente con la descripcin de la alternativa textual deber utilizarse el atributo longdesc para ofrecer una descripcin completa de la imagen en una pgina independiente.

En el atributo longdesc se indica la URL de la pgina que contiene la descripcin larga de la imagen. Ejemplo:
<applet code="nombre.class" width="300" height="300" alt="Applet Java: descripcin del applet">En este lugar se ubica el contenido alternativo del applet.</applet>

Ejemplo:

Porcentaje de uso de los principales navegadores en Amrica Latina

<img src="/images/browsers_statistics.jpg" alt="Porcentaje de uso de los principales navegadores en Amrica Latina" longdesc="browsers_statistics.html" />

Controles de un formulario con su correspondiente etiqueta La etiqueta <label> sirve para relacionar el texto que funciona como etiqueta de los controles de formulario y el control mismo a travs del atributo for. Para realizar esta relacin, recuerde que el valor de este atributo debe ser igual al -*valor del atributo id en el control del formulario y que este id debe ser nico. Deben usarse las etiquetas <label> para los controles de formulario <textarea>, <select> e <input> del tipo"text", "checkbox", "radio", "file" y "password".

No se debe usar para los siguientes elementos:

<button> : su contenido funciona como etiqueta. <input> de tipo "image" : el atributo alt funciona como etiqueta. <input> de tipo "submit" y "reset" : el atributo value funciona como etiqueta.

Por ejemplo:

<form method="post" action="#" id="formulario"><fieldset> <legend>Contctenos</legend><br> <label for="email"><p>Email</p> <input name=" email " tabindex="1" accesskey="e" id="email"></label><br> <label for="consulta"><p>Motivo de la consulta</p> <select value="0" name="consulta" tabindex="2" accesskey="c" id="consulta"><optgroup label="Informacin sobrecursos"> <option value="becas">Becas</option> <option value="oferta">Oferta</option></optgroup><optgroup

label="Calendario"><option value="inscripciones">Inscripciones</option> <option value="matriculaciones">Matrculas</option></optgroup></select> <p>Relacin con la Institucin <label for="estudiante"></label></p> <input name="estudiante" tabindex="3" accesskey="d" id="estudiante" type="checkbox">Estudiante</label><br> <label for=<p>"profesor"></p> <input name="profesor" tabindex="4" accesskey="c" id="profesor"
type="checkbox">Profesor</label><p></p> <input name="Enviar" value="Enviar" tabindex="5" accesskey="e" type="submit"> </fieldset><br>

El Captcha

El Captcha es un tipo de test usado en los sitios web para diferenciar entre humanos y mquinas. El ms usado es incluir en una imagen letras o frases con algn tipo de distorsin en donde, en teora, solo un humano podra reconocerlas y reescribirlas. Se utiliza para evitar que los robots de spam puedan mandar spam al sitio web a travs de los formularios o para impedir envos
Ejemplo de un CAPTCHA con opciones de ayuda, pronunciacin y actualizacin de la imagen.

accidentales

de

un

diligenciamiento.

Desafortunadamente, este tipo de test tambin impide el acceso a los usuarios que no pueden ver la imagen, por lo tanto, cuando se use un Captcha debe proporcionarse una alternativa sensorial, como puede ser la reproduccin en audio y una opcin textual que indique a la persona cmo utilizar el mismo.

Contenido decorativo a travs de las hojas de estilo

Recuerde que todo el contenido decorativo como colores, imgenes, logos, conos y otros debern ser incluidos en las hojas de estilo y no mezclarlos directamente con el contenido.

Tomar en cuenta que las imgenes que s aportan informacin al usuario deben ser incluidas en el HTML con la etiqueta <img> y deben contar con texto alternativo y descripcin larga (de ser necesario), pero las imgenes decorativas debern ser usadas siempre desde la hoja de estilos.

Pauta 2. Medios Tempodependientes

Se entiende por medio tempodependiente a aquellos elementos que muestran su contenido en funcin del tiempo. Por ejemplo, una animacin, un audio o un video son medios tempodependientes, pues ofrecen un fragmento de informacin en cada instante de tiempo.

Para hacer accesible la informacin mediada por este tipo de contenido debe asegurare el uso de transcripciones textuales, subtitulado, audiodescripciones o interpretacin en lengua de seas. Observe algunos recursos para esta pauta:

Solo audio y solo video (grabado) - Nivel A: para contenido solo audio grabado y contenido solo video grabado se cumple lo siguiente, excepto cuando el audio o el video es un contenido multimedia alternativo al texto y est claramente identificado como tal.

Solo audio grabado: se proporciona una alternativa para los medios tempodependientes, que presenta informacin

equivalente para el contenido solo audio grabado.

Solo video grabado: se proporciona una alternativa para los medios tempodependientes o se proporciona una pista sonora, que presenta informacin equivalente al contenido del medio de solo video grabado.

A quin puede beneficiar? Qu pretende? Que la informacin proporcionada por el contenido pregrabado (solo audio o solo video) est disponible para todos los usuarios en otros formatos. Beneficia a los usuarios con dificultad o limitacin para percibir o comprender la informacin visual y/o auditiva, incluso a aquellos con limitantes tcnicas que les impidan acceder a esos contenidos. Tambin beneficia a los motores de bsqueda y al posicionamiento, dado que los robots de los buscadores no pueden indexar contenido que no sea textual.

Subttulos (grabados) - Nivel A

Se proporcionan subttulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentacin es un contenido multimedia alternativo al texto y est claramente identificado como tal.

Ac debe agregarse el contenido textual alternativo.

Qu pretende? Que las personas con limitaciones auditivas o aquellas a quienes sus recursos tcnicos les impidan escuchar la pista de audio del material de video original puedan acceder a este contenido en forma de guiones de texto, sin perder informacin.

A quin puede beneficiar?

A las personas con problemas de audicin o que no pueden acceder al contenido de audio de un sitio web por problemas tcnicos.

10

Audiodescripcin o medio alternativo (grabado) - Nivel A

Se proporciona una alternativa para los medios tempodependientes o una audiodescripcin para el contenido del video grabado en los multimedia sincronizados, excepto cuando este contenido es un contenido multimedia alternativo al texto y est claramente identificado como tal.

Imagen tomada de: http://www.flickr.com

Qu pretende? A quin puede beneficiar? A las personas que puedan tener limitaciones visuales parciales o totales. Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacin, a travs de una audiodescripcin del video, o que al menos dispongan de una trascripcin textual completa.

11

Subttulos (directo) - Nivel AA Se proporcionan subttulos para todo el contenido de audio en directo de los multimedia sincronizados.

Imagen tomada de: http://www.flickr.com

A quin puede beneficiar? A las personas con limitaciones auditivas totales o parciales, o a aquellos usuarios que por limitaciones tcnicas no puedan escuchar las pistas de audio.

Qu pretende? Que las personas con limitaciones auditivas puedan ver videos en tiempo real, sin perder informacin.

Audiodescripcin (grabado) - nivel AA

Se proporciona una audiodescripcin para todo el contenido de video grabado dentro de contenido multimedia sincronizado.

Imagen tomada de: http://www..devorondina.net

12

Puta 3. Adaptable Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposicin ms simple) sin perder informacin o estructura. Toda la informacin del sitio web debe estar disponible de manera que pueda ser percibida por todos los usuarios, independientemente de la forma en la que estos accedan. Por ejemplo, las personas invidentes ingresan a un sitio web con lectores de pantalla, otros con dispositivos mviles o incluso con software obsoleto. Si todos los datos del sitio estn disponibles de modo que sean determinados mediante software, entonces los visitantes del sitio accedern a este, con otro sistema (visual, auditiva, tctil, etctera).

Informacin y relaciones - Nivel A La informacin, la estructura y las relaciones comunicadas a travs de la presentacin pueden ser determinadas por software o estn disponibles como texto.

Imagen tomada de: http://www.flickr.com

A quin puede beneficiar? A personas con diferentes limitaciones sensoriales, al permitir que los distintos agentes de usuario interpreten el contenido de acuerdo a las necesidades del usuario.

Qu pretende? Que la informacin transmitida a travs de la presentacin tambin est disponible cuando se cambie el medio de presentacin, por ejemplo, al acceder con un lector de pantalla.

13

A continuacin, las buenas prcticas para cumplir con este criterio: Marcar correctamente la estructura del contenido html por medio de encabezados

Los encabezados definen la estructura principal de un sitio web, dividindolo en diferentes secciones y subsecciones de contenido. Usar los elementos de encabezado (<h1> -<h6>) para marcar los ttulos de las diferentes secciones en las que se divide el sitio web de manera jerrquica.

Marcar correctamente las tablas de datos

Ya se sabe que cuando una persona con limitacin visual navega por una pgina lo hace mediante un lector de pantalla, que es un software que le permite escuchar el contenido de la pgina. Las tablas que presentan datos relacionados pueden

ofrecer barreras de accesibilidad si no se marca correctamente el contenido en esta.

Para hacer ms accesible una tabla de datos debe asociarse cada celda a su columna de datos correspondiente (a travs del atributo headers de cada elemento <td> ).

14

De esta forma, una ayuda tcnica podr asociar correctamente la informacin en filas y columnas especificando a qu columna corresponde cada dato ledo.

Adicionalmente, debe agregarse un resumen de la tabla mediante el atributo summary y definir el ttulo de la tabla de datos mediante la etiqueta <caption>, evitando siempre crear ttulos falsos mediante otra etiqueta.

Por ejemplo:
<table summary="En la siguiente tabla se presenta una relacin de los empleados asignados a la nmina en el mes de julio."> <caption>Nmina del mes de julio de 2011</caption> <tr> <th id="columna_nombre">Nombre</th> <th id="columna_apellidos">Apellidos</th> </tr> <tr> <td headers="columna_nombre">Nombre persona 1</td> <td headers="columna_apellidos">Apellidos persona 1</td> </tr> <tr> <td headers="columna_nombre">Nombre persona 2</td> <td headers="columna_apellidos">Apellidos persona 2</td> </tr> <tr> <td headers="columna_nombre">Nombre persona 3</td> <td headers="columna_apellidos">Apellidos persona 3</td> </tr> <tr> <td headers="columna_nombre">Nombre persona 4</td> <td headers="columna_apellidos">Apellidos persona 4</td> </tr> </table>

15

Marcar correctamente los formularios

Los

formularios

son

elementos

muy

importantes en una pgina web, pues permite a los usuarios enviar informacin y al administrador le permite capturar

informacin consignada por los visitantes.

Con el

fin de que todos puedan utilizar

correctamente los formularios en el sitio web, deben seguirse estas

recomendaciones para cumplir con las pautas de accesibilidad referentes a los formularios y a sus elementos.

Es importante recordar que siempre se debe etiquetar explcitamente los controles que formen parte del formulario a travs de la etiqueta <label>, la cual se utiliza para relacionar directamente el texto asociado a un campo de un formulario con el campo en s. Esta asociacin le permite a los lectores de pantalla interpretar los contenidos correctamente, refiriendo cada etiqueta a su control correspondiente. Cada control (input) se identifica con el atributo id, que debe coincidir con el atributo for de la etiqueta label a la que va asociado y ser nico. Para los campos de texto (text, textarea y select) debe agregarse la etiqueta label a la izquierda del control, mientras que en los campos de tipo radio y checkbox deber agregarse a la derecha del campo. Hay que tener en cuenta que los campos de tipo submit, reset button no requieren asociacin mediante label, pues estn implcitamente etiquetados mediante sus atributos.

16

Otra buena prctica es agrupar la informacin cuando sea necesario, por ejemplo, agrupando controles de formulario segn su funcin mediante el elemento FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da ttulo a la agrupacin) para organizar semnticamente los formularios complejos. Tambin se pueden agrupar los elementos de un men cuando este contenga una gran

cantidad de opciones y estas se puedan categorizar; en este caso los deber agrupar utilizando el elemento OPTGROUP, especificando una etiqueta para el grupo de opciones con el atributo label en OPTGROUP. Como se sabe, todos los usuarios no entran a una web con un navegador estndar, incluso algunos ni siquiera utilizan un mouse, lo que le obliga a crear accesos con el teclado para que los visitantes puedan ingresar a todos los campos del formulario con este dispositivo de entrada. Para agregar la accesibilidad por teclado se tienen principalmente dos opciones: a travs del atributo accesskey, que genera un medio de asequibilidad con una tecla determinada a cualquier campo del formulario y con el elemento tabindex, que es una variable que indica el orden que debe seguir la tabulacin. Por ejemplo:
<form method="post" action="#" id="formulario"><fieldset> <legend>Contctenos</legend><br> <label for="email"><p>Email </p> <input name=" email " tabindex="1" accesskey="e" id="email"></label><br> <label for="consulta"><p>Motivo de la consulta</p> <select value="0" name="consulta" tabindex="2" accesskey="c" id="consulta"><optgroup label="Informacin sobre cursos"> <option value="becas">Becas</option><option value="oferta"> Oferta</option></optgroup><optgroup label="Calendario"> <option value="inscripciones">Inscripciones</option> <option value="matriculaciones">Matrculas</option></optgroup></select>

17

<p>Relacin con la Institucin <label for="estudiante"></label></p> <input name="estudiante" tabindex="3" accesskey="d" id="estudiante" type="checkbox">Estudiante</label><br> <label for=<p>"profesor"></p> <input name="profesor" tabindex="4" accesskey="c" id="profesor" type="checkbox">Profesor</label> <input name="Enviar" value="Enviar" tabindex="5" accesskey="e" type="submit"> <p></p></fieldset><br> </form>

Secuencia significativa - Nivel A A quin puede beneficiar? A las personas que por una limitacin visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web. Qu pretende? Lograr que los agentes de usuario puedan interpretar correctamente el contenido, manteniendo un orden de lectura correcto, de forma que el orden de presentacin de los elementos no cambie el significado del contenido que se presenta al usuario.

Buenas prcticas para cumplir con este criterio Ordenar correctamente el contenido siguiendo una secuencia lgica Si bien mediante las hojas de estilo se puede lograr el posicionamiento visual de los elementos que componen un sitio web y definir el orden visual y jerrquico, debe tenerse en cuenta que para los usuarios que utilizan el lector de pantalla, la presentacin del sitio no les ofrece
Imagen tomada de: http://www.flickr.com

18

informacin relevante y la navegacin se basa nicamente en la definicin semntica del contenido HTML.

Por esto, se recomienda desactivar las hojas de estilo del sitio web y verificar que an sin estar estas herramientas, es posible navegar fcil y correctamente por el sitio, pudiendo definir claramente la estructura del mismo, el men de navegacin, la lista de enlaces, las tablas de datos, los formularios y dems elementos que componen el sitio web.

Caractersticas sensoriales - Nivel A

Imagen tomada de: http://www.flickr.com

Las instrucciones proporcionadas para entender y operar el contenido no dependen exclusivamente de las caractersticas sensoriales de los componentes como su forma, tamao, ubicacin visual, orientacin o sonido.

19

A quin puede beneficiar? A las personas con limitacin parcial o total de la visin, quienes dependen de lectores de pantalla para acceder al contenido web.

Qu pretende? Que todos los usuarios puedan acceder al contenido web y comprender las instrucciones para usarlo, incluso cuando no puedan percibir visualmente el contenido. Debido a que algunas personas acceden a un sitio web con software lector de pantalla y estn imposibilitados para percibir la forma y contenido visual de este sitio, total o parcialmente, hay que asegurarse de que estos usuarios puedan acceder a todo el contenido y comprender la forma en que funciona sin depender de caractersticas netamente visuales como el color, la forma o la orientacin del contenido.

Distinguible Facilitar a los usuarios ver y or el contenido, incluyendo la separacin entre el primer plano y el fondo.

Para

garantizar

que

los

usuarios

puedan

acceder

comprender el contenido visual del sitio web, debe prestrsele especial atencin a las siguientes prcticas:
Imagen tomada de:http://www.flickr.com

Uso adecuado del color semntico (color que transmite informacin).

Relacin adecuada de contraste y brillo. Tamao del texto configurable. Formato del texto configurable.

20

Uso del color - Nivel A El color no se usa como nico medio visual para transmitir la informacin, indicar una accin, solicitar una respuesta o distinguir un elemento visual.

A quin puede beneficiar? A las personas con limitaciones de visin o problemas de percepcin del color.

Qu pretende? Que todos los usuarios puedan acceder a la informacin que transmite el color de los elementos del sitio web, an cuando tengan problemas para percibir estos colores. Es comn utilizar el color para transmitir informacin a los usuarios de la pgina, pero debe tener claro que algunos usuarios no pueden diferenciar determinados colores o incluso percibirlos, por lo que debe asegurarse de que ellos puedan interpretar la informacin correctamente.

Buenas prcticas para cumplir con este criterio Proporcionar informacin alternativa textual adems del color

Es una prctica adecuada que utiliza el color para transmitir informacin al usuario, como por ejemplo, los mensajes que la pgina le muestra a este tras una accin. Se debe asegurar que el mensaje no pierda sentido si no se puede percibir el color. Es decir en el mensaje de error que pueda aparecer a un visitante tras una accin equivocada en la pgina web, como un registro fallido en un formulario:

21

ERROR: el nombre de usuario que eligi ya est en uso. Por favor, pruebe con uno diferente.

En el ejemplo anterior, el texto ERROR, en negrilla y en color rojo, llamara la atencin de inmediato para el usuario que pueda interpretar la informacin semntica que transmite ese color (alerta, error), pero no para alguien que no pueda percibirlo. Por ello, es necesario marcar correctamente el cdigo HTML de manera que se pueda trasmitir esa informacin al visitante por otros medios: <div id="username_error"><p><span class="error"><strong> ERROR:</strong></span>El nombre de usuario que eligi ya est en uso. Por favor, pruebe con uno diferente. </p></div>

En este caso, la etiqueta <strong> hace nfasis en la palabra ERROR, resaltndola semnticamente en la frase.

Control del audio - Nivel A

Si el audio de una pgina web suena automticamente durante ms de tres segundos, se proporciona ya sea un mecanismo para pausar o detener el audio o una manera 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 pgina web en su conjunto, todo contenido de esta (tanto si cumple o no otros con criterios de conformidad) debe satisfacer este criterio.

22

Qu pretende? Evitar que el sonido reproducido en la pgina interfiera con la sintetizacin de voz por parte del lector de pantalla. Debe tenerse en cuenta que si en la pgina se reproduce cualquier sonido procedente de videos, archivos de audio, banners o publicidad, estos sonidos pueden interferir de tal forma la navegacin con lector de pantalla que pueden llegar a imposibilitarla.

A quin puede beneficiar?

A usuarios que utilizan lectores de pantalla.

Buenas prcticas para cumplir con este criterio Apagar automticamente el sonido al cabo de tres segundos

Solamente debe reproducir sonidos automticos en una pgina si estos no duran ms de tres segundos, el cual es tiempo suficiente para no generar interferencias con el lector de pantalla.

Proporcionar un medio para que los usuarios controlen el sonido Si el sonido de la pgina no puede apagarse automticamente al cabo de tres segundos, deber ofrecerse al usuario un control accesible, incluso por teclado,

23

que le permita controlar la reproduccin del sonido.

Proporcionar un medio para que los usuarios controlen el sonido Lo mejor es no reproducir sonidos automticamente y permitir a los usuarios que sean ellos quienes reproduzcan los sonidos que deseen, ofrecindoles controles adecuados para hacerlo.

Contraste (mnimo) - Nivel AA La presentacin visual de texto e imgenes de texto tiene una relacin de contraste de al menos, 4,5:1, excepto en los siguientes casos:

Textos grandes: Los textos y las imgenes de texto de gran tamao tienen una relacin de contraste de al menos, 3:1.

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

Luck
Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mnimo.+

24

Imagen tomada de: http://www.flickr.com

A quin puede beneficiar? A personas con deficiencias visuales como miopa o problemas de percepcin del color.

Qu pretende? Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visin puedan leer correctamente el texto. Debe tomarse en cuenta que muchas personas sufren limitaciones de visin que les puede dificultar la percepcin de ciertos colores o que les dificulta la lectura del texto si este no tiene el suficiente contraste con el fondo, como por ejemplo, personas con miopa o quienes leen en situaciones de iluminacin deficiente o con limitaciones debidas al cansancio.

Buenas prcticas para cumplir con este criterio

Asegurar que el contraste entre el primer plano y el fondo sea el adecuado El color juega un papel importante en el diseo de un sitio web; el uso adecuado de las tonalidades permitir que la web sea accesible o por el contrario, la har difcil de usar incluso por usuarios sin limitaciones visuales.

La forma de controlar la combinacin de colores en el sitio web es verificando la relacin entre contraste y brillo. Esta relacin indica que la diferencia de brillo entre el primer plano (texto) y el fondo debe ser superior a 125 y la relacin de contraste superior a 500.

25

Existe una herramienta de software muy til que permite seleccionar los colores del sitio web y analizar la diferencia de brillo y contraste. Esta herramienta gratuita es Contrast Colour Analyzer y se puede descargar desde la pgina del proyecto: http://www.visionaustralia.org.au/info.aspx?page=628

Cambio de tamao del texto - Nivel AA

Qu pretende? Que los textos en un sitio web se puedan redimensionar para ser ledos por personas con deficiencias de visin o cuando el texto de la pgina es de tamao reducido. Se recomienda maquetar el sitio web a travs de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales. El tamao debe establecerse en unidades relativas y no absolutas, garantizando que el usuario pueda al menos aumentar el tamao en un 200%, sin que la pgina pierda legibilidad. La mayora de navegadores modernos permiten el acercamiento del texto en web a travs de la combinacin de teclas CTRL+, aunque es deseable que Por se ejemplo: suministren controles para que este pueda aumentar directamente en la pgina el tamao del texto.

A quin puede beneficiar? Beneficia a personas con problemas visuales para leer el texto pequeo.

26

Imgenes de texto - Nivel AA

Imgenes de texto: Si con las tecnologas que se estn utilizando se puede conseguir la presentacin visual deseada, se utiliza texto para transmitir la informacin en vez de imgenes de texto, excepto en los siguientes casos:

Configurable: La imagen de texto es visualmente configurable segn los requisitos del usuario.

Esencial: Una forma particular de presentacin del texto resulta esencial para la informacin que se transmite.

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

Las imgenes transmiten informacin importante a los usuarios y se

sabe que

algunos de ellos no pueden percibirlas, por lo que hay que ofrecer alternativas textuales. Pero, en algunos casos, es el mismo texto el que se presenta como imagen, como por ejemplo en logotipos, botones, documentos escaneados, banners, capturas de pantalla, etctera.

En estas situaciones, las personas que tienen dificultades para percibir las imgenes tambin tendrn dificultad para leer el texto que estas representan. Por este motivo se recomienda evitar al mximo utilizar imgenes como texto y utilizar todas las posibilidades que ofrecen las hojas de estilo CSS para dar la apariencia que se busca en el texto (siempre que resulte accesible).

27

En los casos en los que no tenga otra opcin que usar una imagen de texto como en logos, textos escaneados, capturas de pantalla, etc. (excepto en los casos de imgenes decorativas o que no transmitan informacin relevante) debe ofrecerse al usuario una alternativa textual a travs de los atributos alt y longdesc, segn sea el caso. Qu pretende? Que el texto transmitido en forma de imgenes sea legible para los usuarios y de no ser as, que se ofrezca una alternativa textual. Cabe anotar que debe evitar al mximo el uso de imgenes como texto, salvo en casos en donde no sea posible reemplazarlas. A quin puede beneficiar? A todas las personas con baja visin, con dificultades para leer texto o que utilicen lectores de pantalla.

REFERENCIAS

Instituto Colombiano de Normas Tcnicas y Certificacin. (2011). Accesibilidad a Pginas Web: NTC 5854.Bogot, Colombia. ICONTEC. Programa Agenda de Conectividad, Estrategia de Gobierno en lnea. (2011). Manual 3.0 para la Implementacin de la Estrategia de Gobierno en Lnea En las Entidades del Orden Nacional de la Repblica de Colombia. Bogota, Colombia. Ministerio de Tecnologas de la Informacin y las Comunicaciones. Programa Gobierno en lnea, agenda de conectividad.(2011). Curso Diseo y Desarrollo de sitios web accesibles para Diseadores y Programadores.pdf. Colombia. Ministerio de Tecnologas de la Informacin y las Comunicaciones. WC3. (diciembre de 2008). Web Content Accessibility Guidelines WCAG 2.0: Recomendacin del W3C del 11 de diciembre de 2008. En: http://www.w3.org/TR/WCAG20/

28

Control del documento Nombre Ministerio de Tecnologas de la Informacin y la Comunicacin y Programa Gobierno en Lnea. Cargo Dependencia Fecha 2011

Autores

Comunicadora Centro 22 de Luz Clarena Arias social Agroindustrial Agosto de Gonzlez Guionista lnea Regional 2012 de produccin Quindo Revisin y ajustes Comunicadora Centro 25 de social - Lder Agroindustrial agosto de Ana Mara Mora Jaramillo guionistas lnea Regional 2012 de produccin Quindo

29