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. Es decir, estos datos no pueden pasar desapercibidos
para todos los sentidos del usuario.
Este principio es conformado por cuatro pautas:

Fuente: (Fotolia, 2004)

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
Consiste en 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

Fuente: (Fotolia, 2004)

Proporcionar alternativas textuales para cualquier contenido no textual para que

pueda transformarse en otras formas que la gente necesita, tales como letra
grande, braille, voz, smbolos o un lenguaje ms sencillo (W3C, 2008).

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

Fuente: (Fotolia, 2004)

Todo contenido no textual que se presenta al usuario tiene un texto alternativo

que sirve al propsito equivalente, con excepcin de las situaciones enumeradas
a continuacin (W3C, 2008).

Controles y entrada de datos.

Contenido multimedia tempodependiente.
Pruebas.
Sensorial.
Captcha.
Decoracin, formato e 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 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 y 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 atributo alt y brinda
contenido no textual (Nivel A) a travs mismo
atributo.
Fuente: (Fotolia, 2004)

Objetos flash y applets

Cuando se incluyan elementos mediante la etiqueta <object> (imgenes, videos,
aplicaciones, entre otros) 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/grfica_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>

Porcentaje de uso de los principales navegadores en Amrica Latina:

Fuente: (Conctica, 2010)

<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 sobre programas de formacin">
<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="aprendiz"></label></p>
<input name="aprendiz" tabindex="3" accesskey="d" id="aprendiz"
type="checkbox">Aprendiz</label><br>
<label for=<p>"instructor"></p>
<input name="instructor" tabindex="4" accesskey="c" id="instructor"
type="checkbox">Instructor</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, slo 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 accidentales de un
diligenciamiento.
El siguiente es un ejemplo de un Captcha con opciones de ayuda, pronunciacin y

actualizacin de la imagen:

Fuente: (Goldweb, 2010)

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:

Slo audio y slo video (grabado) - Nivel A: para contenido slo audio
grabado y contenido slo 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: (Nivel A).
Slo audio grabado: se proporciona una alternativa para los medios
tempodependientes que presenta informacin equivalente para el
contenido slo audio grabado.
Slo 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 slo video grabado.
(W3C, 2010)

Fuente: (Fotolia, 2004)

Qu pretende?
Que la informacin proporcionada por el contenido pregrabado (slo audio o
video) est disponible para todos los usuarios en otros formatos.

A quin puede beneficiar?

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
(Sidar, 2009).
En este momento se 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.

Audiodescripcin o medio alternativo (grabado) - Nivel A

Fuente: (Fotolia, 2004)

Se proporciona una alternativa para los medios tempodependientes o una

audiodescripcin para el contenido de vdeo grabado en los multimedia
sincronizados, excepto cuando ese contenido es un contenido multimedia
alternativo al texto y est claramente identificado como tal (Sidar, 2009).

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.

Subttulos (directo) - Nivel AA

Se proporcionan subttulos para todo el contenido de audio en directo de los
multimedia sincronizados (Sidar, 2009).

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 (Sidar, 2009).

Fuente: (Fotolia, 2004)

Pauta 3. Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con
una disposicin ms simple) sin perder informacin o estructura (Sidar, 2009).
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, auditivo, tctil, entre otros).
Informacin y relaciones - Nivel A
La informacin, estructura y relaciones comunicadas a travs de la presentacin
pueden ser determinadas por software o estn disponibles como texto (W3C,
2010).
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.

A continuacin se describen 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
lo hace mediante un lector de pantalla, que es
escuchar el contenido de la pgina. Las tablas que
pueden ofrecer barreras de accesibilidad si no
contenido en esta.

visual navega por una pgina

un software que le permite
presentan datos relacionados
se marca correctamente el

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>).
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>

Marcar correctamente los formularios

Fuente: (Fotolia, 2004)

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 y reset button no requieren asociacin mediante label, pues
estn implcitamente etiquetados mediante sus atributos.
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 programas de formacin">
<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="aprendiz"></label></p>
<input name="aprendiz" tabindex="3" accesskey="d" id="aprendiz"
type="checkbox">Aprendiz</label><br>
<label for=<p>"instructor"></p>
<input name="instructor" tabindex="4" accesskey="c" id="instructor"
type="checkbox">Instructor</label>
<input name="Enviar" value="Enviar" tabindex="5" accesskey="e"
type="submit">
<p></p></fieldset><br>
</form>
Secuencia significativa - Nivel A

Qu pretende?
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.

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

Fuente: (Fotolia, 2004)

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 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, definiendo 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

Fuente: (Fotolia, 2004)

Las instrucciones proporcionadas para entender y operar el contenido no

dependen exclusivamente en las caractersticas sensoriales de los componentes
como su forma, tamao, ubicacin visual, orientacin o sonido (Sidar, 2009).

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.

Pauta 4. Distinguible
Facilitar a los usuarios ver y or el contenido, incluyendo la separacin entre el
primer plano y el fondo (Sidar, 2009).
Para garantizar que los usuarios puedan acceder y comprender el contenido visual
del sitio web, debe prestrsele especial atencin a las siguientes prcticas:

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

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

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 (Sidar, 2009).

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:
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 o 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 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 pgina
en su conjunto, todo contenido de la pgina web (tanto si satisface o no
otros criterios de conformidad) debe satisfacer este criterio. (Sidar, 2009)

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 despus 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,
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 de gran tamao 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.
Logotipos: el texto que forma parte de un logo o nombre de marca no
tiene requisitos de contraste mnimo. (Sidar, 2009)

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.
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
se 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 texto pequeo.

Por ejemplo:
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. (Sidar, 2009)

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, entre otros.
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).
En los casos en los que no tenga otra opcin que usar una imagen de texto como
en logos, textos escaneados, capturas de pantalla, entre otros (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
Accesibilidad a pginas web (NTC 5854). (2011, 15 de julio). Instituto
Colombiano de Normas Tcnicas y Certificacin (ICONTEC), 2011, 15 de julio.
Conctica. (2010). Internet Explorer supera a Firefox como el navegador web
ms
utilizado.
Consultado
el
10
de
abril
de
2014,
en
http://conectica.com.mx/2010/02/04/internet-explorer-supera-a-firefox-como-elnavegador-web-mas-utilizado/
Fotolia. (2004). Blind. Consultado
http://co.fotolia.com/id/49091473

el

30

de

abril

de

2014,

en

Fotolia. (2004). Cinema design. Consultado el 30 de abril de 2014, en

http://co.fotolia.com/id/64163044
Fotolia. (2004). Clapper board, film reel and filmstrip. Consultado el 30 de abril
de 2014, en http://co.fotolia.com/id/52016193
Fotolia. (2004). Equalizzatore Grafico, frequenza, amplificatore, spettrogramma.
Consultado el 30 de abril de 2014, en http://co.fotolia.com/id/53762242
Fotolia. (2004). Friendly female helpline operator with computer. Consultado el
30 de abril de 2014, en http://co.fotolia.com/id/64335734
Fotolia. (2004). Headphone isolated on white. Consultado el 30 de abril de 2014,
en http://co.fotolia.com/id/64396687
Fotolia. (2004). Music icons. Consultado el 30 de abril de 2014, en
http://co.fotolia.com/id/64176926
Fotolia. (2004). Search of stock market on a monitor. Finance data concept.
Consultado el 30 de abril de 2014, en http://co.fotolia.com/id/57214855
Fotolia. (2004). Vector css icons. Consultado el 30 de abril de 2014, en
http://co.fotolia.com/id/64128157
Fotolia. (2004). Web site template design. Disco background. Consultado el 30
de abril de 2014, en http://co.fotolia.com/id/64044921
Fotolia. (2004). . Consultado el 30 de abril de 2014,

en http://co.fotolia.com/id/61171109
Goldweb. (2010). Ms de 15 soluciones captcha para combatir el spam.
Consultado el 10 de abril de 2014, en http://www.goldweb.es/mas-de-15soluciones-captcha-para-combatir-el-spam/
Ministerio de Tecnologas de la Informacin y las Comunicaciones. (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. Bogot,
Colombia: Ministerio de Tecnologas de la Informacin y las Comunicaciones.
Sidar. (2009). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el
10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/
Visin Australia. (2012). Color Contrast Analyser 2.2 para Pginas Web.
Consultado el 10 de abril de 2014, en http://www.visionaustralia.org/digitalaccess-cca
W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el
10 de abril de 2014, en http://www.w3.org/TR/WCAG20/
W3C. (2010). Audiodescripcin o Medio Alternativo (grabado). Consultado el 10
de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/media-equiv-audio-desc.html
W3C. (2010). Audiodescripcin o Medio Alternativo (grabado). Consultado el 10
de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/media-equiv-audio-desc.html

W3C. (2010). Informacin y relaciones. Consultado el 10 de abril de 2014, en

http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/contentstructure-separation-programmatic.html

Control del documento

Autores

Adaptacin

Nombre
Ministerio de
Tecnologas de la
Informacin y las
Comunicaciones Gobierno en Lnea
Paola Andrea
Bobadilla Gutirrez

Cargo

Dependencia

Fecha
Mayo de
2012

Guionista Lnea de
produccin

Centro
Agroindustrial
Regional Quindo

Mayo de
2014