NORMAS Y RECOMENDACIONES PARA EL DESARROLLO DE PAGINAS WEB ACCESIBLES EN EL

SITIO EDUC.AR
Versin 1.02
Jorge Plano (Fundacin Ictys)
El sitio web de Educ.ar est comprometido en el objetivo que todo su contenido
sea accesible. Adoptamos las normas internacionales de accesibilidad, que son
elaboradas por la Web Accessibility Initiative del World Wide Web Consortium.
En Educ.ar usamos Bobby v 3.2 como herramienta para comprobar la accesibilidad y
todas las pginas que logran su aprobacin incluyen el cono "Bobby v 3.2
Aprobado".
Se dice que una pgina web es accesible si se han tenido en cuenta los
requisitos para que pueda ser usada por personas con discapacidades fsicas o
por usuarios que poseen diversas configuraciones de hardware o software. Esto
significa que su contenido pueda ser operado y recibido de mltiples modos.
Quien disea una pgina web debe tener en cuenta que muchos usuarios en
contextos muy diferentes intentarn acceder a la misma: que tal vez no pueden
ver, or o moverse con facilidad o no pueden usar un teclado o mouse, que su
pantalla puede ser solo texto o de tamao pequeo, que su conexin con Internet
puede ser lenta.
Por ejemplo, si todas las imgenes van acompaadas por texto alternativo, ese
texto puede presentarse al usuario como voz sintetizada, o en un perifrico
braille o como texto mostrado en pantalla. Cada uno de estos tres mecanismos usa
un sentido diferente haciendo la informacin accesible a grupos que representan
una diversidad de capacidades sensoriales.
Cada decisin de accesibilidad de diseo generalmente beneficiar a varios
grupos de discapacidades y a la comunidad web en su conjunto.
Las normas y recomendaciones para el desarrollo de pginas web accesibles no
incrementan apreciablemente la tarea y no limitan las posibilidades artsticas
del diseador.
En educ.ar se adoptarn a la brevedad las normas y recomendaciones que se
detallan a continuacin, las que se auditarn y adaptarn permanentemente para
asegurar una amplia accesibilidad.
Normas y recomendaciones para el desarrollo de pginas web accesibles
En este documento se presentan algunas normas y recomendaciones para el
desarrollo de pginas web accesibles a la mayor cantidad de usuarios posible.
Se considera aqu que la aplicacin de la norma es necesaria para garantizar la
accesibilidad de la pgina web, mientras que la aplicacin de la recomendacin
contribuye a mejorarla. El concepto de accesibilidad implica facilitar la
navegacin en internet de personas con algn tipo de discapacidad o recursos
informticos de diversa actualizacin o potencialidad.

En este documento se presentan indicaciones para el desarrollo de pginas web

que resulten accesibles a la mayor cantidad de usuarios, independientemente de

sus limitaciones fsicas o de los recursos informticos con que acceden a

Internet.
Las hemos calificado como normas o recomendaciones, en el primer caso se
considera que su adopcin es necesaria para garantizar la accesibilidad de la
pgina web, mientras que adoptar la recomendacin contribuye a mejorar la misma.

Abreviatura de los nombres de los editores de pginas web referenciados:

HMP: Hotmetal Pro 4.0
MDW: Macromedia Dreamweaver 1.2
MFP: Microsoft Front Page 2.02
NC: Netscape Composer 4.7

(1) IMAGENES Y GRAFICOS DE DATOS

(a) NORMA
Todas las imgenes y los grficos de datos deben incluir un texto alternativo
que describa su contenido. Los caracteres alfanumricos contenidos en las
imgenes y los grficos no reemplazan esta norma.
Las imgenes usadas como vietas llevarn como texto alternativo un asterisco
(*). Esta es una convencin difundida internacionalmente.
* Aplicacin en editores
MFP, NC, HMP:
1. Seleccionar la imagen, mostrar las Propiedades (a travs del botn
secundario del mouse o del men Editar).
2. Introducir el texto en la casilla marcada:
MFP: "Representaciones alternativas/Texto".
NC, HMP: "texto alternativo".
MDW:
1. Seleccionar la imagen.
2. En la ventana de Propiedades, colocar el texto en la casilla "Alt".
* Aplicacin en HTML
Incluir el atributo ALT = "texto alternativo".
(b) RECOMENDACION
Dar a los archivos nombres que tengan relacin con su contenido (evitar nombres
como "imagen1", "imagen2", etc.).
(c) RECOMENDACION
Si el contenido de la imagen o el grfico es muy importante, hacer un resumen
del mismo en otra pgina y enlazarla utilizando un "hipervnculo d".
(2) VIDEOS Y OTROS OBJETOS MULTIMEDIA
(a) NORMA
Incluir un texto alternativo que provea una descripcin general de la animacin.
Esta norma se aplica a: gif animados, videos, animaciones mediante scripts o
applets
* Aplicacin en editores
Ver nota en punto (1)Imgenes y grficos de datos
* Aplicacin en HTML

Incluir el atributo ALT = "texto alternativo".

(b) NORMA
Cada vez que se incluyen elementos sonoros, indicar su aparicin y funcin con
algn elemento visual.
(c) RECOMENDACION
Incluir, como opcin para el usuario, un relato en modo texto o sonido de la
evolucin de los componentes visuales ms significativos, sincronizado con la
accin.
* Aplicacin en editores
A partir de la versin 3.0, Quicktime brinda la posibilidad de incluir
descripciones de imgenes en los videos.
(d) RECOMENDACION
Incluir como opcin para el usuario el subtitulado o una transcripcin de los
elementos de sonido y voz del video.
* Aplicacin en editores
A partir de la versin 3.0, Quicktime brinda la posibilidad de subttular los
videos.
(3) MAPAS DE IMAGENES
(a) NORMA
Toda rea activa de la imagen debe poseer un texto alternativo que describa el
hipervnculo al que enlaza.
* Motivo
Hacer que los hipervnculos sean accesibles para personas ciegas que usen un
lector de pantalla y se desplacen entre los vnculos mediante la tecla TAB.
* Aplicacin en editores
HMP: Al crear la imagen, introducir el texto en la casilla "texto alternativo"
del cuadro de sus propiedades. Despus de creada la imagen, acceder mediante un
doble clic sobre la zona activa.
MDW: En el cuadro de Propiedades de la imagen, acceder a las propiedades del
mapa a travs del botn Map y, seleccionando cada zona, introducir el texto en
el casillero Alt.
MFP, NC: No soportan esta posibilidad. Requieren modificar el cdigo HTML
generado.
* Aplicacin en HTML
Dentro del parmetro AREA correspondiente a cada zona activa, incluir el
atributo ALT = "texto alternativo".
(b) NORMA
Usar slo mapas de tipo cliente.
* Aplicacin en editores
Por defecto, los mapas que generan los editores de pginas web suelen estar
configurados como tipo cliente.
(c) RECOMENDACION
Si no se ha logrado una versin accesible del mapa de imagen, o como opcin
adicional, crear en algn lugar de la pgina una lista en formato texto de todos
los hipervnculos provistos mediante el mapa de imagen. Y agregar un texto
alternativo de toda la imagen que sostiene el mapa indicando, por ejemplo, "mapa
de imagen, ver abajo lista de vnculos".

(4) COLORES
(a) NORMA
Asegurarse que toda informacin provista mediante colores sea transmitida en
forma simultnea por el contexto o por la tipografa.
(b) NORMA
No usar texto o fondo parpadeantes.
* Motivo
En algunos tipos de epilepsia eso puede disparar un ataque.
(c) NORMA
Los colores y las figuras de fondo deben contrastar bien con el texto, para
ofrecer una buena legibilidad a personas con limitaciones en la percepcin del
color o en caso de usuarios con monitor blanco y negro.
(5) TABLAS
(a) NORMA
Evitar las tablas siempre que sea posible, colocando la informacin en un
formato ms lineal.
(b) NORMA
Para las tablas de datos utilizar encabezamiento de fila y columna en forma
consistente.
No utilizar la propiedad de encabezamiento slo para alterar la tipografa o
alineamiento del texto.
* Aplicacin en editores
Para designar una fila o columna como encabezamiento:
1. Seleccionar las celdas correspondientes.
2. En Propiedad de las celdas tildar la casilla:
MFP, HMP: "celda de encabezado";
NC: "estilo de encabezado".
MDW:
1. Seleccionar las celdas correspondientes.
2. Elegir en el men Modify/Table/Row Properties o Column Properties; en el
cuadro que se abre, tildar la casilla "Row consist of table header cells" o
"Column consist of table header cells".
(c) NORMA
Si una tabla tiene dos o ms filas de ttulos, usar marcas jerrquicas para
identificarlas.
(d) NORMA
Si se utilizan tablas para diagramar en forma de columnas, no recurrir a las
marcas de encabezamiento para definir tipografas.
(e) RECOMENDACION
Asegurarse de que la informacin tenga sentido si se la lee lnea por lnea a
travs de la tabla.
* Motivo
Algunos lectores de pantalla pronuncian la informacin lnea por lnea.
(f) RECOMENDACION

Acompaar la tabla con un "hipervnculo d" a una pgina web que contenga una
versin linealizada, slo texto, de la informacin.
(6) SCRIPTS, APPLETS Y OTROS OBJETOS PROGRAMATICOS
(a) NORMA
Asegurarse de que las pginas presentan la informacin esencial, aun cuando los
scripts, applets u otros elementos programticos estn desactivados o no sean
soportados por el navegador del usuario.
* Aplicacin en HTML
Por ejemplo, incluir en el OBJECT correspondiente el atributo ALT = "texto
alternativo".
(b) NORMA
Si no se puede asegurar que se presente la informacin esencial, proveer una
pgina alternativa que sea accesible.
(7) HOJAS DE ESTILO
(a) NORMA
Si se utilizan hojas de estilo, organizar los documentos de modo que puedan ser
ledos de forma comprensible, aun si el navegador no soporta esta
caracterstica.
(8) TIEMPO DE REACCION
(a) NORMA
No utilizar mecanismos que impongan la reaccin del usuario en un tiempo mximo
predeterminado.
* Motivo
Tales mecanismos afectan el acceso a personas con limitaciones motoras en los
miembros superiores.
(9) HIPERVINCULOS
(a) NORMA
Para sostener los hipervnculos, utilizar una frase que tenga sentido cuando se
lea aislada o fuera de contexto.
No usar expresiones como "cliquear ac" o "versin completa" o "entrar".
* Motivo
Una persona ciega recorrer la pgina saltando de vnculo en vnculo con la
tecla TAB y su lector de pantalla, slo pronunciar el texto en el que estn
sostenidos los hipervnculos.
(b) NORMA
Colocar espacios o caracteres separando cada hipervnculo.
(10) ORGANIZACION DE LAS PAGINAS
(a) NORMA
No usar los encabezados (H1, H2, H3, etc.) con el fin de definir tipografas en
diferentes tamaos o estilos. Cuando se los utilice slo debe ser para expresar
la estructura de la pgina.

(11) FORMULARIOS
(a) RECOMENDACION
Proveer un formulario alternativo que pueda ser descargado y enviado por correo
electrnico.
(b) RECOMENDACION
No poner ms de un casillero de entrada en el mismo rengln.
(12) LISTAS
(a) NORMA
Incluir un ttulo en la lista.
(b) NORMA
Rotular numricamente los elementos de la lista para facilitar su ubicacin,
aunque sean percibidos fuera de contexto. Tambin en el caso de las listas
anidadas, por ejemplo: rotular el primer nivel con nmeros y los subtems con
letras, o rotular en forma jerrquica: 1, 1.1, 1.2, 1.2.1.
(c) NORMA
Incluir salto de lnea entre los elementos de la lista.
(13) MARCOS (FRAMES)
(a) NORMA
Colocar para cada marco el atributo title o name.
(b) NORMA
Cada marco debe referenciar a un archivo html.
(14) DE CARACTER GENERAL
(a) RECOMENDACION
Si no se logra que la pgina sea accesible, o si tiene un fuerte contenido
grfico, colocar al inicio un hipervnculo a una pgina alternativa con la
informacin en forma de texto puro.
(b) NORMA
Preferir el uso de archivos en formato ".doc" o ".html", en lugar de archivos
".pdf". Salvo que exista un fundamento en contrario.
* Motivo
Los archivos pdf son difciles de leer con un lector de pantalla.
Slo los archivos htm permiten definir textos alternativos para las imgenes.
(c) NORMA
Especificar el idioma en el que est escrito el documento.
* Aplicacin en editores
En general, los editores de pginas web no dan acceso a esta propiedad, se debe
modificar el cdigo HTML generado.
* Aplicacin en HTML

En el inicio del documento se encontrar la marca HTML, agregar el atributo

LANG, segn el idioma: es (castellano), en (ingls), fr (francs), gn (guaran),
it (italiano), pt(portugus).
Por ejemplo: <html lang = "sp">

REFERENCIAS
Las normas internacionales sobre accesibilidad son elaboradas por:
W3C Web Accessibility Initiative. (www.w3.org/WAI/)
Tambin se han utilizado materiales sobre accesibilidad de:
SID@R Seminario de Iniciativas sobre Discapacidad y Accesibilidad en la Red
(www.sidar.org)
Center for Applied Special Technology - Bobby's Manual.
(www.cast.org/bobby/)
Dena Shumila . HTML Commandments.
(www.utoronto.ca/atrc/rd/html/commandments.html)
Bandwidth Conservation Society.
(www.infohiway.com/faster/index.html)
NOTAS:
Hipervnculos d:
Se trata de un hipervnculo sostenido en una letra d ubicado cercano a un
elemento con accesibilidad nula o parcial (grfico, tabla, script, etc): su
objetivo es enlazar con una pgina que contenga una descripcin en texto de
dicho elemento de modo que pueda ser accesible, por ejemplo a quien lee la
pagina con una ayuda que pronuncia su contenido. Es una convencin usada
internacionalmente. Si el diseador desea hacerlo invisible, puede sostener el
hipervnculo en un pequeo grfico del mismo color que el fondo y usar como
texto alternativo la letra d.
Lector de pantalla:
Programa utilitario para pronunciar el contenido de la pantalla mediante
sntesis de voz. Permite que una persona con limitaciones visuales acceda a
contenidos informticos. No se utiliza el mouse, se realiza el desplazamiento
entre vnculos usando la tecla TAB y se usan otras para moverse por la pantalla.