accesibilidad

a los sitios web

del Estado Colombiano

O r i e n t a c i o n e s

b s i c a s

Para que todos los ciudadanos

colombianos puedan acceder a
la informacin y a los servicios y
trmites en lnea, ofrecidos en
los sitios Web del Estado se viene
desarrollando estrategias de
capacitacin a los profesionales
que en las entidades pblicas
tengan la responsabilidad de
publicar contenido, as como
desarrollar el sitio Web. Por tal
razn se propone esta cartilla
que busca brindar orientaciones
sencillas para incorporar criterios
de accesibilidad en el diseo de
estas herramientas tecnolgicas.

Accesibilidad a los sitios web del Estado Colombiano

1. Por qu las entidades pblicas deben tener sitios Web

accesibles?
La inclusin de condiciones de accesibilidad beneficia a todos los que acceden al manejo
de informacin en Internet, entre ellos, las personas con discapacidad visual, auditiva,
cognitiva o motora.

2. En qu consiste la accesibilidad en los sitios Web?

Se refiere a las caractersticas dadas a los contenidos de los sitios, de manera que sea
sencilla su navegabilidad y probable la transformacin correcta de los contenidos, es decir
que los elementos que contienen informacin escrita, grfica o sonora puedan ser convertidos
por las herramientas de apoyo que utilizan las personas con discapacidad.
Al hablar de herramientas de apoyo se habla ms comnmente de los lectores de pantalla
para las personas ciegas, magnificadores de pantalla para las personas con baja visin,
renglones Braille para personas sordociegas y otras ayudas tecnolgicas de acuerdo con la
discapacidad.
Si bien es cierto que el tema de accesibilidad en la Web afecta de manera directa a
las personas con discapacidad, tambin incluye a quienes no cuentan con las condiciones
tecnolgicas ptimas para la navegacin, conexiones lentas, navegadores antiguos, monitores
pequeos o monocromticos, etc.
La accesibilidad en los sitios Web compete a 3 instancias: quienes crean los navegadores
para Internet; quienes crean las herramientas de apoyo para las personas con discapacidad y
quienes generan los contenidos en las pginas Web, lugar en el cual estara la responsabilidad
de las entidades pblicas, a quienes estn dirigidos estos textos. Lo anterior supone que
las pginas no deben entregar necesariamente la informacin de manera directa para ser

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

utilizada por los distintos tipos de usuarios, supone la utilizacin de algunas condiciones
tcnicas que permitan que las pginas puedan ser transformadas correctamente por las
ayudas e informacin de orientacin y contexto que indique la forma de navegacin y
ubicacin en sus contenidos.

3. Qu pasa si no se incluyen las condiciones de

accesibilidad en los sitios Web?
Al no incluirlas se reduce el potencial de usuarios de las pginas, toda vez que la
accesibilidad no slo beneficia a las personas con discapacidad, sino que permite a otros
usuarios acceder a los contenidos, como quienes no tienen condiciones tecnolgicas
ptimas.

4. Cules son las recomendaciones para tener un sitio Web

2

accesible?
A nivel mundial el Consorcio W3C (World
Wide Web Consortium), brinda pautas y
estndares de utilizacin de la Red, para lo
cual ha implementado la estrategia Web
Accessibility

Initiative

(WAI) encargada

de establecer recomendaciones, pautas y

normas para que quienes desarrollen sitios
Web, incluyan en ellas las condiciones de
accesibilidad (www.w3c.org/wai).
La WAI promulga las recomendaciones que
promueven la accesibilidad en los contenidos
de los sitios Web en el mundo, ellas se conocen
como WCAG (Web Content Accessibility
Guidelines) y se encuentran organizadas en 14
pautas que se refieren a las siguientes:

Orientaciones bsicas

Tomado de www.inci.gov.co

Accesibilidad a los sitios web del Estado Colombiano

1. Proporcione alternativas equivalentes para el contenido visual y

auditivo.
Los grficos y archivos sonoros deben ser etiquetados con el respectivo texto equivalente
que vaya ms all de una descripcin. Si una persona ciega, que navega mediante un
programa lector de pantalla, avanzara sobre un grfico, la etiqueta de texto le ser
hablada, de la misma forma, un usuario sordo vera un texto al producirse un sonido.
2. No se base slo en el color.
Si un texto importante de una pgina se resaltara en rojo para llamar la atencin del
usuario, quien tenga un monitor monocromtico o una persona ciega no podran percibirlo.
Se recomienda dar un realce al mismo de forma alterna, por ejemplo con la palabra
IMPORTANTE:. EN GENERAL, Asegrese de que los textos y grficos son comprensibles
cuando se vean sin color.

3. Utilice marcadores y hojas de estilo y hgalo apropiadamente.

Los marcadores son los elementos del lenguaje de programacin de los sitios Web que se
utilizan para mostrar informacin como listas, encabezados etc. Utilice estos elementos
para enmarcar la informacin y utilice cada uno de
ellos para lo que fue creado; si por ejemplo utiliza
un encabezado, que sea para hacer un ttulo o
subttulo en la pgina, no utilice este marcador para
dar una apariencia visual. El mal uso de marcadores
para una presentacin dificulta que los usuarios con
software especializado entiendan la organizacin
de la pgina o la forma de navegar por ella.
Las hojas de estilo como CSS (Cascade Style Sheet),
son tecnologas que facilitan escribir los contenidos
de las pginas de forma separada al diseo, esto
Tomado de www.mincomunicaciones.gov.co

facilita la lectura en secuencia y sin tener en

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

cuenta la organizacin fsica de los contenidos en la pantalla para quienes no la ven.

Adicionalmente cambiar la apariencia de un sitio que utiliza CSS es muy sencillo. Ya
que las hojas de estilo benefician la accesibilidad de los sitios Web, ellas son altamente
recomendadas, adems facilitan el mantenimiento de las pginas, reducen el cdigo
utilizado y en consecuencia se cargan ms rpido.

4. Identifique el idioma usado.

Cuando los desarrolladores de contenido especifican los cambios en el idioma de un
documento, los sintetizadores de voz de los lectores de pantalla y los dispositivos
como renglones braille pueden cambiar automticamente al nuevo idioma, haciendo
el documento ms accesible. Si una pgina en idioma espaol hiciera referencia a un
texto en ingls por ejemplo, este cambio debe ser indicado para que programas como
los lectores de pantalla cambien automticamente el idioma de la voz y lean el texto
adecuadamente.

4
5. Disee tablas que se transformen correctamente.
Las tablas deben utilizarse solamente para
marcar la informacin tabular (tablas de
datos). Los desarrolladores de contenidos
deben evitar su uso al momento de diagramar
o estructurar pginas. Los encabezados de
fila y columna deben ser indicados para que
sean visualizados fcilmente y para que al
navegar por los datos ellos le sean hablados
a usuarios como los de lectores de pantalla.
Si un usuario navegara por una tabla de
datos muy extensa, debera regresar a la
primera fila para conocer de qu se trata
cada dato en la parte inferior de la tabla.
Tomado de www.contratos.gov.co

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

La definicin de encabezados de fila y columna evitan este proceso y para el caso de los
usuarios ciegos de lectores de pantalla, se hablaran automticamente los ttulos de las
filas y las columnas al avanzar por cualquier sitio de las tablas.

6. Asegrese de que las pginas que incorporan nuevas tecnologas se

transformen correctamente.
Si bien se alienta a los desarrolladores de contenidos a usar nuevas tecnologas que
superen los problemas que proporcionan las existentes, debern saber cmo hacer
para que sus sitios funcionen con navegadores ms antiguos, y para quienes decidan
desconectar esta caracterstica. Si un navegador no soportara por ejemplo CSS o esta
caracterstica fuese desactivada, la pgina debera entenderse.

Tomado de www.inci.gov.co. Pgina con Cascada de Estilos activada y desactivada.

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

7. Asegrese de que los objetos o pginas que se mueven, titilan, se

desplazan o se actualizan automticamente, puedan ser detenidos.
A algunas personas con discapacidades cognitivas o visuales les es difcil leer textos que
se mueven. El movimiento puede tambin distraer de tal manera que el resto de la pgina
se vuelve ilegible para las personas con discapacidades cognitivas.

8. Asegure la accesibilidad directa de las interfaces de usuario

incrustadas (plug-in, applets,etc).
Las interfaces incrustadas en las pginas deben contar con las caractersticas de
accesibilidad de igual manera que la pgina completa. Si por ejemplo una pgina cuenta
con un cuadro combinado (combo box) con los departamentos de Colombia y otro a su
lado se actualiza automticamente con los municipios al seleccionar un departamento y
el proceso refresca la pgina de forma automtica para mostrar esta nueva informacin,

un usuario ciego con lector de pantalla debe empezar a leer de nuevo todo el contenido.

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

9. Disee para la independencia del dispositivo.

El acceso independiente del dispositivo significa que el usuario puede interactuar con la
aplicacin de usuario o el documento con un dispositivo de entrada (o salida) preferido
- ratn, teclado, voz, puntero de cabeza u otro. Si por ejemplo, un control de formulario
slo puede ser activado con un ratn u otro dispositivo de apuntamiento, alguien que
use la pgina sin verla, con entrada de voz, con teclado o quien utilice otro dispositivo de
entrada que no sea de apuntamiento, no podr utilizar el formulario.

10. Utilice soluciones provisionales.

Utilice soluciones de accesibilidad provisionales de forma que las ayudas tcnicas de
las personas con discapacidad y los antiguos navegadores operen correctamente. Si por
ejemplo un enlace llevara a una pgina que abre en una ventana diferente, se informar
en una etiqueta alternativa del enlace que ste abrir en una ventana nueva. Esto
mientras que las herramientas, por ejemplo los lectores de pantalla para personas ciegas,
lo informen automticamente.

Tomado de www.inci.gov.co y de www.gobiernoenlinea.gov.co

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

11. Utilice las tecnologas y pautas W3C.

Utilice tecnologas W3C (de acuerdo con las especificaciones) y siga las pautas de
accesibilidad. Si no se puede utilizar tecnologa W3C, o si al usarla se obtienen materiales
que no se transforman correctamente, proporcione una versin alternativa del contenido
que sea accesible y actualizado al tiempo con la pgina principal. En la medida de lo posible
no utilice esta alternativa, esta prctica es altamente desaconsejada por lo peligrosa para
la accesibilidad, ya que las pginas alternas suelen no actualizarse, generando el que una
pgina obsoleta sera peor que una no accesible.

12. Proporcione informacin de contexto y orientacin.

Agrupar los elementos y proporcionar informacin contextual sobre la relacin entre los
componentes de las pginas puede ser til a todos los usuarios. Las relaciones complejas

Tomado de www.gobiernoenlinea.gov.co

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

entre las partes de una pgina pueden resultar difciles de interpretar a personas con
discapacidades cognitivas o visuales. Si por ejemplo una pgina agrupara informacin
en recuadros fcilmente reconocibles visualmente, ellos debern hacerse explcitos para
quienes no ven la pantalla mediante nombres claros del grupo de elementos o mediante
la utilizacin de encabezados.

13. Proporcione mecanismos claros de navegacin.

Proporcione mecanismos de navegacin claros y coherentes, (informacin orientadora,
barras de navegacin, un mapa del sitio, bsquedas, etc.) para incrementar la probabilidad
de que una persona encuentre lo que est buscando en un sitio.

Tomado de www.gobiernoenlinea.gov.co

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

14. Asegrese que los documentos sean claros y simples.

La diagramacin coherente de pginas, los grficos reconocibles y el lenguaje fcilmente
comprensible benefician a todos los usuarios. En particular, ayudan a personas con
discapacidades cognitivas o con dificultades en la lectura.
La utilizacin de un lenguaje claro y simple promueve una comunicacin efectiva.
El acceso a la informacin escrita puede ser difcil para personas con discapacidades
cognitivas o de aprendizaje. La utilizacin de un lenguaje claro y simple tambin beneficia
a las personas cuyo primer idioma es diferente al del autor, incluidos aquellos que se
comunican principalmente mediante lengua de seas.

5. Cmo hacer uso de las pautas para incorporar la

accesibilidad en los sitios?
Las 14 pautas constituyen los principios generales de un diseo accesible. Cada una
de las pautas cuenta con puntos de verificacin que explican cmo se aplica la pauta en

10

determinadas reas. Cada punto de verificacin tiene un nivel de prioridad, que indica la
importancia de contemplar el punto de verificacin en la accesibilidad de los contenidos Web,
siendo los de nivel 1 los de mayor importancia. Los niveles de prioridad son 3.
El cumplimiento con los puntos de verificacin 1 es asociado a un cumplimiento en nivel
A, si se cumple con los de prioridad 1 y 2 AA (doble A) y si se cumple con los tres niveles de
puntos de verificacin se establece un cumplimiento en nivel AAA (triple A).
El asunto entonces es incorporar inicialmente las recomendaciones de prioridad 1, luego
las de nivel de prioridad 2 y luego las de 3.
De manera general las recomendaciones de puntos de verificacin de nivel 1 hacen
referencia a:

Proporcionar texto alternativo para las imgenes.

No transmitir informacin a travs de colores o

brindar alternativas.

Identificar los cambios de idioma.

Utilizar un lenguaje claro para el contenido.

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

Poder leer el documento sin hoja de estilo.

No provocar destellos en la pantalla.

De manera general las recomendaciones de puntos de verificacin de nivel 2 hacen

referencia a:

Combinar colores de fondo y de primer plano en forma correcta.

Usar elementos de encabezado para transmitir la estructura lgica.

Crear documentos con validez gramatical.

Usar hojas de estilo para la maquetacin y la presentacin.

Utilizar unidades relativas en lugar de unidades absolutas en las hojas de estilo.

Marcar correctamente las listas y sus tems, as como las citas.

Evitar la actualizacin automtica de la pgina o proporcionar mecanismos para

que esta actividad sea decidida por el usuario.

Evitar la apertura repentina de nuevas ventanas o informarlo mediante un texto

alternativo en el enlace.

Proporcionar metadatos.

Proporcionar un mapa del sitio.

No utilizar tablas para maquetar.

Asociar correctamente controles y etiquetas de

formulario.

Evitar los movimientos en las pginas o permitir la personalizacin por el usuario.

para quitar el movimiento.

Usar tipos de letra genricos y controlar el formato desde la hoja de estilo.

De manera general las recomendaciones de puntos de verificacin de nivel 3 hacen

referencia a:

Especificar la expansin de cada abreviatura o acrnimo la primera vez que

aparezca.

Identificar el idioma principal de documentos.

Proporcionar atajos de teclado para los vnculos principales.

Incluir caracteres imprimibles y espacios entre vnculos.

Agrupar los vnculos relacionados.

Orientaciones bsicas

11

Accesibilidad a los sitios web del Estado Colombiano

Crear un estilo de presentacin coherente para todas las pginas.

Proporcionar resmenes de las tablas.

Incluir caracteres por defecto en cuadros de edicin.

6. Y ... si el sitio ya est desarrollado?

La implementacin de la accesibilidad en los sitios que ya se encuentran desarrollados
es sugerida por fases, que van desde incorporar los puntos de verificacin de prioridad
1, luego los de prioridad 2 y finalmente todos los puntos de verificacin. Se recomienda
generar planes para la implementacin de cada uno de los niveles, de manera que se realice
la incorporacin de la accesibilidad de manera organizada y paulatina. Los puntos en los
que la accesibilidad sea imposible o implique rehacer la pgina, deben adoptar alternativas
accesibles que disminuyan la imposibilidad de accederlos.
Cuando los sitios se disean como nuevos, se sugiere incorporar en ellos desde el principio

12

toda la accesibilidad. Siempre ser ms sencillo incorporar estas condiciones desde la etapa
de prediseo.

7. Dnde acudir para mayor informacin?

El Ministerio de Comunicaciones, el Ministerio de Proteccin Social, el Programa
Gobierno en Lnea, el Departamento Administrativo de la Funcin Pblica - DAFP, el SENA,
el Instituto Nacional para Sordos - INSOR y el Instituto Nacional para Ciegos - INCI han
conformado un equipo tcnico para orientar este proceso. En la actualidad, los servidores
pblicos o contratistas del Estado tienen la posibilidad de tomar cursos virtuales sobre el
tema, realizando la inscripcin previa a travs del Centro de Contacto de Gobierno en Lnea:
www.programa.gobiernoenlinea.gov.co en el vnculo: Preprese.
Para resolver inquietudes pueden dirigirse a: http://programa.gobiernoenlinea.
gov.co, recorriendo la ruta de los siguientes vnculos:
1- Equipos de trabajo
2 - Articulacin y Gestin

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

Glosario
Acrnimo: Palabra conformada a manera de sigla que genera una nueva palabra
con sentido.
Atajos de teclado: Combinaciones de teclas o comandos de teclado para acceder a
enlaces u opciones. Atributo asignado con ACCESSKEY en HTML.
Baja visin: Condicin visual que consiste en reduccin del nivel de visin y en el que
a pesar de utilizarse lentes o gafas o realizarse cirugas, la visin sigue siendo deficiente,
aunque funcional.

13

Control de formulario: Tipo de marcador para solicitar informacin al usuario,

hace referencia a los botones, cuadros de edicin, cuadros combinados etc.
Cuadro combinado (combo box): Tipo de control o marcador que permite
seleccionar de una lista o escribir el nombre del elemento solicitado.
Deficiencia visual: En Colombia se trabaja como Limitacin visual y se refiere a las
personas ciegas o con baja visin.
Discapacidad cognitiva: Deficiencia leve, moderada o severa en el desarrollo de
actividades mentales.
Elementos de encabezado: Marca en HTML mediante H1...H6 para indicar que el
texto sealado hace referencia a ttulos o subttulos en niveles desde el 1 hasta el 6. Para
que exista un elemento H2 o superior deben existir necesariamente los niveles anteriores
a los cuales pertenece cada uno.

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

Hoja de estilo: Tipo de tecnologa para permitir que en el desarrollo de pginas se

separen los contenidos del diseo.
HTML: Lenguaje de marcado de hipertexto que permite la generacin de las pginas
de Internet o documentos del tipo hipertexto.
Interfaces de usuario: Se refiere a los elementos mostrados o para interaccin con
los usuarios de los software o pginas de Internet.
Interfaces incrustadas: Programas o porciones de cdigo de programacin que son
invocados desde una pgina o documento de Internet, hacen referencia a los llamados
Pluggins y Applets.
Lectores de pantalla: Programas de computador basados en sntesis de voz que
permiten que personas ciegas escuchen los contenidos en la pantalla de un computador
y entreguen rdenes por medio del teclado.

14

Lengua de seas: Lengua visogestual con la que se comunican las personas con
limitacin auditiva o carentes de la capacidad de escucha.
Magnificadores de pantalla: Programas de computador que permiten la
ampliacin de las imgenes y los textos en diversos tamaos y contrastes con el fin de
que puedan ser percibidos por personas con baja visin.
Maquetacin: Se refiere a la estructura u organizacin dada a la pgina.
Metadatos: Se refiere a la informacin de encabezado del cdigo de cada pgina
web.
Monitores monocromticos: Pantallas de computadores o dispositivos que
muestran la informacin en un nico color.
Navegabilidad: accin referida a recorrer los contenidos de las pginas web con
fines diversos.

Orientaciones bsicas

Accesibilidad a los sitios web del Estado Colombiano

Navegadores para Internet: Programas de software que posibilitan la navegacin

en los contenidos de las pginas en la red mundial Internet o o en documentos del tipo
hipertexto. Son tambin conocidos como browser.
Personas ciegas: Personas que carecen de la capacidad visual.
Personas sordociegas: Personas que carecen total o parcialmente de la capacidad
visual y auditiva simultneamente.
Pluggins y Applets: Porciones de cdigo llamados desde pginas o herramientas
web.
Puntero de cabeza: Dispositivo que permite a personas con imposibilidad de
movimiento en sus miembros superiores (brazos y manos) hacer apuntamiento y
ejecucin de acciones en el computador.
Renglones Braille: Dispositivo que conectado o integrado en un computador refleja
por medios electrnicos la informacin en el sistema de lectoescritura Braille para que
personas ciegas o sordociegas perciban al tacto la informacin del computador.
Resmenes de las tablas: Se refiere a textos que indican de qu se trata el
elemento tabla. En HTML se asigna a la tabla con SUMMARY.
Sntesis de voz: Voz producida artificialmente que se asemeja a la voz humana.
Sistema de lectoescritura Braille: Sistema creado por el francs Louis Braille
basado en seis puntos organizados en dos columnas de tres puntos en relieve apartir
del cual se generan los signos y smbolos de los distintos idiomas.
Texto equivalente: Texto asociado mediante atributos como ALT o LONGDESC de
HTML que permite indicar una descripcin para el grfico. La descripcin depende del
contexto de la grfica o imagen.

Orientaciones bsicas

15

Accesibilidad a los sitios web del Estado Colombiano

Unidades absolutas: Posicin fija de un elemento en la ventana, as la configuracin

de pixeles de la pantalla se cambie esta posicin ser la misma. No permite la ampliacin
de textos o imgenes.
Unidades relativas: Se refiere a indicar mediante posiciones en la ventana el sitio
donde se ubicarn los elementos, esta posicin ser modificada automticamente
dependiendo del tamao configurado para la pantalla o la ventana. Si por ejemplo se
hace ampliacin del texto mediante el navegador, los textos con posiciones relativas
sern ampliados.
Validez gramatical: Significa que el cdigo es validado y aprobado por validadores
como los de HTML o XML que indican si el lenguaje es correctamente utilizado. W3C
proporciona esta posibilidad.

16

El presente documento ha sido elaborado con base en las siguientes fuentes:

Documento Pautas de Accesibilidad al Contenido en la Web 1.0

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

Fundacin Sidar, Seminario Iberoamericano de discapacidad y

accesibilidad a la Red.
www.sidar.org

World Wide Web Consortium

http://www.w3.org/TR.

Contenidos curso virtual de introduccin a la accesibilidad web

Contratado por Gobierno en Lnea y desarrollado por Cintel.
Tcnicos: Diego Galindo, Mario Carvajal.

Orientaciones bsicas

Contenidos y diseo
coordinados por
Olga Luca Gallego
y Santiago Rodrguez. INCI.

Diseo grfico
Miguel Alfredo Nova.

Web

Accesible
Si bien es cierto que el tema de accesibilidad en
la Web afecta de manera directa a las personas
con discapacidad, tambin incluye a quienes
no cuentan con las condiciones tecnolgicas
ptimas para la navegacin, conexiones lentas,
navegadores antiguos, monitores pequeos o
monocromticos, etc.

Para mayor informacin, consultar:

http://programa.gobiernoenlinea.gov.co
recorriendo la ruta de los siguientes vnculos:
1- Equipos de trabajo
2 - Articulacin y Gestin