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.