Post on 04-Jan-2016
1
UNIDAD 2
PRINCIPIO 1 PERCEPTIBLE EN NIVEL AA
INTRODUCCIOacuteN
Este principio tiene como objetivo que toda la
informacioacuten y los componentes de la interfaz de
usuario se le presenten a este de forma que
pueda percibirlos a traveacutes de los sentidos Es
decir estos datos no pueden pasar
desapercibidos para todos los sentidos del
usuario
Este principio es conformado por cuatro pautas
Pauta 1 Alternativas textuales
Todo contenido no textual puede convertirse en otros formatos que las personas
necesiten para evitar que la informacioacuten no sea percibida por el usuario De esta
manera se podraacute utilizar textos para describir imaacutegenes 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
interpretacioacuten en lengua de sentildeas para que sea accesible
Pauta 3 Adaptable
Consiste en que el contenido se pueda adaptar a diferentes formas sin perder
informacioacuten para cualquier tipo de usuario desde los que utilizan lectores de pantalla
hasta dispositivos moacuteviles tambieacuten software desactualizado
Tomada de httpticsaudioforosfileswordpresscom201002
2
Pauta 4 Distinguible
Se trata de que los usuarios vean y oigan el contenido completamente Puede
utilizarse praacutecticas como
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
A continuacioacuten 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 siacutembolos o en un lenguaje maacutes
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 paacutegina web se utiliza contenido no textual
como imaacutegenes audio video objetos Flash applets de Java 3D u otros se debe
asegurar que todos esos elementos esteacuten respaldados con una descripcioacuten textual
de su contenido para que las personas que no los puedan percibir no dejen de
recibir la informacioacuten que transmiten Esta alternativa estaraacute disponible para ser
usada por las tecnologiacuteas de apoyo como lectores de pantalla
3
Contenido no textual (Nivel A)
Todo contenido no textual que se presenta al usuario y tiene una alternativa textual
que cumple el mismo propoacutesito excepto en las situaciones enumeradas a
continuacioacuten
bull Controles entrada de datos
bull Contenido multimedia tempodependiente
bull Pruebas
bull Sensorial
bull Captcha
bull Decoracioacuten formato invisible
Q
iquestQueacute pretende Asegurar que cualquier tipo de informacioacuten transmitida mediante contenido no textual tenga uno textual Los lectores de pantalla y los navegadores web detectan la presencia de imaacutegenes y de contenido no textual a traveacutes de sus correspondientes etiquetas pero no interpretan su contenido Es decir pueden identificar una imagen pero no pueden interpretar la informacioacuten que esta proporciona Por ello es importante saber proveer siempre una alternativa textual que le permite a los navegadores y tecnologiacuteas de apoyo encontrar una descripcioacuten alternativa de los elementos
iquestA quieacuten 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 tecnologiacutea apropiada para visualizar este tipo de contenido como por ejemplo personas ciegas con baja visioacuten o sordas tambieacuten a aquellos con velocidades bajas de conexioacuten (moacutedem de 56k) o cuyos navegadores no cuenten con los plugins adecuados (Flash Java audio video) Ademaacutes se beneficia el posicionamiento en los buscadores debido a que estos no pueden indexar contenido no textual
4
Buenas praacutecticas para cumplir con este criterio
Proporcionar alternativas textuales en las
imaacutegenes con el atributo alt Debe
proporcionarse un texto alternativo a las
imaacutegenes siempre que estas sean
utilizadas para dar informacioacuten y no como
elementos decorativos El texto alternativo
de una imagen se proporciona mediante el
atributo alt y brida contenido no textual (Nivel A) a traveacutes el atributo alt
Objetos Flash y applets
Cuando se incluyan elementos mediante la etiqueta ltobjectgt (imaacutegenes videos
aplicaciones etc) debe ofrecerse contenido alternativo dentro de la etiqueta que
seraacute visualizado por el navegador o detectado por la ayuda teacutecnica si el objeto no es
visualizado
Por ejemplo
Acaacute debe agregarse el contenido textual alternativo
ltobjectgt
En el caso de los applets de Java deben proporcionarse las alternativas textuales
mediante el atributo ltaltgt y dentro del cuerpo de la etiqueta ltappletgt
ltobject type=applicationx-shockwave-flash data=swfgrafica_estadisticasswf height=200 width=300gt
Imagen tomada de httpwwwflickrcom
5
Por ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Descripciones completas de las imaacutegenes cuando el texto alternativo no
resulte suficiente
Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta
suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo
longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina
independiente
En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten
larga de la imagen
Ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Ejemplo
Porcentaje de uso de los principales navegadores en Ameacuterica Latina
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
2
Pauta 4 Distinguible
Se trata de que los usuarios vean y oigan el contenido completamente Puede
utilizarse praacutecticas como
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
A continuacioacuten 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 siacutembolos o en un lenguaje maacutes
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 paacutegina web se utiliza contenido no textual
como imaacutegenes audio video objetos Flash applets de Java 3D u otros se debe
asegurar que todos esos elementos esteacuten respaldados con una descripcioacuten textual
de su contenido para que las personas que no los puedan percibir no dejen de
recibir la informacioacuten que transmiten Esta alternativa estaraacute disponible para ser
usada por las tecnologiacuteas de apoyo como lectores de pantalla
3
Contenido no textual (Nivel A)
Todo contenido no textual que se presenta al usuario y tiene una alternativa textual
que cumple el mismo propoacutesito excepto en las situaciones enumeradas a
continuacioacuten
bull Controles entrada de datos
bull Contenido multimedia tempodependiente
bull Pruebas
bull Sensorial
bull Captcha
bull Decoracioacuten formato invisible
Q
iquestQueacute pretende Asegurar que cualquier tipo de informacioacuten transmitida mediante contenido no textual tenga uno textual Los lectores de pantalla y los navegadores web detectan la presencia de imaacutegenes y de contenido no textual a traveacutes de sus correspondientes etiquetas pero no interpretan su contenido Es decir pueden identificar una imagen pero no pueden interpretar la informacioacuten que esta proporciona Por ello es importante saber proveer siempre una alternativa textual que le permite a los navegadores y tecnologiacuteas de apoyo encontrar una descripcioacuten alternativa de los elementos
iquestA quieacuten 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 tecnologiacutea apropiada para visualizar este tipo de contenido como por ejemplo personas ciegas con baja visioacuten o sordas tambieacuten a aquellos con velocidades bajas de conexioacuten (moacutedem de 56k) o cuyos navegadores no cuenten con los plugins adecuados (Flash Java audio video) Ademaacutes se beneficia el posicionamiento en los buscadores debido a que estos no pueden indexar contenido no textual
4
Buenas praacutecticas para cumplir con este criterio
Proporcionar alternativas textuales en las
imaacutegenes con el atributo alt Debe
proporcionarse un texto alternativo a las
imaacutegenes siempre que estas sean
utilizadas para dar informacioacuten y no como
elementos decorativos El texto alternativo
de una imagen se proporciona mediante el
atributo alt y brida contenido no textual (Nivel A) a traveacutes el atributo alt
Objetos Flash y applets
Cuando se incluyan elementos mediante la etiqueta ltobjectgt (imaacutegenes videos
aplicaciones etc) debe ofrecerse contenido alternativo dentro de la etiqueta que
seraacute visualizado por el navegador o detectado por la ayuda teacutecnica si el objeto no es
visualizado
Por ejemplo
Acaacute debe agregarse el contenido textual alternativo
ltobjectgt
En el caso de los applets de Java deben proporcionarse las alternativas textuales
mediante el atributo ltaltgt y dentro del cuerpo de la etiqueta ltappletgt
ltobject type=applicationx-shockwave-flash data=swfgrafica_estadisticasswf height=200 width=300gt
Imagen tomada de httpwwwflickrcom
5
Por ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Descripciones completas de las imaacutegenes cuando el texto alternativo no
resulte suficiente
Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta
suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo
longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina
independiente
En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten
larga de la imagen
Ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Ejemplo
Porcentaje de uso de los principales navegadores en Ameacuterica Latina
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
3
Contenido no textual (Nivel A)
Todo contenido no textual que se presenta al usuario y tiene una alternativa textual
que cumple el mismo propoacutesito excepto en las situaciones enumeradas a
continuacioacuten
bull Controles entrada de datos
bull Contenido multimedia tempodependiente
bull Pruebas
bull Sensorial
bull Captcha
bull Decoracioacuten formato invisible
Q
iquestQueacute pretende Asegurar que cualquier tipo de informacioacuten transmitida mediante contenido no textual tenga uno textual Los lectores de pantalla y los navegadores web detectan la presencia de imaacutegenes y de contenido no textual a traveacutes de sus correspondientes etiquetas pero no interpretan su contenido Es decir pueden identificar una imagen pero no pueden interpretar la informacioacuten que esta proporciona Por ello es importante saber proveer siempre una alternativa textual que le permite a los navegadores y tecnologiacuteas de apoyo encontrar una descripcioacuten alternativa de los elementos
iquestA quieacuten 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 tecnologiacutea apropiada para visualizar este tipo de contenido como por ejemplo personas ciegas con baja visioacuten o sordas tambieacuten a aquellos con velocidades bajas de conexioacuten (moacutedem de 56k) o cuyos navegadores no cuenten con los plugins adecuados (Flash Java audio video) Ademaacutes se beneficia el posicionamiento en los buscadores debido a que estos no pueden indexar contenido no textual
4
Buenas praacutecticas para cumplir con este criterio
Proporcionar alternativas textuales en las
imaacutegenes con el atributo alt Debe
proporcionarse un texto alternativo a las
imaacutegenes siempre que estas sean
utilizadas para dar informacioacuten y no como
elementos decorativos El texto alternativo
de una imagen se proporciona mediante el
atributo alt y brida contenido no textual (Nivel A) a traveacutes el atributo alt
Objetos Flash y applets
Cuando se incluyan elementos mediante la etiqueta ltobjectgt (imaacutegenes videos
aplicaciones etc) debe ofrecerse contenido alternativo dentro de la etiqueta que
seraacute visualizado por el navegador o detectado por la ayuda teacutecnica si el objeto no es
visualizado
Por ejemplo
Acaacute debe agregarse el contenido textual alternativo
ltobjectgt
En el caso de los applets de Java deben proporcionarse las alternativas textuales
mediante el atributo ltaltgt y dentro del cuerpo de la etiqueta ltappletgt
ltobject type=applicationx-shockwave-flash data=swfgrafica_estadisticasswf height=200 width=300gt
Imagen tomada de httpwwwflickrcom
5
Por ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Descripciones completas de las imaacutegenes cuando el texto alternativo no
resulte suficiente
Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta
suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo
longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina
independiente
En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten
larga de la imagen
Ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Ejemplo
Porcentaje de uso de los principales navegadores en Ameacuterica Latina
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
4
Buenas praacutecticas para cumplir con este criterio
Proporcionar alternativas textuales en las
imaacutegenes con el atributo alt Debe
proporcionarse un texto alternativo a las
imaacutegenes siempre que estas sean
utilizadas para dar informacioacuten y no como
elementos decorativos El texto alternativo
de una imagen se proporciona mediante el
atributo alt y brida contenido no textual (Nivel A) a traveacutes el atributo alt
Objetos Flash y applets
Cuando se incluyan elementos mediante la etiqueta ltobjectgt (imaacutegenes videos
aplicaciones etc) debe ofrecerse contenido alternativo dentro de la etiqueta que
seraacute visualizado por el navegador o detectado por la ayuda teacutecnica si el objeto no es
visualizado
Por ejemplo
Acaacute debe agregarse el contenido textual alternativo
ltobjectgt
En el caso de los applets de Java deben proporcionarse las alternativas textuales
mediante el atributo ltaltgt y dentro del cuerpo de la etiqueta ltappletgt
ltobject type=applicationx-shockwave-flash data=swfgrafica_estadisticasswf height=200 width=300gt
Imagen tomada de httpwwwflickrcom
5
Por ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Descripciones completas de las imaacutegenes cuando el texto alternativo no
resulte suficiente
Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta
suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo
longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina
independiente
En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten
larga de la imagen
Ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Ejemplo
Porcentaje de uso de los principales navegadores en Ameacuterica Latina
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
5
Por ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Descripciones completas de las imaacutegenes cuando el texto alternativo no
resulte suficiente
Cuando la informacioacuten que transmite una imagen es tan compleja que no resulta
suficiente con la descripcioacuten de la alternativa textual deberaacute utilizarse el atributo
longdesc para ofrecer una descripcioacuten completa de la imagen en una paacutegina
independiente
En el atributo longdesc se indica la URL de la paacutegina que contiene la descripcioacuten
larga de la imagen
Ejemplo
ltapplet code=nombreclass width=300 height=300 alt=Applet Java
descripcioacuten del appletgtEn este lugar se ubica el contenido alternativo
del appletltappletgt
Ejemplo
Porcentaje de uso de los principales navegadores en Ameacuterica Latina
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
6
ltimg src=imagesbrowsers_statisticsjpg alt=Porcentaje de uso de los
principales navegadores en Ameacuterica Latina
longdesc=browsers_statisticshtml gt
Controles de un formulario con su correspondiente etiqueta
La etiqueta ltlabelgt sirve para relacionar el texto que funciona como etiqueta de los
controles de formulario y el control mismo a traveacutes del atributo for Para realizar esta
relacioacuten 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 uacutenico
Deben usarse las etiquetas ltlabelgt para los controles de formulario
lttextareagt ltselectgt e ltinputgt del tipotext checkbox radio
file y password
No se debe usar para los siguientes elementos
ltbuttongt su contenido funciona como etiqueta
ltinputgt de tipo image el atributo alt funciona como etiqueta
ltinputgt de tipo submit y reset el atributo value funciona como etiqueta
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmailltpgt
ltinput name= email tabindex=1 accesskey=e
id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobrecursosgt ltoption
value=becasgtBecasltoptiongt
ltoption value=ofertagtOfertaltoptiongtltoptgroupgtltoptgroup
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
7
label=Calendariogtltoption
value=inscripcionesgtInscripcionesltoptiongt
ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgtltpgtltpgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltfieldsetgtltbrgt
El Captcha
El Captcha es un tipo de test usado
en los sitios web para diferenciar
entre humanos y maacutequinas El maacutes
usado es incluir en una imagen
letras o frases con alguacuten tipo de
distorsioacuten en donde en teoriacutea solo
un humano podriacutea reconocerlas y
reescribirlas Se utiliza para evitar
que los robots de spam puedan
mandar spam al sitio web a traveacutes
de los formularios o para impedir
enviacuteos accidentales de un
diligenciamiento
Ejemplo de un CAPTCHA con opciones de ayuda pronunciacioacuten y actualizacioacuten de la imagen
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
8
Desafortunadamente este tipo de test tambieacuten 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 reproduccioacuten en audio
y una opcioacuten textual que indique a la persona coacutemo utilizar el mismo
Contenido decorativo a traveacutes de las hojas de estilo
Recuerde que todo el contenido decorativo como colores imaacutegenes logos iacuteconos y
otros deberaacuten ser incluidos en las hojas de estilo y no mezclarlos directamente con
el contenido
Tomar en cuenta que las imaacutegenes que siacute aportan informacioacuten al usuario deben ser
incluidas en el HTML con la etiqueta ltimggt y deben contar con texto alternativo y
descripcioacuten larga (de ser necesario) pero las imaacutegenes decorativas deberaacuten 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 funcioacuten del tiempo Por ejemplo una animacioacuten un audio o un video
son medios tempodependientes pues ofrecen un fragmento de informacioacuten en cada
instante de tiempo
Para hacer accesible la informacioacuten mediada por este tipo de contenido debe
asegurare el uso de transcripciones textuales subtitulado audiodescripciones o
interpretacioacuten en lengua de sentildeas
Observe algunos recursos para esta pauta
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
9
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 estaacute
claramente identificado como tal
Solo audio grabado se proporciona una alternativa para los
medios tempodependientes que presenta informacioacuten
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 informacioacuten equivalente al contenido
del medio de solo video grabado
iquestQueacute pretende Que la informacioacuten proporcionada por el contenido pregrabado (solo audio o solo video) esteacute disponible para todos los usuarios en otros formatos
iquestA quieacuten puede beneficiar Beneficia a los usuarios con dificultad o limitacioacuten para percibir o comprender la informacioacuten visual yo auditiva incluso a aquellos con limitantes teacutecnicas que les impidan acceder a esos contenidos Tambieacuten beneficia a los motores de buacutesqueda y al posicionamiento dado que los robots de los buscadores no pueden indexar contenido que no sea textual
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
10
Subtiacutetulos (grabados) - Nivel A
Se proporcionan subtiacutetulos para el contenido de audio grabado dentro de contenido
multimedia sincronizado excepto cuando la presentacioacuten es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Acaacute debe agregarse el contenido textual alternativo
iquestQueacute pretende Que las personas con limitaciones auditivas o aquellas a quienes sus recursos teacutecnicos 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 informacioacuten
iquestA quieacuten puede beneficiar A las personas con problemas de audicioacuten o que no pueden acceder al contenido de audio de un sitio web por problemas teacutecnicos
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
11
Audiodescripcioacuten o medio alternativo (grabado) - Nivel A
Se proporciona una alternativa para los medios tempodependientes o una
audiodescripcioacuten para el contenido del video grabado en los multimedia
sincronizados excepto cuando este contenido es un contenido multimedia
alternativo al texto y estaacute claramente identificado como tal
Imagen tomada de httpwwwflickrcom
iquestA quieacuten puede beneficiar A las personas que puedan tener limitaciones visuales parciales o totales
iquestQueacute pretende Que las personas con limitaciones visuales puedan acceder al contenido de un video sin perder informacioacuten a traveacutes de una audiodescripcioacuten del video o que al menos dispongan de una trascripcioacuten textual completa
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
12
Subtiacutetulos (directo) - Nivel AA
Se proporcionan subtiacutetulos para todo el contenido de audio en directo de los
multimedia sincronizados
Imagen tomada de httpwwwflickrcom
Audiodescripcioacuten (grabado) - nivel AA
Se proporciona una audiodescripcioacuten para todo el contenido de video grabado
dentro de contenido multimedia sincronizado
Imagen tomada de httpwwwdevorondinanet
iquestA quieacuten puede beneficiar A las personas con limitaciones auditivas totales o parciales o a aquellos usuarios que por limitaciones teacutecnicas no puedan escuchar las pistas de audio
iquestQueacute pretende Que las personas con limitaciones auditivas puedan ver videos en tiempo real sin perder informacioacuten
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
13
Puta 3 Adaptable
Crear contenido que pueda presentarse de diferentes formas (por ejemplo con una
disposicioacuten maacutes simple) sin perder informacioacuten o estructura
Toda la informacioacuten 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 moacuteviles o incluso con software obsoleto Si todos
los datos del sitio estaacuten disponibles de modo que sean determinados mediante
software entonces los visitantes del sitio accederaacuten a este con otro sistema (visual
auditiva taacutectil etceacutetera)
Informacioacuten y relaciones - Nivel A
La informacioacuten la estructura y las relaciones comunicadas a traveacutes de la
presentacioacuten pueden ser determinadas por software o estaacuten disponibles como texto
Imagen tomada de httpwwwflickrcom
iquestA quieacuten 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
iquestQueacute pretende Que la informacioacuten transmitida a traveacutes de la presentacioacuten tambieacuten esteacute disponible cuando se cambie el medio de presentacioacuten por ejemplo al acceder con un lector de pantalla
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
14
A continuacioacuten las buenas praacutecticas 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 dividieacutendolo en diferentes secciones y
subsecciones de contenido Usar los elementos de
encabezado (lth1gt -lth6gt) para marcar los tiacutetulos de las
diferentes secciones en las que se divide el sitio web de
manera jeraacuterquica
Marcar correctamente las tablas de datos
Ya se sabe que cuando una persona con
limitacioacuten visual navega por una paacutegina lo
hace mediante un lector de pantalla que es
un software que le permite escuchar el
contenido de la paacutegina Las tablas que
presentan datos relacionados pueden
ofrecer barreras de accesibilidad si no se
marca correctamente el contenido en esta
Para hacer maacutes accesible una tabla de
datos debe asociarse cada celda a su
columna de datos correspondiente (a
traveacutes del atributo lsquoheadersrsquo de cada
elemento lttdgt )
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
15
De esta forma una ayuda teacutecnica podraacute asociar correctamente la informacioacuten en
filas y columnas especificando a queacute columna corresponde cada dato leiacutedo
Adicionalmente debe agregarse un resumen de la tabla mediante el atributo
summary y definir el tiacutetulo de la tabla de datos mediante la etiqueta ltcaptiongt
evitando siempre crear tiacutetulos falsos mediante otra etiqueta
Por ejemplo
lttable summary=En la siguiente tabla se presenta una relacioacuten de los
empleados asignados a la noacutemina en el mes de juliogt ltcaptiongtNoacutemina del
mes de julio de 2011ltcaptiongt
lttrgt
ltth id=columna_nombregtNombreltthgt
ltth id=columna_apellidosgtApellidosltthgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 1lttdgt
lttd headers=columna_apellidosgtApellidos persona 1lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 2lttdgt
lttd headers=columna_apellidosgtApellidos persona 2lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 3lttdgt
lttd headers=columna_apellidosgtApellidos persona 3lttdgt
lttrgt
lttrgt
lttd headers=columna_nombregtNombre persona 4lttdgt
lttd headers=columna_apellidosgtApellidos persona 4lttdgt
lttrgt
lttablegt
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
16
Marcar correctamente los formularios
Los formularios son elementos muy
importantes en una paacutegina web pues
permite a los usuarios enviar informacioacuten y
al administrador le permite capturar
informacioacuten 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 expliacutecitamente los controles
que formen parte del formulario a traveacutes de la etiquetaltlabelgt la cual se utiliza
para relacionar directamente el texto asociado a un campo de un formulario con el
campo en siacute Esta asociacioacuten 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 uacutenico
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 deberaacute agregarse a la derecha del campo Hay que tener en cuenta que
los campos de tipo submit reset button no requieren asociacioacuten mediante
label pues estaacuten impliacutecitamente etiquetados mediante sus atributos
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
17
Otra buena praacutectica es agrupar la informacioacuten cuando sea necesario por ejemplo
agrupando controles de formulario seguacuten su funcioacuten mediante el elemento
FIELDSET y etiquetar esas unidades con el elemento LEGEND (que le da tiacutetulo a la
agrupacioacuten) para organizar semaacutenticamente los formularios complejos Tambieacuten se
pueden agrupar los elementos de un menuacute cuando este contenga una gran
cantidad de opciones y estas se puedan categorizar en este caso los deberaacute
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 estaacutendar
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 traveacutes 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 tabulacioacuten
Por ejemplo
ltform method=post action= id=formulariogtltfieldsetgt
ltlegendgtContaacutectenosltlegendgtltbrgt
ltlabel for=emailgtltpgtEmail ltpgt
ltinput name= email tabindex=1 accesskey=e id=emailgtltlabelgtltbrgt
ltlabel for=consultagtltpgtMotivo de la consultaltpgt
ltselect value=0 name=consulta tabindex=2 accesskey=c
id=consultagtltoptgroup label=Informacioacuten sobre cursosgt ltoption
value=becasgtBecasltoptiongtltoption value=ofertagt
Ofertaltoptiongtltoptgroupgtltoptgroup label=Calendariogt ltoption
value=inscripcionesgtInscripcionesltoptiongt ltoption
value=matriculacionesgtMatriacuteculasltoptiongtltoptgroupgtltselectgt
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
18
ltpgtRelacioacuten con la Institucioacuten
ltlabel for=estudiantegtltlabelgtltpgt
ltinput name=estudiante tabindex=3 accesskey=d id=estudiante
type=checkboxgtEstudianteltlabelgtltbrgt
ltlabel for=ltpgtprofesorgtltpgt
ltinput name=profesor tabindex=4 accesskey=c id=profesor
type=checkboxgtProfesorltlabelgt
ltinput name=Enviar value=Enviar tabindex=5 accesskey=e
type=submitgt
ltpgtltpgtltfieldsetgtltbrgt
ltformgt
Secuencia significativa - Nivel A
Buenas praacutecticas para cumplir con este criterio
Ordenar correctamente el contenido siguiendo una secuencia loacutegica
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 jeraacuterquico debe
tenerse en cuenta que para los usuarios que utilizan el
lector de pantalla la presentacioacuten del sitio no les ofrece
iquestA quieacuten puede beneficiar A las personas que por una limitacioacuten visual deben utilizar lectores de pantalla para acceder al contenido en un sitio web
iquestQueacute pretende Lograr que los agentes de usuario puedan interpretar correctamente el contenido manteniendo un orden de lectura correcto de forma que el orden de presentacioacuten de los elementos no cambie el significado del contenido que se presenta al usuario
Imagen tomada de httpwwwflickrcom
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
19
informacioacuten relevante y la navegacioacuten se basa uacutenicamente en la definicioacuten
semaacutentica del contenido HTML
Por esto se recomienda desactivar las hojas de estilo del sitio web y verificar que
auacuten sin estar estas herramientas es posible navegar faacutecil y correctamente por el
sitio pudiendo definir claramente la estructura del mismo el menuacute de navegacioacuten
la lista de enlaces las tablas de datos los formularios y demaacutes elementos que
componen el sitio web
Caracteriacutesticas sensoriales - Nivel A
Imagen tomada de httpwwwflickrcom
Las instrucciones proporcionadas para entender y operar el contenido no dependen
exclusivamente de las caracteriacutesticas sensoriales de los componentes como su
forma tamantildeo ubicacioacuten visual orientacioacuten o sonido
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
20
Distinguible
Facilitar a los usuarios ver y oiacuter el contenido incluyendo la
separacioacuten entre el primer plano y el fondo
Para garantizar que los usuarios puedan acceder y
comprender el contenido visual del sitio web debe prestaacutersele
especial atencioacuten a las siguientes praacutecticas
Uso adecuado del color semaacutentico (color que transmite informacioacuten)
Relacioacuten adecuada de contraste y brillo
Tamantildeo del texto configurable
Formato del texto configurable
iquestA quieacuten puede beneficiar A las personas con limitacioacuten parcial o total de la visioacuten quienes dependen de lectores de pantalla para acceder al contenido web
iquestQueacute 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 estaacuten 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 caracteriacutesticas netamente visuales como el color la forma o la orientacioacuten del contenido
Imagen tomada dehttpwwwflickrcom
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
21
Uso del color - Nivel A
El color no se usa como uacutenico medio visual para transmitir la informacioacuten indicar
una accioacuten solicitar una respuesta o distinguir un elemento visual
Buenas praacutecticas para cumplir con este criterio
Proporcionar informacioacuten alternativa textual ademaacutes del color
Es una praacutectica adecuada que utiliza el color para transmitir informacioacuten al usuario
como por ejemplo los mensajes que la paacutegina le muestra a este tras una accioacuten
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 accioacuten
equivocada en la paacutegina web como un registro fallido en un formulario
iquestQueacute pretende Que todos los usuarios puedan acceder a la informacioacuten que transmite el color de los elementos del sitio web auacuten cuando tengan problemas para percibir estos colores Es comuacuten utilizar el color para transmitir informacioacuten a los usuarios de la paacutegina 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 informacioacuten correctamente
iquestA quieacuten puede beneficiar A las personas con limitaciones de visioacuten o problemas de percepcioacuten del color
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
22
ERROR el nombre de usuario que eligioacute ya estaacute en uso Por favor pruebe con uno
diferente
En el ejemplo anterior el texto laquoERRORraquo en negrilla y en color rojo llamariacutea la
atencioacuten de inmediato para el usuario que pueda interpretar la informacioacuten
semaacutentica que transmite ese color (alerta error) pero no para alguien que no pueda
percibirlo Por ello es necesario marcar correctamente el coacutedigo HTML de manera
que se pueda trasmitir esa informacioacuten al visitante por otros medios
ltdiv id=username_errorgtltpgtltspan class=errorgtltstronggt
ERRORltstronggtltspangtEl nombre de usuario que eligioacute ya estaacute en uso Por favor
pruebe con uno diferente ltpgtltdivgt
En este caso la etiqueta ltstronggt hace eacutenfasis en la palabra laquoERRORraquo
resaltaacutendola semaacutenticamente en la frase
Control del audio - Nivel A
Si el audio de una paacutegina web suena automaacuteticamente durante maacutes 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 paacutegina web en su conjunto
todo contenido de esta (tanto si cumple o no otros con criterios de conformidad)
debe satisfacer este criterio
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
23
Buenas praacutecticas para cumplir con este criterio
Apagar automaacuteticamente el sonido al cabo de tres segundos
Solamente debe reproducir sonidos automaacuteticos en una paacutegina si estos no duran
maacutes 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 paacutegina no puede apagarse automaacuteticamente al cabo de tres
segundos deberaacute ofrecerse al usuario un control accesible incluso por teclado
iquestQueacute pretende Evitar que el sonido reproducido en la paacutegina interfiera con la sintetizacioacuten de voz por parte del lector de pantalla Debe tenerse en cuenta que si en la paacutegina se reproduce cualquier sonido procedente de videos archivos de audio banners o publicidad estos sonidos pueden interferir de tal forma la navegacioacuten con lector de pantalla que pueden llegar a imposibilitarla
iquestA quieacuten puede beneficiar A usuarios que utilizan lectores de
pantalla
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
24
que le permita controlar la reproduccioacuten del sonido
Proporcionar un medio para que los usuarios controlen el sonido
Lo mejor es no reproducir sonidos automaacuteticamente y permitir a los usuarios que
sean ellos quienes reproduzcan los sonidos que deseen ofrecieacutendoles controles
adecuados para hacerlo
Contraste (miacutenimo) - Nivel AA
La presentacioacuten visual de texto e imaacutegenes de texto tiene una relacioacuten de contraste
de al menos 451 excepto en los siguientes casos
Textos grandes
Los textos y las imaacutegenes de texto de gran tamantildeo tienen una relacioacuten de contraste
de al menos 31
Incidental
Los textos o imaacutegenes de texto que forman parte de un componente inactivo de la
interfaz de usuario que son simple decoracioacuten 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 miacutenimo+
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
25
Imagen tomada de httpwwwflickrcom
Buenas praacutecticas 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 disentildeo de un sitio web el uso adecuado de
las tonalidades permitiraacute que la web sea accesible o por el contrario la haraacute difiacutecil
de usar incluso por usuarios sin limitaciones visuales
La forma de controlar la combinacioacuten de colores en el sitio web es verificando la
relacioacuten entre contraste y brillo Esta relacioacuten indica que la diferencia de brillo entre
el primer plano (texto) y el fondo debe ser superior a 125 y la relacioacuten de contraste
superior a 500
iquestA quieacuten puede beneficiar A personas con deficiencias visuales como miopiacutea o problemas de percepcioacuten del color
iquestQueacute pretende Que exista el contraste suficiente entre el primer plano y el fondo para que las personas con baja visioacuten puedan leer correctamente el texto Debe tomarse en cuenta que muchas personas sufren limitaciones de visioacuten que les puede dificultar la percepcioacuten 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 miopiacutea o quienes leen en situaciones de iluminacioacuten deficiente o con limitaciones debidas al cansancio
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
26
Existe una herramienta de software muy uacutetil 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 paacutegina del proyecto
httpwwwvisionaustraliaorgauinfoaspxpage=628
Cambio de tamantildeo del texto - Nivel AA
Por ejemplo
iquestQueacute pretende Que los textos en un sitio web se puedan redimensionar para ser leiacutedos por personas con deficiencias de visioacuten o cuando el texto de la paacutegina es de tamantildeo reducido Se recomienda maquetar el sitio web a traveacutes de CSS y utilizar fuentes legibles y que no exijan fuentes adicionales El tamantildeo debe establecerse en unidades relativas y no absolutas garantizando que el usuario pueda al menos aumentar el tamantildeo en un 200 sin que la paacutegina pierda legibilidad La mayoriacutea de navegadores modernos permiten el acercamiento del texto en web a traveacutes de la combinacioacuten de teclas CTRL+ aunque es deseable que se suministren controles para que este pueda aumentar directamente en la paacutegina el tamantildeo del texto
iquestA quieacuten puede beneficiar Beneficia a personas con problemas visuales para leer el texto pequentildeo
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
27
Imaacutegenes de texto - Nivel AA
Imaacutegenes de texto Si con las tecnologiacuteas que se
estaacuten utilizando se puede conseguir la presentacioacuten
visual deseada se utiliza texto para transmitir la
informacioacuten en vez de imaacutegenes de texto excepto
en los siguientes casos
Configurable La imagen de texto es visualmente
configurable seguacuten los requisitos del usuario
Esencial Una forma particular de presentacioacuten del texto resulta esencial para la
informacioacuten que se transmite
Nota los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales
Las imaacutegenes transmiten informacioacuten 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 etceacutetera
En estas situaciones las personas que tienen dificultades para percibir las
imaacutegenes tambieacuten tendraacuten dificultad para leer el texto que estas representan Por
este motivo se recomienda evitar al maacuteximo utilizar imaacutegenes 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)
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
28
En los casos en los que no tenga otra opcioacuten que usar una imagen de texto como
en logos textos escaneados capturas de pantalla etc (excepto en los casos de
imaacutegenes decorativas o que no transmitan informacioacuten relevante) debe ofrecerse al
usuario una alternativa textual a traveacutes de los atributos alt y longdesc seguacuten sea el
caso
REFERENCIAS
Instituto Colombiano de Normas Teacutecnicas y Certificacioacuten (2011) Accesibilidad a
Paacuteginas Web NTC 5854Bogotaacute Colombia ICONTEC
Programa Agenda de Conectividad Estrategia de Gobierno en liacutenea (2011) Manual 30 para la Implementacioacuten de la Estrategia de Gobierno en Liacutenea En las Entidades del Orden Nacional de la Repuacuteblica de Colombia Bogota Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones Programa Gobierno en liacutenea agenda de conectividad(2011) Curso Disentildeo y
Desarrollo de sitios web accesibles para Disentildeadores y Programadorespdf Colombia Ministerio de Tecnologiacuteas de la Informacioacuten y las Comunicaciones WC3 (diciembre de 2008) Web Content Accessibility Guidelines WCAG 20 Recomendacioacuten del W3C del 11 de diciembre de 2008 En httpwwww3orgTRWCAG20
iquestQueacute pretende Que el texto transmitido en forma de imaacutegenes sea legible para los usuarios y de no ser asiacute que se ofrezca una alternativa textual Cabe anotar que debe evitar al maacuteximo el uso de imaacutegenes como texto salvo en casos en donde no sea posible reemplazarlas
iquestA quieacuten puede beneficiar A todas las personas con baja visioacuten con dificultades para leer texto o que utilicen lectores de pantalla
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012
29
Control del documento
Autores
Nombre Cargo Dependencia Fecha
Ministerio de Tecnologiacuteas de la Informacioacuten y la
Comunicacioacuten y Programa Gobierno en Liacutenea
2011
Revisioacuten y ajustes
Luz Clarena Arias Gonzaacutelez
Comunicadora social -
Guionista liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
22 de Agosto de
2012
Ana Mariacutea Mora Jaramillo
Comunicadora social - Liacuteder
guionistas liacutenea de produccioacuten
Centro Agroindustrial
Regional Quindiacuteo
25 de agosto de
2012