Diseno para Todos 1

DISEO WEB PARA TOD@S I
diseo para todos.p65
08/11/2007, 12:17
08/11/2007, 12:17
PROGRAMA MODULAR EN TECNOLOGAS DIGITALES Y SOCIEDAD DEL CONOCIMIENTO
DISEO WEB PARA TOD@S I

ACCESIBILIDAD AL CONTENIDO EN LA WEB
Materiales elaborados por:
CARLOS EGEA GARCA

Con la colaboracin de:
JUAN CARLOS RAMIRO IGLESIAS ALICIA SARABIA SNCHEZ
SOCIEDAD DEL CONOCIMIENTO
08/11/2007, 12:17
Diseo de la cubierta: Carmen Rosa Redondo UNED (Universidad Nacional de Educacin a Distancia) Carlos Egea Garca
Colaboradores: Juan Carlos Ramiro Iglesias y Alicia Sarabia Snchez Coordinadora de la coleccin: Sara Osuna Acedo De esta edicin Icaria editorial, s.a. Arc de Sant Cristfol, 11-23 - 08003 Barcelona www.icariaeditorial.com
ISBN: 978-84-7426-630-6 Depsito legal: B-22.024-2007 Fotocomposicin: Text Grfic Impreso en Romany/Valls, s.a. Verdaguer, 1, Capellades (Barcelona)
08/11/2007, 12:17
NDICE
Prlogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Primera parte DISEAR PARA TODOS Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Un acercamiento a la discapacidad . . . . . . . . . . . . . . . . . . . . . Discapacidad y accesibilidad a las tecnologas digitales . . . . 13 14 17 19 20 26 29 31 32 35 36 36 38 38 39
Problemas de accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . .
Problemas de acceso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Elementos de los terminales de acceso . . . . . . . . . . . . . . . . . Interfaz hombre mquina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contenidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ordenadores e internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Accesibilidad en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La accesibilidad en la web es importante . . . . . . . . . . . . . . . . Las vertientes de la accesibilidad en la web . . . . . . . . . . . . . . El Consorcio Mundial de la Web (W3C) . . . . . . . . . . . . . . . . . La Iniciativa de Accesibilidad en la Web (WAI) . . . . . . . . . . . . Las pautas para la accesibilidad en la web . . . . . . . . . . . . . . .
Legislacin y otras normas en materia de accesibilidad en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Legislacin y otras normas en Espaa . . . . . . . . . . . . . . . . . . Otras normas internacionales . . . . . . . . . . . . . . . . . . . . . . . . .
41 41 44
08/11/2007, 12:17
Las herramientas de creacin o de autor . . . . . . . . . . . . .

Accesibilidad en las herramientas de creacin ms conocidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49 51 69 72 97
Las aplicaciones o agentes de usuario . . . . . . . . . . . . . . .

Accesibilidad en las aplicaciones de usuario ms comunes . . Aplicaciones de usuario alternativas . . . . . . . . . . . . . . . . . . . .
Las pautas de accesibilidad al contenido en la web 1.0 de w3c/wai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Qu son las pautas de accesibilidad al contenido . . . . . . . . en la web? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Qu son las prioridades, los niveles de adecuacin? . . Por qu son necesarias estas pautas? . . . . . . . . . . . . . . . . . Algunos ejemplos de barreras habituales . . . . . . . . . . . . . . . . en las pginas web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cmo se presentan las pautas? . . . . . . . . . . . . . . . . . . . . . .
PAUTA 1. Proporcione alternativas equivalentes para el contenido visual y auditivo . . . . . . . . . . . . . . . . . . . . . . . PAUTA 2. No se base slo en el color . . . . . . . . . . . . . . . . . PAUTA 3. Utilice marcadores y hojas de estilo y hgalo apropiadamente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PAUTA 4. Identifique el idioma usado . . . . . . . . . . . . . . . . . PAUTA 5. Cree tablas que se transformen correctamente . PAUTA 6. Asegrese de que las pginas que incorporan tecnologas digitales se transformen correctamente . . . . . . PAUTA 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes . . . . . . . . . . . . . . . . PAUTA 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . PAUTA 9. Disee para la independencia del dispositivo . . . PAUTA 10. Utilice soluciones provisionales . . . . . . . . . . . . . PAUTA 11. Utilice las tecnologas y pautas W3C . . . . . . . . . PAUTA 12. Proporcione informacin de contexto y orientacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PAUTA 13. Proporcione mecanismos claros de navegacin
103 103 104 105 105 105 106 106 107 107 108 109 109 110 110 110 111 112 113 113
08/11/2007, 12:17
PAUTA 14. Asegrese de que los documentos sean claros y simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
113
Segunda parte CODIFICACIN HTML Y CSS

Codificacin HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML, SGML, XHTML, XML... . . . . . . . . . . . . . . . . . . . . . . . . SGML y HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SGML y XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Definicin de tipo de documento . . . . . . . . . . . . . . . . . . . . . . . Sintaxis de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Atributos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Atributos de eventos en HTML . . . . . . . . . . . . . . . . . . . . . . . . 117 117 117 119 120 121 123 124 128 129 131 131 132 132 133
Qu es CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS soluciona problemas comunes . . . . . . . . . . . . . . . . . . . . Las hojas de estilo ahorran trabajo . . . . . . . . . . . . . . . . . . . . . Mltiples hojas de estilo en una. . . . . . . . . . . . . . . . . . . . . . . . Sintaxis de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tercera parte HACER UNA BITCORA ACCESIBLE

Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Primeras instrucciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 1. Para quin es la accesibilidad web? . . . . . . . . . Paso 2. Elegir un DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . Paso 3. Identificar el idioma . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 4. Elegir un ttulo significativo . . . . . . . . . . . . . . . . . . .
137 139 141 144 145 147
08/11/2007, 12:17
Paso 5. Ayudas adicionales a la navegacin . . . . . . . . . . Paso 6. Colocar primero el contenido principal . . . . . . . . Paso 7. El uso de los colores . . . . . . . . . . . . . . . . . . . . . . . . Paso 8. Vnculos reales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 9. Vnculos correctos y con ttulos . . . . . . . . . . . . . . Paso 10. Atajos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 11. No abrir nuevas ventanas . . . . . . . . . . . . . . . . . . . Paso 12. Acrnimos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 13. Tablas accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 14. Usar listas reales . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 15. Equivalente textual para imgenes . . . . . . . . . . Paso 16. Atributo alt vaco . . . . . . . . . . . . . . . . . . . . . . . . . Paso 17. Mapas de imagen accesibles . . . . . . . . . . . . . . . Paso 18. Lneas horizontales . . . . . . . . . . . . . . . . . . . . . . . . . Paso 19. Tamaos de fuente relativos . . . . . . . . . . . . . . . . Paso 20. Encabezados correctos . . . . . . . . . . . . . . . . . . . . . Paso 21. Verificar la accesibilidad . . . . . . . . . . . . . . . . . . . . Anexo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Web recomendadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
149 150 153 156 158 161 163 164 166 169 172 175 177 180 182 184 186 191 191 191 193 193 195 195 196
Enlaces de inters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Informacin general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Empresas espaolas comprometidas con la accesibilidad web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Recursos para deficiencia visual . . . . . . . . . . . . . . . . . . . . . . . Herramientas para evaluar y validar la accesibilidad web . . .
08/11/2007, 12:17
Prlogo
En este libro se recogen los materiales relativos a la primera parte mdulo Diseo para tod@s del Programa Modular en Tecnologas Digitales y Sociedad del Conocimiento de la Universidad Nacional a Distancia (UNED). El documento consta de tres partes: 1. Disear para todos, con informacin general sobre la discapacidad, las tecnologas digitales y cmo afectan a las personas con discapacidad, la accesibilidad en la web y su normativa, las herramientas de creacin y las aplicaciones de usuario, as como el contenido de las Pautas de Accesibilidad al Contenido en la Web 1.0 de W3C/WAI. 2. Codificacin HTML y CSS, en la que se trata de realizar un acercamiento a la codificacin de los lenguajes bsicos de marcado (HTML y CSS), sin los cuales es difcil comprender ciertas operaciones necesarias para disear de forma accesible un documento web. La frecuente utilizacin de herramientas de creacin de pginas web que facilitan al autor una presentacin de los contenidos de forma visual, sin necesidad de tocar el cdigo subyacente, ha provocado entre los nuevos diseadores un general desconocimiento de las bases de codificacin. Claro exponente de este tipo de herramientas son los editores Dreamweaver (de Macromedia) o FrontPage (de Microsoft), dos de los ms usados en la actualidad. Lo mismo ocurre con otras muchas herramientas del tipo gestor de contenidos que, si bien facilitan la edicin y mantenimiento de los contenidos de los sitios web, no facilitan el contacto con el cdigo a las personas que las manejan. 3. Hacer una bitcora accesible, que servir de documento de soporte para las posibles prcticas que se pueden desarrollar con los gestores de contenido. 9
08/11/2007, 12:17
La finalidad de este documento es meramente didctica y no tiene pretensiones normativas o tcnicas ms all de las relativas a la enseanza de contenidos sobre accesibilidad en la web. El autor de los materiales asume todas las responsabilidades derivadas de la necesaria interpretacin de determinados aspectos que hoy da se encuentran en fase de discusin y desarrollo en torno a este tema. Carlos Egea Garca Enero de 2007
10
10
08/11/2007, 12:17
Primera parte DISEAR PARA TOD@S
11
11
08/11/2007, 12:17
12
12
08/11/2007, 12:17
Introduccin
Sin lugar a dudas, los innumerables avances tecnolgicos de los ltimos aos han propiciado que nos veamos inmersos en una sociedad completamente nueva, que est siendo denominada Sociedad de la Comunicacin y la Informacin. Las connotaciones emergentes de esta nueva sociedad hacen que, expandida hasta el ltimo rincn del planeta, afecte en mayor o menor medida a toda la poblacin presente en l. No obstante, esta enorme revolucin est creando al mismo tiempo una gran brecha social, que se ha venido a llamar brecha digital. La riqueza de cada pas, su grado de desarrollo econmico, las creencias religiosas y el nivel cultural de su poblacin influyen de manera decisiva en la posibilidad de los ciudadanos de acceder a esta ltima revolucin social. No podemos dejar de observar que el tremendo potencial que desarrollan las tecnologas digitales est incidiendo claramente en el crecimiento de los pases enmarcados en las sociedades avanzadas, al mismo tiempo que los pases en vas de desarrollo se encuentran en desventaja para acceder a esta Sociedad de la Comunicacin y la Informacin. Las nuevas discriminaciones que esta sociedad nos presenta se ven acentuadas en las denominadas grandes minoras, existentes en todos los pases, con especial incidencia en la gran minora de personas con discapacidades presente en el mundo, a la que podramos aadir el conjunto de personas de la llamada tercera edad. Las carencias y problemas de accesibilidad a los medios fsicos de entrada y salida de informacin en los nuevos elementos tecnolgicos, as como al contenido de la informacin, hacen que un nmero considerable de personas con discapacidad y personas mayores se encuentren inmersas en la brecha digital, que entran de lleno en un riesgo evidente de infoexclusin. De este modo, el esfuerzo por lograr que las tecnologas digitales sean ac13
13
08/11/2007, 12:17
cesibles, tanto en su apartado fsico como en el contenido, debe considerarse como una necesidad incuestionable para eliminar este riesgo. Los conceptos presentes en las lneas del Diseo web para tod@s deben encontrarse necesariamente en cualquier desarrollo tecnolgico para los nuevos sistemas de acceso a la sociedad de la informacin, as como en la elaboracin de contenidos, con el fin de lograr la plena accesibilidad universal. La Organizacin Mundial de la Salud seala en sus informes que actualmente existen en el mundo entre 500 y 600 millones de personas con discapacidad. En este contexto, el acceso a la formacin y la educacin en tecnologas digitales de las personas con discapacidad constituye un factor esencial para la integracin y no discriminacin de millones de personas. Slo accediendo en igualdad de condiciones y al mismo ritmo se puede lograr que ninguna persona con discapacidad se vea relegada en la Sociedad de la Comunicacin y la Informacin.
Un acercamiento a la discapacidad
La Organizacin Mundial de la Salud, a travs de la Clasificacin Internacional del Funcionamiento, de la Discapacidad y de la Salud (CIF) del ao 2001, define la discapacidad como trmino genrico que incluye dficits, limitaciones en la actividad y restricciones en la participacin. Indica los aspectos negativos de la interaccin entre un individuo (con una condicin de salud) y sus factores contextuales (factores ambientales y personales). Explica los trminos contenidos en la definicin de la siguiente manera: Condicin de salud: es un trmino genrico que incluye enfermedad (aguda o crnica), trastorno, traumatismo y lesin. [...] Puede incluir tambin otras circunstancias como embarazo, envejecimiento, estrs, anomalas congnitas o predisposiciones genticas. Deficiencia: es la anormalidad o prdida de un estructura corporal o de una funcin fisiolgica. Las funciones fisiolgicas incluyen las funciones mentales. Con anormalidad se hace referencia, estrictamente, a una desviacin significativa respecto a la norma estadstica establecida 14
14
08/11/2007, 12:17
(por ejemplo, la desviacin respecto a la media de la poblacin obtenida a partir de normas de evaluacin estandarizadas) y slo debe usarse en este sentido. Limitaciones en la actividad: son las dificultades que un individuo puede tener para realizar actividades. [...] Abarca desde una desviacin leve hasta una grave en trminos de cantidad o calidad, en la realizacin de la actividad, comparndola con la manera, extensin o intensidad en que se espera que la realizara una persona sin esa condicin de salud. Restricciones en la participacin: son los problemas que puede experimentar un individuo para implicarse en situaciones vitales. La presencia [...] viene determinada por la comparacin de la participacin de esa persona con la participacin esperable de una persona sin discapacidad en esa cultura o sociedad. Factores contextuales: son los factores que constituyen, conjuntamente, el contexto completo de la vida de un individuo, y en concreto el trasfondo sobre el que se clasifican los estados de salud en la CIF. Los factores contextuales tienen dos componentes: factores ambientales y factores personales. Factores Ambientales: [...] se refieren a todos los aspectos del mundo extrnseco o externo que forman el contexto de la vida de un individuo, y como tal afecta el funcionamiento de esa persona. [...] Incluyen al mundo fsico natural con todas sus caractersticas, el mundo fsico creado por el hombre, las dems personas con las que se establecen o asumen diferentes relaciones o papeles, las actitudes y valores, los servicios y sistemas sociales y polticos, y las reglas y leyes. Factores Personales: son los factores contextuales que tienen que ver con el individuo como la edad, el sexo, el nivel social, experiencias vitales, etc... Facilitadores: son todos aquellos factores en el entorno de una persona que, cuando estn presentes o ausentes, mejoran el funcionamiento y reducen la discapacidad. Entre ellos se incluyen aspectos tales como que el ambiente fsico sea accesible, la disponibilidad de tecnologa asistencial adecuada [...]. Los facilitadores pueden prevenir que un dficit o limitacin en la actividad se convierta en una restriccin en la participacin, puesto que contribuyen a mejorar el rendimiento 15
15
08/11/2007, 12:17
real al llevar a cabo una accin, con independencia del problema que tenga la persona respecto a la capacidad para llevar a cabo dicha accin. Barreras: son todos aquellos factores en el entorno de una persona que, cuando estn presentes o ausentes, limitan el funcionamiento y generan discapacidad. Esta clasificacin parte de un enfoque sustancialmente diferente del que mantena su predecesora, la Clasificacin Internacional de Deficiencias, Discapacidades y Minusvalas (CIDDM) del ao 1980, que defina los trminos bsicos del siguiente tenor: Deficiencia: toda prdida o anormalidad de una estructura o funcin psicolgica, fisiolgica o anatmica. Discapacidad: toda restriccin o ausencia (debida a una deficiencia) de la capacidad de realizar una actividad en la forma o dentro del margen que se considera normal para un ser humano. Minusvala: una situacin desventajosa para un individuo determinado, consecuencia de una deficiencia o de una discapacidad, que limita o impide el desempeo de un rol que es normal en su caso (en funcin de la edad, sexo y factores sociales y culturales).
Como podemos observar, el cambio conceptual entre una y otra clasificacin es muy importante. Si en la del ao 1980 el problema se centraba en el individuo (que era quien padeca la deficiencia, la discapacidad y la minusvala), en la CIF el enfoque pasa a incluir el contexto como elemento esencial que produce una discapacidad si carece de facilitadores que ayuden a superar la limitacin en la actividad o interpone barreras que restrinjan el funcionamiento. Desde esta perspectiva, no es el individuo el que debe adaptarse, si no quiere quedarse al margen de la sociedad, a los estndares de la poblacin general, sino que el medio fsico natural, el mundo fsico creado por el hombre, las dems personas con las que se establecen o asumen diferentes relaciones o papeles, las actitudes y valores, los servicios y sistemas sociales y polticos, y las reglas y leyes, en suma, el contexto, han de estar preparados para un acceso universal. 16
16
08/11/2007, 12:17
Discapacidad y accesibilidad a las tecnologas digitales

La diversidad funcional en el ser humano es enorme. Cada uno de nosotros goza de unas capacidades concretas y puede o no realizar determinadas actividades, no slo segn el modo habitual de llevarlas a cabo por la generalidad de la poblacin, sino tambin siguiendo cauces alternativos de funcionalidad. En este contexto, las personas con discapacidad presentan una serie de limitaciones para el acceso a los estndares normalizados de la Sociedad de la Informacin y la Comunicacin, los cuales se convierten en barreras que impiden la accesibilidad a los medios de los que sta se dota. As, las personas que carecen de visin no podrn acceder a los contenidos visuales sin tecnologas supletorias y aquellas con visin escasa precisarn tecnologas complementarias y de apoyo; las personas con dficit auditivo tendrn que ver compensada la privacin en el acceso a los medios y contenidos sonoros mediante dispositivos y opciones alternativas. Las personas con dificultades motrices en sus miembros superiores necesitarn dispositivos alternativos o adaptados y las personas con limitaciones intelectuales tendrn que disponer de software y contenidos que se adecuen a sus caractersticas. Pero todo ello debe cumplir unos estndares que aseguren, por una parte, que la accesibilidad es real y, por otra, la compatibilidad de formatos de forma que la informacin sea realmente comunicable, lo cual es el fundamento de la Sociedad de la Comunicacin y la Informacin.
17
17
08/11/2007, 12:17
18
18
08/11/2007, 12:17
Problemas de accesibilidad
Para algunas personas con limitaciones funcionales (visuales, motoras, auditivas o cognitivas) no es suficiente que existan en el mercado elementos fsicos de acceso a las prestaciones que nos proporcionan las tecnologas digitales, ni que stas estn repletas de informacin y servicios. Es necesario adems que tanto el elemento fsico como el lgico (hardware y software) sean accesibles en su manejo y en el contenido que ofrecen. Las deficiencias de cada persona hacen que las dificultades y necesidades sean muy variadas. Por ello, en este apartado vamos a hacer un repaso a los principales problemas que las personas con discapacidad encuentran en cada uno de los aspectos relacionados con las tecnologas digitales. Podemos englobar en tres grandes lneas las principales dificultades que encuentran las personas con discapacidad en su relacin con las tecnologas digitales: Posibilidad de manejo o acceso a los elementos fsicos que nos proporcionan las tecnologas digitales. Se trata de los conocidos como terminales, entre los cuales podemos citar telfonos, ordenadores, cajeros automticos o la televisin digital. Posibilidad de efectuar una interaccin con las interfaces presentes en cada medio. Las interfaces suelen estar compuestas de mens, barras de navegacin, botones y otros elementos estructurales que deben adecuarse a pautas de Diseo web para tod@s con el fin de lograr su accesibilidad. Posibilidad de acceder a los contenidos que nos presentan los terminales, que cada vez van siendo mayores y ms complejos. Hoy da las tecnologas digitales nos permiten sacar una entrada para el cine, manejar nuestros datos bancarios o realizar algunos trmites legales o administrativos. 19
19
08/11/2007, 12:17
Problemas de acceso
Terminales de acceso
Acceder a las tecnologas digitales a travs de los terminales de acceso supone el primer gran problema para gran nmero de personas con limitaciones funcionales, debido principalmente a que no han sido diseados en base a los principios de accesibilidad universal. La imposibilidad o dificultad en el manejo de los terminales supone dejar fuera de los servicios prestados por las tecnologas digitales a un porcentaje de la poblacin. Qu ocurre si una persona con discapacidad fsica no puede marcar las teclas de un telfono mvil debido a su diseo? Podr establecer una comunicacin? Podr acceder a internet a travs de l? Hay una variedad muy grande de terminales, si bien la tendencia es a reducirlos y acceder a todos los servicios a travs de unos pocos, principalmente el telfono mvil, el ordenador y muy pronto nuestra pantalla de televisin digital. Vamos a hacer un repaso escueto de los problemas de accesibilidad que se presentan para algunas personas con discapacidad.
Telfonos mviles
Desde los primeros telfonos mviles hasta ahora se ha producido una significativa evolucin, tanto en sus funciones como en su diseo. Paradjicamente, los primeros terminales eran mucho ms accesibles que ahora, debido principalmente al tamao de las teclas. Hoy da, dependiendo de la tecnologa incorporada al mvil, hay mucha diferencia entre modelos. El terminal que lleva tecnologa WAP (Wireless Application Protocol, Protocolo de Aplicacin de Telefona Inalmbrica) resulta ms complejo en su manejo debido principalmente a que incorpora un mayor nmero de opciones que uno con sistema GPS (Global Possitioning System, Sistema de Posicionamiento Global). Los llamados de tercera generacin o UMTS (Universal Mobile Telecommunications System, Sistema Universal de Telecomunicaciones Mviles) cambian completamente en el manejo de la interfaz al disearse con pantallas tctiles. El mayor problema en los terminales que usan tecnologa GSM y WAP lo constituye su tamao, cada vez ms pequeo y, por consiguiente, las reducidas dimensiones de los botones que permiten su manejo. De este 20
20
08/11/2007, 12:17
modo, las personas con deficiencias fsicas graves o severas y con problemas de destreza encuentran muchas dificultades en su uso, y en algunos casos les resulta imposible utilizarlos. Del mismo modo, la reduccin del tamao del terminal hace que las dimensiones de la pantalla tambin sean menores, el texto que aparece es pequeo y, para las personas con dificultad en la visin, su uso queda muy restringido. Para las personas invidentes resulta imposible su manejo si no disponen de teclas resaltadas y lector de pantalla para los mensajes que aparecen en ella. Algo parecido ocurre con las personas que tienen deficiencias auditivas, al ser difcil y limitado el control de voz y del timbre. Con la introduccin de la tecnologa UMTS probablemente algunos de estos problemas puedan solucionarse, si los fabricantes incorporan la posibilidad de modificar tipo y tamaos de los caracteres que aparecen en pantalla. Aspecto ste importante si funcionan con pantallas tctiles, para que pueda facilitarse su manejo si se tiene falta de precisin o problemas de destreza. Actualmente, existen terminales que hacen uso del reconocimiento de voz. Pero su tecnologa est an por depurar, tanto en su funcionamiento como en su diseo. En cualquier caso, es necesario incorporar los parmetros de diseo universal en su fabricacin si queremos que todas las personas con discapacidad puedan hacer uso de todos los servicios que van a ofrecer.
Telfonos fijos
Un caso muy distinto lo constituyen los telfonos fijos, que incluimos en este apartado de tecnologas digitales al incorporar cada vez ms funciones que dan acceso a los servicios que nos proporcionan las mismas. Existen multitud de modelos fabricados por las diversas compaas presentes en el sector. A diferencia de los mviles, son terminales ms grandes y con mayor facilidad para su manejo por todas las personas con problemas visuales, auditivos o de destreza o limitacin fsica. Se fabrican desde hace tiempo terminales con teclados de diversos tamaos y con otras caractersticas que facilitan su uso, como son amplificadores, sistemas de avisos luminosos o reconocimiento de voz. Tambin podemos encontrar telfonos que funcionan en modo texto, que mediante un sistema especial hace que personas sordas puedan establecer comunicacin entre ellas. 21
21
08/11/2007, 12:17
En este campo, est desarrollada prcticamente cualquier tipo de solucin para cualquier necesidad. Sin embargo, al no comercializarse para el gran pblico, quien desee acceder a ellas debe pagar un precio muy superior al resto de terminales.
Cajeros automticos y quioscos virtuales

Sin duda, los cajeros automticos y quioscos virtuales se pueden incluir dentro de los terminales que dan acceso a servicios mediante tecnologas digitales, al incorporar cada vez ms opciones de este tipo. Nacidos con el objeto de dar opcin al usuario de extraer dinero de su cuenta bancaria de forma autnoma, su evolucin los ha convertido en verdaderos centros de servicios desde los que podemos gestionar nuestras cuentas corrientes, recargar un mvil, comprar entradas para espectculos o pagar impuestos. Su manejo se produce a travs de una botonera o teclado, e incluso incorporan una pantalla tctil. Para la mayora de las personas ofrecen un servicio til, sin embargo, para gran nmero de personas discapacitadas su uso es verdaderamente difcil. Su colocacin y altura (algunos incrustados en las paredes) los hace inaccesibles para personas que usan sillas de ruedas ya que no pueden llegar a los botones, a leer la pantalla o a colocar la tarjeta en su ranura. Muchos de ellos, si bien lo van incorporando, carecen de sonido, lo que los hace inservibles para personas invidentes. Por otro lado, aun cuando la interfaz y la navegacin suelen ser sencillos a base de mens, los colores utilizados en la pantalla suelen ser tenues o con bajo contraste y el cristal ofrece demasiados reflejos, lo que los convierte en terminales muy difciles para personas con visin reducida. Conforme los cajeros o quioscos virtuales ofrecen ms servicios, las interfaces tienden a complicarse. Se debera tener especial cuidado en su diseo, ya que una excesiva complejidad podra dificultar su manejo a personas con problemas de aprendizaje.
Tarjetas con banda magntica o chip

El elemento fsico que nos sirve para entrar en conexin con el cajero o quiosco virtual lo constituyen las tarjetas de crdito. En ellas se incorporan 22
22
08/11/2007, 12:17
aquellos datos personales y financieros que nos van a dar acceso a los servicios ofrecidos. Algo tan simple como una tarjeta de estas caractersticas incorpora en s misma, sin embargo, serios problemas de accesibilidad. Al tener que ser manejadas normalmente en una sola posicin o direccin, su uso resulta muy complejo en personas invidentes o con muy baja visin en el momento de tener que introducirla en la ranura de acceso, ya que stas no estn estandarizadas y para orientar al usuario se utilizan grficos o imgenes visuales. No todas las tarjetas de crdito tienen la numeracin resaltada, lo que orientara a usuarios invidentes. Sera conveniente que pudieran incorporar signos en braille, pero hasta el momento esta opcin no se contempla en su diseo. De modo similar, las personas con limitaciones funcionales, que estn afectadas de problemas severos de movilidad y con problemas de destreza para manejar objetos pequeos y de precisin, encuentran dificultades para introducir las tarjetas en las ranuras de los cajeros o quioscos virtuales. El diseo estructural de estos elementos slo posee una opcin de funcionamiento, a travs de la insercin de la tarjeta. Para contemplar una accesibilidad universal debieran observarse diversas formas alternativas de conexin, como la lectura de su banda magntica o chip en forma plana sobre una superficie mayor.
Ordenadores personales
Cuando a principios de los ochenta se empezaron a comercializar en serie los primeros ordenadores personales, pocos podan pensar que se convertiran en herramientas esenciales en nuestras vidas. Hoy por hoy, no existe ningn otro terminal que nos proporcione mayor nmero de servicios y recursos a travs del software que incorpora, desde usar un mero programa de tratamiento de textos hasta realizar complejas bases de datos y clculos financieros. Y con la incorporacin de internet se han convertido en el elemento emblemtico de acceso a la sociedad de la informacin. Paradjicamente, igual que ocurra con los telfonos mviles, su accesibilidad era mucho mayor en sus inicios que actualmente. Teclados ms simples y pantallas monocromas por obligacin hacan de l un elemento muy til para personas con discapacidad. Al mismo tiempo, el software 23
23
08/11/2007, 12:17
que incorporaban, de interfaces mucho ms sencillas y mens ms grandes, con mucha menos carga grfica, los hacan relativamente ms accesibles que ahora. Hoy en da son mltiples los problemas de accesibilidad que presentan. Si bien es cierto que su tamao puede ser ms grande que los diseos comercializados, tambin su coste aumenta si queremos salirnos de los patrones estndares. Las personas invidentes encuentran su mayor problema en la tendencia a presentar la informacin en forma eminentemente visual. Un lector de pantalla realiza la funcin de ofrecer informacin oral de todos aquellos elementos que aparecen en la pantalla, bien sean elementos para interactuar (botones o hiperenlaces) o del mismo contenido. En el diseo de los contenidos no suele tenerse en cuenta que el acceso se puede realizar a travs de lectores de pantalla que slo pueden leer correctamente si aquellos estn estructurados de forma correcta. Para muchas personas con escasa visin, sin llegar a ser invidentes totales, son necesarios monitores grandes o muy grandes. Esto hace que muchas de ellas no puedan acceder a estas pantallas debido a su precio, lo cual supone una discriminacin (aunque sta sea econmica y no por discapacidad), ya que a igual servicio el coste es mayor para quien tiene una limitacin funcional. Si bien es cierto que a travs de opciones de software para aumentar el tamao de las letras se puede efectuar una lectura mejor, esta prctica es muy dificultosa en monitores de 15 o 17 pulgadas, que son las ms comunes en el mercado. En el caso de personas con discapacidad auditiva, su dificultad para reconocer sonidos y cambios de frecuencia les hace encontrarse desorientados cuando el funcionamiento del ordenador se basa en elementos sonoros. Con la incorporacin a los sistemas operativos ms usuales de la opcin Showsound, que proporciona informacin textual de todos aquellos sonidos producidos en el manejo del ordenador, se puede solucionar en cierta forma esta dificultad. Las personas con discapacidad auditiva que adems presentan un problema fsico que les dificulta el manejo del teclado, tambin encuentran serias dificultades al manejar los programas y terminales de reconocimiento de voz. En el caso de personas con discapacidad fsica que impide una destreza adecuada o movimientos de manos y miembros superiores, un teclado puede resultar un elemento inservible, de igual modo que un ratn con24
24
08/11/2007, 12:17
vencional. Para solucionar estos problemas existen dispositivos especficos de entrada de informacin muy variados, que abarcan desde el ya mencionado sistema de reconocimiento de voz, ratones ms grandes de diseo trackball, joysticks o punteros diseados para funcionar a travs de sensores.
Televisin
La televisin ha sido durante aos el terminal de acceso por excelencia a la sociedad de comunicacin de masas en formato audiovisual. Aunque su tecnologa slo ha permitido hasta ahora una transmisin unidireccional de informacin, sin posibilidad de que el usuario interactuara sobre ella salvo para cambiar de canal, la nueva televisin digital da un vuelco completo al concepto de televisin tradicional. La televisin digital nos abre camino a un mundo de servicios completamente nuevo, entre los que podemos encontrar muchos de los ofrecidos por nuestros ordenadores mediante el acceso a internet. Nos encontramos tres problemas esenciales en la accesibilidad de la televisin: El primero lo sufren las personas con discapacidad auditiva que no pueden recibir los sonidos emitidos por la televisin. Para ello es necesario que las programaciones se subtitulen o se incluya la imagen de un intrprete de lengua de signos, aspecto ste que an hoy en da se utiliza muy poco pese a ser tcnicamente posible. En segundo lugar, la forma de manejo de la televisin se realiza a travs del mando a distancia. ste suele tener las teclas excesivamente pequeas para las personas con dificultad en la movilidad o con falta de fuerza; adems, para las personas mayores y con baja visibilidad los smbolos, numeracin y letras de las teclas suelen tener escaso contraste, lo que dificulta su lectura. Y en tercer lugar, a las personas invidentes les resulta imposible acceder a las imgenes. S pueden, en cambio, seguir la programacin mediante tcnicas de audiodescripcin que van narrando todo lo que sucede en la pantalla. No obstante, al igual que ocurre con la subtitulacin, su implantacin es muy escasa todava. 25
25
08/11/2007, 12:17
Radio
La radio que conocemos, primer aparato real de comunicacin masiva de informacin a travs de ondas sonoras, siempre ha estado prohibida para las personas con discapacidad auditiva. Recientemente se estn implantando tecnologas digitales de radio digital que ofrecern mltiples servicios, de modo parecido, salvando las distancias, a la TV digital, que ofrecern la presentacin a travs de una pantalla del texto que se emita desde la cadena de radio. Las personas invidentes tienen la posibilidad, si est implementado, de seguir la programacin televisiva a travs de aparatos de radio y frecuencias especiales que sintonizan con las frecuencias televisivas.
Elementos de los terminales de acceso

Para interactuar con los terminales vistos anteriormente existen diversos y mltiples aparatos que nos sirven para introducir la informacin que se debe procesar. Cada uno de ellos tiene sus propias particularidades y sus propios problemas de accesibilidad que se describen a continuacin en grandes lneas.
Teclados
Usados principalmente como elemento de acceso al ordenador, no obstante tambin son usados en otros terminales ya vistos, como los cajeros automticos o quioscos virtuales. Su diseo puede ser muy variado y de diferente complejidad, puede ser alfanumrico y extenso para los ordenadores, simplemente numrico, con teclas que agrupan varios caracteres o ilustrados mediante smbolos. As, podemos encontrar teclados en ordenadores, telfonos fijos y mviles, cajeros y mandos a distancia. Para muchas personas con movilidad reducida o falta de destreza, los teclados suponen verdaderas barreras. De igual modo lo suponen para las personas invidentes, cuando las teclas no van acompaadas de su dibujo en braille o resaltado. Para este ltimo supuesto, el teclado debe ser de mayores dimensiones, de forma que en sus teclas se puedan encontrar 26
26
08/11/2007, 12:17
dichos caracteres. Las letras, nmeros y smbolos de cada tecla deben estar lo suficientemente definidos y diseados en colores, cuyo contraste sea accesible a personas con visin reducida.
Ratones
Los ratones, en todas sus variantes, incluidos los trackballs,1 pticos o placas tctiles, son usados en esencia para interactuar con el ordenador. Los ratones estndares suelen ser difciles de manejar para personas con escasa destreza o una mnima fuerza para realizar el movimiento de arrastre del puntero y precisin para pinchar en una zona pequea. Los ratones incorporados de serie en ordenadores porttiles (placas tctiles) requieren demasiada precisin en un espacio muy reducido, por lo que resultan impracticables para gran nmero de personas, entre las que se encuentran muchas personas mayores. El ratn debe ser configurable al menos para poder cambiar el tamao del puntero y su color, aspecto esencial para personas de baja visin o daltnicas.
Jogs
Consisten en una plataforma que incorpora cuatro botones, distribuidos simtricamente en la mayora de los casos. Son similares a los que llevan algunos mandos a distancia de vdeos, DVD y mandos a distancia, y cumplen la funcin de moverse en las cuatro direcciones a travs de mens en pantalla. Presentan los mismos problemas de accesibilidad que los ya comentados para personas con escasa movilidad o destreza, al ser a veces difcil seleccionar con la debida precisin las opciones. Tambin, al igual que los teclados, si no llevan incorporados los smbolos en braille resultan de muy difcil manejo en personas invidentes.
1. Los trackballs son ratones que llevan la bola encima. Pueden ser manejados incluso con las muecas o la palma de la mano y suelen ser de un tamao superior a los ratones convencionales, lo que facilita su uso para muchas personas.
27
27
08/11/2007, 12:17
Ruedas
Con el tiempo, los ratones han ido incorporando ms botones y otros accesorios adicionales como, por ejemplo, unas pequeas ruedas o piezas giratorias que, insertadas en el cuerpo del ratn, bien encima o a los lados, sirven, entre otras funciones, para navegar y moverse verticalmente por las pginas web. Suelen ser de reducido tamao y requieren el movimiento de los dedos de la mano y una cierta precisin, por lo que a personas que carecen de destreza o sufren limitacin grave de movimientos en los miembros superiores no les resulta practicable. De igual modo, a las personas con determinadas deficiencias mentales que limiten la concentracin o fijacin les resulta difcil su uso. Igual ocurre con personas mayores que tienen enfermedades como el Parkinson, debido al temblor de manos que ste produce. Estas pequeas ruedas tambin se han empezado a incluir en telfonos mviles que usan tecnologa WAP o UMTS, las cuales presentan los mismos problemas de accesibilidad que en los ratones.
Micrfonos
Con la introduccin de sistemas operativos y software grfico y multimedia, se ha empezado a ver como habitual el micrfono para ordenadores. Este micrfono tambin es usado para hablar por telfono a travs de internet y en los sistemas de reconocimiento de voz. Asimismo, los telfonos tambin llevan un micrfono incorporado. Estos elementos, muy tiles para determinadas deficiencias, como lesiones fsicas graves, carecen de utilidad para otras muchas. Las personas mudas no pueden hacer uso de ellos, como tampoco aquellas que sin ser mudas tienen problemas en el habla, debido a que no consiguen corregir las tonalidades y defectos del hablante para manejar un sistema de reconocimiento de voz, por ejemplo.
Pantallas tctiles
Con la evolucin de la tecnologa, nos encontramos con que desde hace un tiempo se han empezado a utilizar las llamadas pantallas tctiles, sensibles al contacto de la mano o de los dedos para interactuar con los elementos 28
28
08/11/2007, 12:17
que se nos presentan en dicha pantalla. Mediante un sencillo contacto tctil podemos seleccionar mens, informacin y navegar por el contenido. Inicialmente presentes en los quioscos virtuales, hoy las podemos encontrar tambin en los ordenadores y en los asistentes digitales personales (PDA). En estos ltimos se maneja utilizando un pequeo y fino punzn que al contacto con los elementos de la pantalla va seleccionando contenidos. En ambos casos se presentan los mismos problemas de accesibilidad que estamos viendo sucesivamente. No pueden ser usados por personas mayores con ciertas deficiencias, ni por personas con discapacidad fsica severa y falta de destreza. En el caso de los PDA, las reducidas dimensiones de la pantalla constituyen una barrera casi siempre infranqueable en personas con visin reducida. Lo mismo les ocurre a las personas con determinadas deficiencias cognitivas, ya que necesitan una visualizacin clara mediante iconos bien definidos e intuitivos.
Pantallas
El dispositivo de salida ms utilizado es la pantalla, presente en ordenadores, la televisin, telfonos mviles, PDA, cajeros automticos y otros. Dependiendo del elemento al que correspondan, existen multitud de tamaos, desde escasas pulgadas en telfonos mviles hasta ms de cincuenta en las nuevas televisiones de plasma. Hoy en da, con la evolucin de la tecnologa y el software utilizados, todas presentan contenido multimedia. En general, resultan poco accesibles a personas con escaso nivel de visin, salvo en aquellas de muchas pulgadas. El contenido que se nos presenta en la pantalla si est realizado de acuerdo a las normas adecuadas, podr ser ledo por lectores de pantalla. En determinadas discapacidades, como es el caso de la epilepsia, se deber tener especial cuidado con los niveles de refresco de pantalla para evitar producirles crisis debidas a la frecuencia de parpadeo.
Interfaz hombre-mquina
Lo visto hasta ahora constituye los elementos fsicos que posibilitan la entrada y salida de informacin, elementos necesarios para que el individuo 29
29
08/11/2007, 12:17
pueda interactuar con los terminales. Lo que se nos presenta en los terminales de salida lo constituye la llamada interfaz, que no es sino el software o programas necesarios para dirigir, controlar y gestionar todo el conjunto de terminales y sus elementos adicionales. Estos programas suelen presentar en la pantalla una serie de mens, botones interactivos, datos e informacin que interrelacionados entre ellos y con combinaciones adecuadas dan el acceso a las opciones, selecciones y servicios que se nos proporcionan. Al igual que los elementos y terminales fsicos de entrada y salida de informacin, la interfaz suele tener sus propios problemas de accesibilidad por la carencia de diseo universal. Estos problemas de accesibilidad constituyen otra gran barrera para muchas personas con discapacidad que aun pudiendo manejar los terminales no pueden interactuar con la interfaz. Es fundamental un estudio adecuado de los colores que nos va a presentar la interfaz, debido a que personas con problemas en el reconocimiento de colores, como las daltnicas, pueden tener dificultad para diferenciarlos. En su diseo es muy importante, asimismo, contemplar diversas formas de interactuar con los elementos presentes en la interfaz. Si al disearla slo lo hacemos para poder ser manejada por medio de un ratn, sea del tipo que sea, habr muchas personas con deficiencias en la visin y con problemas de movilidad y destreza que encontrarn prcticamente imposible su uso. Lgicamente, si pensamos en desarrollar nicamente la interfaz en modo grfico plasmada en la pantalla, sin contemplar elementos sonoros o auditivos que la describan en cada opcin, las personas invidentes tampoco tendrn acceso a ella, ya que no podrn utilizar elementos como el lector de pantalla o un dispositivo de salida en braille (denominado lnea braille). Cuando la interfaz es realizada para que en determinados momentos o selecciones sea necesaria la pulsacin de varias teclas al mismo tiempo (por ejemplo, alt+control), y no se presenta una forma alternativa (por ejemplo, la pulsacin secuencial), las personas con problemas de destreza y de coordinacin no podrn realizarla en muchos momentos. Sera en este caso necesario disear atajos o dejar abierta la posibilidad de poder configurar funciones para las teclas. Las solicitudes de informacin, el rellenado de campos que se nos soliciten y los formularios de peticiones han de ser aplicados de forma que 30
30
08/11/2007, 12:17
logremos la mayor sencillez posible. Debemos tener en cuenta que la interfaz puede ser usada por personas con dificultad o retraso en el aprendizaje o que les resulte problemtico mantener una concentracin adecuada en formularios complejos o largos. Los campos activos a rellenar debern ser, adems, fcilmente localizables y visibles. La navegacin y el movimiento por la interfaz deben ser sencillos, intuitivos y diseados con pautas lgicas. Para ello, el usuario deber ser capaz, incluso aquel con problemas de fijacin y aprendizaje, de saber dnde se encuentra en cada momento y tener siempre la opcin claramente visible de volver al principio o ser capaz de finalizar la utilizacin de un programa o cerrar la sesin de trabajo con la interfaz.
Contenidos
Superados los problemas relativos a las barreras fsicas de acceso de entrada y salida de informacin y las problemticas que puede presentar un deficiente diseo de la interfaz, llegamos a los contenidos almacenados, principalmente los que se presentan a travs de internet. Si tampoco contemplamos los estndares de accesibilidad, stos sern inaccesibles para muchas personas. Cuando estructuramos y ponemos el contenido de la informacin en cualquier servidor, debemos hacerlo de forma que cualquier persona pueda acceder a l. Si volcamos el contenido que queremos hacer llegar al usuario exclusivamente en formato grfico, las personas invidentes que utilicen lectores de pantalla encontrarn que les es imposible acceder a esa informacin. Si incluimos archivos de audio sin alternativa, aquellas personas que tengan una deficiencia auditiva severa o total no obtendrn informacin. Es necesario proporcionar una versin alternativa mediante la audiodescripcin o el subtitulado, simultneamente, mientras dura la presentacin de los contenidos. Problema idntico se plantea cuando utilizamos o incorporamos archivos o pelculas de vdeo y no utilizamos las opciones del subtitulado y la audiodescripcin. La presentacin de la informacin debe estar, necesariamente, bien estudiada y seguir una estructura lgica y coherente. Debemos ser conscientes de que existen muchas personas con problemas de aprendizaje, 31
31
08/11/2007, 12:17
de concentracin o de dispersin mental a las cuales les resultar inaccesible una presentacin de la informacin irregular o anrquica. Es muy conveniente que toda informacin textual est acompaada o complementada mediante algn grfico, fotografa o iconos grficos e intuitivos, complementarios del texto, de forma que su lectura no se vuelva montona y dificulte la comprensin del contenido por parte de usuarios que tienen dificultades en el manejo del lenguaje escrito. Este problema es muy frecuente en personas sordas o con dificultad de aprendizaje. Del mismo modo, en aquella informacin de carcter general y que tiene como destinataria a toda la poblacin, se debe utilizar un lenguaje claro y evitar, en la medida de lo posible, giros y terminologa compleja para evitar la inaccesibilidad de la informacin a personas con dificultades e incluso con escasa formacin.
Ordenadores e internet
El ordenador, como principal elemento de acceso a la informacin, a las tecnologas digitales y a la Sociedad de la Informacin a travs de internet, merece un apartado especial. Aun cuando la telefona de tercera generacin ya nos permite tambin el acceso a la Sociedad de la Informacin y conectarnos a la web y a nuestro correo electrnico, la potencialidad y prestaciones del ordenador, unido a la utilizacin de pantallas con mucha mayor dimensin, lo siguen haciendo el primer e imprescindible terminal en el acceso a las tecnologas. Desde que hace unos aos los ordenadores empezaron a incorporar el mdem para conectarse a internet, el ordenador se ha convertido en una potente estacin de trabajo que nos abre las puertas a innumerables posibilidades a travs de este servicio. Hoy en da, desde el ordenador podemos gestionar nuestras cuentas en los bancos, tenemos acceso a realizar compras sin desplazarnos a un centro comercial, podemos entrar y participar en proyectos de teleformacin e incluso trabajar desde casa a travs del teletrabajo. Es decir, sin desplazarnos de nuestra habitacin podemos tener salida al mundo exterior con mltiples posibilidades de actuacin. Pero el aspecto ms importante es que podemos acceder a informacin, formacin y comunicacin con otras personas. 32
32
08/11/2007, 12:17
Por ello, resulta tremendamente importante que tanto los medios fsicos de manejo y la forma de interactuar con el ordenador, as como la informacin que se nos presenta, sean accesibles para todos los individuos. En caso contrario, dejaremos a muchas personas con discapacidad y personas mayores al margen de la Sociedad de la Informacin, hacindose realidad la infoexclusin. Anteriormente hemos repasado, en lneas generales, estos problemas de accesibilidad que pueden acrecentar la llamada brecha digital para muchas personas. Crear contenidos e interfaces accesibles para nuestro ordenador no es ms costoso ni ms difcil. Asimismo, disear contenidos accesibles segn los parmetros estandarizados, tanto para sitios web como para los programas informticos, tiene que suponer que sean menos atractivos o menos vistosos. La accesibilidad no est reida con la elegancia en el diseo. Debemos perseguir que las herramientas que se usan normalmente para el desarrollo de espacios web tengan la posibilidad de generar sitios accesibles, y que adems la interfaz del mismo programa sea accesible para ser usada por personas con limitaciones funcionales. Lo mismo podemos decir de los programas de creacin o de autor y de aquellos que nos ayudan a realizar tareas ofimticas.
33
33
08/11/2007, 12:17
34
34
08/11/2007, 12:17
Accesibilidad en la web
El poder de la web reside en su universalidad. El acceso para todo el mundo, a pesar de la discapacidad, es un aspecto esencial.
TIM B ERNERS-LEE Director e inventor de la Red Mundial Web (World Wide Web)
Para que un sitio web sea accesible, su contenido debe estar disponible para todo el mundo, incluidas las personas con discapacidad. Un sitio web accesible asegura: Una transformacin sin problemas: la informacin y los servicios deben ser accesibles a pesar de las limitaciones fsicas, sensoriales o cognitivas de los usuarios y de las restricciones o barreras tecnolgicas. Un contenido comprensible y navegable: el contenido debe ser presentado de forma clara y simple y debe proporcionar mecanismos comprensibles para navegar en y entre las pginas. Un sitio web accesible: 1. puede ser percibido por todos; 2. puede ser navegado cumpliendo criterios de usabilidad; 3. puede ser utilizado con el teclado o con otros dispositivos adems del ratn; 4. puede ser comprendido fcilmente, incluso en situaciones de atencin dificultosa. La accesibilidad y la usabilidad estn ntimamente relacionadas, ya que ambas mejoran la satisfaccin, la efectividad y la eficiencia. Pero mientras la accesibilidad est dirigida a hacer un sitio web abierto al ms amplio nmero de usuarios, la usabilidad se dirige a conseguir el objetivo de satisfacer ms a los usuarios, con un sitio web ms eficaz y eficiente. 35
35
08/11/2007, 12:17
La accesibilidad en la web es importante

La accesibilidad se hace cada vez ms importante porque: 1. Los diseadores web estn obligados a cumplir con la normativa sobre accesibilidad. 2. Los diseadores web estn cambiando su atencin hacia la creacin de sitios web que sean accesibles para las personas con discapacidad naveguen sin dificultad, movidos tanto por razones humanitarias como por razones comerciales. 3. Las tecnologas digitales requieren sitios diseados para ser accesibles por diferentes dispositivos (por ejemplo: usuarios de pequeas pantallas en blanco y negro en sus telfonos mviles, aquellos que usan la navegacin por voz en navegadores de coches o los que escuchan un navegador parlante a travs de la lnea telefnica). A estos usuarios se les puede considerar tambin temporalmente personas con discapacidad. 4. Hay unos usuarios muy importantes que encuentran dificultades para usar un sitio si ste no es accesible: son las llamadas mquinas de bsqueda. Google (por nombrar una de las ms conocidas) puede aprovecharse plenamente de un sitio que es accesible e indexar sus pginas con todas las palabras que encuentra, especialmente en los vnculos, imgenes, ttulos y etiquetas. Adems, Google puede activar todos los vnculos de un sitio y escanear, por tanto, todas sus pginas. Un sitio web que no sea accesible tiene muchas menos palabras que pueden ser usadas y muchos ms vnculos no accesibles que no pueden ser seguidos.
Las vertientes de la accesibilidad en la web

Para conseguir que un sitio web sea accesible para todos deberemos seguir determinadas reglas para conseguir que as sea. En la imagen 1 podemos ver, de forma grfica y esquematizada, el proceso que supone la creacin de contenido web desde el momento en que un autor tiene la idea de realizar una pgina web hasta que sta llega a los distintos usua36
36
08/11/2007, 12:17
rios, teniendo siempre en cuenta los aspectos esenciales que han de tenerse en consideracin para que sea un diseo para tod@s.
Imagen 1. Elementos de accesibilidad a las pginas web.
En este esquema de elementos que intervienen en el proceso de elaboracin de pginas web accesibles podemos distinguir distintas etapas o momentos, que determinan la existencia de unas reglas a tener en cuenta para conseguir dicho propsito. As podemos hablar de reglas para: Las herramientas con las que cuenta un autor para crear y dar forma al contenido de la web. Las aplicaciones con las que un usuario accede a los contenidos y mediante las cuales puede navegarlos. Los contenidos, propiamente dichos, de las pginas web, en cuanto a su estructura y maquetacin. Para cada una de estas vertientes de la accesibilidad en la web se han redactado unas pautas que sirvan de gua y referencia para desarrollar de forma accesible los contenidos en la web y poder hacer uso de ellos por parte de todos los usuarios. De la redaccin de estas recomendaciones se ha encargado el Consorcio Mundial de la Web (World Wide Web Consortium), conocido mundialmente por las siglas W3C, a travs del grupo de trabajo Iniciativa de Accesibilidad en la Web (Web Accessibility Initiative) y bajo las siglas WAI. 37
37
08/11/2007, 12:17
El Consorcio Mundial de la Web (W3C)

W3C es un consorcio industrial, internacional e independiente que aglutina a organizaciones gubernamentales, no gubernamentales e industrias, cuya finalidad es promover la evolucin e interoperatividad de la web, para fomentar su universalidad. El objetivo que persigue es conseguir un acceso universal al servicio de la web, dentro de un entorno de software verstil y con respeto a la legalidad establecida. Para conseguir este objetivo se desarrollan tareas como identificar los requerimientos que son precisos, disear tecnologas que lo hagan posible y estandarizar mediante la redaccin de recomendaciones de aplicacin general para todos. Las actividades que lleva a cabo se encuadran en cinco campos: 1. 2. 3. 4. 5. Arquitectura. Interaccin. Tecnologa y sociedad. Accesibilidad. Garanta de calidad.
En cada uno de ellos se desarrollan distintos proyectos mediante grupos de trabajo. Para el objeto de este documento nos interesa el referido en cuarto lugar (sin que ello suponga exclusin de las repercusiones que suponen los trabajos realizados en los otros campos sobre la accesibilidad de un sitio web). Para ms informacin, en ingls: http://www.w3.org/Consortium/ Overview.html; en castellano: http://www.w3c.es/Consorcio/
La Iniciativa de Accesibilidad en la Web (WAI)

La Iniciativa de Accesibilidad en la Web (Web Accessibility Initiative WAI) es uno de los grupos de trabajo del W3C, cuya finalidad es propiciar un debate permanente sobre las necesidades y soluciones de accesibilidad en la web. Proporciona un foro de discusin y sirve como elemento de 38
38
08/11/2007, 12:17
control, en materia de accesibilidad, para todas las actividades desarrolladas por W3C. WAI, en colaboracin con organizaciones de todo el mundo, persigue la accesibilidad en la web a travs de cinco reas de trabajo: 1. 2. 3. 4. 5. Tecnologa. Pautas. Herramientas. Educacin y difusin. Investigacin y desarrollo.
Para el propsito de este trabajo, nos es de particular inters la segunda de estas reas de trabajo: la de elaboracin de pautas para conseguir un diseo accesible de pginas web. Para ms informacin sobre WAI y las actividades que desarrolla, se puede consultar la pgina web: http://www.w3.org/WAI/about.html.
Las pautas para la accesibilidad en la web

Anteriormente hemos hablado sobre las distintas vertientes de la accesibilidad en la web, y son tres las que deberemos considerar: contenidos, herramientas de creacin y aplicaciones de usuario. Para cada una de estas vertientes, el grupo WAI ha redactado un documento de Pautas y sus correspondientes documentos anexos sobre tcnicas para la aplicacin y lista de verificacin. El resultado lo podemos encontrar en las siguientes direcciones web: Pautas de Accesibilidad al Contenido en la Web 1.0 (Web Content Accessibility Guidelines 1.0): Texto original en ingls: http://www.w3.org/TR/WCAG10/. Traduccin al castellano de Egea, Sarabia y Chuter: http:// www.teleservicios.es/accesibilidad/recursos/documentos/index.html. Pautas de Accesibilidad para las Herramientas de Creacin 1.0 (Authoring Tool Accessibility Guidelines 1.0): Texto original en ingls: http://www.w3.org/TR/ATAG10/. 39
39
08/11/2007, 12:17
Pautas de Accesibilidad para las Aplicaciones de Usuario (User Agent Accessibility Guidelines 1.0): Texto original en ingls: http://www.w3.org/TR/UAAG10/ El grupo WAI tambin ha redactado unas Pautas especficas para los desarrolladores de aplicaciones basadas en XML de cara a que stas soporten los criterios de accesibilidad. Estn disponibles en: http://www.w3.org/ TR/xag.html (en ingls). Las pautas nos sirven de referencia normativa (no legal, pero s tcnica) y junto a cada una de ellas se provee al desarrollador de un documento tcnico, donde se explica la manera de aplicarlas. Por otro lado, nos pueden servir para verificar si hemos realizado correctamente el trabajo (es decir, de forma accesible). Se las conoce como lista de verificacin.
40
40
08/11/2007, 12:17
Legislacin y otras normas en materia de accesibilidad en la web
Antes de entrar en materia, sera bueno echar un vistazo a cmo se encuentra el marco normativo, tanto en su vertiente legal como tcnica. Tras una etapa de ausencia de una regulacin tanto legal como en materia de normas tcnicas, los ltimos tiempos han venido acompaados de una fructfera cosecha que vamos a reflejar en este apartado.
Legislacin y otras normas en Espaa

LEY 34/2002, de 12 de julio, de Servicios de la Sociedad de la Informacin y de Comercio Electrnico.
Establece en su disposicin adicional quinta sobre Accesibilidad para las personas con discapacidad y de edad avanzada a la informacin proporcionada por medios electrnicos:
1. Las Administraciones Pblicas adoptarn las medidas necesarias para que la informacin disponible en sus respectivas pginas de internet pueda ser accesibles a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrn exigir que las pginas de internet cuyo diseo o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados. 2. Igualmente, se promover la adopcin de normas de accesibilidad por los prestadores de servicios y los fabricantes de equipos y software, para facilitar el acceso de las personas con discapacidad o de edad avanzada a los contenidos digitales.
41
41
08/11/2007, 12:17
Ley 51/2003, de 3 de diciembre, de Igualdad de Oportunidades, No Discriminacin y Accesibilidad Universal de las Personas con Discapacidad.
La Ley establece la obligacin gradual y progresiva de que todos los entornos, productos y servicios deben ser abiertos, accesibles y practicables para todas las personas e impone plazos y calendarios para realizacin de las adaptaciones necesarias. Respecto a los productos y servicios de la Sociedad de la Informacin la ley establece en su Disposicin final sptima sobre Condiciones bsicas de accesibilidad y no discriminacin para el acceso y utilizacin de las tecnologas, productos y servicios relacionados con la sociedad de la informacin y medios de comunicacin social.
1. En el plazo de dos aos desde la entrada en vigor de esta ley, el Gobierno aprobar, segn lo previsto en su artculo 10, unas condiciones bsicas de accesibilidad y no discriminacin para el acceso y utilizacin de las tecnologas, productos y servicios relacionados con la sociedad de la informacin y de cualquier medio de comunicacin social, que sern obligatorias en el plazo de cuatro a seis aos desde la entrada en vigor de esta ley para todos los productos y servicios nuevos, y en el plazo de ocho a diez aos para todos aquellos existentes que sean susceptibles de ajustes razonables. 2. En el plazo de dos aos desde la entrada en vigor de esta ley, el Gobierno deber realizar los estudios integrales sobre la accesibilidad a dichos bienes o servicios que se consideren ms relevantes desde el punto de vista de la no discriminacin y accesibilidad universal.
Con el objeto de favorecer la formacin en diseo para tod@s, en su Disposicin final dcima, sobre Currculo formativo sobre accesibilidad universal y formacin de profesionales, establece:
El Gobierno, en el plazo de dos aos a partir de la entrada en vigor de esta ley, desarrollar el currculo formativo en diseo para tod@s, en todos los programas educativos, incluidos los universitarios, para la formacin de profesionales en los campos del diseo y la construccin del entorno fsico, la edificacin, las infraestructuras y obras pblicas, el
42
42
08/11/2007, 12:17
transporte, las comunicaciones y telecomunicaciones y los servicios de la sociedad de la informacin.
Orden 1551/2003, de 13 de junio, por la que se desarrolla la Disposicin final primera del Real Decreto 209/2003, de 21 de febrero, por el que se regulan los registros y las notificaciones telemticas, as como la utilizacin de medios telemticos para la sustitucin de la aportacin de certificados por los ciudadanos.
La disposicin Sptima, sobre Protocolos y criterios tcnicos de los dispositivos y aplicaciones de registro y notificaciones, en su inciso segundo establece:
2. El registro telemtico y el servicio de notificacin telemtica debern cumplir los requerimientos en materia de accesibilidad establecidos por la Iniciativa para una Web Accesible (WAI) del Consorcio World Wide Web y en particular las especificaciones de la Recomendacin de 5 de mayo de 1999 sobre Pautas de Accesibilidad del Contenido en la Web, versin 1.0, en su nivel AA.
I Plan Nacional de Accesibilidad 2004-2012.

En este documento, de fecha 25 de julio de 2003, se establecen los siguientes objetivos:
Consolidar el paradigma del Diseo para Todos y su implantacin en los nuevos productos, entornos y servicios. Difundir el conocimiento y aplicacin de la accesibilidad. Introducir la accesibilidad como criterio bsico de calidad de la gestin pblica. Conseguir un sistema normativo para la promocin de la accesibilidad completo, eficiente y de elevada aplicacin en el territorio. Adaptar progresivamente y de forma equilibrada los entornos, productos y servicios a los criterios de Diseo para Todos. Promover la accesibilidad en las tecnologas digitales.
43
43
08/11/2007, 12:17
II Plan de Accin para las personas con discapacidad 2003-2007.

En este documento, de fecha 5 de diciembre de 2003, se establece, entre otras medidas:
323.4.- Impulso a la difusin e implantacin de las Directrices de Accesibilidad a las pginas Web de la Administracin General del Estado. 341.1.- Inclusin de una clusula que favorezca la accesibilidad en los pliegos tcnicos de los contratos que tengan por objeto la adquisicin de bienes, productos y servicios por parte de las Administraciones Pblicas, especialmente, en el mbito de las tecnologas digitales y la sociedad de la informacin. 341.2.- Reforma de la legislacin en materia de concesin de subvenciones, ayudas e incentivos pblicos para vincular el disfrute de ayudas con la obligacin de accesibilidad por parte de los beneficiarios, cuando se trate de bienes y servicios a disposicin del pblico.
Normas UNE.
En Espaa, a travs de la Asociacin Espaola de Normalizacin y Certificacin AENOR, se han aprobado y publicado varias normas tcnicas que afectan al tema de este mdulo. UNE 139801:2003 - Aplicaciones informticas para personas con discapacidad. Requisitos de accesibilidad al ordenador. Hardware. UNE 139802:2003 - Aplicaciones informticas para personas con discapacidad. Requisitos de accesibilidad al ordenador. Software. UNE 139803:2003 - Aplicaciones informticas para personas con discapacidad. Requisitos de accesibilidad para contenidos en la web.
Otras normas Internacionales

Plan de Accin eEurope 2002.
El Plan de Accin eEurope 2002 fue aprobado por el Consejo Europeo de Feira en junio de 2000. Este Plan pretende convertir a la Unin Europea en una economa basada en el conocimiento, ms competitiva y dinmica, 44
44
08/11/2007, 12:17
con avances en materia de empleo y de cohesin social, con un horizonte puesto en el ao 2010. Se han valorado con principales progresos durante el perodo de ejecucin del Plan de Accin eEurope 2002: La duplicacin de la penetracin de internet en los hogares. La renovacin del marco de las telecomunicaciones. Disminucin del precio del acceso a internet. La conexin de casi todas las empresas y centros escolares. Que Europa cuente con la red principal de investigacin ms rpida del mundo. La creacin casi completa del marco jurdico del comercio electrnico. La existencia de ms servicios de la Administracin Pblica disponibles en lnea. La aparicin de una infraestructura de tarjeta inteligente. La adopcin y recomendacin en los estados miembros de unas directrices sobre accesibilidad de la web.
Plan de Accin eEurope 2005.

Este plan de accin es el sucesor del Plan de Accin eEurope 2002. Fue lanzado en el Consejo de Europa de Sevilla en junio de 2002, durante la presidencia espaola de la Unin Europea, y aprobado por el Consejo de Ministros europeos en enero de 2003. En este Plan se establece que, para 2005, Europa deber contar con: Unos servicios pblicos en lnea modernos. Una administracin electrnica. Unos servicios electrnicos de aprendizaje. Unos servicios electrnicos de salud. Un entorno dinmico de negocios electrnicos. Para hacer posible todo ello, se necesitara: Un acceso de banda ancha ampliamente disponible y a precios competitivos. Una infraestructura de informacin segura. 45
45
08/11/2007, 12:17
El plan de accin se estructura en torno a cuatro lneas interrelacionadas: Medidas polticas de revisin y adaptacin de la legislacin nacional y europea encaminadas a reforzar la competencia y la interoperatividad, aumentar el grado de sensibilizacin y hacer gala de iniciativa poltica. La aplicacin de estas medidas polticas se ver respaldada por el desarrollo, el anlisis y la difusin de buenas prcticas. Se pondrn en marcha proyectos que aceleren la implantacin de aplicaciones e infraestructuras de vanguardia. La evaluacin comparativa de los progresos conseguidos en el logro de los objetivos y de las polticas al servicio de dichos objetivos permitir efectuar un seguimiento de las medidas polticas y reorientarlas si procede. La coordinacin global de las polticas existentes generar sinergias entre las acciones propuestas. A travs de un grupo de direccin, se tendr una visin de conjunto de la evolucin de las polticas y se garantizar un adecuado intercambio de informacin entre los responsables nacionales y europeos y el sector privado.
La Seccin 508 del Acta de los Americanos con Discapacidad

Aunque no tiene una aplicacin directa en el ordenamiento jurdico espaol, citamos esta norma de los Estados Unidos, aprobada el 21 de julio de 2001, por su indudable influencia sobre los productos y servicios que nos llegan desde aquellas tierras. La finalidad y el alcance de esta norma quedan claramente recogidos en el siguiente prrafo de la misma:
[...] La Seccin 508 exige que cuando las agencias Federales desarrollen, adquieran, mantengan, o usen las tecnologas de la comunicacin y la informacin deben asegurarse de que las mismas permiten a los empleados federales con discapacidad tener acceso a usar la informacin y datos de manera similar al acceso y uso que tienen los empleados federales sin discapacidad, a menos que constituya una carga excesiva impuesta a la agencia. La Seccin 508 tambin exige que las personas con discapacidad, que forman parte del pblico que busca informacin o ser-
46
46
08/11/2007, 12:17
vicios por parte de una agencia Federal, tengan acceso y uso de la informacin y datos de manera comparable a la que se proporciona al pblico sin discapacidad, a menos que ello signifique una carga excesiva impuesta a la agencia.
La Seccin 508, en su apartado 1194.22 Web-based intranet and internet information and applications (Informacin y aplicaciones de intranet e internet basadas en la web), determina las normas para la creacin de pginas y aplicaciones web, que son aplicables a todas las agencias federales de Estados Unidos. Como queda reflejado en sus objetivos, la Seccin 508 no se ocupa slo de la accesibilidad de las pginas y aplicaciones web, tambin lo hace del software y por tanto de las herramientas de autor y de los navegadores.
47
47
08/11/2007, 12:17
48
48
08/11/2007, 12:17
Las herramientas de creacin o de autor
En la imagen 2 podemos ver cules son los elementos de accesibilidad a las pginas web.
Imagen 2.- Elementos de accesibilidad a las pginas web.
Como primer escaln de este esquema de elementos nos encontramos al autor que, tras tener la idea de generar unos contenidos para la web, los tiene que estructurar y maquetar para colocarlos en un servidor. Para llevar a cabo esta tarea, el autor utiliza unas herramientas a las que denominamos herramientas de creacin o herramientas de autor (en ingls se conocen como authoring tools). ste es el primer paso para que el contenido de una web pueda ser accesible para todos. Las herramientas de creacin deben ser accesibles y generar contenido accesible o ayudar al autor para que lo genere. As pues, la primera preocupacin ser dotar a estas herramientas de las facultades que propicien que esto sea as. El 3 de febrero del ao 2000, W3C elev a rango de recomendacin la especificacin denominada Pautas de Accesibilidad para las Herra49
49
08/11/2007, 12:17
mientas de Creacin 1.0 (en ingls: Authoring Tool Accessibility Guidelines 1.0). En la actualidad se estn revisando estas pautas y ya existe un borrador para una versin 2.0. Este nuevo documento recoge lo que considera como cuatro puntos bsicos o pautas, que son: 1. Hacer accesible la interfaz de creacin. El diseo de todos los aspectos de la herramienta de creacin, incluyendo la interfaz de creacin, el procedimiento de instalacin, la documentacin y los archivos de ayuda, deben ser accesibles. Los requerimientos de accesibilidad son indispensables para crear la interfaz de creacin, prestando especial consideracin al diseo de caractersticas especficas de las interfaces de creacin. 2. Permitir la produccin de contenido accesible. La creacin de contenido accesible depende de las acciones de la herramienta y del autor. Esta pauta delimita las responsabilidades que recaen exclusivamente en la herramienta. La primera responsabilidad es apoyar los formatos que proveen contenido accesible. Es ms probable que el contenido web producido por una herramienta de creacin sea accesible si el contenido creado est en consonancia con los requerimientos de las Pautas de Accesibilidad al Contenido en la Web (WCAG) y se conserva en este estado a travs de todo el proceso de creacin. 3. Apoyar al autor en la produccin de contenido accesible. Las herramientas de creacin deben incluir caractersticas que proporcionen apoyo y gua al autor en estas situaciones, de tal manera que las prcticas de creacin accesible puedan ser seguidas y el contenido accesible en la web pueda ser producido. 4. Promover e integrar soluciones accesibles. Esta pauta requiere que las herramientas de autor tengan que promover prcticas de creacin accesible con la herramienta as como integrar sin problemas cualquier funcin aadida para satisfacer las otras exigencias de este documento. La documentacin oficial (en ingls) de estas pautas se pueden consultar en la direccin web: http://www.w3.org/TR/ATAG20/.
50
50
08/11/2007, 12:17
Accesibilidad en las herramientas de creacin ms conocidas

Para la creacin de contenidos web los autores manejan distintas herramientas. En ocasiones se trata de programas especficos creados por empresas de diseo y mantenimiento de pginas web, pero la mayora de los autores suelen usar herramientas comerciales que se ponen a su disposicin de forma singular o integradas en paquetes ofimticos. En este apartado vamos a ver dos de las herramientas ms conocidas y difundidas en el mercado: FrontPage de Microsoft y Dreamweaver de Macromedia.
FrontPage de Microsoft
FrontPage es uno de los programas ms populares para la edicin de cdigo HTML de los disponibles en el mercado. Ello es debido a algunas razones de las que destacamos dos: Su precio es relativamente bajo comparado con el de otros editores. Se integra en el paquete MS Office, el paquete ofimtico ms vendido del mercado. Como cualquier otra herramienta, FrontPage tiene sus debilidades: La plantilla por defecto que usa cuando comienza una nueva pgina web no cumple con los estndares para los elementos de HTML, ya que no incluye la declaracin del tipo de documento (DOCTYPE). Para cambiar las propiedades de los elementos puede, a veces, tener que realizarse en varios pasos. Algunas caractersticas bsicas de accesibilidad deben ser aplicadas manualmente. A pesar de estos defectos, es posible crear pginas web accesibles utilizando FrontPage, a menudo, sin necesidad de salir del entorno 51
51
08/11/2007, 12:18
WYSIWYG (del ingls what you see is what you get lo que ves es cmo quedar). Veamos a continuacin cmo proceder con FrontPage para crear pginas web accesibles.
CAMBIAR LA PLANTILLA POR DEFECTO POR UNA QUE SEA VLIDA

Uno de los puntos fuertes de FrontPage es la posibilidad de crear plantillas. Cuando se crea una plantilla accesible, se puede reutilizar la misma plantilla para la totalidad de un sitio. Muchos desarrolladores de pginas web utilizan lenguajes de guin (en ingls: scripting languages) para crear plantillas, tales como Java Server Pages, PHP, Perl, Cold Fusion y otros. Estos lenguajes se utilizan por su flexibilidad y capacidad para ser programados, mucho mayor que en las plantillas de FrontPage y sus caractersticos temas. Pero el concepto es el mismo: utilizar plantillas y hacerlas accesibles. La pgina en blanco que muestra por defecto FrontPage al comenzar no tiene una disposicin accesible de forma directa, no cumple con el estndar HTML. Hay tres cosas que se deben hacer para cambiarla:
1. Aadir una declaracin DOCTYPE utilizando el mtodo abreviado Esta declaracin debe ser la primera lnea de nuestro documento y es necesaria para decirle al navegador qu versin de HTML es la que se usa en la pgina. Si no se hace, el navegador procesar la pgina en modo Quirks (modo de compatibilidad), que podra no interpretar correctamente el cdigo de la pgina. La DTD (definicin del tipo de documento) es la estructura reglamentaria, es decir, los elementos y atributos que estn disponibles para cada tipo de documento. Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las hojas de estilo), existen 3 tipos de DTD: 1. HTML 4.01 transitorio El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict, pero agrega cualidades de presentacin, elementos desapro52
52
08/11/2007, 12:18
bados o elementos obsoletos. Se llama Transitional porque est pensado como transicin hacia HTML 4 estricto. El modo de definirlo es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN\">
2. HTML 4.01 Frameset: sta es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos). El modo de definirla es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN\">
3. HTML Estricto: Si declaramos este DTD, el navegador pasar a actuar en cumplimiento de los estndares (en ingls: standards compliance). Esto implica que slo podrn usarse las etiquetas de HTML 4.01. ste es el modo recomendado por el W3C, ya que es compatible con el CSS (hojas de estilo en cascada) y puede ser interpretado correctamente por todos los navegadores. Adems, hace mucho ms fcil el paso de nuestros documentos al XHTML, que en estos momentos ya est sustituyendo al HTML. El modo de definirlo es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN\">
Imagen 3. Declaracin DOCTYPE insertada en la vista de cdigo HTML en FrontPage
53
53
08/11/2007, 12:18
Si queremos saber si nuestra pgina cumple con el DTD definido podemos comprobarlo desde http://validator.w3.org/ Para incluir la declaracin del DOCTYPE en nuestro documento con FrontPage debemos situarnos en la vista del cdigo HTML y redactarla en la primera lnea del mismo. La versin 2003 de FrontPage tiene una nueva utilidad que nos posibilita la inclusin de esta lnea de cdigo sin que tengamos que teclearla. Colocando el cursor antes de la etiqueta <html> presionamos Control+Intro y aparece una lista en la que podremos seleccionar la que deseamos incluir. Al seleccionar, por ejemplo, dt4 se insertar el trozo de cdigo correspondiente al DOCTYPE para HTML 4.01. 2. Cambiar la plantilla por defecto a una plantilla accesible La plantilla por defecto (normal.htm) est localizada en el directorio templates de Microsoft Office. En la mayora de los ordenadores, este documento se encuentra en:
C:\Archivos de programa\Microsoft Office\Templates\3082\Pages\normal.tem1
El archivo que hay que cambiar se llama normal.htm. Hay que abrir este archivo con cualquier editor de texto (podemos utilizar el Block de Notas de Windows o cualquier otro similar). Luego cambiamos su contenido para hacerlo compatible con HTML (o en su caso con XHTML o XML). La plantilla variar segn est basada en una u otra de las sintaxis de HTML que se elija. Hay una sintaxis para cada una de las especificaciones. Tendremos que asegurarnos de que la plantilla elegida es compatible con el estndar, para lo cual podemos utilizar el validador de HTML de W3C (http://validator.w3.org). La plantilla normal.htm es la nica utilizada por el programa cuando se crean pginas en blanco a las que todava no se ha asignado una plantilla o tema de FrontPage. Si se usa cualquiera de las caractersticas de las plantillas o temas, necesitaremos editar la pgina de la plantilla para cada uno de estos tems. Estos archivos de plantilla deberan estar
1. La carpeta 3082 puede llevar otra numeracin.
54
54
08/11/2007, 12:18
localizados en el mismo directorio que el descrito ms arriba para la plantilla normal.htm. 3. Creacin de plantillas mltiples Esta tcnica es una combinacin de las dos anteriores. Si sabemos que usaremos ms de una versin de HTML, podemos crear plantillas mltiples, una para cada versin HTML que planeemos utilizar. Hay dos mtodos para hacer esto: Primero, creando una pgina de plantilla en FrontPage, o en cualquier editor de texto, para cada versin HTML que queramos utilizar. Luego, cuando se quiera crear una nueva pgina, simplemente abriremos la plantilla apropiada en lugar de crear una nueva pgina. La segunda opcin (que slo se nos ofrece en la versin 2003) es la misma que la primera, excepto que guardaremos cada nueva plantilla como un bloque de cdigo en lugar de como un archivo HTML. Para crear un nuevo bloque de cdigo, iremos a Herramientas>Opciones de pgina, luego seleccionaremos Bloques de cdigo (en ingls: Code Snippets) y pulsaremos en el botn Aadir. Se abrir una caja con tres campos: Palabra clave: para introducir la palabra que describe al bloque. Descripcin: para aadir una descripcin ms larga. Texto: es donde introduciremos el cdigo de la nueva plantilla o cualquier trozo de cdigo que vayamos a utilizar frecuentemente. El cdigo generado se introducir desplegando la barra vista de cdigo, presionando Control+intro en el lugar donde queramos introducir el bloque dentro de la forma de visualizacin HTML.
AADIR EL ATRIBUTO ALT A LAS IMGENES

Aadir el atributo alt a las imgenes es sencillo con FrontPage. Pulsando el botn derecho del ratn sobre la imagen, seleccionamos Propiedades de la imagen o, con la imagen seleccionada, presionamos Alt+intro. Despus introduciremos el texto que vamos a darle al atributo alt en el campo Texto del apartado Representaciones alternativas. 55
55
08/11/2007, 12:18
FrontPage 2003 permite, tambin, introducir una Descripcin larga utilizando la pestaa General del cuadro de dilogo Propiedades de la pgina mediante el campo del mismo nombre que se sita debajo del anterior.
Imagen 4. Cuadro de dilogo (FrontPage 2002) que utilizaremos para introducir el texto para el atributo alt.
CREAR MAPAS DE IMAGEN ACCESIBLES DEL LADO DEL CLIENTE

Para crear un mapa de imagen accesible del lado del cliente hay que seguir los siguientes pasos: Insertar la imagen en la pgina web. Asegurarse de que la barra de herramientas Imgenes est visible (Ver>Barras de herramientas>Imgenes). Utilizar los botones de zona activa rectangular, circular o en forma de polgono para crear las zonas activas donde queramos que vayan los enlaces. 56
56
08/11/2007, 12:18
Para cada zona activa, abriremos el cuadro de dilogo Insertar hipervnculo, seleccionaremos el botn etiquetado Info. de pantalla, donde introduciremos el texto para el atributo alt de cada rea definida. La imagen 5 nos muestra el cuadro de dilogo donde podemos introducir el texto para la informacin de pantalla del hipervnculo, que hemos abierto seleccionando el botn correspondiente (ambos aparecen enmarcados por una elipse para destacarlos). Las versiones FrontPage 2000 y anteriores no disponen de esta utilidad.
Imagen 5. Introduccin de texto para el atributo alt de una zona activa.
Se puede aadir el texto para el atributo alt haciendo doble click sobre la zona activa y siguiendo los pasos descritos ms arriba. No se debe dejar NUNCA vaco el atributo alt de las zonas activas. Tambin la imagen sobre la que diseamos el mapa debe tener su atributo alt aunque, si nos interesa, podemos dejarlo en blanco (alt=).
DEFINIR ENCABEZADOS DE TABLA

Para definir encabezados de tabla para una tabla de datos con FrontPage, seleccionaremos la celda que queremos hacer de encabezado. Pulsamos 57
57
08/11/2007, 12:18
el botn derecho del ratn sobre la celda y seleccionaremos Propiedades de la celda o bien seleccionaremos Tabla>Propiedades>Celda. En el cuadro de dilogo, activaremos Celda de encabezado.
Imagen 6. Seleccin de celda de encabezado.
Si la tabla es usada para maquetar (no es una verdadera tabla de datos) no es necesario especificar encabezados de tabla. Como veremos ms adelante, no es recomendable utilizar tablas para maquetar, ya que stas estn reservadas para la presentacin de datos y que para la colocacin de los contenidos en pantalla tenemos la posibilidad de utilizar las opciones que nos proporciona la Hoja de Estilos.
AADIR ETIQUETAS A LOS ELEMENTOS DE UN FORMULARIO

Seguiremos los siguientes pasos: Crear un formulario usando Insertar>Formulario. Cada elemento del formulario (cuadro de texto, botn de opcin, casilla de verificacin, men desplegable) debe tener un texto descriptivo que informe al usuario sobre qu debe introducir o seleccionar. La eti58
58
08/11/2007, 12:18
queta se debe poner adyacente al elemento del formulario (aunque tcnicamente puede ir en cualquier lugar de la pgina): Insertar el elemento del formulario que se desee. Escribir, a continuacin el texto para la etiqueta. Seleccionar tanto el elemento como el texto de la etiqueta y los asociaremos pulsando Insertar>Formulario> Etiqueta. Ahora estn asociados el elemento de formulario con su etiqueta de texto. Hay que repetir esta operacin para cada elemento del formulario. Algunas veces la opcin Etiquetas de FrontPage no es suficiente. A menudo, las etiquetas no estn adyacentes a los elementos de formulario (por ejemplo, cuando se usan tablas para maquetarlos). Cambiar la etiqueta que no est adyacente a su elemento de formulario debe hacerse en la forma de visualizacin HTML.
PONER TTULOS A LOS MARCOS (FRAMES)

Una pgina web con marcos es la que est definida por, al menos, dos pginas web separadas, las cuales son combinadas en el mismo espacio visual. Para el usuario es como si ambas pginas coexistieran como una sola entidad, es decir, pueden ver los contenidos de mltiples pginas todas a la vez. Los usuarios de algunos lectores de pantalla no pueden apreciar el contenido de pginas mltiples y relacionar sus contenidos. Los marcos no son inaccesibles para los modernos lectores de pantalla, pero pueden desorientar al usuario. Lo ms importante para aumentar la accesibilidad de los marcos es dar un ttulo a cada uno. En el nuevo FrontPage 2003 (no existe en versiones anteriores) es posible crear los ttulos para cada marco siguiendo una de estas dos opciones: 1. Se puede hacer aadiendo un ttulo cuando se guarda cada marco. 2. Pulsar el botn derecho del ratn sobre el marco y elegir Propiedades del marco. En el cuadro de dilogo emergente aparecen varios campos. Hay que escribir el ttulo descriptivo en el campo etiquetado Ttulo.
59
59
08/11/2007, 12:18
AADIR ENCABEZADO Y SUB-ENCABEZADOS

Hay que usar los encabezados (h1 h6) para estructurar el contenido y no para dar formato al texto, de tal manera que parezca un tipo de fuente o dar apariencia de texto en negrita. Las tecnologas de apoyo y los navegadores alternativos dependen del lenguaje de marcas, de forma literal, que determina la estructura de la pgina. Para etiquetar los encabezados de nuestra pgina en FrontPage colocaremos el cursor sobre la lnea de texto, desplegaremos la lista de opciones que se nos muestra a la izquierda de la barra de herramientas Formato (por defecto aparece seleccionado Normal) y seleccionaremos qu tipo de encabezado le corresponde al texto que ya hemos escrito o vamos a escribir. Al insertar un salto de prrafo, la seleccin del modo de texto vuelve al estado Normal. Una informacin ms completa (en ingls) sobre las posibilidades de construccin de pginas web accesible con FrontPage 2003 est disponible en: http://www.microsoft.com/office/frontpage/prodinfo/accessibility.mspx
Imagen 7. Lista de opciones del modo de texto para seleccionar el nivel de encabezado.
60
60
08/11/2007, 12:18
Dreamweaver de Macromedia
Dreamweaver MX y MX 2004 son de las ms populares y potentes aplicaciones para el desarrollo web disponibles hoy da. Se han mejorado mucho las caractersticas de Dreamweaver MX 2004 con respecto a versiones previas. Se ha apostado claramente por la posibilidad de generar contenido accesible, cosa que apreciamos desde el mismo momento en que abrimos el programa y se nos muestra un cuadro de dilogo donde nos ofrecen la posibilidad de crear pginas a partir de muestras con diseo accesible (imagen 8).
Imagen 8. Cuadro de dilogo que nos ofrece la posibilidad de crear pginas web en base a muestras diseadas de forma accesible.
Las nuevas versiones de MX y MX 2004 permiten que el desarrollador sea orientado para aadir atributos de accesibilidad cuando inserta algunos elementos web. Desafortunadamente esta opcin est desactivada en las preferencias por defecto. Para activar esta opcin, hay que seleccionar Edicin>Preferencias>Accesibilidad y activar las casillas de verificacin de Objetos de formulario, Marcos, Media e Imgenes (imagen 9). 61
61
08/11/2007, 12:18
Imagen 9. Forma de activar las opciones de accesibilidad en Dreamweaver MX 2004.
Una vez seleccionado, Dreamweaver dispondr de un sistema de orientacin para las caractersticas de accesibilidad cuando cada uno de los elementos identificados sea insertado en el documento. Para que las orientaciones sobre accesibilidad estn disponibles, debe trabajarse sobre la vista Diseo en la interfaz. Si se encuentra en la vista Cdigo cuando inserte alguno de los elementos, la orientacin de accesibilidad no se mostrar. Este programa de diseo puede ahora validar el contenido accesible utilizando los estndares ms comunes, as como proporcionar un informe seleccionando Sitio>Informe. Entre otros materiales de referencia se incluye uno sobre Accesibilidad. Los materiales provienen de UsableNet (http://www.usablenet.com). Lamentablemente los materiales son demasiado tcnicos y hacen preciso estar familiarizado con HTML y las tcnicas generales de accesibilidad. Macromedia tambin ha aumentado la accesibilidad de la interfaz de creacin para permitir a los usuarios de lectores de pantalla crear contenido web. Ahora son accesibles a los programas lectores de pantalla la mayora de los cuadros de dilogo, los mens y otros elementos de la interfaz. 62
62
08/11/2007, 12:18
TEXTO ALTERNATIVO PARA LAS IMGENES

Con las opciones de accesibilidad habilitadas en las preferencias, se mostrar un cuadro de dilogo para introducir el texto alternativo y el enlace a la descripcin larga cuando se inserte una imagen.
Imagen 10. Cuadro de dilogo para insertar el texto alternativo y el enlace a la descripcin larga.
Basta introducir el texto apropiado y equivalente a la imagen en el campo Texto alternativo. Si la imagen es compleja, se puede introducir una direccin URL o un marcador de la propia pgina utilizado para una descripcin larga (atributo longdesc de la etiqueta img). Si no se introduce contenido en la descripcin larga, el atributo longdesc no es introducido en el cdigo de la imagen. Si a la imagen no conviene darle texto alternativo (por ser meramente decorativa o no proporcionar funcionalidad alguna) se puede seleccionar <vaco> en el campo Texto alternativo que proporcionar un texto alternativo de la siguiente manera: alt= . Una vez que la imagen ha sido insertada en el documento, el texto alternativo puede ser insertado o modificado utilizando el panel Propiedades que, por defecto, aparece bajo el rea de diseo. Tambin aqu se puede seleccionar la opcin <vaco> en el men desplegable del atributo alt. El atributo longdesc no puede ser insertado desde este panel. Tambin se proporciona la opcin de insertar texto alternativo a las zonas interactivas del mapa de imagen del lado del cliente. Cuando se inserta una zona interactiva en la imagen, aparece en el panel de Propiedades, entre otras, la opcin de poner texto alternativo a sta.
63
63
08/11/2007, 12:18
ETIQUETAS DE FORMULARIO
Con las opciones de accesibilidad habilitadas en preferencias, Dreamweaver orientar para etiquetar de forma apropiada cuando se inserten los elementos de formulario en la pgina web.
Imagen 11. Cuadro de dilogo para el etiquetado de los elementos del formulario.
Slo hay que introducir el texto apropiado para la etiqueta en el campo Etiqueta del cuadro de dilogo. Se puede seleccionar uno de los estilos para la etiqueta: Ajustar con la etiqueta de rtulo; adjuntar etiqueta de ttulo utilizando el atributo for; o no hay etiqueta de rtulo. El mejor resultado se consigue seleccionando adjuntar etiqueta de ttulo utilizando el atributo for. Esto permite a la etiqueta del formulario ser movida a otra posicin en la pgina y es ms compatible con los lectores de pantalla existentes. Tambin se puede elegir la posicin de la etiqueta de formulario antes o despus del tem. El cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada tambin proporciona opciones para introducir tecla de acceso (Access key) e ndice de fichas. Para aadir etiquetas a los elementos del formulario ya insertados en la pgina, hay tres mtodos que pueden ser usados: 1. Borrar y luego reinsertar el elemento del formulario aadiendo la etiqueta apropiada por medio del cuadro de dilogo. 2. Aadir la informacin apropiada a la etiqueta desde la vista de cdigo. 3. Seleccionar la etiqueta y el elemento del formulario y seleccionar Insertar>Formulario>Etiqueta. Para llevar a cabo este mtodo de tra64
64
08/11/2007, 12:18
bajo, la etiqueta y el elemento de formulario deben estar adyacentes. Cuando se usa este mtodo, Dreamweaver rodea la etiqueta y el elemento de formulario con la etiqueta de rtulo, lo cual limita la posibilidad de mover la etiqueta y no es completamente soportado por todos los lectores de pantalla.
ACCESIBILIDAD EN LAS TABLAS DE DATOS

Hay tres principios implicados en la tarea de hacer tablas de datos accesibles para los usuarios de lectores de pantalla: 1. Disear los encabezados de tabla. 2. Asignar una orientacin (en ingls, scope) a los encabezados de fila y columna. 3. Para tablas complejas, asignar atributos headers (encabezados) e id (identificadores) a cabeceras y celdas de datos. La interfaz visual de Dreamweaver soporta la opcin 1 (asignacin de encabezados), parcialmente la 2 (asignacin de orientacin) y no soporta la 3. Para asignar encabezados a la tabla dispone de dos procedimientos. Primero, si la tabla ya existe, se pueden identificar los encabezados de tabla seleccionado la celda, fila o columna y luego seleccionar en el panel Propiedades el campo Enc. (Encabezado). Segunda, si las opciones de accesibilidad estn disponibles en preferencias, se presentar un cuadro de dilogo cuando la tabla vaya a insertarse. Se puede elegir que la tabla no tenga encabezados (Ninguna), encabezados de fila (Izquierda), encabezados de columna (Superior) o encabezados de fila y columna (Ambos).
Imagen 12. Seleccin de encabezado en una tabla de datos.
65
65
08/11/2007, 12:18
Se designarn las celdas correctas como encabezados de tabla utilizando la etiqueta <th>. Cuando se use el cuadro de dilogo proporcionado por las opciones de accesibilidad para seleccionar los encabezados, tambin se insertar el atributo scope apropiado a esos encabezados (por ejemplo: scope=col o scope=row).
Imagen 13. Segundo modo de elegir encabezados para una tabla de datos.
Si se elige la opcin Ambos para los encabezados, se designar la celda superior izquierda como encabezado de columna. En algunos casos esta celda debe actuar como encabezado de fila o no ser encabezado de nada. Debemos asegurarnos en cualquiera de los casos de borrar o cambiar el atributo scope para esta celda en la vista de cdigo para que sea marcada de forma apropiada en el maquetado de la tabla de datos. La nica manera de aadir el atributo scope a tablas que ya existen en el documento es hacerlo manualmente en la vista de cdigo. Para tablas complejas con encabezados que abarcan filas o columnas y para las cuales el atributo scope es insuficiente, se debe aadir atributos headers e id a la tabla en la vista de cdigo. La interfaz visual no soporta la adicin de los citados atributos. 66
66
08/11/2007, 12:18
El cuadro de dilogo tambin permite la adicin de Texto para el pie (Caption) y Resmenes (Summary); ambos proporcionan informacin adicional sobre los contenidos de la tabla.
TTULOS DE LOS MARCOS (FRAMES)

Si las opciones de accesibilidad se han seleccionado en las preferencias, el programa proporciona orientacin para colocar los ttulos de los marcos cuando se va a crear un documento con marcos.
Imagen 14. Cuadro de dilogo para introducir ttulos de marcos.
La opcin Ttulo debe ser una breve descripcin del contenido y funcionalidad del marco. Esta informacin ser leda por los lectores de pantalla para identificar el marco. El cuadro de dilogo Atributos de accesibilidad de la etiqueta de marco slo ser mostrado si se crea un documento con marcos (Archivo>Nuevo>Conjunto de marcos) y no se mostrar si se modifica un documento existente en una pgina que ya tiene marcos (Modificar>Conjunto de marcos>Dividir marco).
67
67
08/11/2007, 12:18
68
68
08/11/2007, 12:18
Las aplicaciones o agentes de usuario
En la imagen 15 podemos ver cules son los elementos de accesibilidad a las pginas web.
Imagen 15. Elementos de accesibilidad a las pginas web.
Para poder acceder a los contenidos que los desarrolladores colocan en la web, los usuarios utilizan lo que conocemos como Aplicaciones o agentes de usuario (en ingls: User agent). Lo habitual es que lo hagan mediante programas de software a los que se conoce genricamente como Navegadores. Son programas que generalmente se distribuyen de forma gratuita. Se han convertido en compaeros inseparables de todos los que usan un ordenador para acceder a la informacin colocada en web, compitiendo en horas de uso con los procesadores de texto. Su familiaridad hace que casi no prestemos importancia a sus posibilidades, su utilidad y, algo que nos importa particularmente, su accesibilidad. La Iniciativa de Accesibilidad en la Web W3C/WAI, ha redactado una especificacin que proporciona pautas para los desarrolladores de las aplicaciones de usuario. Su objetivo es que estas aplicaciones dispongan 69
69
08/11/2007, 12:18
de las medidas necesarias para que puedan ser usadas por personas con limitaciones funcionales o que accedan mediante dispositivos no estandarizados. El 17 de diciembre de 2002, W3C elev a rango de recomendacin la especificacin denominada Pautas de Accesibilidad para las Aplicaciones de Usuario 1.0 (en ingls: User Agent Accessibility Guidelines 1.0 UAAG10). En este documento se recogen los puntos bsicos o pautas que se consideran imprescindibles para hacer que esas aplicaciones sean accesibles. stos son los doce puntos bsicos que recoge la recomendacin: 1. Soportar la entrada y salida de datos, con independencia del dispositivo utilizado. Asegurar que el usuario puede interactuar con la aplicacin de usuario (y el contenido que presenta) a travs de diferentes dispositivos de entrada y salida de datos. Asegurar que el usuario accede a todo el contenido. Asegurar que el usuario tiene acceso a todo el contenido, particularmente al contenido condicional (entendido como el que, por el formato de la especificacin, debe estar disponible para el usuario a travs de la interfaz en ciertas condiciones, como el texto alternativo de la imgenes) que debe haber sido proporcionado cumpliendo con los requerimientos de las Pautas de Accesibilidad al Contenido en la Web 1.0 (en ingls: Web Accessibility Content Guidelines 1.0 WCAG10). Permitir la configuracin de manera que no deje algn contenido que pueda reducir la accesibilidad. Asegurar que el usuario puede desconectar la presentacin del contenido (por ejemplo, audio, vdeo o scripts) que pueda reducir la accesibilidad obstruyendo a otros contenidos o desorientando al usuario. Asegurar que el control de la presentacin lo tiene el usuario. Asegurar que el usuario puede seleccionar los estilos preferidos (por ejemplo, colores, tamaos del texto presentado o las caractersticas de la sntesis de voz) mediante la seleccin ofrecida por la aplicacin de usuario. Permitir al usuario anular los estilos especificados por el autor y los estilos por defecto de la aplicacin de usuario. Asegurar que el control del comportamiento de la interfaz lo tiene el usuario. Asegurar igualmente que el usuario puede controlar el
2.
3.
4.
5.
70
70
08/11/2007, 12:18
comportamiento de las ventanas del navegador y los controles de la interfaz de usuario, incluyendo los que pueden ser manipulados por el autor (por ejemplo, a travs de scripts). 6. Aplicar interfaces de programacin inter-operables para la aplicacin. Aplicar interfaces inter-operables para comunicar con otros programas (por ejemplo, tecnologas de ayuda, entornos del sistema operativo y plug-ins). 7. Cumplir con las convenciones de los entornos del sistema operativo. Cumplir con dichas convenciones tanto en la interfaz de la aplicacin de usuario, como en la documentacin, la configuracin de entrada de datos y la instalacin. 8. Aplicar las especificaciones que benefician la accesibilidad. Apoyar las caractersticas de accesibilidad de todas las especificaciones aplicadas. Hay que tener en cuenta las Recomendaciones de W3C cuando estn disponibles y sean apropiadas para una tarea. 9. Proporcionar mecanismos de navegacin. Proporcionar acceso al contenido a travs de una variedad de mecanismos de navegacin, incluyendo navegacin secuencial, navegacin dirigida, bsquedas y navegacin estructurada. 10. Orientar al usuario. Proporcionar informacin que ayude al usuario a entender el contexto de navegacin. 11. Permitir la configuracin y personalizacin. Permitir al usuario que configure su aplicacin de usuario para que las tareas que realiza con frecuencia las haga bien y permitir al usuario aplicar sus preferencias. 12. Proporcionar en forma accesible la documentacin y las ayudas de la aplicacin de usuario. Asegurar que el usuario puede entender las caractersticas del software que benefician la accesibilidad en la documentacin aportada. Asegurar que la documentacin es accesible. La documentacin oficial de estas pautas (en ingls) se puede consultar en la direccin web: http://www.w3.org/TR/UAAG10/guidelines.html.
71
71
08/11/2007, 12:18
Accesibilidad en las aplicaciones de usuario ms comunes

Existe un gran nmero de aplicaciones de usuario que se utilizan para navegar por la web. Pero slo un reducido nmero de ellas son utilizadas por los usuarios de forma habitual. Vamos a ver, en este apartado, las caractersticas de accesibilidad que presentan algunas de ellas. Las cuatro escogidas lo son en funcin del gran nmero de usuarios que las utilizan. stas son: Internet Explorer 6.0 de Microsoft. Firefox 1.5 de Mozilla. Netscape 7.0 Navigator. Opera 7.54. Es importante tener en cuenta que los desarrolladores de navegadores incorporan con cierta frecuencia nuevas versiones de sus programas. Es esperable que las nuevas versiones de estos navegadores incorporen mejores utilidades para el acceso a la web y para la personalizacin de la navegacin por parte del usuarios, hacindola ms ajustada a sus necesidades y demandas.
Caractersticas de accesibilidad de Internet Explorer

Para descargar de forma gratuita este programa: http://www.microsoft.com/downloads/search.aspx?displaylang=es Internet Explorer de Microsoft es el navegador web ms utilizado en todo el mundo. La causa no es otra que su integracin en el sistema operativo que ms ha calado en el mundo de la informtica domstica: Windows de Microsoft. Por lo tanto, cualquier ordenador que tenga instalado este sistema operativo, por defecto, llevar instalado el navegador IExplorer (como se le conoce en abreviatura), lo que supone que la mayora de los ordenadores domsticos y muchsimos de los que se utilizan en el mbito laboral disponen de l.
72
72
08/11/2007, 12:18
Imagen 16. Internet Explorer 6.0 de Microsoft.
Dado el peso especfico que tiene en la navegacin por la web (segn fuentes se apunta que entre un 80% y un 95% de los usuarios de la Red acceden con este navegador), el que disponga de caractersticas de accesibilidad resulta muy importante.
OPCIONES DE ACCESIBILIDAD EN IEXPLORER

Las opciones que este navegador presenta para poder ser manejado en condiciones de accesibilidad las encontramos en Herramientas>Opciones de Internet donde se abre un cuadro de dilogo con varias pestaas. En la General podemos encontrar distintas opciones, entre las que se encuentra la de Accesibilidad.
73
73
08/11/2007, 12:18
Imagen 17. Cuadro de dilogo que ofrece acceso a las opciones de accesibilidad.
Las posibilidades que nos ofrece seleccionar son las siguientes: Omitir colores especificados en pginas web: Seleccionando esta opcin nuestro navegador mostrar las pginas web con los colores por defecto asignados a los elementos por HTML (por ejemplo, los enlaces los mostrar en azul, si no estn visitados, y en granate una vez los hayamos visitado, y no como los haya definido el autor). Puede ser muy til para orientar al usuario sobre dnde se encuentran los enlaces y anular ciertas combinaciones de colores para aquellos que tengan problemas de visualizacin. Omitir estilos de fuentes especificados en pginas web: Con esta opcin hacemos que la visualizacin de las pginas se haga con el estilo de fuente definido por defecto en nuestro navegador. 74
74
08/11/2007, 12:18
Omitir tamao de fuentes especificado en pginas web: Esta opcin permite anular el tamao especificado para las fuentes por el autor y posibilita al usuario una cierta ampliacin o reduccin de ellas, si lo precisa. Dar formato a los documentos utilizando mi hoja de estilos: Seleccionando esta opcin, el programa nos pide la ubicacin de la hoja de estilos que pretendemos aplicar y que previamente habremos construido con nuestras preferencias. Esta hoja de estilos se aplicar a toda las pginas que visitemos mientras tengamos seleccionada la opcin y nos permite elegir una amplsima gama de posibilidades para visualizar el formato de las pginas de acuerdo a nuestras necesidades (fuentes ms grandes, cambio de colores, eliminacin de fondos, etc.).
Imagen 18. Cuadro de dilogo Accesibilidad con las opciones que podemos seleccionar.
AUMENTAR EL TAMAO DE LA FUENTE

IExplorer, como la mayora de los navegadores, nos permite aumentar el tamao de la fuente en la pgina visualizada mediante Ver>Tamao de texto y seleccionando entre las cinco posibilidades que ofrece (mayor, grande, mediana, pequea y menor; por defecto viene seleccionada la mediana). 75
75
08/11/2007, 12:18
Es importante tener en cuenta que esta opcin no nos ser de utilidad si el autor ha definido en su hoja de estilo un tamao en unidades absolutas (pixels o centmetros) en lugar de haberlo hecho en unidades relativas (porcentaje o em). Para modificar el tamao de la letra en estos casos tendremos que acudir a las opciones apuntadas en el prrafo anterior.
Imagen 19. Seleccin de aumento o disminucin del tamao del texto.
BLOQUEO DE VENTANAS EMERGENTES

Una de las situaciones que ms despistan a los usuarios que no pueden ver la pantalla del ordenador es cuando se abren nuevas ventanas en la misma sin avisarlos. Esto sucede, por ejemplo, cuando el autor ha definido una nueva ventana como destino de un enlace o cuando se incluyen Popup publicitarios. IExplorer permite bloquear la apertura de estas ventanas emergentes y avisar al usuario de que el programa est tratando de abrir una nueva ventana. Para seleccionar las distintas opciones de bloqueo que nos permite, seguiremos la ruta Herramientas>Bloqueador de elementos emergentes>Configuracin del bloqueador de elementos emergentes.
76
76
08/11/2007, 12:18
Imagen 20. Cuadro de dilogo para la configuracin del bloqueador de elementos emergentes.
En el cuadro de dilogo para la configuracin del bloqueador podemos definir a qu sitios permitimos que nos presenten elementos emergentes, la reproduccin de sonido cuando se produzca un bloqueo, la presentacin de una barra que nos muestre la informacin del bloqueo y el nivel de filtrado (alto, medio o bajo) que aplicamos para los elementos emergentes.
COMPATIBILIDAD CON TECNOLOGAS DE APOYO

IExplorer es compatible con algunas tecnologas de apoyo, como es el caso de los lectores de pantalla. Probablemente es el navegador que mayor compatibilidad presenta (no en vano a los propios lectores de pantalla les interesa ser compatibles con el navegador ms usado) como es el caso de Jaws de Freedom Scientific (diseado especficamente para trabajar con Windows) o Home Page Reader de IBM. Tambin muestra una gran compatibilidad con las sntesis de voz que se utilizan para dar instrucciones al programa durante la navegacin (por la 77
77
08/11/2007, 12:18
misma razn apuntada en el prrafo anterior). As, programas como Dragon Naturally Speaking de ScanSoft o Via Voice de IBM no muestran ningn problema de compatibilidad.
BARRA DE HERRAMIENTAS DE ACCESIBILIDAD AIS

Technosite (Fundosa Teleservicios S.A.) ha traducido y puesto a disposicin de los usuarios de IExplorer una barra de herramientas para comprobar y promover la accesibilidad en la web. Se trata de una herramienta denominada AIS (Accessible Information Solutions) Web Accessibility Toolbar que nos permite:
Imagen 21. Barra de herramientas AIS incorporada al navegador IExplorer.
Validar el cdigo HTML y CSS de la pgina que estamos visualizando con distintas herramientas automticas. Especificar y personalizar de forma rpida el tamao de visualizacin (640x480, 800x600, 1024x768 o cualquier otro personalizado). Activar, desactivar y mostrar las hojas de estilo aplicadas, as como mostrar la existencia de elementos HTML 4 desaconsejados en la pgina visualizada. Mostrar o no las imgenes en la pgina visualizada as como los textos alternativos, en caso de existir. Mostrar la pgina en escala de grises as como mostrar los colores empleados en la pgina y analizar el contraste entre ellos. Mostrar la estructura del documento en pantalla con un alto nivel de detalle en cuando a los elementos estructurales incorporados a la misma. Emplear una serie de utilidades que van desde analizadores automticos de la accesibilidad en el cdigo de la pgina visualizada, hasta la simulacin de algunos efectos, como la lectura de la pgina por un navegador slo texto o cmo vera la pgina una persona daltnica. La 78
78
08/11/2007, 12:18
amplia variedad de utilidades que se presentan en este apartado impide entrar en detalle en las mismas. Ofrecer informacin sobre el documento en pantalla, como los metadatos, el tamao y tiempo de descarga o la lista de marcos o enlaces. Proporcionar referencias a documentos sobre pautas de accesibilidad, recursos sobre accesibilidad y usabilidad y referencias del lenguaje de codificacin. Proveer atajos para activar y desactivar elementos de IExplorer, cambiar el tamao del texto o acceder al cuadro de dilogo de opciones de accesibilidad antes descrito. Disponer de una lupa de pantalla o magnificador que nos permite reducirla (hasta un 25%) o ampliarla (hasta un 600%). Esta barra de herramientas, en su versin en castellano, se puede descargar de: http://www.technosite.es/software.asp
Caractersticas de accesibilidad en Firefox

Podemos descargar este programa de forma gratuita en: http://www.mozilla-europe.org/es/products/firefox/
Imagen 22. Firefox 1.5 de Mozilla.
79
79
08/11/2007, 12:18
Se trata del navegador que est ocupando el segundo lugar (a mucha distancia del IExplorer) en el ranking de ms utilizados por los usuarios de la web. Heredero de la trayectoria de los navegadores conocidos como Mozilla, en sus distintas versiones, ha ido escalando puestos a gran velocidad desbancando a otros navegadores de ms solera. Su gran compatibilidad y parecido en el aspecto externo con el navegador de Microsoft, ha facilitado que muchos usuarios no hayan tenido remilgos en sustituir su habitual IExplorer por este nuevo programa. Dispone de bastantes posibilidades en lo que se refiere a caractersticas de accesibilidad, pero aqu veremos las ms destacables.
OPCIONES DE ACCESIBILIDAD EN FIREFOX

Para acceder a las opciones de accesibilidad que presenta este navegador debemos seguir la ruta Herramientas>Opciones>Avanzadas.
Imagen 23. Opciones de accesibilidad en Firefox 1.5.
Presenta slo dos opciones, algo extraas: 1. Mostrar el cursor del sistema con cambios foco/seleccin: sirve para que, al navegar con lectores o magnificadores de pantalla, el cursor se desplace a la aplicacin que stos enfocan. 80
80
08/11/2007, 12:18
2. Usar bsqueda al tipear (entindase este modismo como teclear o escribir con el teclado): esta opcin permite que cuando tecleamos el nombre de una direccin web que queramos encontrar, vayan apareciendo bajo la barra correspondiente los nombres de direcciones que anteriormente se hayan buscado y cargado desde sta. Esta opcin se presenta por defecto en otros navegadores, como IExplorer, pero con Firefox la debemos activar. stas no son las nicas posibilidades que nos ofrece este navegador en lo que se refiere a caractersticas de accesibilidad. Veamos algunas ms.
CAMBIAR EL TAMAO DEL TEXTO

Permite, como casi todos los navegadores, cambiar el tamao del texto (las imgenes permanecen con el mismo tamao), pero en este caso lo hace mediante una combinacin de teclas: Aumentar: pulsando control y la tecla +, hasta 8 veces. Disminuir: pulsando control y la tecla -, hasta 8 veces. Normal: para ver el tamao de letra por defecto hay que pulsar control y la tecla 0 (cero) en el teclado alfanumrico. Esta opcin la ejecuta con mayor eficiencia que otros navegadores como IExplorer, ya que consigue cambiar el tamao de fuentes que hayan sido definidas en unidades absolutas (pixels o centmetros) en lugar de relativas (porcentaje o em).
DESACTIVAR LOS ESTILOS DEFINIDOS POR EL AUTOR

Siguiendo la ruta Ver>Estilo de pgina podremos seleccionar la opcin Sin estilo, lo que desactivar los estilos definidos por el autor y aplicar los que estn definidos por defecto en el navegador.
81
81
08/11/2007, 12:18
Imagen 24. Posibilidad de desactivar los estilos definidos por el autor en Firefox 1.5.
Esto no supone la desactivacin completa de la hoja de estilo, ni da la posibilidad de aplicar una hoja de estilo definida por el usuario, como suceda en IExplorer.

Firefox permite bloquear la apertura de nuevas ventanas sin la participacin activa del usuario. Siguiendo la ruta Herramientas>Opciones>Contenidos podremos bloquear la apertura de ventanas emergentes.
Imagen 25. Opcin para bloquear ventanas emergentes en Firefox 1.5.
82
82
08/11/2007, 12:18
Este navegador nos da la posibilidad de permitir que para los sitios que el usuario defina se permita la apertura de ventanas emergentes. Mediante este mismo cuadro de dilogo (Herramientas>Opciones>Contenidos) el usuario puede prescindir de cargar imgenes, lo que posibilita una navegacin ms rpida, y habilitar o no tanto Java como JavaScript.
FIREVOX, LECTOR DE PANTALLA PARA FIREFOX

Una de las caractersticas bsicas de un navegador que proviene de las prcticas llevadas a cabo entre los partidarios del software libre y el desarrollo compartido, es la posibilidad de incorporar extensiones. stas son desarrolladas voluntariamente por desarrolladores de programas y puestas a disposicin de todos de forma gratuita. Una de las ms relevantes para la accesibilidad es la denominada Firevox (que puede ser descargada en http://firevox.mozdev.org/). Se trata de un lector de pantalla para el navegador Firefox 1.5 que utiliza las voces que nuestro ordenador tenga instaladas. Su sencillez de instalacin y uso convierte a esta extensin en una potente herramienta de accesibilidad, que muestra una muy buena compatibilidad con otros lectores de pantalla que el usuario pueda tener instalados en su ordenador.
Imagen 26. Acceso a las opciones de Firevox desde la barra de tareas de Firefox 1.5.
83
83
08/11/2007, 12:18
Una vez instalada, esta extensin pone sus opciones a disposicin del usuario en la barra de tareas desde Herramientas>Firevox Options. La nica pega es que no existe (en estos momentos) una versin castellanizada de los textos de esta extensin, si bien hace un buen uso de las voces castellanas que se tengan instaladas.
WEB DEVELOPER TOOLBAR

Web Developer Toolbar (que podemos traducir como Barra de Herramientas para Desarrolladores Web) es otra de las interesantes extensiones de Firefox para la accesibilidad. De caractersticas similares a las descritas para la Barra de Herramientas de Accesibilidad del IExplorer, es de gran utilidad tanto para desarrolladores como para todos aquellos que quieran, de forma rpida, activar o desactivar ciertas funciones, analizar el cdigo de una pgina y otras interesantes funciones.
Imagen 27. Web Developer Toolbar, barra de herramientas para desarrolladores web de Firefox.
Son muchas las posibilidades que tiene esta extensin y exceden las posibilidades de este documento. Por tal motivo, animo al lector a que experimente directamente con ella. Slo se puede poner una pega a esta extensin: no est castellanizada en estos momentos, lo que supone una considerable limitacin para aquellos que no se manejen con suficiente soltura en ingls.
Caractersticas de accesibilidad en Netscape

Podemos descargar este programa de forma gratuita en: http://www.aola.com/netscape/download/ Se trata de uno de los navegadores gratuitos de ms historia, heredero de un autntico clsico: Mosaic. Compiti con el navegador de Microsoft, aunque siempre a una discreta distancia, pero entre los usuarios ha perdido, con el paso del tiempo, mucha clientela. Ha sido desbancado por el 84
84
08/11/2007, 12:18
navegador de Mozilla en el segundo puesto del ranking y ahora trata de recuperar el campo perdido.
Imagen 28. Netscape 7.0 Navigator.
La peculiaridad de este programa es que no se trata de un simple navegador, sino que ofrece la posibilidad de utilizar, tambin, una herramienta de creacin (denominada Composer), un programa de correo electrnico, un servicio de mensajera instantnea (denominado ICQ) y una libreta de direcciones.
OPCIONES DE ACCESIBILIDAD EN NETSCAPE

Al contrario de lo que sucede con los anteriores navegadores de los que hemos hablado, Netscape no presenta opciones especficas de accesibilidad. Es decir, no encontramos un apartado en el que nos ofrezcan unas opciones directamente encaminadas a facilitar la accesibilidad. Ello no quiere decir que no posea algunas caractersticas que facilitan la accesibilidad, aunque esto no es relevante en este navegador. 85
85
08/11/2007, 12:18
Si seguimos la ruta Editar>Preferencias accederemos a una ventana de dilogo que nos permite la seleccin de preferencias para la navegacin. Como antes decamos, no existe un apartado especial para la accesibilidad pero s encontramos la posibilidad de, mediante las opciones de Navegacin inteligente, posibilitar la funcin de completar automticamente el texto escrito en la barra de ubicacin, lo que facilita a las personas con poca funcionalidad en sus manos acelerar esta tarea para aquellas direcciones web que ya han tecleado en alguna ocasin anterior.
Imagen 29. Funcin para completar automticamente lo escrito en la barra de ubicacin en Netscape 7.
86
86
08/11/2007, 12:18
MODIFICACIN DEL TAMAO DEL TEXTO

Netscape posibilita modificar el tamao de visualizacin del texto (la aplicacin de esta opcin no modifica el tamao de las imgenes), lo cual posibilita la adaptacin de la visualizacin del texto en pantalla a las necesidades del usuario.
Imagen 30. Aumentar o disminuir el texto con Netscape 7.
Para cambiar el tamao del texto se nos ofrecen dos posibilidades. 1. La primera de ellas es mediante la combinacin de las teclas Control y la tecla + o - (segn queramos aumentar o disminuir el tamao). Con esta opcin se nos permite incrementar con la primera pulsacin al 120% del tamao original, con la segunda al 150% y con la tercera al 200%. Cuando lo que hacemos es disminuir, con la primera pulsacin el texto se muestra en un 90% del tamao original, con la segunda un 75% y con la tercera un 50%. 87
87
08/11/2007, 12:18
2. La segunda es mediante la ruta Ver>Zoom de texto (tras la opcin Zoom de texto aparece el porcentaje que est seleccionado). Se despliega una ventana de seleccin que nos permite elegir una de las opciones predeterminadas u otro tamao, mediante la apertura de una ventana de dilogo donde podremos introducir un valor entre 1 y 2.000%. La posibilidad de cambiar el tamao del texto nos la ofrece Netscape aunque el autor haya definido ste en forma absoluta (puntos, pixels o centmetros) y no de forma relativa (porcentaje o em).
Caractersticas de accesibilidad de Opera

Para descargar este programa de forma gratuita (con publicidad): http://www.opera.com/download/
Imagen 31. Navegador Opera 7.54.
Opera es un navegador que ha gozado del favor de los que nos dedicamos al mundo de la accesibilidad en la web por su apuesta, desde hace aos, por introducir este tipo de opciones dentro del formato estndar de su programa. Se trata de un programa que, adems del navegador, inclu88
88
08/11/2007, 12:18
ye un gestor de correo electrnico y una aplicacin para llevar a cabo encuentros en la web (los conocidos chats). Tiene una versin que est a la venta por un precio mdico y otra de descarga gratuita. Esta ltima inserta un apartado de publicidad, que podemos configurar con nuestras preferencias, pero del que no podremos deshacernos. La ltima versin disponible en castellano est numerada como 7.54 y el rea de publicidad ha sido rediseada y parece estorbar menos que en anteriores versiones, permitiendo una visualizacin algo ms grande del rea de navegacin.
OPCIONES DE ACCESIBILIDAD EN OPERA

Si seguimos la ruta Herramientas>Opciones se abre un cuadro de dilogo, muy completo, que nos permite configurar un gran nmero de opciones. sta es una de las virtudes de este navegador, su gran flexibilidad para acoplarse a las necesidades del usuario. No encontraremos en este cuadro un apartado concreto dedicado a las opciones de accesibilidad, ya que sta es considerada como algo estndar por los desarrolladores del programa que est presente en todas las opciones estndar donde sea precisa y, por tal motivo, ha descartado la introduccin de un apartado especfico.
Imagen 32. Cuadro de dilogo para configurar las opciones de usuario en Opera 7.54.
89
89
08/11/2007, 12:18
Por otro lado, muchas de las opciones que podemos configurar desde este cuadro de dilogo, las tenemos disponibles en la interfaz de navegacin para hacer ms rpida su configuracin, sin tener que recurrir a los varios clic que supone ir a travs de la va Herramientas>Opciones. Este acceso rpido a ciertas funciones est disponible mediante unos botones situados en la parte superior derecha del rea de navegacin, que nos permiten: La modificacin del tamao de la imagen (no slo de la letra). El acceso a las funciones de seguridad. Cambiar las opciones de visualizacin de imgenes y del estilo de presentacin de la pgina.
Imagen 33. Botones de acceso rpido para la modificacin de ciertas opciones en Opera 7.54.
Tambin, como veremos ms adelante, nos permite la modificacin de algunas opciones mediante teclas o combinaciones de teclas, lo que permite al usuario interactuar ms gilmente con la interfaz. Veamos ahora algunas de las caractersticas de accesibilidad ms relevantes que presenta el navegador Opera.
AUMENTAR EL TAMAO DE LA VISUALIZACIN

En anteriores navegadores hemos visto cmo permitan incrementar el tamao del texto, pero no permitan que se incrementara el tamao de las imgenes que lo acompaan. En el caso de Opera la funcin de incremento o disminucin del texto acta como una lupa que modifica la visualizacin de toda la pgina (tanto texto como imgenes), respetando el modo de presentacin. La activacin de esta opcin se puede hacer, como ya se ha dicho en el apartado anterior, a travs de un botn que se sita en la parte superior derecha del rea de navegacin ( ) que nos permite seleccio90
90
08/11/2007, 12:18
nar el porcentaje de aumento o disminucin de toda la pgina visualizada desde un 20 hasta un 1.000%. Por defecto est seleccionada la visualizacin en un 100%, pero esto lo podemos modificar en el cuadro de dilogo de Herramientas>Opciones seleccionando la visualizacin por defecto que ms nos interese en la opcin Escala predeterminada de Estilo de pgina. Una forma ms rpida de modificar la escala de visualizacin de la pgina se nos presenta mediante el uso del teclado o del ratn: Utilizando el teclado, podemos aumentar el tamao de visualizacin pulsando la tecla + (o la tecla 0, cero) o disminuirlo con la tecla (o la tecla 9). El cambio de visualizacin se har en intervalos de un 10%. Si queremos una modificacin ms drstica, podemos pulsar la tecla Control y las teclas + (u 8) o - (o 7), con lo que se producirn saltos de un 100%. Para regresar a la visualizacin por defecto basta pulsar la tecla *, asterisco, del teclado numrico (o 6). Si nuestro ratn dispone de rueda, podemos aumentar o disminuir la visualizacin pulsando la tecla Control y moviendo la rueda hacia delante (aumenta la visualizacin a intervalos de un 10%) o hacia atrs (disminuye la visualizacin a intervalos de un 10%). Para regresar a la visualizacin por defecto, pulsamos Control y hacemos clic con la rueda del ratn. Como vemos, los desarrolladores de Opera han pensado en la posibilidad de facilitar, particularmente a aquellos usuarios que tienen deficiencias visuales, la visualizacin de las pginas navegadas y han utilizado diferentes vas (teclado o ratn) para realizar la funcin de modificacin del tamao, que acta tanto sobre el texto como sobre las imgenes.
CARGA DE IMGENES Y CAMBIO DEL ESTILO DE LAS PGINAS

En el mismo sentido de flexibilidad y adaptacin a las necesidades del usuario, Opera facilita una amplia gama de posibilidades para la visualizacin de las pginas web. En este caso, como en el anterior, se dispone de un botn de acceso rpido ( ) a las funciones de carga de imgenes y modo de presentacin de la hoja de estilos. 91
91
08/11/2007, 12:18
Imagen 34. Men desplegado con las opciones de carga de imgenes y de presentacin de hoja de estilos en Opera 7.54.
Por defecto, el navegador tiene seleccionada la opcin de mostrar todas las imgenes que presenta la pgina. Se nos da la posibilidad de mostrar slo aquellas que ya tenemos en cach o no mostrar ninguna (en su caso mostrar, si existe, el texto alternativo que haya aplicado el autor en aquellas imgenes que se nos muestran). Esta opcin facilita una navegacin ms rpida y la verificacin de la existencia de textos alternativos. En lo que se refiere a la forma de presentacin de los estilos de la pgina nos ofrece la posibilidad de elegir entre dos opciones: mostrarla como la dise el autor (aplicando, por lo tanto la hoja de estilo definida por ste) o hacerla en modo de usuario, donde es ste quien define qu estilo deber aplicarse a la pgina visualizada. De las distintas opciones que presenta este modo de usuario (que podemos ver en la imagen 32), podemos seleccionar una o varias al mismo tiempo, de tal modo que las posibles combinaciones de hoja de estilo para visualizar son muy numerosas. Para configurar, por defecto, tanto el modo de autor como el de usuario, deberemos hacerlo desde Herramientas>Opciones>Estilo de pgina>Configurar modos, donde se posibilita elegir entre cinco posibili92
92
08/11/2007, 12:18
dades para cada una de ellas, sin que sean mutuamente excluyentes. Lo que s debemos tener claro es que al escoger las dos primeras (Hojas de estilo de la pgina y Colores y fuentes de la pgina) las tres restantes no tendrn efecto, ya que priman los estilos definidos por el autor).
Imagen 35. Cuadro de dilogo donde podemos seleccionar los modos de presentacin con sus opciones en Opera 7.54.
Puede ser un ejercicio muy instructivo ir visualizando una misma pgina con las distintas posibilidades que nos ofrece Opera.

Igual que el resto de los navegadores vistos hasta este momento, Opera permite que el usuario pueda bloquear la presentacin de pginas en ventanas emergentes sin su participacin. Para bloquear las ventanas emergentes pulsaremos F12 o seguiremos la ruta Herramientas>Opciones ms a mano donde podremos escoger entre permitir que se abran todas en primer o segundo plano, bloquear las no deseadas o bloquear todas. Esta lista desplegable nos ofrece otras opciones interesantes para la accesibilidad como son: La desactivacin de las animaciones GIF, que pueden ser molestas para algunos usuarios, e incluso, si tienen una cierta frecuencia, pueden desencadenar ataques epilpticos, por ejemplo. 93
93
08/11/2007, 12:18
Deshabilitar el sonido de las pginas, si existe, que puede interferir con el sonido de los lectores de pantalla. Desactivar Java, JavaScript y otros conectores (PDF. Shockwave, Flash, QuickTime, RealPlayer, etc.), que permiten al usuario adaptar la navegacin a sus caractersticas personales y a las de su equipo.
Imagen 36. Lista desplegable de las opciones ms a mano donde bloquear las ventanas emergentes en Opera 7.54.
ATAJOS DE TECLADO Y GESTOS DEL RATN

A algunos usuarios no les es posible manejar el ratn (o les supone una tarea muy dificultosa) o, por el contrario, se puede dar el caso de que este elemento lo manejan con ms soltura que el teclado. Para ellos, Opera ha definido una serie de opciones que les permita aligerar la tarea de navegar 94
94
08/11/2007, 12:18
y puedan as utilizar este programa en toda su extensin. Esto se ha hecho mediante los denominados atajos de teclado y con los gestos de ratn. Los atajos de teclado estn siempre disponibles para el usuario y la extensa informacin con la relacin de teclas y combinacin de teclas habilitadas por Opera la podemos encontrar (en castellano) en la pgina de ayuda a la que podemos acceder desde la ruta Ayuda>Ayuda de Opera, o pulsando F1, donde seleccionaremos Teclado. Los gestos de ratn no se encuentran habilitados por defecto, para no interferir con las funciones asignadas de forma especial por algunos usuarios a sus ratones o mecanismos apuntadores. Para habilitarlos lo tendremos que hacer desde Herramientas>Opciones>Ratn y teclado, donde activaremos la funcin correspondiente.
Imagen 37. Cuadro de dilogo donde podemos activar los gestos de ratn en Opera 7.54.
La novedad y escasamente conocido uso de la funcionalidad de los gestos de ratn, nos alienta a recoger en este texto cules son stos y qu funcionalidad ponen al servicio de aquellas personas que, por las dificultades que tienen en el uso del teclado, navegan con ratn o mecanismos apuntadores: 95
95
08/11/2007, 12:18
Gestos de Navegacin: Ir a la pgina anterior: Pulsar el botn derecho y hacer clic con el izquierdo o pulsar el botn derecho y mover el ratn hacia la izquierda. Ir a la pgina siguiente: Pulsar el botn izquierdo y hacer clic con el derecho o pulsar el botn derecho y mover el ratn hacia la derecha. Ir al directorio padre: Pulsar el botn derecho, mover el ratn hacia arriba y luego hacia la izquierda. Saltar: Pulsar el botn derecho y mover a la derecha y hacia arriba o pulsar el botn derecho y la tecla maysculas, mover hacia la derecha. Rebobinar: Pulsar el botn derecho, mover a la izquierda y luego abajo o pulsar el botn derecho y tecla maysculas, mover hacia la izquierda. Ir a pgina principal: Doble clic en una pgina vaca. Recargar pgina: Pulsar el botn derecho, mover hacia arriba y luego hacia abajo. Parar carga: Pulsar el botn derecho, mover hacia arriba. Gestos de Pgina: Navegar en una pgina nueva: Pulsar el botn derecho y mover hacia abajo, hacer doble clic en el espacio de trabajo o sobre la barra de Pginas. Duplicar pgina: Pulsar el botn derecho y mover hacia abajo y luego hacia arriba. Restaurar o maximizar pgina: Pulsar el botn derecho y mover hacia arriba y luego hacia la derecha. Minimizar pgina: Pulsar el botn derecho y mover hacia abajo y luego hacia la izquierda. Cerrar pgina: Pulsar el botn derecho y mover hacia abajo y luego hacia la derecha o pulsar el botn derecho y mover derecha -izquierda - derecha. Gestos para enlaces: Abrir enlace en una nueva pgina: Colocar el puntero del ratn sobre un enlace, pulsar el botn derecho y mover hacia abajo. Abrir enlace en una pgina en segundo plano: Mover el puntero del ratn sobre un enlace, pulsar el botn derecho y mover hacia abajo y luego hacia arriba. 96
96
08/11/2007, 12:18
Gestos con la rueda: Deslizar arriba y abajo: Accionar la rueda del ratn arriba y abajo. Aumentar y disminuir la escala: Pulsar la tecla control y accionar la rueda del ratn. Recuperar la escala predeterminada: Pulsar la tecla control y hacer clic con la rueda del ratn. Moverse adelante y atrs por el historial: Pulsar la tecla maysculas y accionar la rueda. Ciclo entre pginas abiertas: Pulsar el botn derecho y accionar la rueda del ratn. Desplazar la pgina (panning): Hacer clic con la rueda del ratn y moverlo. La imagen 35 nos muestra otra de las opciones de accesibilidad que antes hemos visto para otros navegadores. Nos referimos a la funcin de autocompletar la direccin que queremos visitar mediante el despliegue de una lista de pginas ya elegidas por el usuario con anterioridad y que permanecen en el historial del programa.
Aplicaciones de usuario alternativas

Para que ciertos grupos de personas puedan acceder a los contenidos que se colocan en la web, se han desarrollado aplicaciones de usuario alternativas que facilitan dicha tarea. En este apartado vamos a ver algunas de ellas, cuyas referencias han sido tomadas de la pgina sobre este tipo de recursos que mantiene el grupo WAI (Web Accessibility Initiative, Iniciativa para la Accesibilidad en la Web) de W3C (World Wide Web Consortium, Consorcio Mundial de la Web), en la direccin: http://www.w3.org/WAI/References/Browsing La pgina citada fue actualizada por ltima vez en julio del ao 2001, lo que significa que algunos de los recursos que en ella se nombran no estn disponibles en la actualidad. Por tal motivo nos centraremos en aquellos cuya existencia actual s hemos podido comprobar.
97
97
08/11/2007, 12:18
Navegadores diseados especialmente para personas con discapacidad

Para cada una de estas aplicaciones se da la direccin web, donde se puede encontrar una breve descripcin y se menciona qu caractersticas adaptativas soporta. La mayora de ellos estn disponibles en su versin en ingls, y slo se seala la disponibilidad en castellano cuando sta existe.
BRAILLESURF DE BRAILLENET
http://www.snv.jussieu.fr/inova/bs4/uk/index.htm Disponible en castellano. Funciona con los sistemas operativos Windows 95 y siguientes. Se trata de un navegador slo texto que dispone de un lector de pantalla, un magnificador para ampliar el tamao del texto y es compatible con los dispositivos de lectura braille. Es de distribucin gratuita.
BROOKESTALK DE OXFORD BROOKES UNIVERSITY

http://www.brookes.ac.uk/schools/cms/research/speech/spanish/spanish.htm Disponible una versin en castellano, desarrollada en colaboracin con la ONCE. Funciona para los sistemas operativos Windows 95 y siguientes. Sus ltimas actualizaciones datan del ao 2001. Se trata de un navegador por voz que presenta texto en imagen. Dispone de bsqueda inteligente y magnificador de pantalla. Se distribuye gratuitamente.
HOME PAGE READER 3.0 DE IBM

http://www-134.ibm.com/webapp/wcs/stores/servlet/CategoryDisplay? catalogId=-724&storeId=724&categoryId=2644214&langId=-5&dualCurrId=1221 Est disponible en castellano.
1. Ojo con esta direccin web que es muy larga!
98
98
08/11/2007, 12:18
Es un navegador web con voz que proporciona acceso a internet y correo electrnico a las personas invidentes, con graves problemas de visin y con dificultades para la lectura. Sus principales caractersticas (segn el fabricante) son: Tecnologa de ayuda autnoma para acceder a internet, que utiliza el mdulo de conversin texto-voz de IBM. Deteccin automtica del idioma de la pgina web hasta en siete idiomas en las versiones de idioma seleccionadas. Servidor web integrado y funciones de correo electrnico. Sincronizacin oral y visual de grficos, texto y vistas de voz de pginas web. Posibilidad de buscar por todo el texto odo de la pgina web, que incluye texto alternativo y metatexto. Todos los mens y dilogos en voz. Navegacin a travs de los controles estndar de Windows o un mtodo de navegacin opcional con el teclado numrico. Una Gua de Aprendizaje integrada para los usuarios nuevos y los que ya tienen experiencia. No se trata de software gratuito, aunque tiene un precio asequible (146,00 euros, en la actualidad). En versiones anteriores se ha distribuido una demo ejecutable, pero no para la versin actual.
SENSU INTERNET BROWSER

http://www.sensus.dk/sib10uk.htm No disponible en castellano. Se trata de un navegador por voz especialmente diseado para entornos Windows 95/98 e Internet Explorer 4.0. Dispone de salida de voz, soporte para lector de lnea braille y formato de fuentes especiales. Su distribucin es gratuita.
99
99
08/11/2007, 12:18
SIMPLY WEB 2000

http://www.econointl.com/sw/ No disponible en castellano. Otro navegador por voz que utiliza la ingeniera de Internet Explorer (desde la versin 4.01) y funciona con todas las versiones Windows a partir de la 95. Su distribucin es gratuita.
Lectores de pantalla
Un lector de pantalla es utilizado para permitir la navegacin de la pantalla presentada por nuestro sistema operativo mediante la salida de voz o braille y, por lo tanto, puede operar en las principales aplicaciones. En el contexto de navegacin estos lectores se utilizan junto con un navegador estndar del tipo de los descritos aqu (IExplorer, Netscape, Firefox, Opera) o con otros navegadores del tipo solo texto (por ejemplo, Lynx). Veamos algunos de ellos (todos proporcionan versiones de demostracin):
ASAW DE MICROTALK
http://www.microtalk.com/ Sistemas operativos: DOS y versiones Windows 95 y siguientes. Salida: Voz.
HAL DE DOLPHIN
http://www.dolphinuk.co.uk/ Sistemas operativos: DOS y versiones Windows 95 y siguientes. Salidas: Voz y braille.
JAWS DE FREEDOM SCIENTIFIC

http://www.hj.com/fs_products/JAWS_HQ.asp Sistemas operativos: DOS y versiones Windows 95 y siguientes. Salidas: Voz y Braille.
100
100
08/11/2007, 12:18
LOOKOUT DE CHOICE TECHNOLOGY

http://www.screenreader.co.uk/ Sistemas operativos: Versiones Windows 95 y siguientes. Salida: Voz.
SIMPLY TALKER DE ECONONET

http://www.econointl.com/ Sistemas operativos: Windows 95/98/ME Salida: Voz.
VIRGO DE BAUM
http://www.virgo4.de/html/v45.htm Sistemas operativos: Versiones Windows NT/2000/XP. Salidas: Voz y braille.
WINDOW-EYES DE GWMICRO
http://www.gwmicro.com/products/ Sistemas operativos: Versiones Windows 95 y siguientes. Salidas: Voz y braille.
WINVISION FROM ARTIC

http://www.artictech.com/whywv97.htm Sistemas operativos: Versiones Windows 95 y siguientes. Salida: Voz.
101
101
08/11/2007, 12:18
102
102
08/11/2007, 12:18
Las pautas de accesibilidad al contenido en la web 1.0 de w3c/wai
Qu son las Pautas de Accesibilidad al Contenido en la web?

Tal como sus redactores dicen:
Estas pautas explican cmo hacer accesibles los contenidos de la web a personas con discapacidad. Las pautas estn pensadas para todos los diseadores de contenidos de la web (autores de pginas y diseadores de sitios) y para los diseadores de herramientas de creacin. El fin principal de estas pautas es promover la accesibilidad. De cualquier modo, siguindolas, se har la web ms asequible tambin para todos los usuarios, cualquiera que sea la aplicacin de usuario utilizada (por ejemplo, navegador de sobremesa, navegador de voz, telfono mvil, PC de automvil, etc.), o las limitaciones bajo las que opere (por ejemplo, entornos ruidosos, habitaciones infra o supra iluminadas, entorno de manos libres, etc.). Seguir estas pautas ayudar tambin a cualquier persona a encontrar informacin en la web ms rpidamente. Estas pautas no desalientan a los diseadores para la utilizacin de imgenes, vdeo, etc.; por el contrario, explican cmo hacer los contenidos multimedia ms accesibles a una amplia audiencia.
Las Pautas de Accesibilidad al Contenido en la Web 1.0 son una especificacin del W3C que proporciona una gua sobre la accesibilidad de los sitios de la web para las personas con discapacidad. Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. La especificacin contiene catorce pautas, que son los principios generales para el diseo accesible. Cada pauta est asociada a uno o ms 103
103
08/11/2007, 12:18
puntos de verificacin que describen cmo aplicar esa pauta a las caractersticas particulares de las pginas web. Un apndice de estas pautas, la Lista de puntos de verificacin para las Pautas de Accesibilidad al Contenido en la Web 1.0, presenta los puntos de verificacin clasificados por prioridades, para encontrarlas fcilmente. Estas pautas no slo hacen las pginas ms accesibles para las personas con discapacidad, sino que tienen el beneficio adicional de hacerlas ms accesibles para todos los usuarios, en particular para los que utilizan navegadores diferentes o para los que manejan ordenadores porttiles con pantallas pequeas o basados en la voz.
Qu son las prioridades, los niveles de adecuacin?

Cada punto de verificacin tiene asignado uno de los tres niveles de prioridad: La Prioridad 1 es para los puntos de verificacin que el desarrollador tiene que cumplir; si no, algunos grupos de personas sern incapaces de acceder a la informacin de un sitio; La Prioridad 2 el desarrollador debe cumplirla; sin ello alguien encontrar muchas dificultades para acceder a la informacin; La Prioridad 3 el desarrollador puede cumplirla; de lo contrario, algunas personas hallarn dificultades para acceder a la informacin.
La especificacin tiene tres niveles de adecuacin para facilitar la referencia por otras organizaciones. El nivel de adecuacin A (A) incluye los puntos de verificacin de prioridad 1; El nivel Doble A (AA) incluye las prioridades 1 y 2; El nivel Triple A (AAA) incluye las prioridades 1, 2 y 3.
104
104
08/11/2007, 12:18
Por qu son necesarias estas pautas?

Las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la web debido a la combinacin de barreras en la informacin de las pginas web, con las barreras de las aplicaciones de usuario (navegadores, dispositivos multimedia o ayudas tcnicas como los lectores de pantalla o reconocedores de voz). Estas Pautas tienen relacin especficamente con la reduccin de barreras en las pginas web. Para algunas personas con discapacidad, las barreras pueden significar: La falta de acceso a informacin precisa para programas educativos. La falta de acceso a informacin relacionada con el empleo o en las intranets del puesto de trabajo. La falta de acceso a informacin sobre actividades o programas cvicos. La incapacidad para participar en el comercio en la red. La falta de acceso a la informacin general de la web.
Algunos ejemplos de barreras habituales en las pginas web

Estas pautas se refieren a las barreras que pueden encontrar en las pginas web las personas con discapacidad fsica, visual, auditiva y cognitiva/ neurolgica. Los problemas habituales de accesibilidad a los sitios web incluyen: Imgenes sin texto alternativo. Ausencia de texto alternativo para los puntos sensibles de los mapas de imagen. El uso incorrecto de los elementos estructurales en las pginas. Los sonidos no subtitulados o las imgenes no descritas. La ausencia de informacin alternativa para los usuarios que no pueden acceder a los marcos (frames) o a los programas incrustados (scripts). Las tablas difciles de interpretar cuando se alinean. Los sitios con un contraste de colores pobre. 105
105
08/11/2007, 12:18
Cmo se presentan las PAUTAS?

Dentro del texto normativo, las catorce pautas o principios generales de diseo accesible incluyen: Nmero de la pauta. Exposicin de la pauta. El fundamento que sustenta la pauta y algunos grupos de usuarios que se benefician de ella.
Pauta 1. Proporcione alternativas equivalentes para el contenido visual y auditivo

Proporcione un contenido que, presentado al usuario, cumpla esencialmente la misma funcin o propsito que el contenido visual o auditivo Algunas personas no pueden utilizar imgenes, pelculas, sonidos, applets, etc directamente, pero s pueden utilizar pginas que incluyen informacin equivalente a los contenidos visuales o auditivos. La informacin equivalente debe cumplir la misma finalidad que los contenidos visuales o auditivos. As un texto equivalente para la imagen de una flecha ascendente que vincule con una tabla de contenidos, podra ser Ir a tabla de contenidos. En algunos casos, un equivalente debera describir la apariencia del contenido visual (por ejemplo, para tablas complejas, carteles o diagramas) o el sonido del contenido auditivo por ejemplo, para los ejemplos sonoros usados en educacin). Esta pauta enfatiza la importancia de aportar equivalentes textuales para los contenidos no textuales (por ejemplo, imgenes, sonido pregrabado, vdeo...). La importancia del texto equivalente radica en su capacidad para ser interpretado por vas que son accesibles para personas pertenecientes a diversos grupos de discapacidad usando diversa tecnologa. El texto puede ser interpretado por sintetizadores de voz o dispositivos braille y puede ser presentado visualmente (en varios tamaos) en visualizadores de ordenador y en el papel. El sintetizador de voz es esencial para personas ciegas y para las que tienen dificultades de lectura que a menudo acompaan a discapacidades cognitivas, de aprendizaje o sordera. El braille es esencial 106
106
08/11/2007, 12:18
para personas sordo-ciegas, tanto como para muchos individuos que solamente son ciegos. La salida visual de texto beneficia tanto a los usuarios sordos como a la mayora de usuarios de la web. Proporcionar equivalentes no textuales (dibujos, videos, sonido) del texto es tambin beneficioso para algunos usuarios, especialmente los analfabetos o personas con dificultad para la lectura. En las pelculas o presentaciones visuales, la accin representada, tal como el lenguaje corporal u otras pistas visuales, podran no estar acompaadas de suficiente informacin auditiva como para transmitir la misma informacin. A menos que se proporcionen descripciones verbales de las acciones representadas, las personas que no puedan ver (o visualizar) el contenido visual, no podrn percibirlo.
Pauta 2. No se base slo en el color

Asegrese de que los textos y grficos son comprensibles cuando se vean sin color Si el color por s mismo se usa para transmitir informacin, las personas que no puedan diferenciar ciertos colores, y los usuarios que no tengan pantallas en color o utilicen dispositivos de salida no visuales, no recibirn la informacin. Cuando los colores de primer plano y de fondo tienen un tono similar, pueden no proporcionar suficiente contraste en las pantallas monocromticas, as como a las personas con diferentes tipos de deficiencias de percepcin de los colores.
Pauta 3. Utilice marcadores y hojas de estilo y hgalo apropiadamente

Marque los documentos con los elementos estructurales apropiados. Controle la presentacin con hojas de estilo en vez de con elementos y atributos de presentacin El uso de marcadores de forma inapropiada (es decir, no de acuerdo con las especificaciones) dificulta la accesibilidad. El mal uso de marcadores para una presentacin (por ejemplo, utilizando una tabla para maquetar o un encabezado etiqueta H para cambiar el tamao de la fuente) dificulta que los usuarios con software especializado entiendan la organiza107
107
08/11/2007, 12:18
cin de la pgina o cmo navegar por ella. Ms an, la utilizacin de los marcadores de presentacin en lugar de marcadores estructurales para transmitir estructura (por ejemplo, construir lo que parece una tabla de datos con un elemento HTML PRE) hace difcil interpretar una pgina de forma inteligible a otros dispositivos. Los desarrolladores de contenidos pueden sentir la tentacin de usar (o usar mal) construcciones que aseguren el formato deseado en los navegadores antiguos. Deben darse cuenta de que estas prcticas causan problemas de accesibilidad y deben considerar si el formato es tan importante como para hacer el documento inaccesible a algunos usuarios. En el otro extremo, los desarrolladores de contenidos no deben sacrificar el marcador apropiado porque un determinado navegador o ayuda tcnica no pueda procesarlo correctamente. Por ejemplo, es apropiado usar el elemento TABLE en HTML para marcar informacin tabular aunque algunos lectores de pantalla antiguos no manejen correctamente el texto contiguo. Usar el elemento TABLE correctamente y crear tablas que se transformen adecuadamente hace posible al software interpretar tablas de otra forma que como rejilla en dos dimensiones.
Pauta 4. Identifique el idioma usado

Use marcadores que faciliten la pronunciacin o interpretacin de texto abreviado o extranjero Cuando los desarrolladores de contenido especifican los cambios en el idioma de un documento, los sintetizadores de voz y los dispositivos braille pueden cambiar automticamente al nuevo lenguaje, haciendo el documento ms accesible a usuarios multilinges. Los desarrolladores de contenido deberan identificar el idioma predominante del contenido de un documento (a travs de un marcador o en el encabezado HTTP). Deberan tambin proporcionar la expansin de las abreviaturas y los acrnimos. Adems de apoyar a las ayudas tcnicas, la identificacin del idioma usado permite a los motores de bsqueda localizar las palabras claves e identificar los documentos en el idioma deseado. Los marcadores de idioma mejoran tambin la legibilidad de la web para todo el mundo, incluso para aquellos con discapacidades de aprendizaje, cognitivas o sordera. 108
108
08/11/2007, 12:18
Cuando los cambios en las abreviaturas y el idioma no son identificados, pueden ser indescifrables para los lectores de pantalla y los dispositivos braille.
Pauta 5. Cree tablas que se transformen correctamente

Asegrese de que las tablas tienen los marcadores necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario Las tablas deberan utilizarse solamente para marcar la informacin tabular (tablas de datos). Los desarrolladores de contenidos deberan evitar usarlas para maquetar pginas (tablas de composicin). Usar tablas para cualquier finalidad crea tambin especiales dificultades para los usuarios de lectores de pantalla. Algunas aplicaciones de usuario permiten a los usuarios navegar entre las celdas de las tablas y acceder a los encabezamientos y otras informaciones de las celdas. A menos que marquemos apropiadamente las tablas, stas no proporcionaran a la aplicacin de usuario la informacin necesaria para ello. Los puntos de verificacin de esta pauta beneficiarn directamente a las personas que accedan a la tabla por medios auditivos (por ejemplo un lector de pantalla o un PC de automvil), o a aquellos que slo visualicen una parte de la pgina cada vez (por ejemplo, los usuarios ciegos o de escasa visin que utilicen un sistema auditivo o un dispositivo braille u otros usuarios de dispositivos con pantallas pequeas, etc.).
Pauta 6. Asegrese de que las pginas que incorporan tecnologas digitales se transformen correctamente
Asegrese de que las pginas son accesibles incluso cuando no se soportan las tecnologas ms modernas o stas estn desconectadas Si bien se alienta a los desarrolladores de contenidos a usar tecnologas digitales que superen los problemas que proporcionan las tecnologas existentes, debern saber cmo hacer para que sus pginas funcionen con navegadores ms antiguos, y para quienes decidan desconectar esta caracterstica. 109
109
08/11/2007, 12:18
Pauta 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes
Asegrese de que los objetos o pginas que se mueven, parpadean, se desplazan o se actualizan automticamente, puedan ser detenidos o parados Algunas personas con discapacidades cognitivas o visuales son incapaces de leer textos que se mueven con la suficiente rapidez o en absoluto. El movimiento puede tambin distraer de tal manera que el resto de la pgina se vuelve ilegible para las personas con discapacidades cognitivas. Los lectores de pantalla son incapaces de leer textos mviles. Las personas con discapacidades fsicas podran no ser capaces de moverse tan rpida o certeramente como para interactuar con objetos mviles. Todos los puntos de verificacin de esta pauta implican alguna responsabilidad por parte del desarrollador del contenido hasta que las aplicaciones de usuario proporcionen adecuados mecanismos de control de la caracterstica.
Pauta 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas

Asegrese de que la interfaz de usuario sigue los principios de un diseo accesible: funcionalidad de acceso independiente del dispositivo, teclado operable, voz automtica, etc. Cuando un objeto incrustado tiene su propia interfaz, sta (al igual que la interfaz de su navegador) debe ser accesible. Si la interfaz del objeto incrustado no puede hacerse accesible, debe proporcionarse una solucin alternativa accesible.
Pauta 9. Disee para la independencia del dispositivo

Utilice caractersticas que permitan la activacin de los elementos de la pgina a travs de diversos dispositivos de entrada El acceso independiente del dispositivo significa que el usuario puede interactuar con la aplicacin de usuario o el documento con un dispositivo 110
110
08/11/2007, 12:18
de entrada (o salida) preferido: ratn, teclado, voz, puntero de cabeza (licornio) 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 ser capaz de utilizar el formulario. Nota: Proporcionar textos equivalentes para los mapas de imagen o las imgenes usadas como vnculos, hace posible a los usuarios interactuar con ellos sin un dispositivo de apuntamiento. Generalmente, las pginas que permiten la interaccin a travs del teclado son tambin accesibles a travs de una entrada de voz o una serie de comandos.
Pauta 10. Utilice soluciones provisionales

Utilice soluciones de accesibilidad provisionales de forma que las ayudas tcnicas y los antiguos navegadores operen correctamente Por ejemplo, los navegadores antiguos no permiten al usuario navegar a cuadros de edicin vacos. Los antiguos lectores de pantalla leen las listas de vnculos consecutivos como un solo vnculo. Estos elementos activos tienen, por tanto, difcil o imposible el acceso. Igualmente, cambiar la ventana actual o hacer aparecer inesperadamente nuevas ventanas, puede ser muy desorientador para los usuarios que no pueden ver lo que est ocurriendo. Los puntos de verificacin de esta pauta se aplican hasta que las aplicaciones de usuario (incluidas las ayudas tcnicas) solucionen estos problemas. Los puntos de verificacin estn clasificados como provisionales lo que significa que el Grupo de Trabajo de las Pautas de Contenido en la web los considera vlidos y necesarios para la accesibilidad de la web en el momento de la publicacin de este documento. Sin embargo, el Grupo de Trabajo espera que estos puntos de verificacin no sean necesarios en un futuro, una vez que las tecnologas de la web hayan incorporado las caractersticas y capacidades esperables.
111
111
08/11/2007, 12:18
Pauta 11. Utilice las tecnologas y pautas W3C

Utilice tecnologas W3C (de acuerdo con las especificaciones) y siga las pautas de accesibilidad. Donde no sea posible utilizar una tecnologa W3C, o usndola se obtengan materiales que no se transforman correctamente, proporcione una versin alternativa del contenido que sea accesible Las actuales pautas recomiendan las tecnologas W3C (por ejemplo, HTML, CSS, etc.) por varias razones: Las tecnologas W3C incluyen caractersticas accesibles incorporadas. Las especificaciones W3C pronto sern revisadas para asegurar que los temas de accesibilidad se toman en consideracin en la fase de diseo. Las especificaciones W3C estn desarrolladas en un proceso abierto de laborioso consenso.
Muchos formatos no recomendados por W3C (por ejemplo, PDF, Schockwave, etc.) requieren ser vistos bien con plug-ins o con aplicaciones autnomas. A menudo, estos formatos no pueden ser visualizados o navegados con aplicaciones de usuario estndares (incluyendo ayudas tcnicas). Evitar estos formatos y caractersticas no estndar (elementos, atributos, propiedades y extensiones patentados), tender a hacer ms accesibles las pginas a ms gente que utiliza una amplia variedad de hardware y software. Cuando deba utilizar tecnologas no accesibles (patentadas o no), debe proporcionar una pgina equivalente accesible. Incluso cuando se utilicen tecnologas W3C, deben ser usadas de acuerdo con las pautas de accesibilidad. Cuando utilice tecnologas digitales, asegrese de que se transforman correctamente. Convertir los documentos (desde PDF, Postscript, RTF, etc.) a lenguajes de marcado W3C (HTML, XML) no siempre crea un documento accesible. Por tanto, valide cada pgina respecto a la accesibilidad y utilidad despus del proceso de conversin. Si una pgina no se convierte de forma legible, revise la pgina hasta que su presentacin original se convierta adecuadamente o bien proporcione una versin en HTML o en texto plano.
112
112
08/11/2007, 12:18
Pauta 12. Proporcione informacin de contexto y orientacin

Proporcione informacin de contexto y orientativa para ayudar a los usuarios a entender pginas o elementos complejos Agrupar los elementos y proporcionar informacin contextual sobre la relacin entre elementos puede ser til a todos los usuarios. Las relaciones complejas entre las partes de una pgina pueden resultar difciles de interpretar para personas con discapacidades cognitivas o visuales.
Pauta 13. Proporcione mecanismos claros de navegacin

Proporcione mecanismos de navegacin claros y coherentes, (informacin orientativa, barras de navegacin, un mapa del sitio, etc.) para incrementar la probabilidad de que una persona encuentre lo que est buscando en un sitio Los mecanismos de navegacin claros y coherentes son importantes para las personas con discapacidad cognitiva o con ceguera y benefician a todos los usuarios.
Pauta 14. Asegrese de que los documentos sean claros y simples

Asegure que los documentos son claros y simples para que puedan ser ms fcilmente comprendidos La maquetacin 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. Por tanto, asegrese de que las imgenes tienen textos equivalentes para los ciegos, los de baja visin o para cualquier usuario que no puede o ha elegido no ver los grficos. 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, incluidas aquellas que se comunican principalmente mediante lengua de signos. 113
113
08/11/2007, 12:18
114
08/11/2007, 12:18
Segunda parte CODIFICACIN HTML Y CSS
115
08/11/2007, 12:18
116
116
08/11/2007, 12:18
Codificacin HTML
HTML, SGML, XHTML, XML...

Probablemente hayamos ledo que HTML es una aplicacin de SGML. Probablemente no sepamos muy bien qu significa eso. Tambin habremos ledo sobre otros lenguajes ms exticos como XHTML y XML y, probablemente, tambin nos preguntaremos qu son exactamente.
SGML y HTML
SGML significa Standard Generalized Mark-up Language o Lenguaje Generalizado Estndar para el Formato de Documentos (mark-up es un trmino de imprenta que significa el conjunto de instrucciones estilsticas detalladas escritas en un manuscrito que debe ser tipografiado). Es un estndar internacional que permite definir lenguajes para dar formato a documentos (mark-up languages). Por ejemplo, el HTML, es un lenguaje de formato de documentos definido de acuerdo con SGML (o, en otras palabras, una aplicacin de SGML) para dar formato a documentos de hipertexto. El HTML es un lenguaje muy simple. El formato de los documentos se marca mediante etiquetas (tags) que indican el comienzo y el final de los elementos que componen el documento. Cada uno de estos elementos tiene un significado estructural diferente. Por ejemplo, el elemento p contiene un prrafo de texto. El comienzo del prrafo se marca con la etiqueta <p> y el final del prrafo se marca (opcionalmente) con la etiqueta </p>. El elemento h1 contiene un encabezado (por ejemplo, el ttulo de un captulo) y est delimitado por las etiquetas <h1> y </h1>. El elemento a indica un hipervnculo (o ms concretamente el origen o el destino de 117
117
08/11/2007, 12:18
un hipervnculo, segn cmo se marque en el documento) y est delimitado por las etiquetas <a> y </a>. Etctera. En teora, el cdigo HTML slo contiene, por tanto, informacin sobre la estructura de los contenidos. Si escribimos, por ejemplo, el siguiente prrafo:
<p>Esto es un prrafo. Aunque haga un salto de lnea, seguir siendo un prrafo.</p>
Esto se representar en el navegador as:

Esto es un prrafo. Aunque haga un salto de lnea, seguir siendo un prrafo.
La simplicidad del HTML es un punto a su favor: como los contenidos estn estructurados de manera lgica, pueden ser representados de acuerdo con esa estructura por cualquier navegador, segn sus capacidades. l mismo se encargar de escribir los ttulos con un tipo ms grande que el de los prrafos, de poner el espacio entre prrafos, de dibujar los marcadores de las listas, de dibujar las lneas entre las celdas de una tabla, etc., sin que nosotros tengamos que preocuparnos de esos aspectos. Sin embargo, los documentos as obtenidos carecen de atractivo visual. Hoy es posible utilizar hojas de estilo para especificar la apariencia de los elementos, pero durante varios aos ha sido necesario recurrir a trucos y a elementos inventados para ello. Por ejemplo, el elemento <font> para cambiar la fuente de un elemento, la utilizacin de tablas para colocar los elementos en la pantalla en lugar de para contener datos tabulares o la divisin de un mismo documento en marcos. Todo ello introdujo rpidamente problemas, ya que el HTML se complic y los documentos se hicieron menos accesibles. Los navegadores ms antiguos ya no eran capaces de entender la estructura de los nuevos documentos. De hecho los documentos perdieron su estructura, lo cual era la base misma del HTML. La ltima especificacin de HTML, la HTML 4.01 de 1997, declar todos los elementos de presentacin como desaconsejados (en ingls: 118
118
08/11/2007, 12:18
deprecated), es decir, en riesgo de ser declarados como obsoletos en prximas especificaciones, de modo que los nuevos navegadores no se veran obligados a soportarlos. En su lugar, deberan utilizarse hojas de estilo.
SGML y XML
Como hemos visto, desde su creacin, el HTML ha ido aumentando su complejidad para responder a las demandas de los usuarios de la web. Al principio era suficiente para los fsicos nucleares para los que iba a servir, pero hoy los documentos HTML tienen grficos, animaciones, msica; cada da llega a tecnologas diferentes (dispositivos porttiles, telfonos mviles) y algn da se convertir en una web realmente interactiva. El lenguaje de la web necesita seguir evolucionando. XML es una respuesta a esta necesidad. XML no es un nuevo lenguaje que vaya a suplantar a HTML. En realidad es, como el SGML, un metalenguaje, es decir, un lenguaje para definir lenguajes. Es una versin de SGML, ms sencilla y ms fcil de aplicar que el propio SGML, diseada precisamente para hacer frente a los problemas de compatibilidad y adaptabilidad de las tecnologas digitales a internet. XML significa Extensible Mark-up Language. En XML no hay elementos. Cada usuario (o grupo de usuarios) puede crear su propio lenguaje para el formato de datos y documentos, su propio vocabulario, segn sus necesidades, siguiendo las reglas de XML. Por ejemplo, si quieres crear una lista de libros, puedes definir tus propios elementos, encerrados entre las etiquetas correspondientes: <titulo>, <autor>, <precio>, <editorial>, etc. A partir de ah, podras definir una hoja de estilo para definir la presentacin de cada tipo de elemento en un navegador visual o en una salida impresa; pero tambin podras utilizar una aplicacin (tal vez una de las muchas aplicaciones ya existentes para el manejo de documentos XML) para buscar libros por autor, para ordenarlos, etc. Si, por ejemplo, quisieramos vender los libros por internet podramos utilizar estas aplicaciones para permitir a nuestros clientes realizar bsquedas y hacer pedidos. Por supuesto, la idea no es que cada usuario se cree su propio lenguaje, sino que haya estndares generales, y que se escojan los apropia119
119
08/11/2007, 12:18
dos combinndolos entre s, si es necesario. La extensibilidad se refiere precisamente a eso. Hay muchos lenguajes definidos de acuerdo con las reglas de XML (aplicaciones XML). Por ejemplo, DocBook es un lenguaje para el formato de libros electrnicos. MathML es un lenguaje para el formato de ecuaciones matemticas. En DocBook hay un elemento para prrafos (<Para>). En MathML hay definidos elementos tiles para las frmulas matemticas, como sumatorios (<sum>), exponenciales (<exp>), etc., pero no hay un elemento para prrafos. Esto permite crear lenguajes especficos para cada aplicacin o para cada tecnologa, lo cual finalmente puede simplificar las cosas. Por ejemplo, los telfonos mviles tienen una capacidad de procesamiento mucho menor que los ordenadores personales. Como el HTML es demasiado complicado para ellos, se desarroll un nuevo lenguaje simplificado llamado WAP especfico para telfonos mviles. Desgraciadamente, WAP no es una aplicacin XML. En el futuro se espera que los telfonos mviles soporten XML, pero esto va a suponer esperar un tiempo de adaptacin que se podra haber evitado. Vemos aqu un ejemplo de cmo los estndares pueden ayudar a facilitar la adaptacin de tecnologas digitales a la web.
XML y XHTML
Si con XML se pueden definir lenguajes para formato de documentos, se podra definir HTML como aplicacin de XML? S. Es ms, ya lo hicieron, y lo llamaron XHTML 1.0. El XHTML 1.0 es exactamente igual que el HTML 4, excepto en que sigue las reglas de XML, que son ms estrictas que las de SGML. Por ejemplo, en HTML el elemento p no necesita la etiqueta final </p>. En XHTML s son necesarias, ya que todos los elementos necesitan una etiqueta inicial y otra final. En HTML puedes escribir <p> o <P>, no importa. En XHTML, las etiquetas tienen que ir obligatoriamente en minsculas. Como podemos observar, son diferencias formales. Las capacidades de XHTML 1.0 son exactamente las mismas que las de HTML 4. Es necesario entonces escribir las nuevas pginas en XHTML? Realmente no, no va a haber ninguna diferencia. El XHTML es en el fondo la 120
120
08/11/2007, 12:18
forma que tuvo el W3C de dar a entender que haban decidido apostar por la implementacin de XML. W3C cre XHTML para posibilitar en el futuro la modularizacin del HTML. Hemos visto que para algunas aplicaciones conviene definir un subconjunto simplificado del HTML; para otras podra ser interesante ampliarlo con nuevas capacidades. Una solucin es dividir el HTML en partes o mdulos independientes y que cada navegador tome los que necesite segn sus capacidades: un mdulo de texto, un mdulo de imgenes, un mdulo de scripts, un mdulo de formularios, etc. Hoy XHTML ya es modular. Es de esperar que en el futuro existan aplicaciones que permitan crear fcilmente documentos XHTML, utilizando los mdulos necesarios. Pero HTML no va a desaparecer de golpe. Los millones de pginas web que existen hoy son HTML. Los navegadores seguirn entendiendo HTML. La modularizacin de XHTML se ha hecho con vistas a las tecnologas digitales, y hasta que no haya editores capaces de crear documentos eficientemente, no deberamos preocuparnos en exceso. Sin embargo, las cosas evolucionan muy rpido, as que nunca est de ms mantenerse al da.
Definicin de tipo de documento

EL W3C, encargado de la creacin de los Standard Web, define que los ficheros HTML, XML, XHTML deben tener una declaracin de tipo de documento denominada DOCTYPE, que debe hacer referencia a una de las tres definiciones del tipo de documento que existen. Esta declaracin debe ser la primera lnea de nuestro documento y es necesaria para decirle al navegador qu versin de HTML es la que se usa en la pgina. Si no se hace, el navegador procesar la pgina en modo Quirks (modo de compatibilidad) pudiendo no interpretar correctamente el cdigo de la pgina. La DTD (definicin del tipo de documento) es la estructura reglamentaria, es decir, los elementos y atributos que estn disponibles para cada tipo de documento. Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las hojas de estilo), existen 3 tipos de DTD: 121
121
08/11/2007, 12:18
1. HTML 4.01 transitorio El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict (estricto) pero agrega cualidades de presentacin, elementos desaconsejados o elementos obsoletos. Se llama Transitional (transitorio) porque est pensado como transicin hacia HTML 4 estricto. El modo de definirla es:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
2. HTML 4.01 frameset: sta es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos). El modo de definirla es:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\">
3. HTML estricto Si declaramos esta DTD, el navegador pasar a actuar en cumplimiento de los estndares (Standards complanse). Esto implicar que slo puedan usarse las etiquetas de HTML 4.01. ste es el modo recomendado por el W3C, ya que es compatible con el CSS y puede ser interpretado correctamente por todos los navegadores, lo que hace mucho ms fcil el paso de nuestros documentos al XHTML que muy posiblemente tienda a sustituir al HTML en los prximos aos. El modo de definirla es:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
Las mismas tres formulaciones (transitoria, frameset y estricta) existen para la codificacin XHTML 1.0. En la prctica no parece lgico utilizar esta codificacin en sus formulaciones transitoria y frameset, por lo que, generalmente encontraremos su forma estricta. El modo de definirlo sera:
122
122
08/11/2007, 12:18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Si queremos saber si nuestra pgina cumple con la DTD definida podemos hacerlo desde http://validator.w3.org/.
Sintaxis de HTML
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta (tag). La etiqueta presenta frecuentemente dos partes: 1. Una apertura de forma general <etiqueta> 2. Un cierre de tipo </etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: 1. El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como, por ejemplo, el titulo de nuestra pgina. 2. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>
123
123
08/11/2007, 12:18
Etiquetas y contenidos del encabezado. Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave, metadatos, vnculos relacionales como el de la hoja de estilo... </head> <body> Etiquetas y contenidos del cuerpo. Parte del documento que ser mostrada por el navegador: Texto, imgenes, sonidos, elementos multimedia... </body> </html>
En HTML, las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula, ya que otras XHTML, que cada da tiene mayor grado de aplicacin, no es tan permisivo y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.
Etiquetas HTML
Veamos ahora cules son las etiquetas que se utilizan en la codificacin HTML segn la funcin que desempean (las que estn desaconsejadas se seala esta condicin en el propsito). Para leer la tabla hay que saber: 1. En la columna etiqueta figura la etiqueta de apertura, a la que le corresponde una de cierre. 2. En la columna propsito aparece la utilidad de cada etiqueta. 3. En la columna DTD se indica qu declaracin de tipo de documento para XHTML 1.O est permitida la etiqueta (S = estricto; T = transitorio; F = frameset). 124
124
08/11/2007, 12:18
Etiqueta <!DOCTYPE> <html> <body> <h1> a <h6> <p> <br> <hr> <!...>
Propsito Define el tipo de documento Define un documento html Define el elemento body Define los encabezados 1 a 6 (de mayor a menor nivel) Define un prrafo Inserta un salto de lnea Inserta una lnea (grfica) horizontal Define un comentario Define texto en negrita DESACONSEJADO. Define el tamao y color de la fuente de texto Define texto en cursiva Define nfasis de texto Define texto grande Define texto en negrita fuerte Define texto pequeo Define texto en superndice Define texto en subndice Define la direccin en la que se muestra el texto DESACONSEJADO. Define texto subrayado Define texto preformateado Define texto mostrado como cdigo informtico Define texto de teletipo Define texto de teclado Define una variable Define un trmino de una definicin Define cdigo informtico de muestra DESACONSEJADO. Define texto preformateado Define un acrnimo Define una abreviatura Define un elemento de direccin Define una cita textual larga DESACONSEJADO. Define texto centrado
DTD STF STF STF STF STF STF STF STF STF TF STF STF STF STF STF STF STF STF TF STF STF STF STF STF STF STF
Etiqueta bsicas
Formato texto
<b> <font> <i> <em> <big> <strong> <small> <sup> <sub> <bdo> <u> <pre> <code> <tt> <kbd> <var> <dfn> <samp> <xmp>
Cmo se muestra
Bloques
<acronym> <abbr> <address> <blockquote> <center> STF STF STF STF TF
125
125
08/11/2007, 12:18
Etiqueta
Propsito Define una cita textual corta Define una cita Define texto insertado Define texto borrado DESACONSEJADO. Define texto tachado DESACONSEJADO. Define texto tachado Define un ancla (donde se sita el enlace) Define un recurso de referencia Define una sub-ventana (un marco) Define un conjunto de marcos Define una seccin noframe Define una sub-ventana (marco) en lnea Define un formulario Define un campo de entrada de datos Define un rea de texto Define un pulsado (botn) Define una lista seleccionable Define una opcin de grupo Define un tem en una caja de lista Define una etiqueta de control de formulario Define un conjunto de campos Define un ttulo para un conjunto de campos DESACONSEJADO. Define un campo de entrada de una lnea: Define una lista desordenada (con vietas) Define una lista ordenada (con nmeros) Define un tem de una lista DESACONSEJADO. Define una lista de direcciones Define una lista de definiciones Define un trmino de definicin Define una descripcin de una definicin DESACONSEJADO. Define una lista de men
DTD STF STF STF STF TF TF STF STF F F TF TF STF STF STF STF STF STF STF STF STF STF TF STF STF STF TF STF STF STF TF
Bloques
<q> <cite> <ins> <del> <s> <strike>
Enlaces
<a> <link>
Marcos
<frame> <frameset> <noframes> <iframe> <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <isindex> Listas <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu>
Entrada de datos
126
126
08/11/2007, 12:18
Etiqueta
Propsito Define una imagen Define un mapa de imagen Define un rea dentro de un mapa de imagen Define una tabla Define un ttulo (o subttulo) de tabla Define una celda de encabezado de tabla Define una lnea de una tabla Define una celda de datos de una tabla Define en encabezado de una tabla Define un cuerpo de una tabla Define un pie de una tabla Define atributos para las columnas de una tabla Define grupos de columnas de una tabla Define una definicin de estilo Define una seccin en un documento Define una seccin en un trozo de documento Define informacin sobre el documento Define el ttulo del documento Define meta informacin Define una URL de base para todos los enlaces de una pgina DESACONSEJADO. Define una fuente base Define un script Define una seccin noscript DESACONSEJADO. Define un applet Define un objeto incrustado Define un parmetro para un objeto
DTD STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF STF TF STF STF TF STF STF
Imgenes
<img> <map> <area>
Tablas
<table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup>
Estilos
<style> <div> <span> <head> <title> <meta> <base> <basefont>
Meta informacin
Programacin
<script> <noscript> <applet> <object> <param>
127
127
08/11/2007, 12:18
Atributos HTML
Las etiquetas del HTML pueden tener atributos. Los atributos enumerados aqu son los principales, los de idioma y los de teclado, que son estndares para todas las etiquetas (con algunas excepciones).
Atributos principales
No son vlidos en los elementos: base, head, html, meta, param, script, style y title.
Atributo Class id style title Valor class_rule o style_rule Descripcin La clase del elemento Identificador de un nico elemento Una definicin de estilo en lnea Un texto mostrado como un tool tip*
id_name style_definition tooltip_text
*Tool tip: cuadro emergente que muestra informacin de ayuda o ampla la informacin.
Atributos de idioma
No vlidos en los elementos: base, br, frame, frameset, hr, iframe, param y script.
Atributo dir lang Valor ltr | rtl Descripcin Establece la direccin del texto Establece el idioma en que est el cdigo
language_code
Atributos de teclado:
Atributo accesskey tabindex Valor Descripcin Establece un atajo de teclado para acceder a un elemento Establece el orden de tabulacin para un elemento
character number
128
128
08/11/2007, 12:18
Atributos de eventos en HTML

A partir de HTML 4.0 se tiene la posibilidad de ejecutar eventos en el navegador, como iniciar un script cuando el usuario pincha sobre un elemento. En las tablas siguientes se describen los atributos que se pueden insertar en las etiquetas HTML para definir acciones de evento.
Eventos de ventana
Slo vlidos para en elementos de body y frameset.
Atributo onload onunload Valor Descripcin Script se ejecuta cuando el documento se carga Script se ejecuta cuando el documento se descarga
script script
Eventos de elementos de formulario

Slo valido para elementos de formulario.
Atributo onchange onsubmit onreset onselect onblur onfocus Valor Descripcin Script se ejecuta cuando el elemento cambia Script se ejecuta cuando el formulario se enva Script se ejecuta cuando el formulario se reinicia Script se ejecuta cuando el elemento es seleccionado Script se ejecuta cuando el elemento deja de enfocarse Script se ejecuta cuando el elemento se enfoca
script script script script script script
Eventos de teclado
No valido en los elementos: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style y title.
Atributo onkeydown onkeypress onkeyup Valor script Descripcin Qu hace cuando la tecla se presiona Qu hace cuando la tecla se presiona y se libera Qu hace cuando la tecla se libera
script script
129
129
08/11/2007, 12:18
Eventos de ratn
No valido en los elementos: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style y title.
Atributo onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Valor Descripcin Qu hace cuando se pica con el ratn Qu hace cuando se pica doble con el ratn Qu hace cuando el botn del ratn se presiona Qu hace cuando el puntero del ratn se mueve Qu hace cuando el puntero del ratn se mueve sobre un elemento Qu hace cuando el puntero del ratn se mueve fuera de un elemento Qu hace cuando el botn del ratn es liberado
script script script script script script script
130
130
08/11/2007, 12:18
Qu es CSS?
CSS es la abreviatura de Cascading Style Sheet (Hojas de estilo en cascada). Su finalidad es definir cmo se han de mostrar los elementos HTML y con qu estilo se han de presentar. Los estilos son, normalmente, almacenados en hojas de estilo y fueron aadidos en la codificacin HTML para solucionar algunos problemas. Las hojas de estilo externas pueden ahorrar un buen montn de trabajo, como veremos ms adelante y son almacenadas en archivos CSS. Se pueden definir mltiples hojas de estilo para una misma pgina web.
CSS soluciona problemas comunes

Las etiquetas HTML fueron diseadas originalmente para definir el contenido de un documento. Supongamos que decimos ste es un encabezamiento, ste es un prrafo, sta es una tabla y lo hacemos utilizando etiquetas HTML como <h1>, <p> o <table>. La maquetacin del documento as realizada debe ser tomada con cuidado por el navegador si no utiliza ningn formato para las etiquetas. Dos de los ms utilizados navegadores (Internet Explorer y Netscape) aadieron nuevas etiquetas HTML y atributos, tales como <font>, a la especificacin original HTML. Esto supuso ms dificultades a la hora de crear sitios web, donde el contenido de los documentos HTML estaba claramente separado de la maquetacin de presentacin del documento. Para resolver este problema, W3C cre los Estilos, como complemento al HTML 4.0. Hoy da la mayora de los navegadores soportan CSS.
131
131
08/11/2007, 12:18
Las hojas de estilo ahorran trabajo

Las hojas de estilo definen cmo se muestran los elementos HTML, tal como lo haca la etiqueta <font> o el atributo de color en HTML 3.2. Las hojas de estilo se guardan, normalmente, en archivos CSS externos. Estas hojas de estilo externas estn disponibles para cambiar la apariencia y la maquetacin de todas las pginas de un sitio web, solamente editando un documento CSS. Las CSS son un gran paso adelante en el diseo web porque permiten el control del estilo y la maquetacin de muchas pginas desde una sola. Un desarrollador puede definir un estilo para cada elemento HTML y aplicarlos a tantas pginas como l quiera. Haciendo un cambio global, con un simple cambio en el estilo, todos los elementos de una web son renovados automticamente.
Mltiples hojas de estilo en una

Las hojas de estilo permiten especificar la informacin sobre el estilo de muchas maneras. Los estilos pueden ser especificados dentro de un elemento HTML, dentro del elemento <head> de una pgina HTML o en un archivo CSS externo. Incluso varias hojas de estilo externas pueden ser referenciadas desde un solo documento HTML. Qu estilo ser usado cuando hay ms de una especificacin de estilo para un elemento HTML? Hablando de forma genrica, podemos decir que todo estilo est en una cascada en una nueva hoja de estilo virtual siguiendo la siguiente regla, donde los nmeros indican la prioridad: 1. 2. 3. 4. Estilo en lnea (dentro del un elemento HTML). Hoja de estilo interna (dentro de la etiqueta <head> de la pgina web). Hoja de estilo externa. Hoja de estilo por defecto del navegador.
As, el estilo en lnea tiene la ms alta prioridad, la cual significa que anular a la declaracin de estilo dentro de la etiqueta <head> de la pgina, a la hoja de estilo externa o a la que usa por defecto el navegador. 132
132
08/11/2007, 12:18
Sintaxis de CSS
La sintaxis de CSS consta, bsicamente, de tres partes: 1. Selector. 2. Propiedad. 3. Valor. Su expresin escrita sera:
Selector {propiedad: valor}
El selector es, normalmente, un elemento o una etiqueta HTML al que se desea definir; la propiedad es el atributo que se desea cambiar; y cada propiedad puede tomar un valor. La propiedad y el valor estn separados por dos puntos y rodeados por corchetes. Un ejemplo simple de sintaxis sera:
body {color: #000000}
Si el valor tiene varias palabras, stas debern ir entre comillas:

p {font-family: "sans serif"}
Si se desea especificar ms de una propiedad para un selector, stas debern ir separadas por punto y coma:
P {font-family: "sans serif"; text-align: center}
Para hacer ms legible la definicin se suele redactar de tal manera que cada propiedad ocupe una lnea:
P { Font-family: "sans serif"; Text-align: center }
133
133
08/11/2007, 12:18
Se pueden agrupar selectores, separndolos con una coma.

h1, h2, h2, h4, h5, h6 { color: #990099 }
A los selectores se les puede aadir una clase (class) de tal manera que se pueden definir distintos estilos para un mismo elemento HTML. Supongamos que queremos definir dos tipos de prrafos: uno alineado a la izquierda y otro centrado. Lo podemos hacer con clases para el elemento p.
p.centrado {text-align: center} p.izquierda {text-align: left}
Despus basta especificar la clase para el selector dentro del cdigo HTML de la siguiente manera:
<p class="centrado">Este texto est centrado</p> <p class="izquierda">Este texto est alineado a la izquierda</p>
Slo se puede definir una clase para un elemento en la codificacin HTML. Se puede omitir el elemento que hace la funcin de selector y definir una clase que ser usada por todos los elementos HTML en la que se defina. Por ejemplo:
.centrado {text-align: center}
Esta clase se la podremos aplicar a distintos elementos. Por ejemplo:

<p <h1 class="centrado">Texto</> class="centrado">Encabezado</h1>
134
134
08/11/2007, 12:18
Tercera parte HACER UNA BITCORA ACCESIBLE
EJERCICIO PRCTICO Esta prctica tiene una deuda personal con el trabajo realizado por Mark Pilgrim en el ao 2002 al crear su Dive into accessibility [Inmersin en la accesibilidad]. En l nos hemos inspirado para realizar este trabajo y por ello creo obligado recomendar su lectura para cualquiera que est interesado: http://www.diveintoaccessibility.org
135
135
08/11/2007, 12:18
136
136
08/11/2007, 12:18
Introduccin
Esta parte del documento tiene una intencionalidad didctica. Como el propio nombre de este apartado indica, la prctica consistir en realizar una bitcora accesible. Para ello habr que seguir los pasos que se detallan en ella. Se ha tomado como herramienta de edicin para la bitcora la que proporciona Blogger. Entremos en su sitio en la web (http://www.blogger.com), solicitemos crear una bitcora y familiaricmonos con la herramienta. Existe una versin en lnea de esta documentacin, realizada como una bitcora, un tanto especial, con el editor de Blogger. La direccin de esta bitcora es: http://usuarios.discapnet.es/disweb2000/blog/.
137
137
08/11/2007, 12:18
138
138
08/11/2007, 12:18
Primeras instrucciones
En primer lugar, nos debemos acostumbrar a la palabra post, que es el nombre que recibe cada uno de los pequeos artculos que componen la bitcora. Cualquier trmino que necesite aclaracin, lo colocaremos entre comillas y, justo detrs, encerrado entre corchetes [ ], daremos una breve explicacin.
139
139
08/11/2007, 12:18
140
140
08/11/2007, 12:18
Paso 1 Para quin es la accesibilidad web?
Si nos preguntamos: para quin es la accesibilidad?, la respuesta es sencilla: Para todos. Pero mucho me temo que esto no convencera a mucha gente, pese a que es completamente cierto. Por ese motivo voy a dar una serie de explicaciones sobre a qu grupos de personas, en concreto, la accesibilidad web va a beneficiar. El grupo ms evidente es el de personas con ceguera. No hace mucho tiempo, charlando con un profesor universitario de informtica sobre unos cursos de accesibilidad en la web, ste se asombraba al saber que estas personas se colocaban ante un ordenador y realizaban con l una amplia gama de trabajos. Pero, si no ven! fue su asombrada exclamacin. Tuve que explicarle que ellos acceden al contenido a travs del odo, mediante lectores de pantalla, o por el tacto, con sus dispositivos de salida braille, que les leen el contenido en pantalla. Y cmo ven las imgenes, los iconos y dems elementos no textuales. sa es la cuestin, no existe (hoy da) ningn dispositivo que pueda interpretarlos de forma razonable para las personas con ceguera. Por lo tanto, habr que hacer algo para que el contenido visual no textual pueda llegar a ellos. Esto lo veremos ms adelante al hablar del atributo alt. Pero con problemas visuales hay mucha ms gente. Los hay que tienen las conocidas como cegueras de color, que habitualmente asociamos con el daltonismo. Estas personas no distinguen determinados cambios en el color, por lo que la informacin que trasmitamos mediante cambios de color no los podrn percibir. As, por ejemplo, en un catlogo de libros donde se nos informe que los ttulos en rojo no estn disponibles habr personas que no puedan apreciar este cambio. Por ese motivo deberemos dar otro tipo de alternativa si queremos que la informacin les llegue. Otro tpico problema con los colores es el contraste. Un texto o una imagen que contraste poco con su fondo pueden no ser percibida por personas con 141
141
08/11/2007, 12:18
este problema visual. Todo ello lo veremos al hablar de los problemas con el color. Siguiendo en el mbito de los problemas visuales, hay otro grupo de personas que tienen problemas de agudeza visual. stas necesitan ampliar mucho el contenido de la pantalla, lo que hacen ampliando el tamao del contenido de nuestras pginas web o mediante programas magnificadores de pantalla. Son capaces de ver el contenido pero, si las letras o imgenes no estn correctamente diseadas para poder ser ampliadas, tendrn problemas para captarlo. Tambin hablaremos de esto al tratar sobre los tamaos relativos en la hoja de estilo. No slo las personas con problemas visuales encuentran barreras al navegar por la web. Las personas con dificultades motrices en sus manos pueden encontrar serios problemas para navegar si no diseamos nuestra web de tal manera que permita la navegacin mediante teclado. Para ello es muy til definir atajos de teclado [acceskeys] para acceder a los bloques o lugares destacados del contenido de nuestra web y sobre ello tambin hablaremos. Las personas con dificultades auditivas o sordera tendrn problemas con los contenidos sonoros, si stos no van provistos de una alternativa visual. Tambin es posible, en el caso de usuarios de lengua de signos, que tengan dificultades para comprender contenido textual si ste utiliza expresiones poco habituales o demasiado complejas sobre las que no hacemos una explicacin sencilla y comprensible para todos. Por ello debemos hacer los contenidos comprensibles y proporcionar ayudas, como la utilizacin de explicaciones para las abreviaturas o acrnimos, sobre los que tambin hablaremos. Tambin las personas con dificultades de aprendizaje o con discapacidades intelectuales encuentran obstculos para navegar por la web. Necesitan contenidos claros y ayudas visuales con iconos claros y explcitos de las funciones que cumplen. Las explicaciones, que podemos aadir mediante el atributo title, sern de mucha utilidad para estas personas. Pero la larga lista de grupos de personas a las que beneficia un diseo accesible de nuestras pginas web no acaba aqu. Ya lo dijimos al comienzo, beneficia a todos y no estbamos exagerando. Las personas con poco dominio del idioma en que est escrita la web se benefician de unos contenidos claros e intuitivos. Las personas que 142
142
08/11/2007, 12:18
manejan equipos antiguos con sistemas operativos basados slo en texto accedern a todo el contenido si las imgenes disponen de texto alternativo. Las personas que manejan ordenadores en entornos ruidosos o con deficiente iluminacin captarn mejor el contenido si ste no se basa exclusivamente en sonidos y dispone de colores con buen contraste. Pero tambin las personas que manejan los nuevos dispositivos de acceso al contenido web (telfonos mviles, palmtop, etc.) se ven beneficiadas de un correcto diseo que permita la flexibilidad suficiente para adaptarse a sus pequeas pantallas. La lista es larga y, por lo tanto, justifica suficientemente los esfuerzos que podamos realizar para hacer una web accesible. As pues, felicidades! Has hecho una buena eleccin al tratar de aprender cmo hacer una bitcora accesible. Todo lo que explico aqu podrs aplicarlo al diseo de cualquier tipo de pgina web. Mi pretensin es guiarte en una prctica sencilla que tiene como finalidad introducirte en el diseo accesible. Ms adelante podrs seguir profundizando hasta conocer los ms ntimos recovecos del diseo para tod@s aplicado a las web.
143
143
08/11/2007, 12:18
Paso 2 Elegir un DOCTYPE
Al igual que cuando comenzamos a escribir una frase lo hacemos con una letra mayscula, al comenzar una pgina web nuestro cdigo debe comenzar con un DOCTYPE. Es una cuestin de gramtica. Hacerlo de forma correcta nos beneficia a todos, ya que algunas de las funciones de nuestro navegador dependen de que la pgina visitada se presente correctamente, identificndose con el DOCTYPE correspondiente a su codificacin. El DOCTYPE es la forma que tiene nuestra pgina web de decirle al navegador que la visita en qu lenguaje est escrita para que ste pueda saber cmo entenderse con ella. Hay diferentes DOCTYPE, tantos como tipos de cdigo recomendados por W3C [World Wide Web Consortium - Consorcio Mundial de la Web]: HTML 4.01 y XHTML 1.0 (en sus versiones estricta o transacional), XHTML 1.1 y XML, bsicamente. En el caso de Blogger, por fortuna, los desarrolladores tuvieron en cuenta este detalle y nos han ahorrado trabajo. Si editamos la plantilla principal (seleccionando la solapa plantilla del editor del Blogger) podemos ver que la primera lnea de cdigo fuente es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
sta es una gran ventaja, ya que este paso no nos va a dar trabajo. Comprubalo y recuerda que para otros desarrollos debes tener en cuenta que la primera lnea de cdigo de tus pginas web en HTML tiene que llevar este tipo de declaracin. Para aprender ms cosas sobre DOCTYPE puedes visitar el sitio HTML conClase (http://html.conclase.net). 144
144
08/11/2007, 12:18
Paso 3 Identificar el idioma
Sabemos en qu idioma estamos escribiendo, as que debemos decrselo a nuestros lectores... y a los programas de navegacin que estn usando. Si lo hacemos correctamente, los programas lectores de pantalla, como JAWS, podrn pronunciar las palabras correctamente al leer en voz alta el contenido del documento. De otro modo sonar como si un ingls, sin conocimientos de espaol, leyera un texto escrito en este idioma o viceversa. Tambin es til para los buscadores del tipo Google, que indexan las pginas que exploran por el idioma en que decimos que estn escritos. Para que nuestra pgina web le informe al navegador sobre el idioma en que est escrito, existe una convencin por la cual stos se declaran con dos letras. As el castellano (o espaol) ser es, el ingls en o el francs fr. Se puede encontrar la larga lista de esta convencin en: http://www.loc.gov/standars/iso639-2/englangn.html. Para hacer la declaracin de idioma en nuestra bitcora tendremos que recurrir de nuevo a la plantilla principal (seleccionando la pestaa plantilla del editor de Blogger). Justo debajo del DOCTYPE encontraremos una lnea de cdigo como sta:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Ahora nos toca modificarla as:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
De origen, los diseadores de las plantillas de Blogger definieron el ingls como el idioma en que estar escrita nuestra pgina, pero nosotros 145
145
08/11/2007, 12:18
vamos a usar el castellano (espaol). Sin este cambio es posible que podamos confundir a los lectores de pantalla. En las pginas con cdigo HTML 4.01 el atributo lang lo colocaremos en la etiqueta que encontramos tras el DOCTYPE del siguiente modo:
<html lang="es">
Pero ste no es el nico momento en que deberemos usar el atributo lang. Si a lo largo del texto de nuestro contenido insertamos frases en otro idioma, deberemos declarar el cambio en la correspondiente etiqueta. Este atributo se puede aplicar en todas las etiquetas excepto:
applet, base, basefont, br, frame, frameset, iframe, param y script
Un ejemplo de su aplicacin podra ser:

Y con suave voz le dijo en ingls: <blockquote lang="en">I love you.</blockquote>
A partir de ese momento prevalecer la declaracin de idioma realizada al comienzo y regresar a leer en castellano (espaol).
146
146
08/11/2007, 12:18
Paso 4 Elegir un ttulo significativo
Toda pgina web debera tener un ttulo nico y significativo. Para la pgina principal podemos elegir como ttulo el mismo que tiene todo nuestro sitio, pero para el resto sera recomendable elegir un ttulo que identificara su finalidad o contenido. En el caso de una bitcora, podemos elegir para los agrupamientos de pginas la combinacin del ttulo de nuestra web con el motivo del agrupamiento. Por ejemplo, si una de las categoras de agrupamiento fuera legislacin, podramos titular a esa pgina que agrupa los post pequeos artculos] como Nombre del sitio/Legislacin. Para cada uno de los post lo ms indicado es que se titulen como el propio post o una abreviatura del mismo, pero siempre recomendamos que vaya acompaado (mejor precedido) por el ttulo del sitio. Por ejemplo, la pgina de un post titulado Accesibilidad en la Web podramos llamarla Nombre del sitio/Accesibilidad Web. Si la mecnica de archivo que nos interesa hacer patente es la de fecha de insercin del post, siguiendo la misma lgica apuntada antes, lo suyo sera poner el nombre del sitio y a continuacin la fecha de insercin del post. As, la pgina del post del 24 de mayo de 2006 la titularamos Nombre del sitio/25-05-2006, por ejemplo. Colocar ttulos significativos a nuestras pginas beneficia a los navegantes con lectores de pantalla, ya que lo primero que stos hacen es leer ese ttulo. Pero tambin a los usuarios de navegadores slo texto o con dispositivos de lectura braille, que listan las pginas visitadas utilizando su ttulo. A las personas con dificultades de comprensin tambin les reporta beneficios, ya que con una sola mirada ubican el contenido de la pgina entre otras que puedan tener abiertas. Los robots de bsqueda tambin utilizan el contenido de ese ttulo de pgina para indexarlas. As pues, reporta grandes beneficios elegir un ttulo significativo para nuestras pginas web. 147
147
08/11/2007, 12:18
Blogger realiza este trabajo por nosotros, ya que para titular la pgina de inicio utiliza el nombre de nuestra bitcora, para las pginas de cada post utiliza dicho nombre seguido del ttulo del post y para las pginas de las agrupaciones por meses toma el ttulo de la bitcora al que hace seguir el mes correspondiente en el que se inserta el post. De nuevo nos ahorra tiempo y se muestra como una buena eleccin para hacer nuestra bitcora accesible. Si se quiere saber ms sobre este tema (y se domina el ingls lo suficiente), sobre todo el comportamiento de otros programas para hacer bitcoras, se puede leer sobre ello en el sitio recomendado Dive into Accessibility de Mark Pligrim, concretamente en esta pgina: http://diveintoaccessibility.org/ day_8_constructing_meaningful_page_titles.html.
148
148
08/11/2007, 12:18
Paso 5 Ayudas adicionales a la navegacin
Seguimos todava en esa parte oculta de las pginas web que no se muestra en los navegadores, pero que podemos ver editando el cdigo fuente de las mismas. Otra etiqueta habitual en esta zona es <link>, que frecuentemente asociamos con las hojas de estilo en cascada, ya que la referencia a ellas se hace mediante esta etiqueta. Adems de servirnos para hacer referencia a la hoja u hojas de estilo que queramos aplicar a nuestra bitcora, nos puede ser til para proporcionar ayuda a los navegantes, dando la posibilidad de ir rpidamente a la pgina principal o a los post anterior o posterior. Este efecto lo conseguiremos con un cdigo parecido a este:
<link rel="Principal" title="Pgina principal" href="http://direccin de la pgina principal" /> <link rel="Previa" title="Pgina anterior" href="http://direccin de la pgina anterior" /> <link rel="Siguiente" title="Pgina siguiente" href="http://direccin de la pgina siguiente" />
Esta ayuda es til para ciertos navegadores no visuales como Lynx o Links, aunque tambin en algunos de los navegadores visuales como Mozilla, Firefox u Opera son de utilidad, ya que muestran al usuario estos enlaces rpidos. Lamentablemente, en el caso de Blogger la plantilla principal no nos deja controlar esta posibilidad y no podremos automatizarla. Nos tendremos que conformar con dar la posibilidad de proporcionar un acceso rpido a la pgina principal si insertamos en el <head> la siguiente declaracin:
<link rel="Principal" title="Pgina principal" href="<$BlogUrl$>" />
149
149
08/11/2007, 12:18
Paso 6 Colocar primero el contenido principal
Las personas que navegamos por la web con navegadores visuales, del tipo IExplorer, Opera, Mozilla o Firefox, dirigimos nuestra mirada al contenido principal de la pgina, sin que la colocacin de la barra de navegacin de la web visitada nos afecte para nada. Nos es indiferente que est de forma horizontal o vertical, a la derecha o a la izquierda. Pero esto no es indiferente para las personas que navegan con lectores de pantalla (tipo JAWS), slo texto (como Lynx o Links) o con dispositivos de salida braille. Para ellos una barra de navegacin colocada antes del contenido principal puede ser una autntica tortura, ya que cada vez que visitan una pgina de nuestra web tendrn que escuchar o navegar por toda ella hasta llegar a lo que interesa: el contenido principal. Por ello, a la hora de hacer nuestra bitcora accesible, podremos optar por alguna de estas frmulas: Podemos elegir una plantilla prediseada que muestre el men de navegacin en vertical a la derecha. Nos cercioraremos de que en el cdigo fuente de la plantilla el contenido principal est colocado antes que el men de navegacin. sta, seguro, es la ms cmoda y sencilla de las soluciones. Si optamos por elegir otra de las plantillas que llevan el men de navegacin a la izquierda tendremos que emplear un pequeo truco. Editaremos la plantilla principal (en la solapa plantilla de editor de Blogger) y seleccionaremos todo el texto contenido entre los comentarios <! Begin #sidebar > y <! End #sidebar >, incluyendo ambos comentarios, y lo trasladaremos detrs del contenido principal (que est colocado entre <! Begin #main > y <! End #main >). Los bloques <div> estn maquetados y colocados en la pgina mediante los estilos de nuestra pgina. Por ese motivo, da igual el orden que
150
150
08/11/2007, 12:18
lleven en el cdigo fuente, siempre aparecern en el lugar que les fija el estilo. Pero para los lectores de pantalla y navegadores que no interpretan las hojas de estilo, el orden del cdigo fuente es el que se muestra en pantalla. Otra posibilidad, si optamos por una barra de navegacin colocada antes que el contenido principal de la pgina, es proporcionar un marcador o vnculo interno que posibilite el salto de la barra de navegacin. Cmo podemos hacerlo?: 1. En la hoja de estilos se crea una clase (class) que puedes llamar "ocultar" del siguiente modo: .ocultar {display:none;} 2. En el prrafo <p> donde se vaya a colocar el enlace interno debemos dar esa clase de esta forma: <p class="ocultar"><a href="#contenido">Salta men</a> 3. Luego colocamos el vnculo interno "contenido" justo al comienzo del bloque que contiene el contenido principal. Pero hay personas que no tienen una limitacin visual y navegan utilizando slo el teclado, como es el caso de las personas con dificultades motrices en sus manos. Para ellos no es buena la opcin anterior. Como el navegador no les muestra en pantalla el enlace para saltar la barra de navegacin, que hemos ocultado, tendrn que ir saltando cada uno de los enlaces de nuestra barra de navegacin hasta alcanzar el contenido principal y navegar por el mismo. Para resolver este pequeo problema, podemos optar por no ocultar completamente nuestro vnculo interno. Slo lo ocultaremos visualmente, dando a sus letras el mismo color del fondo de nuestra pgina. Igual que hicimos antes, esto lo podemos controlar mediante la hoja de estilo, creando una clase como esta: .letratransparente{font-color:#FFFFFF} (donde FFFFFF es el color del fondo). Luego basta con dar esta clase al prrafo <p> donde ir el salto de la barra de navegacin y todo arreglado.
Para aquellos que todava maquetan con tablas (opcin admitida, aunque no recomendada), les podemos aconsejar la siguiente frmula. 151
151
08/11/2007, 12:18
Si su pgina est maquetada con una tabla de dos columnas donde la izquierda es el men de navegacin y la derecha el contenido principal, en lugar de la maquetacin obvia:
<table> <tr> <td valign="top" align="left" width="25%"> ... barra de navegacin ... </td> <td valign="top" align="left"> ... conetnido principal ... </td> </tr> </table>
Pueden colocarla de esta forma:

<table> <tr> <! imagen espaciadora en la celda superior izquierda > <td> <img src="/images/1.gif" width="1" height="1" alt=""> </td> <! contenido principal en la primera celda, con rowspan=2 > <td valign="top" align="left" rowspan="2"> ... contenido principal ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... barra de navegacin ... </td> </tr> <table>
152
152
08/11/2007, 12:18
Paso 7 El uso de los colores
Poco a poco nos vamos adentrando en tareas ms complicadas. Dejamos atrs el <head> y empezamos a trabajar con elementos del <body>, empezando con el manejo del color. La norma general es usar el color de forma segura. La manera de hacerlo es asegurarse de que no trasmitimos informacin exclusivamente a travs del color. Veamos un ejemplo: Supongamos que en nuestra bitcora estamos informando sobre artculos y documentos disponibles en la web sobre un determinado tema. La web es un medio dinmico y algunos contenidos, pasado un tiempo, pueden desaparecer. A nosotros nos interesa mantener la informacin sobre los artculos y documentos, pero debemos dar cuenta de aquellos que ya han desaparecido. Cmo podemos hacer para comunicar a nuestros visitantes de que un documento ya no est disponible en la web? Una forma, ms usual de lo que debera ser, es decir algo as: Los artculos en rojo ya no estn disponibles en la web. El problema es que entre nuestros visitantes hay personas que no ven los colores o los perciben de forma incorrecta. Si slo hemos puesto el color rojo como pista para saber que ya no est disponible el artculo, estas personas no sabrn qu artculos de nuestra lista son. Otra mala costumbre que cada da se est generalizando ms con el uso de las hojas de estilo es modificar la presentacin de los vnculos de nuestras pginas web de tal manera que no destacan en el texto. Esto despista mucho a usuarios poco expertos y a personas que tienen problemas con la percepcin del color. Debemos procurar que los vnculos queden claramente perceptibles para nuestros visitantes en lugar de ocultarlos visualmente. Y esto nos puede afectar a todos. 153
153
08/11/2007, 12:18
Del mismo modo, la presentacin de vnculos exclusivamente mediante el cambio de color puede suponer un problema para algunos usuarios que al pasar sobre ellos el cursor del ratn o al colocar el foco sobre ellos mediante el teclado no perciben este cambio. Un ejemplo lo tenemos aqu: 1. Este vnculo subrayado y en azul, que es el comportamiento por defecto. 2. Este vnculo coloreado y en negrita, usando estilos de nuestra hoja. 3. Este vnculo slo coloreado, tambin usando estilos de nuestra hoja. Una persona con problemas de visin para los colores, como el daltonismo, vera estas tres frases del siguiente modo: 1. La primera frase no presenta problemas. 2. Una persona con daltonismo ver el color azul y tiene ms pistas mediante el subrayado. La segunda frase pierde el color rojo, pero sigue dando una pista con la letra negrita que resalta en el texto. 3. Sin embargo, la tercera frase pierde el color rojo y no da ninguna pista del vnculo para quien tenga ceguera para el color rojo. Una forma sencilla de solucionar la manera de destacar nuestros enlaces es mediante la hoja de estilo. Podemos incluir una categora similar a esta:
a { color:#3333FF; /* el tpico color azul de los vnculos, pero podemos usar cualquier otro */ text-decoration:underline; /* para que aparezca subrayado */ font-weight:bold; /* para que aparezca en negrita */ }
De alguna manera, adems de mediante el color, tenemos que transmitir la presencia del vnculo. Si lo hacemos de ms de una, seguro que acertaremos con la ms adecuada para cada usuario. Luego, tambin mediante las hojas de estilo, podemos dar propiedades para cuando estamos apuntando al vnculo ("hover") o cuando el vnculo ya ha sido visita154
154
08/11/2007, 12:18
do ("visited"). Pero lo ms importante es no olvidar que la informacin debe ser percibida independientemente del color. Otro problema que suele dar el uso de colores es la falta de contraste entre el fondo y la forma. Esto rige tanto para el texto como para las imgenes (sobre todo si stas contienen texto). El W3C ha recomendado un algoritmo que nos puede ser til para saber si el contraste de los colores que usamos es el adecuado. En funcin de ese algoritmo se han desarrollado algunas herramientas que nos pueden ayudar a aplicarlo. Personalmente, me gusta usar la denominada Analizador de contraste de color (en ingls Colour contrast analyser CCA), desarrollada por Accessible Information Solutions de NILS, en Australia. Dispone de una versin en castellano [espaol] que se puede descargar gratuitamente en: http:// www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/. Otras referencias importantes para conseguir ms informacin sobre el correcto uso del color en nuestra web son stas: Vischeck (http://www.vischeck.com/vischeck/), que simula la ceguera de color y permite ver lo que las personas con ceguera de color ven. Color Vision de Carl Henderson (http://www.iamcal.com/toys/colors/), que muestra el espectro de color tal como lo ven personas con diferentes tipos de ceguera de color. Ishihara Test for Color Blind [Test para la ceguera de color Ishihara] (http://toledo-bend.com/colorblind/Ishihara.html), que contiene una serie de imgenes que las personas con ceguera de color para el rojo y el verde ven de forma diferente o no las ven. La barra de accesibilidad de AIS (versin en castellano [espaol] en: http://www.technosite.es/software.asp) dispone de una funcionalidad para el anlisis de color.
Ahora te toca a ti. Utiliza alguna de estas herramientas para comprobar que en tu bitcora se respeta el contraste de color.
155
155
08/11/2007, 12:18
Paso 8 Vnculos reales
Uno de los problemas que ms molestan a los usuarios de pginas web es el uso de vnculos en javascript. Son pseudo-vnculos que ejecutan un trozo de cdigo JavaScript cuando pinchamos sobre ellos. Por qu es un problema? Porque algunos usuarios de internet no utilizan JavaScript por diferentes motivos. Unos lo hacen por motivos de seguridad, ante posibles intromisiones en su sistema, y otros simplemente porque sus navegadores (ya sea por anticuados o por ser de caractersticas especiales) no lo soportan. Tambin hay que tener en cuenta que buscadores, como Google, no pueden indexar los enlaces en JavaScript, ya que no lo ejecutan. Este ltimo sera motivo suficiente para desistir de utilizar este tipo de pseudovnculo. Afortunadamente, los editores de bitcoras y, concretamente, el de Blogger no utilizan la tcnica del vnculo javascript, pero si manejamos alguna versin antigua podemos encontrarnos, para la edicin de comentarios, con un vnculo como ste o similar (este ejemplo sirve para las viejas versiones de Movable Type):
<a href="javascript:OpenComments (<$MTEntryID$>)">Comentarios(<$MTEntryCommentCount$>) </a>
Si fuera as, debes sustituirlo por algo as:

<a href="<$MTCGIPath$>mt-comments.cgi?entryid=<MTEntryID$>" onclick="OpenComments (<MTEntryID$>); return false">Comentarios<(<$MTEntryCommentCount$>)</a>
156
156
08/11/2007, 12:18
En los navegadores con JavaScript habilitado, esto funcionar de igual manera porque el atributo "onclick" tiene preferencia sobre el atributo "href". Como prctica habitual, olvide hacer sus enlaces mediante JavaScript. Molestan a mucha gente y aaden poca funcionalidad a nuestro trabajo.
157
157
08/11/2007, 12:18
Paso 9 Vnculos correctos y con ttulos
Lo ms importante de una pgina web son sus vnculos. Son lo que les da sentido. Si no existieran vnculos sera como compartir otro tipo de archivos, que se puede hacer mediante otro tipo de protocolos, tambin disponibles en internet. Por lo tanto, es importante que los usuarios conozcan para qu sirven los vnculos en un sitio web. El texto que utilizamos para un vnculo es esencial. As, esos frecuentes vnculos con textos del tipo pincha aqu o, simplemente, aqu dejan de tener su utilidad si se les saca de contexto. Algunos navegadores, tanto visuales como de otro tipo, proporcionan al usuario un listado de los vnculos de la pgina visitada. Imaginemos que tengo un texto en el que proporciono los siguientes vnculos: Si quieres conocer mi currculum pincha aqu. Desde aqu puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrars aqu. Cuando el navegador muestre o lea los vnculos de este texto, el usuario se encontrar con: pincha aqu aqu aqu Este listado carece de utilidad para navegar, ya que desconocemos que hay detrs de aqu. Ese mismo texto sera ms til con los enlaces colocados en otro lugar: Si quieres conocer mi currculum pincha aqu. Desde aqu puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrars aqu. 158
158
08/11/2007, 12:18
Ahora el listado ser mucho ms significativo: mi currculum mi familia Mis aficiones La diferencia entre uno y otro texto es slo el lugar donde hemos colocado el vnculo. La prxima vez que encontremos un vnculo con texto aqu miraremos a ver si se podra haber colocado en un mejor lugar para hacer ms comprensible el texto del vnculo. Seguro que lo encontramos (al menos, en 9 de cada 10). Otro factor que hace ms comprensibles los vnculos es titularlos. Esto se hace mediante el atributo "title" colocado junto a la direccin del vnculo. Esta forma de proceder, colocando ttulos a los vnculos, hace ms comprensibles su uso y destino para mucha gente, principalmente para gente con problemas de comprensin, y aade informacin para el general de los usuarios. Utilicemos la segunda frase del texto anterior para poner un ejemplo. Veamos cul sera su cdigo fuente sin el atributo "title":
Desde aqu puedes acceder a las fotos de <a href="http://mi/familia.com">mi familia</a>
No podemos decir que esto sea incorrecto, pero s que no proporciona ayuda complementaria al usuario. Con el uso del atributo title podemos aumentar la informacin. Vemos como:
Desde aqu puedes acceder a las fotos de <a href="http://mi/familia.com" title="Albm de fotos familiar de las pasadas vacaciones">mi familia</a>
Ahora tenemos ms informacin sobre el destino del vnculo. El uso del atributo "title" se vuelve especialmente importante en los textos de nuestros mens de navegacin. Solemos utilizar palabras sueltas o frases muy cortas, por lo que muchas veces no transmiten la suficiente informacin. Si usamos dicho atributo, a los usuarios que manejen navegadores visuales les aparecer una tooltip [cuadro emergente junto al puntero]; a los usuarios de lectores de pantalla, si activan la op159
159
08/11/2007, 12:18
cin, su programa les leer el contenido del mismo; y en ciertos navegadores slo texto, como Lynx, al pulsar una tecla o combinacin de tecla les aparecer un listado de los vnculos, acompaados del ttulo explicativo. En determinadas ocasiones nos puede interesar que no aparezca el cuadro emergente que nos muestran los navegadores visuales (por ejemplo, cuando usamos determinadas imgenes como vnculo). Para ello podemos utilizar un ttulo vaco (title=""), colocando como valor del atributo slo las comillas sin espacio entre ellas. Esto hay que valorarlo seriamente, ya que ese cuadro emergente amplia informacin que puede ser til a algunas personas.
MUY IMPORTANTE! No confundir el atributo title y sus funciones el atributo alt y las suyas. Sobre este atributo hablaremos ms adelante. Ambos tienen una funcin explicativa, pero el primero se mostrar en todo tipo de navegadores y el segundo slo debera ser ledo por los lectores de pantalla o navegadores por voz (aunque en IExplorer el comportamiento de alt sea semejante al de title, en ausencia de ste).
160
160
08/11/2007, 12:18
Paso 10 Atajos de teclado
Un atributo HTML de los menos conocidos es accesskey para los vnculos y los formularios. Permite al diseador definir atajos de teclado para los vnculos utilizados con frecuencia (por ejemplo, los de su men de navegacin), as como para posicionarse en los campos de formulario. Un atajo de teclado es una combinacin en la pulsacin de las teclas que para Windows es ALT ms un nmero o letra de nuestro teclado y para Macintosh es CONTROL ms el correspondiente nmero o letra. El efecto es que cuando utilizamos el atajo de teclado (pulsando la combinacin pertinente) el navegador enfocar al lugar donde hayamos definido con el atributo "accesskey". Los navegadores ms antiguos no saben interpretar este atributo, pero tampoco les resulta pernicioso, por lo que es til emplearlo para dar facilidades a las personas que navegan con el teclado, ya sea porque utilizan lector de pantalla o porque no puedan utilizar el ratn u otro dispositivo apuntador. No existe un estndar establecido que defina cules son las teclas de acceso en los atajos de teclado, por lo que el diseador deber establecer las suyas propias. Hay que tener cuidado de que stas no interfieran con los atajos de teclado que el propio programa navegador tiene definido por defecto (dichos atajos se pueden encontrar en la documentacin de ayuda del programa). S existe una cierta conformidad en utilizar al menos estos tres atajos de teclado: ALT + 1: Pgina de inicio. ALT + 2: Saltar la barra de navegacin para ir al contenido principal. ALT + 9: Formulario de contacto. Veamos ahora cmo podemos hacer para aplicarlos. En nuestra plantilla principal de Blogger (otra vez recordamos que est en la pestaa plantilla del editor de Blogger) buscamos <$BlogTitle$>, 161
161
08/11/2007, 12:18
normalmente al comienzo de <body>. Si no est colocado en una etiqueta <a> le colocaremos una que nos lleve a nuestra pgina principal de la bitcora. Deber quedar algo as:
<a href="http://pagina.inicio.blog" accesskey="1"><$BlogTitle$></a>
De este modo habremos configurado nuestro atajo de teclado al lugar de nuestra pgina donde se ubica el enlace a nuestra pgina principal. Al usuario le basta con pulsar ALT + 1 y despus Intro para estar en la pgina principal de la bitcora. Si disponemos de un vnculo para saltar la barra de navegacin (tema del que hablamos con anterioridad en el paso 6) podemos proporcionarle un atajo de teclado, que podra quedar ms o menos as:
<a href="#saltabarra" accesskey="2">Saltar barra de navegacin</a>
Igual que antes, con la combinacin ALT + 2 y despus Intro, nuestro visitante habr saltado la barra de navegacin y se habr colocado en el contenido principal de la pgina. Si disponemos de un vnculo a un formulario de contacto o con nuestra direccin de correo electrnico, podemos hacer una operacin similar para hacer un atajo de teclado:
<a href="mailto:yo@midominio.com" acceskey="9">Mndame un correo electrnico</a>
Con la combinacin ALT + 9 seguida de Intro, el usuario abrir su programa de correo electrnico dispuesto para remitirnos un mensaje. El atributo accesskey lo podemos colocar en cualquiera de estas etiquetas o elementos HTML: A, AREA, BUTTON, INPUT, LABEL, LEGEND o TEXTAREA Pero recuerda que no existe ningn estndar, por lo tanto debemos explicar al visitante cules son los atajos de teclado que utilizamos en nuestro sitio.
162
162
08/11/2007, 12:18
Paso 11 No abrir nuevas ventanas
Este paso es rpido y fcil de explicar (Esta vez ha habido suerte!). Algunos desarrolladores disean sus pginas para que el visitante no las abandone al primer click en un vnculo. Pretenden permanecer en pantalla el mximo tiempo posible. Para ello utilizan una tcnica nada conveniente como es la de abrir una nueva sesin del navegador para que se muestre la pgina a la que nos lleva el vnculo que hemos seleccionado. Esta forma de proceder desconcierta a muchos usuarios. Las personas que no ven su pantalla y estn navegando mediante un lector de pantalla o navegador por voz no saben que acaban de abrir una nueva ventana y si tratan de regresar, mediante el botn Atrs de su navegador, descubren que han perdido el hilo de su navegacin y lo debern encontrar entre las pginas abiertas en su ordenador. Tambin las personas con problemas de inteligencia o aquellas que tienen poco hbito de navegar por la web pueden encontrar sorprendente que no puedan regresar a la pgina de origen que les llev a la pgina que visualizan en ese momento. Algunos navegadores, como Opera o Firefox, permiten abrir distintas pginas en una misma sesin del navegador. Pero el habitual IExplorer (al menos hasta su versin actual 6) abrir una nueva sesin con cada ventana abierta. Este pequeo, pero incomodo, problema es fcil de solucionar: no abramos pginas nuevas o, si a pesar de todo pretendemos abrirlas, informemos al usuario que al seleccionar el enlace se abrir el destino en una nueva ventana. Para corregir un hipottico problema de este tipo en nuestra bitcora, busquemos si en alguno de los vnculos de la misma existe un atributo target como el que mostramos a continuacin:
<a href="direccion.de.destino" target="_blank">Destino del vnculo</a>
Simplemente tendremos que eliminar target=_blank y habremos solucionado el problema. 163
163
08/11/2007, 12:18
Paso 12 Acrnimos
Los acrnimos y abreviaturas son cada vez ms usuales en el lenguaje comn y no digamos cuando estamos hablando jergas profesionales. En este documento hemos empleado ya un nmero considerable (W3C, WAI, HTML, XHTML, etc.) y, supongamos, que tendr que emplear unos cuantos ms. El problema est cuando no todo el mundo entiende los acrnimos que se emplean, y son tantos que es bien difcil que conozcamos todos. Una tcnica clsica para resolver este problema es colocar en el propio contenido y junto al acrnimo su desarrollo completo. Por ejemplo: W3C (World Wide Web Consortium). Pero si en un mismo texto tenemos que repetir mucho este acrnimo se volvera muy farragoso colocar continuamente el texto entre parntesis. Por ese motivo, se suele hacer la extensin del acrnimo la primera vez que aparece, dejando al lector la tarea de que lo interprete en el resto. En nuestras pginas web tenemos la posibilidad de dar esa informacin mediante la etiqueta <acronym>. Si se coloca el cursor sobre los acrnimos convenientemente etiquetado, aparece una tooltip [cuadro emergente] con el contenido del ttulo que le hemos dado a nuestro acrnimo, que debe ser el texto extendido del mismo. La forma de aplicar la etiqueta <acronym> es sencilla. Veamos cmo lo haramos para el acrnimo W3C:
<acronym title= "World Wide Web Consotium" lang= "en">W3C</acronym>
Veamos algunos detalles. La etiqueta lleva dos atributos: title, con el que extendemos el texto, y lang, ya que en este caso al estar en ingls tenemos que avisar de ello a los lectores de pantalla y navegadores por voz. Este segundo atributo no lo colocaremos cuando la extensin del acrnimo est en el mismo idioma que usamos para el resto del contenido. 164
164
08/11/2007, 12:18
En algunos navegadores, como Mozilla y Firefox, la apariencia visual de los acrnimos en pantalla se adereza con una lnea punteada de subrayado. Si queremos extender esta posibilidad al resto de navegadores, ya que sta es una buena opcin para informar al visitante de que existe una extensin para el acrnimo, podemos hacerlo en la hoja de estilo del siguiente modo:
acronym { border-bottom: 1px dotted #000000; }
Para cerrar este post comentaremos que existe otra etiqueta relativa a las abreviaturas: <abbr>. Existe una constante discusin sobre qu es acrnimo y qu es abreviatura. Es evidente que lo mejor es etiquetar cada cosa con lo que procede. Pero optamos por una solucin ms prctica: como ninguna de las versiones del navegador ms utilizado (IExplorer) nos muestra una tooltip al colocarnos sobre un texto etiquetado con <abbr>, nos decantamos por recomendar el uso de <acronym>.
165
165
08/11/2007, 12:18
Paso 13 Tablas accesibles
No es muy habitual encontrar tablas en las bitcoras. La nica excepcin probablemente sea las que se utilizan para insertar un calendario. En todo caso, para saber hacerlas correctamente vamos a dar tres instrucciones que ser preciso tener en cuenta. Una aclaracin previa. Vamos a hablar de tablas de datos y no de tablas utilizadas para maquetar (que ya sabemos que no estn recomendadas y slo se aceptan si, al alinear su contenido, ste es comprensible). Nos puede ser til el ejemplo de una hoja de calendario para las nociones que vamos a explicar. En primer lugar, hay que dar un ttulo o subttulo real a nuestra tabla mediante la etiqueta <caption>. En muchas ocasiones nos encontramos un supuesto ttulo de la tabla pero que realmente no es ms una celda ms de la tabla. El cdigo fuente que nos encontraramos sera algo as:
<table border="1" width="30%"> <tr> <td colspan="7" align="center">Junio 2005</td> <tr> <td align="center">Lu</td> ... Lo que debemos hacer es sustituir esa primara lnea <tr> con el "falso" ttulo por otra que contenga la etiqueta <caption> del siguiente modo: <table border="1" width="30%"> <caption>Junio 2005</caption> <tr>
166
166
08/11/2007, 12:18
<td ...
align="center">Lu</td>
De esta forma los lectores de pantalla y ciertos navegadores slo texto, como Lynx, mostrarn el ttulo real de la tabla como lo que es, informando al usuario de que no es un dato ms en la tabla. La segunda cuestin a tener en cuenta es proporcionar un resumen para las tablas. Esta tarea se realiza mediante el atributo summary de la etiqueta <table>. El uso de este atributo proporciona informacin que es leda por los lectores de pantalla y navegadores por voz, de tal manera que al usuario le puede llegar informacin previa del contenido de nuestra tabla y de los datos relevantes que contiene. La forma de usarla, siguiendo con el ejemplo anterior, es:
<table border="1" width="30%" summary="Calendario mensual con vculos a los posts de cada da"> <caption>Junio 2005</caption> <tr> <td align="center">Lu</td> ...
Es importante que el texto del atributo summary sea lo ms breve y explicativo posible. No tratemos de informar al usuario, mediante este atributo, del formato de la tabla (por ejemplo, esta tabla tiene seis lneas y siete columnas). Esa informacin ya se la da el lector de pantalla. Debemos informar del propsito de la misma, para qu sirve, y sobre el contenido, al menos lo ms destacado. En nuestro ejemplo, la tabla es un calendario mensual y en su contenido se puede encontrar el enlace a los posts diarios de nuestra bitcora. La tercera cosa que debemos hacer para que nuestra tabla sea accesible es utilizar encabezamientos apropiados. Esto se consigue utilizando la etiqueta <th>, en lugar de la etiqueta <td>, donde proceda. Lo primero que tenemos que tener claro es cuales son los encabezados en nuestra tabla. Siguiendo con el ejemplo que venimos usando, en el caso de una hora mensual de calendario est claro que los encabezados sern los nombres de los das de la semana, que estn en la primera lnea de datos. 167
167
08/11/2007, 12:18
Extendemos algo ms el cdigo fuente que hemos venido usando y una tabla correctamente etiquetada nos quedara as:
<table border="1" width="30%" summary="Calendario mensual con vculos a los posts de cada da"> <caption>Junio 2005</caption> <tr> <th abbr="Lunes">Lu</th> <th abbr="Martes">Ma</th> <th abbr="Mircoles">Mi</th> <th abbr="Jueves">Ju</th> <th abbr="Viernes">Vi</th> <th abbr="Sbado">Sa</th> <th abbr="Domingo">Do</th> </tr> ...
Hemos cambiando la etiqueta y tambin hemos quitado la alineacin central que le dbamos, porque el formato de <th> ya centra el texto en la celda y si queremos proporcionarle alguna caracterstica de estilo lo deberemos declarar en nuestra hoja de estilo. Tambin hemos incluido el atributo abbr, que en este caso s procede, ya que queremos que sea ledo por los lectores de pantalla y navegadores por voz, pero no necesitamos que se muestre visualmente. Para tablas ms complejas habra que hacer otras cosas. Pero lo visto hasta aqu sirve para la mayora de las tablas simples que solemos incluir en nuestras pginas web.
168
168
08/11/2007, 12:18
Paso 14 Usar listas reales
Las listas, en el cdigo HTML, tienen sus propias etiquetas para marcarlas. Usamos la etiqueta <ul> para las listas aleatorias (sas que aparecen con bolitas) y <ol> para las ordenadas (que aparecen con nmeros o letras consecutivos). Su apariencia puede resultarnos sosa o aburrida y queramos darle un toque de diseo. Entonces pensamos sustituir esos feos bolitos que aparecen en nuestra lista con el men de navegacin por algo ms atractivo, por ejemplo, un pequeo trbol. Nos olvidamos del marcado correcto y hacemos algo as:
<img scr="/imagenes/trebol.jpg" width="C8" height="8" alt="*2><a href=2principal.html2 title="Pgina principal de la bitcora">Principal</a>< /br> <img scr="/imagenes/trebol.jpg" width="8" height="8" alt="*"><a href="contenidos.html" title="Tabla de contenidos de la bitcora">Contenidos</a>< /br> <img scr="/imagenes/trebol.jpg" width="8" height="8" alt="*"><a href="hoy.html" title="El artculo del da">Lo ltimo</a>< /br>
Podemos preguntarnos si algo est mal en este cdigo. Tiene atributo alt (del que ms adelante hablaremos) para la imagen, tiene el atributo title para el vnculo y en principio parece que est todo correcto. Tcnicamente s, pero semnticamente no. El usuario visual puede que lo perciba como una lista aleatoria, pero los lectores de pantalla no la interpretan como tal, porque no lo es. Sera demasiado osado decir que esto la hace inaccesible, pero s podemos afirmar que se puede hacer mucho mejor, ajustndose a los criterios semnticos, y, me atrevera a decir, que de forma mucho ms sencilla. 169
169
08/11/2007, 12:18
Veamos cmo hacerla aprovechando las caractersticas de la hoja de estilo. Lo primero que tenemos que definir es el estilo que le vamos a dar: queremos que aparezcan unos pequeos trboles en lugar de los sosos puntos que aparecen por defecto en este tipo de listas. Vamos a definir un estilo para nuestra lista del men en la hoja de estilo:
ul.menu { list-style: }
url(/imagenes/trebol.jpg)
disc;
A continuacin, ya podremos escribir nuestra lista usando marcadores de lista apropiados:

<ul class="menu"> <li><a href="principal.html" title="Pgina principal de la bitcora">Principal</a></li> <li><a href="contenidos.html" title="Tabla de contenidos de la bitcora">Contenidos</a></li> <li><a href="hoy.html" title="El artculo del da">Lo ltimo</a></li> </ul>
Los resultados que obtendremos son: Los navegadores modernos mostrarn la imagen del trbol como vietas de lista. Los navegadores ms antiguos (por ejemplo, el clsico Netscape 4) y los que tengan las imgenes deshabilitadas mostrarn la lista con las vietas negras. Los navegadores slo texto ignorarn la hoja de estilo y mostrarn la lista como tengan definido por defecto (normalmente con vietas en forma de asterisco). Los lectores de pantalla y navegadores por voz interpretarn de forma semnticamente correcta que se encuentran ante una lista y as se lo dirn al visitante.
Pero lo que queremos es hacer una lista donde no se vean las vietas y el texto est alineado a la izquierda. Pues no hay problema. No tenemos 170
170
08/11/2007, 12:18
que tocar el cdigo fuente de la lista. Slo tenemos que dar unos retoques a las caractersticas de la lista en la hoja de estilo para hacer desaparecer la vieta y alinear el texto a la derecha. Del siguiente modo:
ul.menu { list-style: none; text-align: right; }
De igual manera, podremos dar cualquier otro estilo a la apariencia de nuestra lista, sin tener que tocar el cdigo fuente y slo aadiendo o modificando caractersticas de la hoja de estilo. Fcil, bonito y, sobre todo, apropiado.
171
171
08/11/2007, 12:18
Paso 15 Equivalente textual para imgenes
Ha llegado el momento de hablar del atributo "alt". Probablemente ste sea el elemento ms conocido cuando se habla de accesibilidad en la web. Pero no por conocido es menos necesario explicar su uso y, sobre todo, su correcto uso. Sin este atributo, las personas que utilizan navegadores slo texto, lectores de pantalla o navegadores por voz y todos aquellos que, por una u otra razn, no tienen habilitada la descarga de imgenes, se quedarn sin conocer su contenido y utilidad. Es, sin dudarlo, el elemento de accesibilidad que afecta a mayor nmero de personas y, por lo tanto, se merece una atencin relevante. Vamos, en primer lugar, a ver cmo se utiliza el atributo "alt" para las imgenes dentro de la etiqueta <img>. Es primordial saber qu funcin tiene este atributo: pretende trasmitir el contenido y la funcin de la imagen, cuando sta no puede llegar al usuario de forma visual. Responde por tanto a dos preguntas: Qu es? y para qu sirve?. Como siempre, tomaremos un ejemplo para saber cmo hacerlo de forma correcta. Supongamos que en nuestra bitcora queremos insertar una foto del autor que sirva de enlace a una pgina con un resumen curricular de su trayectoria profesional. Si nos limitamos a colocar en el sitio elegido la referencia al archivo de imagen y le colocamos un enlace obtendremos algo as:
<a href="http://autor.htm"> <img src=http://../imagenes/foto.jpg /> </a>
Si lo dejamos con esa codificacin habremos dejado fuera a todos aquellos que relacionbamos al comienzo. Tenemos que modificar el cdi172
172
08/11/2007, 12:18
go para que nos permita hacerlo accesible para todos. Recordemos qu y para qu est la imagen: es la foto del autor y sirve para llevarnos a otra pgina donde podemos conocer ms sobre l. Eso es lo que debemos transmitir en el atributo "alt" y lo tenemos que hacer de la manera ms breve y clara que podamos. sta sera una buena forma de hacerlo:
<a href="http://autor.htm"> <img src="http://../imagenes/foto.jpg" alt="Foto del autor que enlaza con un resumen de su currculum" title="Conoce al autor de esta bitcora" /> </a>
Hemos aadido dos cosas: Lo ms importante ahora, hemos colocado el atributo "alt" en la etiqueta <img> informando a los que no vean la imagen de qu es y para qu sirve. Tambin hemos colocado el atributo "title" para proporcionar informacin adicional de forma visual, como ya explicamos en el paso 9.
Al colocar el texto alternativo para las imgenes debemos tener en cuenta algunas cosas: No podemos utilizar marcadores de cdigo en el texto alternativo, slo texto plano y caracteres especiales. Por ejemplo, no podemos intentar dar nfasis a parte del texto alternativo del siguiente modo: alt="Foto del autor que <em>enlaza</em> con el resumen de su currculum". Las etiquetas dentro del atributo se leern como texto plano. No debemos poner como texto alternativo el nombre del archivo de imagen. Por ejemplo, alt="foto.jpg". Algunas herramientas de edicin de pginas web colocan un texto alternativo por defecto a las imgenes para que ste sea sustituido por uno correcto. Por ejemplo, no dejemos un texto alternativo del tipo alt="Texto alternativo". No utilices como texto alternativo, cuando la imagen sirva como enlace, un texto que ya desaconsejamos para los vnculos. Por ejemplo, no pongamos nunca alt="Pinche aqu!". 173
173
08/11/2007, 12:18
No nos pasemos de listos y hagamos algo tan sin sentido como este ejemplo que vi en una pgina web: alt="Activar las imgenes". Esto es algo as como si una persona ciega nos preguntara la hora y mostrndoles nuestro reloj le dijramos: Mrala t!.
174
174
08/11/2007, 12:18
Paso 16 Atributo alt vaco
En determinadas ocasiones, los diseadores de pginas web utilizamos las imgenes como meros recursos estticos o para dar formato a la apariencia de nuestra pgina. En esos casos no procede utilizar el atributo "alt" de forma activa para los lectores de pantalla, para los navegadores slo texto o para quienes tienen deshabilitadas las imgenes. Pero tampoco podemos ir colocando imgenes en nuestra pgina que, por defecto, dichos dispositivos lean diciendo algo as como imagen o aparezca este texto en pantalla. Qu podemos hacer para solucionarlo? Poner un atributo alt vaco, y es tan sencillo como colocarlo dentro de la etiqueta <img>, pero sin poner texto entre las comillas. Sera algo as:
<img src="http://ImagenEspaciadora.jpg" alt="">
Los lectores de pantalla reconocern el atributo y leern lo que contiene: nada. En caso de no encontrar el atributo diran imagen o leeran la direccin del archivo que la contiene, segn el caso. Algunos navegadores slo texto tambin reconocern el atributo y mostrarn en pantalla lo que contiene: nada. Otros mostrarn en cualquier caso la palabra imagen, porque siempre lo hacen, pongamos o no texto alternativo. Hay gente que opina que para estos casos sera mejor poner un texto alternativo del tipo imagen decorativa o imagen espaciadora, pero eso ensuciara mucho la lectura de otros navegadores. Demos un voto de confianza a nuestros visitantes con este tipo de navegadores y, si han visto que utilizamos correctamente el etiquetado de las imgenes en el resto de la pgina, debern suponer que esta imagen no trata de trasmitir contenido. 175
175
08/11/2007, 12:18
Las personas que utilizan navegadores visuales y tienen deshabilitada la carga de imgenes, por el motivo que sea, siempre vern el cuadro de imagen que su navegador muestre por defecto y ste no tendr texto alternativo. Igual que en el caso anterior, tengamos fe en la capacidad de nuestros visitantes y hagamos uso del "alt" vaco. Principalmente, deberemos usar el "alt" vaco: Cuando utilizamos imgenes decorativas, como sas que redondean las esquinas de los fondos de texto. Cuando utilizamos imgenes para separar texto u otras imgenes, aunque ste sea un artificio que no es recomendable y que podemos sustituir por un buen diseo de bloques mediante la hoja de estilo. En general, cuando la imagen que colocamos no pretenda transmitir contenido.
Es muy importante recordar que lo correcto para el "alt" vaco es colocar las comillas seguidas (alt="") y no dejando un espacio entre ellas (alt=""), ya que, entonces, los lectores de pantalla leern espacio. Para las imgenes de fondo que colocamos dentro de etiquetas como <body> o <td>, no precisan de texto alternativo, ni siquiera mediante el alt vaco. Estas imgenes son meramente decorativas y son ignoradas tanto por lectores de pantalla como por navegadores slo texto.
176
176
08/11/2007, 12:18
Paso 17 Mapas de imagen accesibles
Es sorprendente la cantidad de sitios donde podemos encontrar mapas de imagen. Muchos desarrolladores de sitios web piensan que colocar uno de estos mapas de imagen es garanta de que la apariencia que ellos quieren dar a su web llega al visitante tal como ellos la concibieron. Esto puede ser cierto para un gran nmero de usuarios de la web que utilizan el navegador ms difundido en su ltima versin. Pero no es vlido para todos. El espritu de la web va en contra de este rgido pensamiento. Su intencin apunta ms hacia el control por parte del usuarios de los contenidos que otros han colocado en internet. Tampoco sera correcto renunciar a una de las posibilidades que nos ofrece el diseo de pginas web. Lo importante es hacerlo bien y eso es lo que vamos a ver ahora. La primera norma es crear mapas de imagen del lado del usuario (del cliente, como gusta decir en ciertos mbitos). Deberemos hacerlo con el atributo "usemap" (que define en la imagen que el mapa es controlado por el dispositivo del usuario) y no con "ismap" (que lo define como controlado por el servidor). Esto debe ser as para que la distinta manera de presentar la imagen que tienen los navegadores sea la que defina el rea de la imagen que dispondr de un vnculo y que sea el servidor quien defina dichas coordenadas de forma absoluta sin conocer el tipo de navegador y resolucin que est empleando el visitante. Si el servidor, por ejemplo, piensa que el usuario utiliza una resolucin de 800 x 600 pixels, pero ste la utiliza mayor o menor, puede estar definiendo el rea sensible con el vnculo fuera de la imagen que lo presenta o en un lugar distinto, con lo que puede provocar graves equivocaciones. La segunda cuestin es dar alternativas textuales tanto a la imagen de la que haremos el mapa, como a cada una de las zonas sensibles que ste contenga. Veamos cmo se hace con un ejemplo: 177
177
08/11/2007, 12:18
Supongamos que, por la razn que sea, queremos colocar como pie de nuestra bitcora y en todas sus pginas un mapa de imagen que sirva para contener los vnculos de navegacin principales de nuestra bitcora. Blogger nos permite hacer esto, ya que podemos colocar una imagen y definir reas o zonas sensibles que sirvan como vnculos (aunque lo tendremos que hacer mediante el editor HTML, insertando manualmente el cdigo fuente). Por hacerlo sencillo, supongamos que en la imagen colocamos tres zonas sensibles para enlazar con la pgina principal de la bitcora, con la que contiene el currculo del autor y con otra que tiene la tabla de contenidos ordenados por temas. En principio podramos tener un cdigo fuente similar a ste (recordemos que siempre se utilizar un mapa de imagen del lado del usuario):
<img src="MiMapa.jpg" width="500" height="200" usemap="#map"> <map name="Map"> <area shape="rect" coords="203,114,258,129" href="principal.html"> <area shape="rect" coords="277,114,348,129" href="autor.html"> <area shape="rect" coords="364,114,401,129" href="contenidos.html2> </map>
Para hacer nuestro mapa accesible tendremos que colocar atributo "alt" tanto a la imagen completa, como a cada una de las zonas sensibles definidas dentro del mismo mediante la etiqueta <area>. Tendra que quedarnos algo as:
<img src:"MiMapa.jpg" width="500" height="200" usemap="#map" alt="Navegacin por mi bitcora"> <map name="Map"> <area shape="rect" coords="203,114,258,129" href="principal.html" alt="Pgina principal"> <area shape="rect" coords="277,114,348,129" href="autor.html" alt="Conoce al autor"> <area shape="rect" coords="364,114,401,129"
178
178
08/11/2007, 12:18
href="contenidos.html" alt="Tabla de contenidos"> </map>
Es algo relativamente sencillo y que en herramientas de diseo, como Dreamweaver de Macromedia, se puede hacer de forma interactiva en el inspector de preferencias. Todas las reglas para escribir un buen texto alternativo para las imgenes, como vimos en el paso 15, son aplicables a los mapas de imagen. Tambin se puede aadir un title="" a la imagen principal y a cada rea para eliminar el toolpip [cuadro emergente] en los navegadores visuales. Una ltima advertencia. Los navegadores slo texto no son capaces de mostrar los textos alternativos de las zonas sensibles de un mapa de imagen. La nica posibilidad de hacerlo accesible es proporcionar un listado de los enlaces del mapa de imagen en forma textual anexo a ste. Y, entonces para qu hago el mapa de imagen si al final tengo que poner una lista de enlaces? se es uno de los problemas de hacer un mapa de imagen. Es posible que la mejor opcin sea no ponerlo y buscar una alternativa vistosa y ms accesible.
179
179
08/11/2007, 12:18
Paso 18 Lneas horizontales
Vamos a poner una lnea marcar la divisin entre los post. Las lneas horizontales, marcadas con la etiqueta <hr>, pueden resultar sosas y aburridas, as que, en su lugar queremos colocar una imagen. Eso funciona y puede ser hecho accesible fcilmente aadiendo el atributo "alt" adecuado. Pero si queremos respetar la semntica correcta podemos utilizar las caractersticas de la hoja de estilo para realizarlo. De esa manera, con los nuevos navegadores se mostrar nuestra imagen decorativa utilizada como lnea horizontal. Los navegadores ms antiguos y los navegadores slo texto ignorarn el CSS y slo mostrarn una lnea horizontal en su estilo propio. Si nos limitamos a poner una imagen en sustitucin de la lnea horizontal, ser tan sencillo como colocar el cdigo siguiente:
<img src="/imagenes/LineaDecorativa.jpg" title=""> alt=""
En el atributo "alt" no hace falta poner 80 o 90 guiones. Basta con colocar 2 o 3 y ser suficiente. Tengamos en cuenta que el lector de pantalla leer para cada guin la palabra guin. No querremos que el visitante pase un minuto oyendo guin, guin, guin...? Como ya dijimos, esta solucin no plantea problemas de accesibilidad, pero atenta contra la semntica propia del lenguaje de marcado de hipertexto (HTML). As que la solucin ms correcta ser va hoja de estilo. Como el soporte de los navegadores a las etiquetas <hr> es extrao, usaremos una etiqueta <div> sencilla para mostrar la imagen. En la hoja de estilo colocaremos el siguiente cdigo:
180
180
08/11/2007, 12:18
div.hr {display:none} /*/*/a{} div.hr{ display: block; height: 25 px; background-image: url(/imagenes/ LinedaDecorativa.jpg); background-repeat: no-repeat; background-position: center center; margin: 1em 0 1em 0; } hr {display: none} /* */
Donde la altura (heigth) debe ser la de la imagen que vamos a colocar como divisor y en background-image colocaremos la direccin donde se ubica. Con esto hecho, ya podemos colocar nuestra lnea decorativa en el lugar oportuno del cdigo fuente poniendo:
<div class="hr"></div><hr />
Los resultados sern: Todos los navegadores visuales modernos mostrarn la imagen en lugar de la lnea horizontal plana normal. Algunos navegadores antiguos, como Nestcape 4, mostrarn una lnea horizontal normal. Los navegadores slo texto siempre ignoran la hoja de estilo, por lo que mostrarn una regla horizontal formada por guiones normales o de subrayado.
181
181
08/11/2007, 12:18
Paso 19 Tamaos de fuente relativos
Aunque las pginas web cada vez contienen ms imgenes, animaciones y otros contenidos multimedia, su contenido principal sigue siendo las palabras (noticias, artculos, opiniones, pensamientos, etc.). Con la permanente pretensin de controlar la presentacin de los contenidos, algunos diseadores se empean en definir el tamao de la fuente (carcter o letra) con valores absolutos, tales como puntos o pixels. Al hacer esto as, estn provocando problemas para la visualizacin y correcta lectura del contenido para aquellos que aumentan el tamao de la fuente con su navegador. Al presentar un tamao absoluto, el navegador no es capaz de agrandar la fuente y siempre la muestra con el tamao definido por el autor. Como no queremos que esas personas se queden sin poder acceder a nuestros contenidos, tendremos que presentar la fuente con valores relativos, tales como unidades em, porcentaje o palabras clave (este ltimo realmente es un valor absoluto pero con un comportamiento flexible para su interpretacin por el navegador). Esto facilita la flexibilidad necesaria al navegador para modificar el tamao de la fuente y respeta la proporcin entre los distintos tamaos que utilizamos para destacar o diferenciar ciertos textos. Se han escrito muchas reglas para explicar cmo hacer un texto con tamao de fuente relativo que trabaje correctamente con todos los navegadores visuales (recordamos que esta caracterstica de accesibilidad es indiferente para los navegadores slo texto que siempre lo mostrarn con el mismo tamao y para los lectores de pantalla que se limitan a leer y presentar el contenido de forma oral). Podemos recomendar la lectura de uno de los captulos del texto de Mark Pilgrim Dive into accessibity, el del da 26 referido a Usar tamaos de fuente relativos. Mi particular experiencia me lleva a decantarme por el uso de porcentajes al definir los tamaos de fuente en la hoja de estilos. Pero hay que 182
182
08/11/2007, 12:18
tener mucho cuidado y hacer muchas pruebas para ver que los resultados de la aplicacin de sucesivas reduccin en bloques de contenido anidados en otros no provoque una reduccin de tal magnitud que haga ilegible el texto. Sealamos que si el tamao de fuente definido para el cuerpo general de la pgina es del 90% y dentro de este bloque definimos otro, por ejemplo para el tamao de las fuentes en los posts del 90%, el resultado ser que la letra se mostrar al 81% (el 90% de 90%). Adems, para los navegadores ms antiguos (aunque de stos queden ya muy pocos activos) este tipo de aplicacin de porcentajes puede producir algunos efectos muy poco deseables. Blogger utiliza una curiosa mezcla entre palabras clave (que puede tomar los valores xx-small, x-small, small, medium, large, x-large y xx-large) y porcentajes que parece dar un buen resultado.
183
183
08/11/2007, 12:18
Paso 20 Encabezados correctos
Una pgina de una bitcora tiene, como la mayora de los documentos escritos, un esquema por niveles que podramos describir as: 1. El nivel superior ser el propio ttulo de la bitcora. 2. El segundo nivel sera cada uno de los das en los que colocamos posts. Por ejemplo: Martes, 7 de junio de 2006. 3. El tercer nivel lo ocupara el ttulo de cada uno de los post de cada da. 4. En el cuarto nivel estara la seccin de comentarios para cada post. Cada uno de estos niveles responde a un nivel de encabezado en la codificacin HTML (existen hasta 6 niveles) que se marcan mediante las etiquetas <h1>, <h2>, <h3> y <h4>. El correcto uso de estas etiquetas facilita la navegacin mediante lectores de pantalla (que, en el caso de JAWS, tiene la posibilidad de leer la relacin de encabezados si se pulsa INSERT+F6 o navegar entre encabezados con CONTROL+INSERT+INTRO). Tambin el navegador Opera nos permite saltar al siguiente encabezado pulsando la tecla S y retroceder al anterior con la tecla W. Los buscadores, como Google, son capaces de indexar el contenido de nuestras pginas localizando los encabezados de ella. Por eso es importante el uso correcto de estos encabezados. No es extrao encontrar pginas donde sus ttulos y los de las secciones que la componen han sido definidos dando un simple formato al texto y prescindiendo del correcto marcado con la etiqueta de encabezado. Esto atenta contra la semntica de la codificacin HTML y provoca inconvenientes de navegacin para ciertos usuarios que supondrn barreras al no encontrar la correspondiente etiqueta de encabezado. 184
184
08/11/2007, 12:18
Otras pginas utilizan el formato que proporciona la etiqueta de encabezado para aumentar el tamao de un texto, que realmente no es un encabezado. Debemos, por lo tanto, utilizar las etiquetas de encabezado y hacerlo de forma correcta. En Blogger, la plantilla principal define en su hoja de estilo la forma en que se presentarn los encabezados y en el cuerpo del contenido a qu textos se aplican.
185
185
08/11/2007, 12:18
Paso 21 Verificar la accesibilidad
Para considerar correctamente finalizado un trabajo, hay que verificar sus resultados. Eso es lo que debemos hacer en este paso. No se trata de hacer una auditora de accesibilidad exhaustiva y profesional. Recomendamos comprobar una serie de pasos, rpidos y sencillos, para saber si hemos conseguido el objetivo de hacer una bitcora accesible. El anlisis que proponemos no sirve para colocarse medallas ni obtener certificados. Su pretensin es que aprendamos algo sobre verificacin de la accesibilidad y nos acostumbremos a usarla en tus trabajos futuros en la web, antes de colocar los contenidos a disposicin de todos. Veamos los pasos a dar: El primero de ellos ser verificar si el cdigo fuente de nuestra bitcora se ajusta a las recomendaciones de W3C sobre HTML. En la direccin http://validator.w3.org se puede encontrar la herramienta para realizarlo. Basta con que pongamos la direccin web donde se ubica tu bitcora y, de forma automtica, el validador te presentar los resultados. Este procedimiento es completamente fiable, ya que la verificacin del cdigo puede ser completamente realizada por una herramienta automtica. Si todo est bien, felicidades! Si te devuelve una pgina en la que te muestra los errores encontrados, debemos revisar el cdigo y modificar con las recomendaciones que ellos mismos nos proporcionan. La validacin del cdigo HTML hay que hacerla para cada pgina. El siguiente paso ser verificar el cdigo de nuestra hoja de estilo, tambin ajustndose a las recomendaciones de W3C para CSS. Para ello disponemos de una herramienta automtica que podemos encontrar en: http://jigsaw.w3.org/css-validator/. Escribimos la direccin web donde se encuentra la hoja de estilo, el validador realiza el anlisis de forma automtica. El cdigo de la hoja de estilo es analizado tanto si sta se en-
186
186
08/11/2007, 12:18
cuentra en un archivo propio (del tipo: estilo.css) como si est dentro de una pgina web normal (del tipo: pagina.html). En este ltimo caso, el validador localiza el trozo de cdigo que corresponde la hoja de estilo (si est correctamente marcado) y lo analiza. De forma automtica y completamente fiable, presentar los resultados. Si la respuesta obtenida del validador es que todo est bien, felicidades! Si encuentra errores nos los comunicar y deberemos revisarlos y modificarlos para adecuarlos al estndar. Normalmente habremos utilizado una sola hoja de estilo, por lo que slo tendremos que hacer un anlisis. Si son varias las aplicadas, tendremos que realizar un anlisis para cada una de ellas. Este validador est, al menos en parte, castellanizado, lo que puede hacer ms fcil su uso. Los dos pasos anteriores, aunque no lo parezca, tienen mucho que ver con accesibilidad. Para hacer accesible una web, lo primero es hacerla de forma correcta y adecuada a los estndares. En cuanto nos salgamos de stos, posiblemente comencemos a poner en problemas a algunas personas. En este tercer paso vamos a hacer un anlisis automtico de los criterios de accesibilidad promovidos por W3C en sus WCAG 1.0, elaboradas por grupo WAI (dispones de una traduccin al castellano [espaol] en: http://usuarios.discapnet.es/disweb2000/WCAG2003/wcag10/WAIWEBCONTENT-19990505_es.html). Para ello vamos a utilizar la herramienta desarrollada por la Fundacin CTIC y conocida con el nombre TAW (Test de Accesibilidad Web) que puedes encontrar en http:// www.tawdis.net/. El anlisis automtico de accesibilidad se puede realizar en lnea o se puede descargar, de forma gratuita, la herramienta e instalarla en el ordenador. Recomendamos esta segunda opcin porque, entre otras ventajas, permite realizar el anlisis de todas las pginas de dominio de una sola vez, mientras que en lnea tendramos que hacerlo pgina a pgina. Una observacin importante es que el anlisis de la accesibilidad no se puede hacer al 100% de forma automtica. Hay muchos criterios cuya revisin tenemos que realizarla de forma personal o manual. En cualquier caso, el anlisis automtico nos permite conocer si hemos cometido errores que se pueden detectar de esta forma y nos recomienda la verificacin de otros criterios de forma personal. Con los resultados que nos ofrece esta herramienta podemos saber si, en princi187
187
08/11/2007, 12:18
pio, todo est correcto en materia de criterios de accesibilidad (si es as, felicidades!) o si debemos revisar y modificar algo en nuestras pginas. Al estar completamente en castellano [espaol] su uso es ms fcil y comprensible. En este cuarto paso haremos un anlisis del contraste de color del sitio. Como ya vimos en el paso 7, al hablar del uso de los colores, W3C ha promovido un algoritmo, muy exigente, para verificar el contraste de colores. Disponemos de una herramienta para hacer este anlisis, cuyo programa en castellano [espaol] podemos descargar gratuitamente en esta direccin: http://www.nils.org.au/ais/web/resources/ contrast_analyser/versions/es/. El manejo de esta herramienta en muy sencillo e intuitivo. Verifica que todos los colores que hemos empleado superan los valores mnimos. Observamos que la herramienta ofrece unos valores para la visin normal y otros para distintas cegueras de color. Debemos procurar que todos sean positivos para todos los casos. Una ltima prueba es visualizar la bitcora quitando la hoja de estilo. La forma ms rpida y fcil es utilizando la barra de herramientas de accesibilidad desarrollada por el equipo de AIS que, en su versin castellanizada (realizada por Technosite [Fundosa Teleservicios]), podemos descargarla gratuitamente desde: http://www.technosite.es/software.asp. Esta barra de herramientas slo trabaja con el navegador IExplorer. Para desactivar la hoja de estilo, tenemos que hacerlo desde la opcin etiquetada como IE. Verifica que todo el contenido de las pginas de tu bitcora se comunica correctamente sin la hoja de estilos. Si es as, felicidades! En caso contrario, revisaremos y modificaremos lo que corresponda.
Podemos hacer alguna prueba ms, complementaria como: Deshabilitar las imgenes en el navegador y comprobar si los textos alternativos estn puestos correctamente y son comprensibles. Visitemos la bitcora con un navegador slo texto o con un simulador como Lynx Viewer y comprobemos como llegar a los usuarios
188
188
08/11/2007, 12:18
que dispongan de este tipo de navegadores el contenido de la bitcora. Con la demo del lector de pantalla JAWS (la versin 5.01 de este programa en castellano [espaol] se puede encontrar en: ftp://ftp.once.es/ pub/utt/tiflosoftware/04_Revisor_Jaws/jaws_5.0) escucharemos cmo se oyen los contenidos de la bitcora. Si tenemos alguna versin antigua de navegadores visuales, como Netscape 4, que es muy peculiar, visitaremos la bitcora con ella para ver los resultados.
189
189
08/11/2007, 12:18
190
190
08/11/2007, 12:18
Anexo
Web recomendadas
Blogger: http://www.blogger.com/ Dive into Accessibility: http://www.diveintoaccessibility.org/ Pautas accesibilidad web: http://usuarios.discapnet.es/disweb2000/WCAG2003/index.htm HTML con Clase: http://html.conclase.com/ Hojas de Estilo, CSS: http://www.sidar.org/recur/desdi/mcss/index.php Analizador del Contraste de Color: http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/ Barra de Herramientas de Accesibilidad: http://www.technosite.es/software.asp
Navegadores
Lynx: http://www.fdisk.com/doslynx/lynxport.htm Links: http://links.sourceforge.net/ Opera: http://www.opera.com/ 191
191
08/11/2007, 12:18
JAWS: ftp://ftp.once.es/pub/utt/tiflosoftware/04_Revisor_Jaws/jaws_5.0 IBM Home Page Reader: http://www-3.ibm.com/able/solution_offerings/hpr.html Mozilla: http://www.mozilla.org/ iCab: http://www.icab.de/ Firefox: http://www.mozilla-europe.org/es/products/firefox/ MS Internet Explorer: http://www.microsoft.es/ Netscape: http://www.netscape.com/es/
192
192
08/11/2007, 12:18
Enlaces de inters
(Actualizados a diciembre de 2006)
Para completar este texto, incluimos a continuacin una lista de enlaces de inters con informacin sobre los aspectos tratados en este documento.
Informacin general
http://www.w3.org Sitio del Consorcio Mundial de la Web, imprescindible referencia en materia de normativa y desarrollo de la web (ingls). http://www.w3.ogr/WAI Pginas de la Iniciativa de Accesibilidad en la Web con amplia informacin sobre sus actividades y todos los documentos que elaboran, de especial inters las WCAG 1.0 (ingls). http://www.technosite.es/document_accesibilidad.asp Paginas de Technosite (Fundosa Teleservicios) que ofrecen la traduccin al castellano de las Pautas de Accesibilidad al Contenido en la Web 1.0 y documentos relacionados (castellano). http://usuarios.discapnet.es/disweb2000/webaccesible/index.htm Pginas sobre accesibilidad web en el sitio de Carlos Egea: DisWeb2000. Informacin y acceso a la traduccin de las WCAG 1.0, incluyendo el formato PDF de las dos ediciones impresas (castellano). http://www.webaim.org Sitio de la iniciativa Web Accessibility in Mind en la que podemos encontrar recursos, tcnicas, artculos y material formativo sobre accesibilidad web (ingls). 193
193
08/11/2007, 12:18
http://diveintoaccessibility.org/ Mark Pilgrim escribi este didctico manual de introduccin a la accesibilidad web, que ha sido traducido a algunos idiomas (ingls). http://www.ni4.org/ AFANIAS y el Instituto de Apoyo Empresarial mantienen esta web sobre Navegacin fcil que toca la accesibilidad web desde el punto de vista de la discapacidad intelectual. Han elaborado un protocolo de cumplimiento de criterios de accesibilidad web para este colectivo (castellano). http://accesibleweb.com.ar/default.htm La argentina Andrea Stiparo mantiene este sitio con informacin sobre accesibilidad web (castellano). http://www.sidar.org Sitio de la Fundacin SIDAR y de su Seminario Iberoamericano sobre Discapacidad y Accesibilidad en la Red con mucha informacin sobre el tema (castellano). http://www.webaccessibile.org/ Mucha informacin sobre accesibilidad web en este sitio italiano, pero de fcil lectura por hispano parlantes (italiano). http://www.webxtutti.it Sitio de la Fundacin Ugo Bordoni con informacin, normativa y recomendaciones de accesibilidad, incluyendo una herramienta de evaluacin (italiano). http://www.seraccesible.net/ Bitcora de Marco Giacomuzzi sobre accesibilidad en la web (castellano e italiano). http://www.webposible.com/ Sitio de Alejandro Gonzalo Bravo Garca con informacin, recursos y artculos sobre accesibilidad web (castellano). http://ferguweb.tx.com.ru/ Bitcora de Fernando Gutirrez Ferreira sobre temas de accesibilidad y usabilidad en la web (castellano).
194
194
08/11/2007, 12:18
http://www.jlvelazquez.net/ Otra bitcora que toca los temas de accesibilidad web. sta la mantiene Jos Luis Velzquez (castellano). http://webmastercristiano.com/ Bitcora de Daniel Calisaya que toca, entre otros, temas de accesibilidad web (castellano).
Empresas espaolas comprometidas con la accesibilidad web

http://www.technosite.es Consultora, estudios y diseo web accesible. http://www.ceyas.es Consultora en temas discapacidad y dependencia, incluyendo la accesibilidad web. http://www.accesibilidadweb.com/ Consultora y diseo web accesible. http://www.acctiva.com Asesoramiento y estudios sobre accesibilidad web. http://www.lotura.com Diseo de sitios web accesibles. http://www.timon.com Asesoramiento, diseo y estudios sobre accesibilidad web.
Recursos para deficiencia visual

http://cidat.once.es Web del Centro de Investigacin, Desarrollo y Aplicacin Tiflotcnica de la ONCE. http://www.vialibre.es/catalogo_ortopedia/Page0001.asp Catlogo de ayudas tcnicas que distribuye TecnicAID, empresa del grupo Fundosa. 195
195
08/11/2007, 12:18
http://www.funcaragol.org/ Web de la Fundacin Manuel Caracol con interesantes recursos informticos para personas ciegas y con deficiencia visual. http://www.catalogo-ceapat.org/ Catlogo de ayudas tcnicas para personas con discapacidad del Centro Estatal de Autonoma Personal y Ayudas Tcnicas del IMSERSO.
Herramientas para evaluar y validar la accesibilidad web

http://www.tawdis.net TAW Test de Accesibilidad en la Web: Verificador de sitios y pginas, incluye versin descargable (castellano). http://www.sidar.org/hera HERA: Verificador de pginas (castellano). http://webxact.watchfire.com BOBBY: Verificador de pginas gratuito en su versin web, de pago la versin descargable (ingls). http://www.wave.webaim.org WAVE: Herramienta de evaluacin de pginas web (ingls). http://www.webxtutti.it/testa.htm TORQUEMADA: Herramienta de evaluacin de pginas web (italiano). http://www.technosite.es/software.asp Pginas de Technosite (Fundosa Teleservicios) sobre recursos en materia de accesibilidad web, que incluyen la extensin web Developer para Firefox, la barra de herramientas de accesibilidad web AIS (castellano) y una versin de evaluacin de JAWS. http://www.visionaustralia.org.au/info.aspx?page=959 Analizador de Contraste de Color 1.0, descargable (castellano). http://www.wat-c.org/tools/CCA/1.1/ Analizador de Contraste de Color 1.1, descargable. Evolucin del anterior (ingls).
196
196
08/11/2007, 12:18
197
197
08/11/2007, 12:18
198
08/11/2007, 12:18
199
08/11/2007, 12:18
200
08/11/2007, 12:18

Diseno para Todos 1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseno para Todos 1

Caricato da

Copyright:

Formati disponibili

DISEO WEB PARA TOD@S I

diseo para todos.p65

diseo para todos.p65

PROGRAMA MODULAR EN TECNOLOGAS DIGITALES Y SOCIEDAD DEL CONOCIMIENTO

DISEO WEB PARA TOD@S I

CARLOS EGEA GARCA

JUAN CARLOS RAMIRO IGLESIAS ALICIA SARABIA SNCHEZ

SOCIEDAD DEL CONOCIMIENTO

diseo para todos.p65

diseo para todos.p65

Primera parte DISEAR PARA TODOS Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Legislacin y otras normas en materia de accesibilidad en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

diseo para todos.p65

Las herramientas de creacin o de autor . . . . . . . . . . . . .

Las aplicaciones o agentes de usuario . . . . . . . . . . . . . . .

Las pautas de accesibilidad al contenido en la web 1.0 de w3c/wai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

diseo para todos.p65

PAUTA 14. Asegrese de que los documentos sean claros y simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Segunda parte CODIFICACIN HTML Y CSS

Tercera parte HACER UNA BITCORA ACCESIBLE

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

Primera parte DISEAR PARA TOD@S

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

Discapacidad y accesibilidad a las tecnologas digitales

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

Cajeros automticos y quioscos virtuales

Tarjetas con banda magntica o chip

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

Elementos de los terminales de acceso

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

diseo para todos.p65

La accesibilidad en la web es importante

Las vertientes de la accesibilidad en la web

diseo para todos.p65

Imagen 1. Elementos de accesibilidad a las pginas web.

diseo para todos.p65

El Consorcio Mundial de la Web (W3C)

La Iniciativa de Accesibilidad en la Web (WAI)

diseo para todos.p65

Las pautas para la accesibilidad en la web