DISEÑO WEB PARA TOD@S I

diseño para todos.p65

1

08/11/2007, 12:17

diseño para todos.p65

2

08/11/2007, 12:17

PROGRAMA MODULAR EN TECNOLOGÍAS DIGITALES Y SOCIEDAD DEL CONOCIMIENTO

DISEÑO WEB PARA TOD@S I
ACCESIBILIDAD AL CONTENIDO EN LA WEB
Materiales elaborados por:

CARLOS EGEA GARCÍA
Con la colaboración de:

JUAN CARLOS RAMIRO IGLESIAS ALICIA SARABIA SÁNCHEZ

SOCIEDAD DEL CONOCIMIENTO

diseño para todos.p65

3

08/11/2007, 12:17

Diseño de la cubierta: Carmen Rosa Redondo © © UNED (Universidad Nacional de Educación a Distancia) Carlos Egea García

Colaboradores: Juan Carlos Ramiro Iglesias y Alicia Sarabia Sánchez Coordinadora de la colección: Sara Osuna Acedo © De esta edición Icaria editorial, s.a. Arc de Sant Cristòfol, 11-23 - 08003 Barcelona www.icariaeditorial.com

ISBN: 978-84-7426-630-6 Depósito legal: B-22.024-2007 Fotocomposición: Text Gràfic Impreso en Romanyà/Valls, s.a. Verdaguer, 1, Capellades (Barcelona)

diseño para todos.p65

4

08/11/2007, 12:17

. . . . . . . . . . . . . . El Consorcio Mundial de la Web (W3C) . . . . Un acercamiento a la discapacidad . . . . . . . . . . . . . . . . . . . . . . . . 13 14 17 19 20 26 29 31 32 35 36 36 38 38 39 Problemas de accesibilidad . . . . . . . . . . . . . . . . .ÍNDICE Prólogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Problemas de acceso . . . . . . . . . . . . . . . . .p65 5 08/11/2007. . . . . . . . . . . . . . . . Discapacidad y accesibilidad a las tecnologías digitales . . . . . . . . Interfaz hombre máquina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Las vertientes de la accesibilidad en la web . . Elementos de los terminales de acceso . . . . . . . . . . . . . . . . . . . . . La accesibilidad en la web es importante . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 41 44 diseño para todos. . . . . . Legislación y otras normas en España . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Accesibilidad en la web . . . . . . . . . . . . . Legislación y otras normas en materia de accesibilidad en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12:17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Las pautas para la accesibilidad en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . La Iniciativa de Accesibilidad en la Web (WAI) . . . 9 Primera parte DISEÑAR PARA TODOS Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contenidos . . . . . . . . . . . . . . . . Ordenadores e internet . . . Otras normas internacionales . .

. . . . . . . . Accesibilidad en las herramientas de creación más conocidas . . . . . en la web? . PAUTA 10. . . . . . . . PAUTA 8. . . . . . . . . . . . . . . . . . . . . . . Proporcione mecanismos claros de navegación 103 103 104 105 105 105 106 106 107 107 108 109 109 110 110 110 111 112 113 113 diseño para todos. . . . . . . . PAUTA 6. . . . .0 de w3c/wai . . . . . Identifique el idioma usado . . . . . . . . . . . . . . . . . . . . . . . . Algunos ejemplos de barreras habituales . . . . . Aplicaciones de usuario alternativas . . . . . . . . . . . . . . . . . No se base sólo en el color . . . . . . . . . . . . PAUTA 7. . . . Asegúrese de que las páginas que incorporan tecnologías digitales se transformen correctamente . . . . . ¿Qué son las «prioridades». . . . . . . . . . . . . . . . . . PAUTA 13. . . . . . . ¿Por qué son necesarias estas pautas? . . . . . 49 51 69 72 97 Las aplicaciones o agentes de usuario . . . . . . . . . . . . . . . los «niveles de adecuación»? . 12:17 . . . . . . PAUTA 2. . . . . . . . . . en las páginas web . . . . . . . . . . . . . . . . . . PAUTA 4. . . . . . . . ¿Qué son las pautas de accesibilidad al contenido . . . . . . . . . . . . . . . . . . . . .p65 6 08/11/2007. Diseñe para la independencia del dispositivo . Cree tablas que se transformen correctamente . . . . . . . . . . . . . . . . . . . . . Utilice marcadores y hojas de estilo y hágalo apropiadamente . . . . . . Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes . . . . ¿Cómo se presentan las pautas? . . . . . . . . . . . Asegure la accesibilidad directa de las interfaces de usuario incrustadas . . Proporcione alternativas equivalentes para el contenido visual y auditivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Proporcione información de contexto y orientación . . . . . PAUTA 11. . . . . . . . . . . . . . . . . . . . . . . . . Las pautas de accesibilidad al contenido en la web 1. . . . Utilice las tecnologías y pautas W3C . . . . . . . . . PAUTA 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . PAUTA 3. . . . . PAUTA 9. . . . . . . . . . . Accesibilidad en las aplicaciones de usuario más comunes . . . PAUTA 1. . . . . . . . . . . . . . . . . . . . . . . . . . . Utilice soluciones provisionales . . . . . . . . . . . . . . PAUTA 12. . . . . . . . . . . .Las herramientas de creación o de autor . . . . . . . . . . . . . .

. . . . . . . . . . . Atributos de eventos en HTML . . . . . XML. . . . . . . . . . . . . . . . . . . . . Definición de tipo de documento . . . . . . . . Elegir un DOCTYPE . . . . . . . . . . . . . . . . . XHTML. . . . . . . . . . . . . . . . . . . . . SGML y XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. Asegúrese de que los documentos sean claros y simples .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 139 141 144 145 147 diseño para todos. . . . . . . . . Sintaxis de HTML . . .PAUTA 14. . . . . 113 Segunda parte CODIFICACIÓN HTML Y CSS Codificación HTML . . Sintaxis de CSS . . XML y XHTML . . . . . . . . . . Identificar el idioma . . . . . . . . . . . . . . . Atributos HTML . . . . . . . . . Paso 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tercera parte HACER UNA BITÁCORA ACCESIBLE Introducción . . . . . . . . . . . . . . . . . . . . .p65 7 08/11/2007. . . . . . . . . . . . . . 12:17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 3. . . . . . . . . . . . . . . . . . . CSS soluciona problemas comunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Primeras instrucciones . . . . . . . Múltiples hojas de estilo en una. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 4. . . . . . . . . . Elegir un título significativo . . . . . . . . . . ¿Para quién es la accesibilidad web? . . . HTML. . . 117 117 117 119 120 121 123 124 128 129 131 131 132 132 133 ¿Qué es CSS? . . . . . Paso 2. . . . . . . . . . . . SGML y HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Las hojas de estilo ahorran trabajo . . . . . . . . . SGML. . . . . . . . . . . . . . . .

. . . . . . . . . . Anexo . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 20. . . . . . . . . . . . . . . . . . . Paso 12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mapas de imagen accesibles . . . . . . . . . . . Paso 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tamaños de fuente relativos . . . . . . . . . . . Información general . . Encabezados correctos . 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 interés . . . . . . . . . Paso 9. . . . . . . . . . Vínculos reales . . . . . . . . . . . . . . . .p65 8 08/11/2007. . . . . . . . . . . . . . . . . Paso 8. . . . . . . . . . . Paso 18. . . . . . El uso de los colores . . . . . . . . . . . . . . . . . . . . . . Paso 19. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 10. . . . . Ayudas adicionales a la navegación . . . . Verificar la accesibilidad . . . . . . . . . . . . Paso 6. . . . . Atajos de teclado . . . . . . . . . . . . . . . . . . . . . . . Acrónimos . . . . . . . . . . . . . Paso 17. Paso 13. . . . . . . . . . . . . . 12:17 . . . . . Navegadores . . . . . . . Paso 11. Líneas horizontales . . . . . . . . . . . . . . . Tablas accesibles . . . . . Paso 16. . . . . . . . . . . . . . Atributo «alt» vacío . . . . . . . . . . . . . 8 diseño para todos. . . . . . . . . . . . . . . . . . . . . Colocar primero el contenido principal . . . . . . . . . . . . Usar listas reales . . Herramientas para evaluar y validar la accesibilidad web . . . . . . . Paso 21. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paso 15. . . Web recomendadas . . . . . . . . . . . . . . . Paso 14. . . . . . . . . Recursos para deficiencia visual . No abrir nuevas ventanas . . . . . . . . . . . . . . . . . . . . Empresas españolas comprometidas con la accesibilidad web . . . . Equivalente textual para imágenes . . . . . . . . . . . . . . Vínculos correctos y con títulos . . . . . . . . . . . . . . .Paso 5. . . . . . . .

en la que se trata de realizar un acercamiento a la codificación de los lenguajes básicos de marcado (HTML y CSS). 12:17 .p65 9 08/11/2007.0» de W3C/WAI. sin los cuales es difícil comprender ciertas operaciones necesarias para diseñar de forma accesible un documento web. La frecuente utilización de herramientas de creación de páginas web que facilitan al autor una presentación de los contenidos de forma visual. 2. las herramientas de creación y las aplicaciones de usuario. ha provocado entre los nuevos diseñadores un general desconocimiento de las bases de codificación. Lo mismo ocurre con otras muchas herramientas del tipo «gestor de contenidos» que. si bien facilitan la edición y mantenimiento de los contenidos de los sitios web. «Diseñar para todos». «Codificación HTML y CSS». la accesibilidad en la web y su normativa. no facilitan el contacto con el código a las personas que las manejan. con información general sobre la discapacidad. sin necesidad de tocar el código subyacente. «Hacer una bitácora accesible». El documento consta de tres partes: 1. así como el contenido de las «Pautas de Accesibilidad al Contenido en la Web 1. Claro exponente de este tipo de herramientas son los editores Dreamweaver (de Macromedia) o FrontPage (de Microsoft). 9 diseño para todos. dos de los más usados en la actualidad. 3.Prólogo En este libro se recogen los materiales relativos a la primera parte módulo «Diseño para tod@s» del Programa Modular en Tecnologías Digitales y Sociedad del Conocimiento de la Universidad Nacional a Distancia (UNED). que servirá de documento de soporte para las posibles prácticas que se pueden desarrollar con los gestores de contenido. las tecnologías digitales y cómo afectan a las personas con discapacidad.

p65 10 08/11/2007. El autor de los materiales asume todas las responsabilidades derivadas de la necesaria interpretación de determinados aspectos que hoy día se encuentran en fase de discusión y desarrollo en torno a este tema.La finalidad de este documento es meramente didáctica y no tiene pretensiones normativas o técnicas más allá de las relativas a la enseñanza de contenidos sobre accesibilidad en la web. Carlos Egea García Enero de 2007 10 diseño para todos. 12:17 .

p65 11 08/11/2007. 12:17 .Primera parte DISEÑAR PARA TOD@S 11 diseño para todos.

12:17 .12 diseño para todos.p65 12 08/11/2007.

que entran de lleno en un riesgo evidente de «infoexclusión».Introducción Sin lugar a dudas. expandida hasta el último rincón del planeta. afecte en mayor o menor medida a toda la población presente en él. No podemos dejar de observar que el tremendo potencial que desarrollan las tecnologías digitales está incidiendo claramente en el crecimiento de los países enmarcados en las sociedades avanzadas. hacen que un número considerable de personas con discapacidad y personas mayores se encuentren inmersas en la brecha digital. Las connotaciones emergentes de esta nueva sociedad hacen que.p65 13 08/11/2007. que se ha venido a llamar «brecha digital». existentes en todos los países. su grado de desarrollo económico. Las carencias y problemas de accesibilidad a los medios físicos de entrada y salida de información en los nuevos elementos tecnológicos. a la que podríamos añadir el conjunto de personas de la llamada «tercera edad». 12:17 . De este modo. Las nuevas discriminaciones que esta sociedad nos presenta se ven acentuadas en las denominadas «grandes minorías». con especial incidencia en la «gran minoría» de personas con discapacidades presente en el mundo. que está siendo denominada «Sociedad de la Comunicación y la Información». el esfuerzo por lograr que las tecnologías digitales sean ac13 diseño para todos. las creencias religiosas y el nivel cultural de su población influyen de manera decisiva en la posibilidad de los ciudadanos de acceder a esta última revolución social. La riqueza de cada país. No obstante. los innumerables avances tecnológicos de los últimos años han propiciado que nos veamos inmersos en una sociedad completamente nueva. así como al contenido de la información. esta enorme revolución está creando al mismo tiempo una gran brecha social. al mismo tiempo que los países en vías de desarrollo se encuentran en desventaja para acceder a esta «Sociedad de la Comunicación y la Información».

12:17 . [.] Puede incluir también otras circunstancias como embarazo.p65 14 08/11/2007.. a una desviación significativa respecto a la norma estadística establecida 14 diseño para todos. estrictamente. La Organización Mundial de la Salud señala en sus informes que actualmente existen en el mundo entre 500 y 600 millones de personas con discapacidad. limitaciones en la actividad y restricciones en la participación. a través de la Clasificación Internacional del Funcionamiento. anomalías congénitas o predisposiciones genéticas. Explica los términos contenidos en la definición de la siguiente manera: Condición de salud: «es un término genérico que incluye enfermedad (aguda o crónica). trastorno. el acceso a la formación y la educación en tecnologías digitales de las personas con discapacidad constituye un factor esencial para la integración y no discriminación de millones de personas. Un acercamiento a la discapacidad La Organización Mundial de la Salud. debe considerarse como una necesidad incuestionable para eliminar este riesgo. Sólo 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 Comunicación y la Información. Con ‘anormalidad’ se hace referencia. de la Discapacidad y de la Salud (CIF) del año 2001. así como en la elaboración de contenidos. Las funciones fisiológicas incluyen las funciones mentales. envejecimiento.. Indica los aspectos negativos de la interacción entre un individuo (con una ‘condición de salud’) y sus factores contextuales (factores ambientales y personales)».» Deficiencia: «es la anormalidad o pérdida de un estructura corporal o de una función fisiológica. traumatismo y lesión. estrés.cesibles. define la discapacidad como «término genérico que incluye déficits. tanto en su apartado físico como en el contenido. En este contexto. Los conceptos presentes en las líneas del «Diseño web para tod@s» deben encontrarse necesariamente en cualquier desarrollo tecnológico para los nuevos sistemas de acceso a la sociedad de la información. con el fin de lograr la plena accesibilidad universal.

» Factores contextuales: «son los factores que constituyen. La presencia [.p65 15 08/11/2007. en la realización de la actividad.] viene determinada por la comparación de la participación de esa persona con la participación esperable de una persona sin discapacidad en esa cultura o sociedad. las demás personas con las que se establecen o asumen diferentes relaciones o papeles.... Entre ellos se incluyen aspectos tales como que el ambiente físico sea accesible. cuando están presentes o ausentes..] Abarca desde una desviación leve hasta una grave en términos de cantidad o calidad. las actitudes y valores.]. conjuntamente. Los facilitadores pueden prevenir que un déficit o limitación en la actividad se convierta en una restricción en la participación. el contexto completo de la vida de un individuo. Los factores contextuales tienen dos componentes: factores ambientales y factores personales.» Limitaciones en la actividad: «son las dificultades que un individuo puede tener para realizar actividades.. y en concreto el trasfondo sobre el que se clasifican los estados de salud en la CIF. [. puesto que contribuyen a mejorar el rendimiento 15 diseño para todos.. y las reglas y leyes. y como tal afecta el funcionamiento de esa persona.. experiencias vitales.» Restricciones en la participación: «son los problemas que puede experimentar un individuo para implicarse en situaciones vitales..... el mundo físico creado por el hombre. el nivel social. la desviación respecto a la media de la población obtenida a partir de normas de evaluación estandarizadas) y sólo debe usarse en este sentido.» Factores Ambientales: «[.] Incluyen al mundo físico natural con todas sus características. el sexo. mejoran el funcionamiento y reducen la discapacidad. 12:17 .» Factores Personales: «son los factores contextuales que tienen que ver con el individuo como la edad..(por ejemplo. [. los servicios y sistemas sociales y políticos.» Facilitadores: «son todos aquellos factores en el entorno de una persona que. etc.] se refieren a todos los aspectos del mundo extrínseco o externo que forman el contexto de la vida de un individuo. la disponibilidad de tecnología asistencial adecuada [. extensión o intensidad en que se espera que la realizaría una persona sin esa condición de salud. comparándola con la manera.

en suma. 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 limitación en la actividad o interpone barreras que restrinjan el funcionamiento. las actitudes y valores. 16 diseño para todos. consecuencia de una deficiencia o de una discapacidad. fisiológica o anatómica. los servicios y sistemas sociales y políticos. el mundo físico creado por el hombre. limitan el funcionamiento y generan discapacidad. Discapacidades y Minusvalías (CIDDM) del año 1980.» Esta clasificación parte de un enfoque sustancialmente diferente del que mantenía su predecesora. con independencia del problema que tenga la persona respecto a la capacidad para llevar a cabo dicha acción. no es el individuo el que debe adaptarse. han de estar preparados para un acceso universal. sino que el medio físico natural. el cambio conceptual entre una y otra clasificación es muy importante. a los estándares de la población general. Desde esta perspectiva. sexo y factores sociales y culturales). la discapacidad y la minusvalía).» • Como podemos observar. cuando están presentes o ausentes.p65 16 08/11/2007.» Barreras: «son todos aquellos factores en el entorno de una persona que. la Clasificación Internacional de Deficiencias.» Discapacidad: «toda restricción 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.» Minusvalía: «una situación desventajosa para un individuo determinado. y las reglas y leyes.real al llevar a cabo una acción. si no quiere quedarse al margen de la sociedad. que limita o impide el desempeño de un rol que es normal en su caso (en función de la edad. las demás personas con las que se establecen o asumen diferentes relaciones o papeles. 12:17 . el contexto. que definía los términos básicos del siguiente tenor: Deficiencia: «toda pérdida o anormalidad de una estructura o función psicológica. Si en la del año 1980 el problema se centraba en el individuo (que era quien «padecía» la deficiencia.

En este contexto. Las personas con dificultades motrices en sus miembros superiores necesitarán dispositivos alternativos o adaptados y las personas con limitaciones intelectuales tendrán que disponer de software y contenidos que se adecuen a sus características.p65 17 08/11/2007. Pero todo ello debe cumplir unos estándares que aseguren. la compatibilidad de formatos de forma que la información sea realmente comunicable. 17 diseño para todos. los cuales se convierten en barreras que impiden la accesibilidad a los medios de los que ésta se dota. por otra. las personas con discapacidad presentan una serie de limitaciones para el acceso a los estándares normalizados de la Sociedad de la Información y la Comunicación. las personas que carecen de visión no podrán acceder a los contenidos visuales sin tecnologías supletorias y aquellas con visión escasa precisarán tecnologías complementarias y de apoyo. Cada uno de nosotros goza de unas capacidades concretas y puede o no realizar determinadas actividades. por una parte. 12:17 .Discapacidad y accesibilidad a las tecnologías digitales La diversidad funcional en el ser humano es enorme. Así. que la accesibilidad es real y. lo cual es el fundamento de la Sociedad de la Comunicación y la Información. sino también siguiendo cauces alternativos de funcionalidad. las personas con déficit auditivo tendrán que ver compensada la privación en el acceso a los medios y contenidos sonoros mediante dispositivos y opciones alternativas. no sólo según el modo habitual de llevarlas a cabo por la generalidad de la población.

12:17 .18 diseño para todos.p65 18 08/11/2007.

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 tecnologías digitales. manejar nuestros datos bancarios o realizar algunos trámites legales o administrativos. motoras. Hoy día las tecnologías digitales nos permiten sacar una entrada para el cine. que cada vez van siendo mayores y más complejos. Podemos englobar en tres grandes líneas las principales dificultades que encuentran las personas con discapacidad en su relación con las tecnologías digitales: – Posibilidad de manejo o acceso a los elementos físicos que nos proporcionan las tecnologías digitales. botones y otros elementos estructurales que deben adecuarse a pautas de Diseño web para tod@s con el fin de lograr su accesibilidad. auditivas o cognitivas) no es suficiente que existan en el mercado elementos físicos de acceso a las prestaciones que nos proporcionan las tecnologías digitales.p65 19 08/11/2007. ni que éstas estén repletas de información y servicios.Problemas de accesibilidad Para algunas personas con limitaciones funcionales (visuales. Las deficiencias de cada persona hacen que las dificultades y necesidades sean muy variadas. 19 diseño para todos. Es necesario además que tanto el elemento físico como el lógico (hardware y software) sean accesibles en su manejo y en el contenido que ofrecen. ordenadores. barras de navegación. – Posibilidad de acceder a los contenidos que nos presentan los terminales. cajeros automáticos o la televisión digital. – Posibilidad de efectuar una interacción con las interfaces presentes en cada medio. Las interfaces suelen estar compuestas de menús. entre los cuales podemos citar teléfonos. Por ello. 12:17 . Se trata de los conocidos como terminales.

p65 20 08/11/2007. hay mucha diferencia entre modelos. debido principalmente a que no han sido diseñados en base a los principios de accesibilidad universal. ¿Qué ocurre si una persona con discapacidad física no puede marcar las teclas de un teléfono móvil debido a su diseño? ¿Podrá establecer una comunicación? ¿Podrá acceder a internet a través de él? Hay una variedad muy grande de terminales. Vamos a hacer un repaso escueto de los problemas de accesibilidad que se presentan para algunas personas con discapacidad. si bien la tendencia es a reducirlos y acceder a todos los servicios a través de unos pocos. Protocolo de Aplicación de Telefonía Inalámbrica) resulta más complejo en su manejo debido principalmente a que incorpora un mayor número de opciones que uno con sistema GPS (Global Possitioning System. El terminal que lleva tecnología WAP (Wireless Application Protocol. principalmente el teléfono móvil. Los llamados de tercera generación o UMTS (Universal Mobile Telecommunications System. Teléfonos móviles Desde los primeros teléfonos móviles hasta ahora se ha producido una significativa evolución. el ordenador y muy pronto nuestra pantalla de televisión digital. Sistema de Posicionamiento Global). las reducidas dimensiones de los botones que permiten su manejo. Hoy día. por consiguiente. los primeros terminales eran mucho más accesibles que ahora. Paradójicamente. 12:17 .Problemas de acceso Terminales de acceso Acceder a las tecnologías digitales a través de los terminales de acceso supone el primer gran problema para gran número de personas con limitaciones funcionales. cada vez más pequeño y. El mayor problema en los terminales que usan tecnología GSM y WAP lo constituye su tamaño. debido principalmente al tamaño de las teclas. La imposibilidad o dificultad en el manejo de los terminales supone dejar fuera de los servicios prestados por las tecnologías digitales a un porcentaje de la población. tanto en sus funciones como en su diseño. dependiendo de la tecnología incorporada al móvil. Sistema Universal de Telecomunicaciones Móviles) cambian completamente en el manejo de la interfaz al diseñarse con pantallas táctiles. De este 20 diseño para todos.

modo, las personas con deficiencias físicas 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 reducción del tamaño del terminal hace que las dimensiones de la pantalla también sean menores, el texto que aparece es pequeño y, para las personas con dificultad en la visión, 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 difícil y limitado el control de voz y del timbre. Con la introducción de la tecnología UMTS probablemente algunos de estos problemas puedan solucionarse, si los fabricantes incorporan la posibilidad de modificar tipo y tamaños de los caracteres que aparecen en pantalla. Aspecto éste importante si funcionan con pantallas táctiles, para que pueda facilitarse su manejo si se tiene falta de precisión o problemas de destreza. Actualmente, existen terminales que hacen uso del reconocimiento de voz. Pero su tecnología está aún por depurar, tanto en su funcionamiento como en su diseño. En cualquier caso, es necesario incorporar los parámetros de diseño universal en su fabricación si queremos que todas las personas con discapacidad puedan hacer uso de todos los servicios que van a ofrecer.

Teléfonos fijos
Un caso muy distinto lo constituyen los teléfonos fijos, que incluimos en este apartado de tecnologías digitales al incorporar cada vez más funciones que dan acceso a los servicios que nos proporcionan las mismas. Existen multitud de modelos fabricados por las diversas compañías presentes en el sector. A diferencia de los móviles, son terminales más grandes y con mayor facilidad para su manejo por todas las personas con problemas visuales, auditivos o de destreza o limitación física. Se fabrican desde hace tiempo terminales con teclados de diversos tamaños y con otras características que facilitan su uso, como son amplificadores, sistemas de avisos luminosos o reconocimiento de voz. También podemos encontrar teléfonos que funcionan en modo texto, que mediante un sistema especial hace que personas sordas puedan establecer comunicación entre ellas. 21

diseño para todos.p65

21

08/11/2007, 12:17

En este campo, está desarrollada prácticamente cualquier tipo de solución para cualquier necesidad. Sin embargo, al no comercializarse para el gran público, quien desee acceder a ellas debe pagar un precio muy superior al resto de terminales.

Cajeros automáticos y quioscos virtuales
Sin duda, los cajeros automáticos y quioscos virtuales se pueden incluir dentro de los terminales que dan acceso a servicios mediante tecnologías digitales, al incorporar cada vez más opciones de este tipo. Nacidos con el objeto de dar opción al usuario de extraer dinero de su cuenta bancaria de forma autónoma, su evolución los ha convertido en verdaderos centros de servicios desde los que podemos gestionar nuestras cuentas corrientes, recargar un móvil, comprar entradas para espectáculos o pagar impuestos. Su manejo se produce a través de una botonera o teclado, e incluso incorporan una pantalla táctil. Para la mayoría de las personas ofrecen un servicio útil, sin embargo, para gran número de personas discapacitadas su uso es verdaderamente difícil. Su colocación 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 navegación suelen ser sencillos a base de menús, 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 difíciles para personas con visión reducida. Conforme los cajeros o quioscos virtuales ofrecen más servicios, las interfaces tienden a complicarse. Se debería tener especial cuidado en su diseño, ya que una excesiva complejidad podría dificultar su manejo a personas con problemas de aprendizaje.

Tarjetas con banda magnética o chip
El elemento físico que nos sirve para «entrar en conexión» con el cajero o quiosco virtual lo constituyen las tarjetas de crédito. En ellas se incorporan 22

diseño para todos.p65

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 características incorpora en sí misma, sin embargo, serios problemas de accesibilidad. Al tener que ser manejadas normalmente en una sola posición o dirección, su uso resulta muy complejo en personas invidentes o con muy baja visión en el momento de tener que introducirla en la ranura de acceso, ya que éstas no están estandarizadas y para orientar al usuario se utilizan gráficos o imágenes visuales. No todas las tarjetas de crédito tienen la numeración resaltada, lo que orientaría a usuarios invidentes. Sería conveniente que pudieran incorporar signos en braille, pero hasta el momento esta opción no se contempla en su diseño. De modo similar, las personas con limitaciones funcionales, que están afectadas de problemas severos de movilidad y con problemas de destreza para manejar objetos pequeños y de precisión, encuentran dificultades para introducir las tarjetas en las ranuras de los cajeros o quioscos virtuales. El diseño estructural de estos elementos sólo posee una opción de funcionamiento, a través de la inserción de la tarjeta. Para contemplar una accesibilidad universal debieran observarse diversas formas alternativas de conexión, como la lectura de su banda magnética 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 podían pensar que se convertirían en herramientas esenciales en nuestras vidas. Hoy por hoy, no existe ningún otro terminal que nos proporcione mayor número de servicios y recursos a través del software que incorpora, desde usar un mero programa de tratamiento de textos hasta realizar complejas bases de datos y cálculos financieros. Y con la incorporación de internet se han convertido en el elemento emblemático de acceso a la sociedad de la información. Paradójicamente, igual que ocurría con los teléfonos móviles, su accesibilidad era mucho mayor en sus inicios que actualmente. Teclados más simples y pantallas monocromas por obligación hacían de él un elemento muy útil para personas con discapacidad. Al mismo tiempo, el software 23

diseño para todos.p65

23

08/11/2007, 12:17

que incorporaban, de interfaces mucho más sencillas y menús más grandes, con mucha menos carga gráfica, los hacían relativamente más accesibles que ahora. Hoy en día son múltiples los problemas de accesibilidad que presentan. Si bien es cierto que su tamaño puede ser más grande que los diseños comercializados, también su coste aumenta si queremos salirnos de los patrones estándares. Las personas invidentes encuentran su mayor problema en la tendencia a presentar la información en forma eminentemente visual. Un lector de pantalla realiza la función de ofrecer información oral de todos aquellos elementos que aparecen en la pantalla, bien sean elementos para interactuar (botones o hiperenlaces) o del mismo contenido. En el diseño de los contenidos no suele tenerse en cuenta que el acceso se puede realizar a través de lectores de pantalla que sólo pueden leer correctamente si aquellos están estructurados de forma correcta. Para muchas personas con escasa visión, 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 discriminación (aunque ésta sea económica y no por discapacidad), ya que a igual servicio el coste es mayor para quien tiene una limitación funcional. Si bien es cierto que a través de opciones de software para aumentar el tamaño de las letras se puede efectuar una lectura mejor, esta práctica es muy dificultosa en monitores de 15 o 17 pulgadas, que son las más 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 incorporación a los sistemas operativos más usuales de la opción «Showsound», que proporciona información 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 además presentan un problema físico que les dificulta el manejo del teclado, también encuentran serias dificultades al manejar los programas y terminales de reconocimiento de voz. En el caso de personas con discapacidad física que impide una destreza adecuada o movimientos de manos y miembros superiores, un teclado puede resultar un elemento inservible, de igual modo que un ratón con24

diseño para todos.p65

24

08/11/2007, 12:17

Para solucionar estos problemas existen dispositivos específicos de entrada de información muy variados. Para ello es necesario que las programaciones se subtitulen o se incluya la imagen de un intérprete de lengua de signos. para las personas mayores y con baja visibilidad los símbolos. al igual que ocurre con la subtitulación. además. entre los que podemos encontrar muchos de los ofrecidos por nuestros ordenadores mediante el acceso a internet. aspecto éste que aún hoy en día se utiliza muy poco pese a ser técnicamente posible. 25 diseño para todos. a las personas invidentes les resulta imposible acceder a las imágenes. Éste suele tener las teclas excesivamente pequeñas para las personas con dificultad en la movilidad o con falta de fuerza. En segundo lugar. seguir la programación mediante técnicas de audiodescripción que van narrando todo lo que sucede en la pantalla. la forma de manejo de la televisión se realiza a través del mando a distancia. numeración y letras de las teclas suelen tener escaso contraste. ratones más grandes de diseño trackball. Aunque su tecnología sólo ha permitido hasta ahora una transmisión unidireccional de información. Y en tercer lugar. su implantación es muy escasa todavía. joysticks o punteros diseñados para funcionar a través de sensores. sin posibilidad de que el usuario interactuara sobre ella salvo para cambiar de canal. que abarcan desde el ya mencionado sistema de reconocimiento de voz. en cambio.vencional. Sí pueden.p65 25 08/11/2007. Nos encontramos tres problemas esenciales en la accesibilidad de la televisión: El primero lo sufren las personas con discapacidad auditiva que no pueden recibir los sonidos emitidos por la televisión. Televisión La televisión ha sido durante años el terminal de acceso por excelencia a la sociedad de comunicación de masas en formato audiovisual. 12:17 . lo que dificulta su lectura. La televisión digital nos abre camino a un mundo de servicios completamente nuevo. la nueva televisión digital da un vuelco completo al concepto de televisión tradicional. No obstante.

de forma que en sus teclas se puedan encontrar 26 diseño para todos. siempre ha estado prohibida para las personas con discapacidad auditiva. Para muchas personas con movilidad reducida o falta de destreza. Su diseño puede ser muy variado y de diferente complejidad. teléfonos fijos y móviles. Elementos de los terminales de acceso Para interactuar con los terminales vistos anteriormente existen diversos y múltiples aparatos que nos sirven para introducir la información que se debe procesar. puede ser alfanumérico y extenso para los ordenadores. salvando las distancias. no obstante también son usados en otros terminales ya vistos. con teclas que agrupan varios caracteres o ilustrados mediante símbolos. que ofrecerán la presentación a través de una pantalla del texto que se emita desde la cadena de radio. los teclados suponen verdaderas barreras. si está implementado. podemos encontrar teclados en ordenadores. como los cajeros automáticos o quioscos virtuales. 12:17 . a la TV digital.p65 26 08/11/2007. simplemente numérico. Las personas invidentes tienen la posibilidad. Recientemente se están implantando tecnologías digitales de radio digital que ofrecerán múltiples servicios. Así. de modo parecido. De igual modo lo suponen para las personas invidentes. Cada uno de ellos tiene sus propias particularidades y sus propios problemas de accesibilidad que se describen a continuación en grandes líneas. Teclados Usados principalmente como elemento de acceso al ordenador. cuando las teclas no van acompañadas de su dibujo en braille o resaltado. primer aparato real de comunicación masiva de información a través de ondas sonoras. cajeros y mandos a distancia. Para este último supuesto.Radio La radio que conocemos. el teclado debe ser de mayores dimensiones. de seguir la programación televisiva a través de aparatos de radio y frecuencias especiales que sintonizan con las frecuencias televisivas.

incluidos los trackballs.1 ópticos o placas táctiles. 1. 12:17 . Los trackballs son ratones que llevan la bola encima. El ratón debe ser configurable al menos para poder cambiar el tamaño del puntero y su color. si no llevan incorporados los símbolos en braille resultan de muy difícil manejo en personas invidentes. Las letras. distribuidos simétricamente en la mayoría de los casos. Son similares a los que llevan algunos mandos a distancia de vídeos. También. Los ratones incorporados de serie en ordenadores portátiles (placas táctiles) requieren demasiada precisión en un espacio muy reducido. Presentan los mismos problemas de accesibilidad que los ya comentados para personas con escasa movilidad o destreza. cuyo contraste sea accesible a personas con visión reducida. al ser a veces difícil seleccionar con la debida precisión las opciones. son usados en esencia para interactuar con el ordenador. 27 diseño para todos. lo que facilita su uso para muchas personas.p65 27 08/11/2007. Jogs Consisten en una plataforma que incorpora cuatro botones. Los ratones estándares suelen ser difíciles de manejar para personas con escasa destreza o una mínima fuerza para realizar el movimiento de arrastre del puntero y precisión para «pinchar» en una zona pequeña. al igual que los teclados. Pueden ser manejados incluso con las muñecas o la palma de la mano y suelen ser de un tamaño superior a los ratones convencionales.dichos caracteres. y cumplen la función de moverse en las cuatro direcciones a través de menús en pantalla. por lo que resultan impracticables para gran número de personas. números y símbolos de cada tecla deben estar lo suficientemente definidos y diseñados en colores. aspecto esencial para personas de baja visión o daltónicas. DVD y mandos a distancia. en todas sus variantes. Ratones Los ratones. entre las que se encuentran muchas personas mayores.

Este micrófono también es usado para hablar por teléfono a través de internet y en los sistemas de reconocimiento de voz. Estos elementos. sirven. sensibles al contacto de la mano o de los dedos para interactuar con los elementos 28 diseño para todos. entre otras funciones. bien encima o a los lados. por ejemplo. debido a que no consiguen corregir las tonalidades y defectos del hablante para manejar un sistema de reconocimiento de voz. por ejemplo. las cuales presentan los mismos problemas de accesibilidad que en los ratones. Asimismo. Igual ocurre con personas mayores que tienen enfermedades como el Parkinson.Ruedas Con el tiempo. Las personas mudas no pueden hacer uso de ellos. Suelen ser de reducido tamaño y requieren el movimiento de los dedos de la mano y una cierta precisión. debido al temblor de manos que éste produce. Pantallas táctiles Con la evolución de la tecnología. los teléfonos también llevan un micrófono incorporado. como lesiones físicas graves. 12:17 . De igual modo. carecen de utilidad para otras muchas. insertadas en el cuerpo del ratón. los ratones han ido incorporando más botones y otros accesorios adicionales como. nos encontramos con que desde hace un tiempo se han empezado a utilizar las llamadas pantallas táctiles. unas pequeñas ruedas o piezas giratorias que. a las personas con determinadas deficiencias mentales que limiten la concentración o fijación les resulta difícil su uso. Micrófonos Con la introducción de sistemas operativos y software gráfico y multimedia. para navegar y moverse verticalmente por las páginas web. como tampoco aquellas que sin ser mudas tienen problemas en el habla.p65 28 08/11/2007. muy útiles para determinadas deficiencias. se ha empezado a ver como habitual el micrófono para ordenadores. por lo que a personas que carecen de destreza o sufren limitación grave de movimientos en los miembros superiores no les resulta practicable. Estas pequeñas ruedas también se han empezado a incluir en teléfonos móviles que usan tecnología WAP o UMTS.

desde escasas pulgadas en teléfonos móviles hasta más de cincuenta en las nuevas televisiones de plasma.p65 29 08/11/2007. elementos necesarios para que el individuo 29 diseño para todos. cajeros automáticos y otros. En general. Hoy en día. hoy las podemos encontrar también en los ordenadores y en los asistentes digitales personales (PDA). 12:17 . todas presentan contenido multimedia. PDA. podrá ser leído por lectores de pantalla. Mediante un sencillo contacto táctil podemos seleccionar menús. resultan poco accesibles a personas con escaso nivel de visión. En estos últimos se maneja utilizando un pequeño y fino punzón que al contacto con los elementos de la pantalla va seleccionando contenidos. ni por personas con discapacidad física severa y falta de destreza. información y navegar por el contenido. se deberá tener especial cuidado con los niveles de refresco de pantalla para evitar producirles crisis debidas a la frecuencia de parpadeo. las reducidas dimensiones de la pantalla constituyen una barrera casi siempre infranqueable en personas con visión reducida. No pueden ser usados por personas mayores con ciertas deficiencias. En determinadas discapacidades. salvo en aquellas de muchas pulgadas. la televisión. ya que necesitan una visualización clara mediante iconos bien definidos e intuitivos. El contenido que se nos presenta en la pantalla si está realizado de acuerdo a las normas adecuadas. teléfonos móviles.que se nos presentan en dicha pantalla. Inicialmente presentes en los quioscos virtuales. existen multitud de tamaños. presente en ordenadores. En ambos casos se presentan los mismos problemas de accesibilidad que estamos viendo sucesivamente. Dependiendo del elemento al que correspondan. Interfaz hombre-máquina Lo visto hasta ahora constituye los elementos físicos que posibilitan la entrada y salida de información. Lo mismo les ocurre a las personas con determinadas deficiencias cognitivas. con la evolución de la tecnología y el software utilizados. Pantallas El dispositivo de salida más utilizado es la pantalla. En el caso de los PDA. como es el caso de la epilepsia.

y no se presenta una forma alternativa (por ejemplo. Lo que se nos presenta en los terminales de salida lo constituye la llamada interfaz. la interfaz suele tener sus propios problemas de accesibilidad por la carencia de diseño universal.pueda interactuar con los terminales. Si al diseñarla sólo lo hacemos para poder ser manejada por medio de un ratón. Al igual que los elementos y terminales físicos de entrada y salida de información. alt+control). Lógicamente. sea del tipo que sea. botones interactivos. En su diseño es muy importante. 12:17 . asimismo. habrá muchas personas con deficiencias en la visión y con problemas de movilidad y destreza que encontrarán prácticamente imposible su uso. Cuando la interfaz es realizada para que en determinados momentos o selecciones sea necesaria la pulsación de varias teclas al mismo tiempo (por ejemplo. si pensamos en desarrollar únicamente la interfaz en modo gráfico plasmada en la pantalla. sin contemplar elementos sonoros o auditivos que la describan en cada opción. ya que no podrán utilizar elementos como el lector de pantalla o un dispositivo de salida en braille (denominado «línea braille»). debido a que personas con problemas en el reconocimiento de colores. Es fundamental un estudio adecuado de los colores que nos va a presentar la interfaz. 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. que no es sino el software o programas necesarios para dirigir.p65 30 08/11/2007. las personas invidentes tampoco tendrán acceso a ella. controlar y gestionar todo el conjunto de terminales y sus elementos adicionales. la pulsación secuencial). datos e información que interrelacionados entre ellos y con combinaciones adecuadas dan el acceso a las opciones. el rellenado de campos que se nos soliciten y los formularios de peticiones han de ser aplicados de forma que 30 diseño para todos. las personas con problemas de destreza y de coordinación no podrán realizarla en muchos momentos. selecciones y servicios que se nos proporcionan. Las solicitudes de información. Estos programas suelen presentar en la pantalla una serie de menús. contemplar diversas formas de interactuar con los elementos presentes en la interfaz. pueden tener dificultad para diferenciarlos. Sería en este caso necesario diseñar atajos o dejar abierta la posibilidad de poder configurar funciones para las teclas. como las daltónicas.

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 problemático mantener una concentración adecuada en formularios complejos o largos. Los campos activos a rellenar deberán ser, además, fácilmente localizables y visibles. La navegación y el movimiento por la interfaz deben ser sencillos, intuitivos y diseñados con pautas lógicas. Para ello, el usuario deberá ser capaz, incluso aquel con problemas de fijación y aprendizaje, de saber dónde se encuentra en cada momento y tener siempre la opción claramente visible de volver al principio o ser capaz de finalizar la utilización de un programa o cerrar la sesión de trabajo con la interfaz.

Contenidos
Superados los problemas relativos a las barreras físicas de acceso de entrada y salida de información y las problemáticas que puede presentar un deficiente diseño de la interfaz, llegamos a los contenidos almacenados, principalmente los que se presentan a través de internet. Si tampoco contemplamos los estándares de accesibilidad, éstos serán inaccesibles para muchas personas. Cuando estructuramos y ponemos el contenido de la información 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 gráfico, las personas invidentes que utilicen lectores de pantalla encontrarán que les es imposible acceder a esa información. Si incluimos archivos de audio sin alternativa, aquellas personas que tengan una deficiencia auditiva severa o total no obtendrán información. Es necesario proporcionar una versión alternativa mediante la audiodescripción o el subtitulado, simultáneamente, mientras dura la presentación de los contenidos. Problema idéntico se plantea cuando utilizamos o incorporamos archivos o películas de vídeo y no utilizamos las opciones del subtitulado y la audiodescripción. La presentación de la información debe estar, necesariamente, bien estudiada y seguir una estructura lógica y coherente. Debemos ser conscientes de que existen muchas personas con problemas de aprendizaje, 31

diseño para todos.p65

31

08/11/2007, 12:17

de concentración o de dispersión mental a las cuales les resultará inaccesible una presentación de la información irregular o anárquica. Es muy conveniente que toda información textual esté acompañada o complementada mediante algún gráfico, fotografía o iconos gráficos e intuitivos, complementarios del texto, de forma que su lectura no se vuelva monótona y dificulte la comprensión 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 información de carácter general y que tiene como destinataria a toda la población, se debe utilizar un lenguaje claro y evitar, en la medida de lo posible, giros y terminología compleja para evitar la inaccesibilidad de la información a personas con dificultades e incluso con escasa formación.

Ordenadores e internet
El ordenador, como principal elemento de acceso a la información, a las tecnologías digitales y a la Sociedad de la Información a través de internet, merece un apartado especial. Aun cuando la telefonía de tercera generación ya nos permite también el acceso a la Sociedad de la Información y conectarnos a la web y a nuestro correo electrónico, la potencialidad y prestaciones del ordenador, unido a la utilización de pantallas con mucha mayor dimensión, lo siguen haciendo el primer e imprescindible terminal en el acceso a las tecnologías. Desde que hace unos años los ordenadores empezaron a incorporar el módem para conectarse a internet, el ordenador se ha convertido en una potente estación de trabajo que nos abre las puertas a innumerables posibilidades a través de este servicio. Hoy en día, 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 teleformación e incluso trabajar desde casa a través del teletrabajo. Es decir, sin desplazarnos de nuestra habitación podemos tener salida al mundo exterior con múltiples posibilidades de actuación. Pero el aspecto más importante es que podemos acceder a información, formación y comunicación con otras personas. 32

diseño para todos.p65

32

08/11/2007, 12:17

Por ello, resulta tremendamente importante que tanto los medios físicos de manejo y la forma de interactuar con el ordenador, así como la información 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 Información, haciéndose realidad la infoexclusión. Anteriormente hemos repasado, en líneas 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 más costoso ni más difícil. Asimismo, diseñar contenidos accesibles según los parámetros estandarizados, tanto para sitios web como para los programas informáticos, tiene que suponer que sean menos atractivos o menos vistosos. La accesibilidad no está reñida con la elegancia en el diseño. Debemos perseguir que las herramientas que se usan normalmente para el desarrollo de espacios web tengan la posibilidad de generar sitios accesibles, y que además la interfaz del mismo programa sea accesible para ser usada por personas con limitaciones funcionales. Lo mismo podemos decir de los programas de creación o de autor y de aquellos que nos ayudan a realizar tareas ofimáticas.

33

diseño para todos.p65

33

08/11/2007, 12:17

34

diseño para todos.p65

34

08/11/2007, 12:17

con un sitio web más eficaz y eficiente.Accesibilidad en la web El poder de la web reside en su universalidad. ya que ambas mejoran la satisfacción. TIM B ERNERS-LEE Director e inventor de la Red Mundial Web (World Wide Web) Para que un sitio web sea accesible. la efectividad y la eficiencia. puede ser navegado cumpliendo criterios de usabilidad. 35 diseño para todos.p65 35 08/11/2007. Un sitio web accesible: 1. Pero mientras la accesibilidad está dirigida a hacer un sitio web abierto al más amplio número de usuarios. incluso en situaciones de atención dificultosa. 2. la usabilidad se dirige a conseguir el objetivo de satisfacer más a los usuarios. 3. 12:17 . El acceso para todo el mundo. su contenido debe estar disponible para todo el mundo. 4. Un sitio web accesible asegura: Una transformación sin problemas: la información y los servicios deben ser accesibles a pesar de las limitaciones físicas. es un aspecto esencial. a pesar de la discapacidad. incluidas las personas con discapacidad. puede ser comprendido fácilmente. La accesibilidad y la usabilidad están íntimamente relacionadas. sensoriales o cognitivas de los usuarios y de las restricciones o barreras tecnológicas. puede ser utilizado con el teclado o con otros dispositivos además del ratón. 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 páginas. puede ser percibido por todos.

p65 36 08/11/2007. En la imagen 1 podemos ver. títulos y etiquetas. A estos usuarios se les puede considerar también temporalmente personas con discapacidad. de forma gráfica y esquematizada. Además. el proceso que supone la creación de contenido web desde el momento en que un autor tiene la idea de realizar una página web hasta que ésta llega a los distintos usua36 diseño para todos. Google (por nombrar una de las más conocidas) puede aprovecharse plenamente de un sitio que es accesible e indexar sus páginas con todas las palabras que encuentra. 4. imágenes. Las tecnologías digitales requieren sitios diseñados para ser accesibles por diferentes dispositivos (por ejemplo: usuarios de pequeñas pantallas en blanco y negro en sus teléfonos móviles. 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. aquellos que usan la navegación por voz en navegadores de coches o los que escuchan un navegador parlante a través de la línea telefónica). Hay unos usuarios muy importantes que encuentran dificultades para usar un sitio si éste no es accesible: son las llamadas máquinas de búsqueda. 3. Google puede activar todos los vínculos de un sitio y escanear. Los diseñadores web están cambiando su atención hacia la creación de sitios web que sean accesibles para las personas con discapacidad naveguen sin dificultad. Los diseñadores web están obligados a cumplir con la normativa sobre accesibilidad.La accesibilidad en la web es importante La accesibilidad se hace cada vez más importante porque: 1. movidos tanto por razones humanitarias como por razones comerciales. especialmente en los vínculos. 2. Un sitio web que no sea accesible tiene muchas menos palabras que pueden ser usadas y muchos más vínculos no accesibles que no pueden ser seguidos. por tanto. 12:17 . todas sus páginas.

p65 37 08/11/2007. de las páginas web. 12:17 . En este esquema de elementos que intervienen en el proceso de elaboración de páginas web accesibles podemos distinguir distintas etapas o momentos. De la redacción de estas «recomendaciones» se ha encargado el Consorcio Mundial de la Web (World Wide Web Consortium). Elementos de accesibilidad a las páginas web. 37 diseño para todos.rios. teniendo siempre en cuenta los aspectos esenciales que han de tenerse en consideración para que sea un «diseño para tod@s». a través del grupo de trabajo Iniciativa de Accesibilidad en la Web (Web Accessibility Initiative) y bajo las siglas WAI. Las aplicaciones con las que un usuario accede a los contenidos y mediante las cuales puede navegarlos. Así podemos hablar de reglas para: Las herramientas con las que cuenta un autor para crear y dar forma al contenido de la web. Para cada una de estas vertientes de la accesibilidad en la web se han redactado unas «pautas» que sirvan de guía y referencia para desarrollar de forma accesible los contenidos en la web y poder hacer uso de ellos por parte de todos los usuarios. en cuanto a su estructura y maquetación. Los contenidos. que determinan la existencia de unas reglas a tener en cuenta para conseguir dicho propósito. conocido mundialmente por las siglas W3C. propiamente dichos. Imagen 1.

3. internacional e independiente que aglutina a organizaciones gubernamentales. Para más información. En cada uno de ellos se desarrollan distintos proyectos mediante grupos de trabajo. 2.w3c. diseñar tecnologías que lo hagan posible y estandarizar mediante la redacción de recomendaciones de aplicación general para todos.p65 38 08/11/2007. El objetivo que persigue es conseguir un acceso universal al servicio de la web. 5. Arquitectura. no gubernamentales e industrias. Accesibilidad.html.org/Consortium/ Overview. Para el objeto de este documento nos interesa el referido en cuarto lugar (sin que ello suponga exclusión de las repercusiones que suponen los trabajos realizados en los otros campos sobre la accesibilidad de un sitio web).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. Interacción. Proporciona un foro de discusión y sirve como elemento de 38 diseño para todos. 4. en castellano: http://www. Garantía de calidad. Para conseguir este objetivo se desarrollan tareas como identificar los requerimientos que son precisos. dentro de un entorno de software versátil y con respeto a la legalidad establecida. Tecnología y sociedad.El Consorcio Mundial de la Web (W3C) W3C es un consorcio industrial. para fomentar su universalidad. 12:17 .w3. cuya finalidad es propiciar un debate permanente sobre las necesidades y soluciones de accesibilidad en la web. cuya finalidad es promover la evolución e interoperatividad de la web. Las actividades que lleva a cabo se encuadran en cinco campos: 1. en inglés: http://www.

persigue la accesibilidad en la web a través de cinco áreas de trabajo: 1. Para cada una de estas vertientes.0 (Authoring Tool Accessibility Guidelines 1. Sarabia y Chuter: http:// www. El resultado lo podemos encontrar en las siguientes direcciones web: Pautas de Accesibilidad al Contenido en la Web 1. Pautas. Para más información sobre WAI y las actividades que desarrolla. para todas las actividades desarrolladas por W3C. Tecnología.p65 39 08/11/2007. en materia de accesibilidad. en colaboración con organizaciones de todo el mundo. Investigación y desarrollo.control. 2. Educación y difusión. • Traducción al castellano de Egea.teleservicios.html. y son tres las que deberemos considerar: contenidos. 5.org/TR/WCAG10/.w3. Herramientas.0): • Texto original en inglés: http://www.0): • Texto original en inglés: http://www.w3. Pautas de Accesibilidad para las Herramientas de Creación 1. herramientas de creación y aplicaciones de usuario.es/accesibilidad/recursos/documentos/index.w3. el grupo WAI ha redactado un documento de Pautas y sus correspondientes documentos anexos sobre técnicas para la aplicación y lista de verificación. se puede consultar la página web: http://www.0 (Web Content Accessibility Guidelines 1.html. WAI.org/TR/ATAG10/. 4. Para el propósito de este trabajo. nos es de particular interés la segunda de estas áreas de trabajo: la de elaboración de pautas para conseguir un diseño accesible de páginas web. 3.org/WAI/about. 12:17 . 39 diseño para todos. Las pautas para la accesibilidad en la web Anteriormente hemos hablado sobre las distintas vertientes de la accesibilidad en la web.

donde se explica la manera de aplicarlas. Por otro lado. 40 diseño para todos. nos pueden servir para verificar si hemos realizado correctamente el trabajo (es decir.0): • Texto original en inglés: http://www.org/ TR/xag. Se las conoce como «lista de verificación».html (en inglés).w3. de forma accesible).w3. Las pautas nos sirven de referencia normativa (no legal.org/TR/UAAG10/ El grupo WAI también ha redactado unas Pautas específicas para los desarrolladores de aplicaciones basadas en XML de cara a que éstas soporten los criterios de accesibilidad. pero sí técnica) y junto a cada una de ellas se provee al desarrollador de un documento técnico.p65 40 08/11/2007.Pautas de Accesibilidad para las Aplicaciones de Usuario (User Agent Accessibility Guidelines 1. 12:17 . Están disponibles en: http://www.

2. de 12 de julio. Igualmente.p65 41 08/11/2007. sería bueno echar un vistazo a cómo se encuentra el marco normativo. 12:17 . de Servicios de la Sociedad de la Información y de Comercio Electrónico. 41 diseño para todos. Tras una etapa de ausencia de una regulación tanto legal como en materia de normas técnicas. se promoverá la adopción de normas de accesibilidad por los prestadores de servicios y los fabricantes de equipos y software. Establece en su disposición adicional quinta sobre «Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos»: 1. para facilitar el acceso de las personas con discapacidad o de edad avanzada a los contenidos digitales. Legislación y otras normas en España LEY 34/2002. Asimismo.Legislación y otras normas en materia de accesibilidad en la web Antes de entrar en materia. los últimos tiempos han venido acompañados de una fructífera cosecha que vamos a reflejar en este apartado. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas 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. podrán exigir que las páginas de internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados. tanto en su vertiente legal como técnica.

En el plazo de dos años desde la entrada en vigor de esta ley. para la formación de profesionales en los campos del diseño y la construcción del entorno físico. las infraestructuras y obras públicas. y en el plazo de ocho a diez años para todos aquellos existentes que sean susceptibles de ajustes razonables. Respecto a los productos y servicios de la Sociedad de la Información la ley establece en su Disposición final séptima sobre «Condiciones básicas de accesibilidad y no discriminación para el acceso y utilización de las tecnologías. el Gobierno deberá realizar los estudios integrales sobre la accesibilidad a dichos bienes o servicios que se consideren más relevantes desde el punto de vista de la no discriminación y accesibilidad universal. que serán obligatorias en el plazo de cuatro a seis años desde la entrada en vigor de esta ley para todos los productos y servicios nuevos. el 42 diseño para todos. productos y servicios relacionados con la sociedad de la información y medios de comunicación social». en el plazo de dos años a partir de la entrada en vigor de esta ley. unas condiciones básicas de accesibilidad y no discriminación para el acceso y utilización de las tecnologías. sobre «Currículo formativo sobre accesibilidad universal y formación de profesionales». en todos los programas educativos. La Ley establece la obligación gradual y progresiva de que todos los entornos. según lo previsto en su artículo 10. en su Disposición final décima. 2. En el plazo de dos años desde la entrada en vigor de esta ley. de Igualdad de Oportunidades. Con el objeto de favorecer la formación en diseño para tod@s. productos y servicios deben ser abiertos. productos y servicios relacionados con la sociedad de la información y de cualquier medio de comunicación social. No Discriminación y Accesibilidad Universal de las Personas con Discapacidad.p65 42 08/11/2007. 12:17 . 1. de 3 de diciembre. desarrollará el currículo formativo en «diseño para tod@s». incluidos los universitarios.Ley 51/2003. la edificación. establece: El Gobierno. accesibles y practicables para todas las personas e impone plazos y calendarios para realización de las adaptaciones necesarias. el Gobierno aprobará.

• Promover la accesibilidad en las tecnologías digitales.0. en su inciso segundo establece: 2. de fecha 25 de julio de 2003. se establecen los siguientes objetivos: • Consolidar el paradigma del Diseño para Todos y su implantación en los nuevos productos. de 21 de febrero. • Conseguir un sistema normativo para la promoción de la accesibilidad completo.p65 43 08/11/2007. • Introducir la accesibilidad como criterio básico de calidad de la gestión pública. en su nivel AA. así como la utilización de medios telemáticos para la sustitución de la aportación de certificados por los ciudadanos. En este documento. de 13 de junio. Difundir el conocimiento y aplicación de la accesibilidad. • Adaptar progresivamente y de forma equilibrada los entornos. 43 diseño para todos. La disposición Séptima. productos y servicios a los criterios de Diseño para Todos. entornos y servicios. 12:17 . Orden 1551/2003. las comunicaciones y telecomunicaciones y los servicios de la sociedad de la información. por el que se regulan los registros y las notificaciones telemáticas. versión 1. por la que se desarrolla la Disposición final primera del Real Decreto 209/2003. El registro telemático y el servicio de notificación telemática deberán 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 Recomendación de 5 de mayo de 1999 sobre Pautas de Accesibilidad del Contenido en la Web. I Plan Nacional de Accesibilidad 2004-2012.transporte. sobre «Protocolos y criterios técnicos de los dispositivos y aplicaciones de registro y notificaciones». eficiente y de elevada aplicación en el territorio.

Este Plan pretende convertir a la Unión Europea en una economía basada en el conocimiento.II Plan de Acción para las personas con discapacidad 2003-2007. Software.Reforma de la legislación en materia de concesión de subvenciones. Hardware. • 341. UNE 139801:2003 .. UNE 139803:2003 .Impulso a la difusión e implantación de las «Directrices de Accesibilidad a las páginas Web de la Administración General del Estado». de fecha 5 de diciembre de 2003. más competitiva y dinámica.. Normas UNE. UNE 139802:2003 .4. ayudas e incentivos públicos para vincular el disfrute de ayudas con la obligación de accesibilidad por parte de los beneficiarios. en el ámbito de las tecnologías digitales y la sociedad de la información. Requisitos de accesibilidad para contenidos en la web. a través de la Asociación Española de Normalización y Certificación AENOR.. se establece. especialmente. El Plan de Acción eEurope 2002 fue aprobado por el Consejo Europeo de Feira en junio de 2000. En España.Inclusión de una cláusula que favorezca la accesibilidad en los pliegos técnicos de los contratos que tengan por objeto la adquisición de bienes. Requisitos de accesibilidad al ordenador. • 341. cuando se trate de bienes y servicios a disposición del público. productos y servicios por parte de las Administraciones Públicas.p65 44 08/11/2007. Otras normas Internacionales Plan de Acción eEurope 2002.Aplicaciones informáticas para personas con discapacidad.2. 12:17 . En este documento.Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad al ordenador. entre otras medidas: • 323.1.Aplicaciones informáticas para personas con discapacidad. se han aprobado y publicado varias normas técnicas que afectan al tema de este módulo. 44 diseño para todos.

Europa deberá contar con: Unos servicios públicos en línea modernos. Para hacer posible todo ello. Disminución del precio del acceso a internet. 45 diseño para todos. para 2005. Se han valorado con principales progresos durante el período de ejecución del Plan de Acción eEurope 2002: La duplicación de la penetración de internet en los hogares. se necesitaría: Un acceso de banda ancha ampliamente disponible y a precios competitivos. La existencia de más servicios de la Administración Pública disponibles en línea.p65 45 08/11/2007. En este Plan se establece que. 12:17 . Un entorno dinámico de negocios electrónicos. Plan de Acción eEurope 2005. Fue lanzado en el Consejo de Europa de Sevilla en junio de 2002. Una infraestructura de información segura. Unos servicios electrónicos de salud. La creación casi completa del marco jurídico del comercio electrónico. con un horizonte puesto en el año 2010. La renovación del marco de las telecomunicaciones. Unos servicios electrónicos de aprendizaje. y aprobado por el Consejo de Ministros europeos en enero de 2003. Este plan de acción es el sucesor del Plan de Acción eEurope 2002.con avances en materia de empleo y de cohesión social. La aparición de una infraestructura de tarjeta inteligente. La adopción y recomendación en los estados miembros de unas directrices sobre accesibilidad de la web. durante la presidencia española de la Unión Europea. Una administración electrónica. La conexión de casi todas las empresas y centros escolares. Que Europa cuente con la red principal de investigación más rápida del mundo.

citamos esta norma de los Estados Unidos.] La Sección 508 exige que cuando las agencias Federales desarrollen.. La aplicación de estas medidas políticas se verá respaldada por el desarrollo. 12:17 . se tendrá una visión de conjunto de la evolución de las políticas y se garantizará un adecuado intercambio de información entre los responsables nacionales y europeos y el sector privado. La Sección 508 también exige que las personas con discapacidad. mantengan. La coordinación global de las políticas existentes generará sinergias entre las acciones propuestas.El plan de acción se estructura en torno a cuatro líneas interrelacionadas: Medidas políticas de revisión y adaptación de la legislación nacional y europea encaminadas a reforzar la competencia y la interoperatividad. el análisis y la difusión de buenas prácticas. por su indudable influencia sobre los productos y servicios que nos llegan desde aquellas tierras.p65 46 08/11/2007.. adquieran. a menos que constituya una carga excesiva impuesta a la agencia. Se pondrán en marcha proyectos que aceleren la implantación de aplicaciones e infraestructuras de vanguardia. La evaluación comparativa de los progresos conseguidos en el logro de los objetivos y de las políticas al servicio de dichos objetivos permitirá efectuar un seguimiento de las medidas políticas y reorientarlas si procede. La Sección 508 del «Acta de los Americanos con Discapacidad» Aunque no tiene una aplicación directa en el ordenamiento jurídico español. que forman parte del público que busca información o ser- 46 diseño para todos. A través de un grupo de dirección. La finalidad y el alcance de esta norma quedan claramente recogidos en el siguiente párrafo de la misma: [. aumentar el grado de sensibilización y hacer gala de iniciativa política. aprobada el 21 de julio de 2001. o usen las tecnologías de la comunicación y la información deben asegurarse de que las mismas permiten a los empleados federales con discapacidad tener acceso a usar la información y datos de manera similar al acceso y uso que tienen los empleados federales sin discapacidad.

la Sección 508 no se ocupa sólo de la accesibilidad de las páginas y aplicaciones web. 12:17 .vicios por parte de una agencia Federal. 47 diseño para todos. también lo hace del software y por tanto de las herramientas de autor y de los navegadores. que son aplicables a todas las agencias federales de Estados Unidos. determina las normas para la creación de páginas y aplicaciones web.p65 47 08/11/2007.22 «Web-based intranet and internet information and applications» (Información y aplicaciones de intranet e internet basadas en la web). tengan acceso y uso de la información y datos de manera comparable a la que se proporciona al público sin discapacidad. Como queda reflejado en sus objetivos. en su apartado 1194. La Sección 508. a menos que ello signifique una carga excesiva impuesta a la agencia.

12:17 .p65 48 08/11/2007.48 diseño para todos.

Para llevar a cabo esta tarea. Las herramientas de creación deben ser accesibles y generar contenido accesible o ayudar al autor para que lo genere. W3C elevó a rango de recomendación la especificación denominada «Pautas de Accesibilidad para las Herra49 diseño para todos.Las herramientas de creación o de autor En la imagen 2 podemos ver cuáles son los elementos de accesibilidad a las páginas web.. tras tener la idea de generar unos contenidos para la web. Como primer escalón de este esquema de elementos nos encontramos al autor que. los tiene que estructurar y maquetar para colocarlos en un servidor. Éste es el primer paso para que el contenido de una web pueda ser accesible para todos.Elementos de accesibilidad a las páginas web. Así pues. la primera preocupación será dotar a estas herramientas de las facultades que propicien que esto sea así. 12:17 . el autor utiliza unas herramientas a las que denominamos herramientas de creación o herramientas de autor (en inglés se conocen como «authoring tools»). Imagen 2.p65 49 08/11/2007. El 3 de febrero del año 2000.

0» (en inglés: «Authoring Tool Accessibility Guidelines 1.mientas de Creación 1. Este nuevo documento recoge lo que considera como cuatro puntos básicos o pautas. 50 diseño para todos. Hacer accesible la interfaz de creación. La creación de contenido accesible depende de las acciones de la herramienta y del autor. 4. Las herramientas de creación deben incluir características que proporcionen apoyo y guía al autor en estas situaciones.w3.0. incluyendo la interfaz de creación. el procedimiento de instalación. de tal manera que las prácticas de creación accesible puedan ser seguidas y el contenido accesible en la web pueda ser producido. Permitir la producción de contenido accesible.org/TR/ATAG20/. 12:17 . Esta pauta requiere que las herramientas de autor tengan que promover prácticas de creación accesible con la herramienta así como integrar sin problemas cualquier función añadida para satisfacer las otras exigencias de este documento. la documentación y los archivos de ayuda. En la actualidad se están revisando estas pautas y ya existe un borrador para una versión 2. La documentación oficial (en inglés) de estas pautas se pueden consultar en la dirección web: http://www. Los requerimientos de accesibilidad son indispensables para crear la interfaz de creación. La primera responsabilidad es apoyar los formatos que proveen contenido accesible. prestando especial consideración al diseño de características específicas de las interfaces de creación. que son: 1. Promover e integrar soluciones accesibles. Apoyar al autor en la producción de contenido accesible.0»). 2. 3. deben ser accesibles.p65 50 08/11/2007. Es más probable que el contenido web producido por una herramienta de creación 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 través de todo el proceso de creación. El diseño de todos los aspectos de la herramienta de creación. Esta pauta delimita las responsabilidades que recaen exclusivamente en la herramienta.

es posible crear páginas web accesibles utilizando FrontPage. Como cualquier otra herramienta. Ello es debido a algunas razones de las que destacamos dos: Su precio es relativamente bajo comparado con el de otros editores. el paquete ofimático más vendido del mercado. a menudo. a veces. A pesar de estos defectos. En ocasiones se trata de programas específicos creados por empresas de diseño y mantenimiento de páginas web.p65 51 08/11/2007. ya que no incluye la declaración del tipo de documento (DOCTYPE). Se integra en el paquete MS Office. En este apartado vamos a ver dos de las herramientas más conocidas y difundidas en el mercado: FrontPage de Microsoft y Dreamweaver de Macromedia. pero la mayoría de los autores suelen usar herramientas comerciales que se ponen a su disposición de forma singular o integradas en paquetes ofimáticos. FrontPage tiene sus debilidades: La plantilla por defecto que usa cuando comienza una nueva página web no cumple con los estándares para los elementos de HTML.Accesibilidad en las herramientas de creación más conocidas Para la creación de contenidos web los autores manejan distintas herramientas. sin necesidad de salir del entorno 51 diseño para todos. tener que realizarse en varios pasos. 12:18 . FrontPage de Microsoft FrontPage es uno de los programas más populares para la edición de código HTML de los disponibles en el mercado. Para cambiar las propiedades de los elementos puede. Algunas características básicas de accesibilidad deben ser aplicadas manualmente.

es decir.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las hojas de estilo). Perl. HTML 4.p65 52 08/11/2007. los elementos y atributos que están disponibles para cada tipo de documento. Muchos desarrolladores de páginas web utilizan lenguajes de guión (en inglés: scripting languages) para crear plantillas. Pero el concepto es el mismo: utilizar plantillas y hacerlas accesibles. se puede reutilizar la misma plantilla para la totalidad de un sitio. existen 3 tipos de DTD: 1. Veamos a continuación cómo proceder con FrontPage para crear páginas web accesibles. mucho mayor que en las plantillas de FrontPage y sus característicos «temas». CAMBIAR LA PLANTILLA POR DEFECTO POR UNA QUE SEA VÁLIDA Uno de los puntos fuertes de FrontPage es la posibilidad de crear plantillas. Para HTML 4. pero agrega cualidades de presentación. Añadir una declaración DOCTYPE utilizando el método abreviado Esta declaración debe ser la primera línea de nuestro documento y es necesaria para decirle al navegador qué versión de HTML es la que se usa en la página.01 transitorio El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict. no cumple con el estándar HTML. Cold Fusion y otros. elementos desapro52 diseño para todos. tales como Java Server Pages. La DTD (definición del tipo de documento) es la estructura reglamentaria. el navegador procesará la página en modo Quirks (modo de compatibilidad). Hay tres cosas que se deben hacer para cambiarla: 1. La página en blanco que muestra por defecto FrontPage al comenzar no tiene una disposición accesible de forma directa. Cuando se crea una plantilla accesible. PHP. 12:18 . Si no se hace.WYSIWYG (del inglés «what you see is what you get» – «lo que ves es cómo quedará»). Estos lenguajes se utilizan por su flexibilidad y capacidad para ser programados. que podría no interpretar correctamente el código de la página.

hace mucho más fácil el paso de nuestros documentos al XHTML. Se llama Transitional porque está pensado como transición hacia HTML 4 estricto.01 Frameset//EN\"> 3. HTML 4. HTML Estricto: Si declaramos este DTD.bados o elementos obsoletos.01 Transitional//EN\"> 2. El modo de definirla es: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.p65 53 08/11/2007. Además. ya que es compatible con el CSS (hojas de estilo en cascada) y puede ser interpretado correctamente por todos los navegadores. Éste es el modo recomendado por el W3C. El modo de definirlo es: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset: Ésta es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos).01. El modo de definirlo es: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN\"> Imagen 3. Declaración DOCTYPE insertada en la vista de código HTML en FrontPage 53 diseño para todos. que en estos momentos ya está sustituyendo al HTML. el navegador pasará a actuar en cumplimiento de los estándares (en inglés: standards compliance). Esto implica que sólo podrán usarse las etiquetas de HTML 4. 12:18 .

54 diseño para todos. Tendremos que asegurarnos de que la plantilla elegida es compatible con el estándar. Hay que abrir este archivo con cualquier editor de texto (podemos utilizar el Block de Notas de Windows o cualquier otro similar).org/ Para incluir la declaración del DOCTYPE en nuestro documento con FrontPage debemos situarnos en la vista del código HTML y redactarla en la primera línea del mismo. necesitaremos editar la página de la plantilla para cada uno de estos ítems. La carpeta «3082» puede llevar otra numeración. Luego cambiamos su contenido para hacerlo compatible con HTML (o en su caso con XHTML o XML). 12:18 .w3. Hay una sintaxis para cada una de las especificaciones. Si se usa cualquiera de las características de las plantillas o temas.tem1 El archivo que hay que cambiar se llama «normal. por ejemplo.org). 2. este documento se encuentra en: C:\Archivos de programa\Microsoft Office\Templates\3082\Pages\normal.Si queremos saber si nuestra página cumple con el DTD definido podemos comprobarlo desde http://validator. La plantilla normal. para lo cual podemos utilizar el «validador de HTML» de W3C (http://validator.01. Estos archivos de plantilla deberían estar 1.htm es la única utilizada por el programa cuando se crean páginas en blanco a las que todavía no se ha asignado una plantilla o tema de FrontPage.htm) está localizada en el directorio «templates» de Microsoft Office. Al seleccionar. «dt4» se insertará el trozo de código correspondiente al DOCTYPE para HTML 4. Cambiar la plantilla por defecto a una plantilla accesible La plantilla por defecto (normal. Colocando el cursor antes de la etiqueta <html> presionamos Control+Intro y aparece una lista en la que podremos seleccionar la que deseamos incluir. La plantilla variará según esté basada en una u otra de las sintaxis de HTML que se elija.p65 54 08/11/2007.w3. La versión 2003 de FrontPage tiene una nueva utilidad que nos posibilita la inclusión de esta línea de código sin que tengamos que teclearla.htm». En la mayoría de los ordenadores.

Se abrirá una caja con tres campos: • Palabra clave: para introducir la palabra que describe al bloque. para cada versión HTML que queramos utilizar. • Descripción: para añadir una descripción más larga. o en cualquier editor de texto. presionando Control+intro en el lugar donde queramos introducir el bloque dentro de la forma de visualización HTML.localizados en el mismo directorio que el descrito más arriba para la plantilla normal. seleccionamos Propiedades de la imagen o. La segunda opción (que sólo se nos ofrece en la versión 2003) es la misma que la primera. El código generado se introducirá desplegando la barra «vista de código». presionamos Alt+intro. Para crear un nuevo bloque de código. con la imagen seleccionada. una para cada versión HTML que planeemos utilizar.p65 55 08/11/2007. Pulsando el botón derecho del ratón sobre la imagen. Después introduciremos el texto que vamos a darle al atributo alt en el campo Texto del apartado Representaciones alternativas.htm. cuando se quiera crear una nueva página. podemos crear plantillas múltiples. luego seleccionaremos Bloques de código (en inglés: Code Snippets) y pulsaremos en el botón Añadir. • Texto: es donde introduciremos el código de la nueva plantilla o cualquier trozo de código que vayamos a utilizar frecuentemente. creando una página de plantilla en FrontPage. iremos a Herramientas>Opciones de página. Si sabemos que usaremos más de una versión de HTML. Hay dos métodos para hacer esto: Primero. excepto que guardaremos cada nueva plantilla como un bloque de código en lugar de como un archivo HTML. 12:18 . 3. Luego. simplemente abriremos la plantilla apropiada en lugar de crear una nueva página. Creación de plantillas múltiples Esta técnica es una combinación de las dos anteriores. AÑADIR EL ATRIBUTO ALT A LAS IMÁGENES Añadir el atributo alt a las imágenes es sencillo con FrontPage. 55 diseño para todos.

introducir una Descripción larga utilizando la pestaña General del cuadro de diálogo Propiedades de la página mediante el campo del mismo nombre que se sitúa debajo del anterior. 56 diseño para todos. Cuadro de diálogo (FrontPage 2002) que utilizaremos para introducir el texto para el atributo alt. circular o en forma de polígono para crear las zonas activas donde queramos que vayan los enlaces. 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 página web. 12:18 . Asegurarse de que la barra de herramientas Imágenes está visible (Ver>Barras de herramientas>Imágenes). Utilizar los botones de zona activa rectangular. Imagen 4. también.p65 56 08/11/2007.FrontPage 2003 permite.

de pantalla…. La imagen 5 nos muestra el cuadro de diálogo donde podemos introducir el texto para la información de pantalla del hipervínculo. que hemos abierto seleccionando el botón correspondiente (ambos aparecen enmarcados por una elipse para destacarlos). No se debe dejar NUNCA vacío el atributo alt de las zonas activas. seleccionaremos la celda que queremos hacer de encabezado. DEFINIR ENCABEZADOS DE TABLA Para definir encabezados de tabla para una tabla de datos con FrontPage. También la imagen sobre la que diseñamos el mapa debe tener su atributo alt aunque. Imagen 5. podemos dejarlo en blanco (alt=”“). Las versiones FrontPage 2000 y anteriores no disponen de esta utilidad.Para cada zona activa. abriremos el cuadro de diálogo Insertar hipervínculo. donde introduciremos el texto para el atributo alt de cada área definida. Introducción de texto para el atributo alt de una zona activa. Pulsamos 57 diseño para todos. seleccionaremos el botón etiquetado Info.p65 57 08/11/2007. Se puede añadir el texto para el atributo alt haciendo doble click sobre la zona activa y siguiendo los pasos descritos más arriba. 12:18 . si nos interesa.

Imagen 6. La eti58 diseño para todos. Si la tabla es usada para maquetar (no es una verdadera tabla de datos) no es necesario especificar encabezados de tabla. 12:18 . no es recomendable utilizar tablas para maquetar. Como veremos más adelante.el botón derecho del ratón sobre la celda y seleccionaremos Propiedades de la celda o bien seleccionaremos Tabla>Propiedades>Celda. Cada elemento del formulario (cuadro de texto. Selección de celda de encabezado. ya que éstas están reservadas para la presentación de datos y que para la colocación de los contenidos en pantalla tenemos la posibilidad de utilizar las opciones que nos proporciona la Hoja de Estilos. casilla de verificación. activaremos Celda de encabezado. AÑADIR ETIQUETAS A LOS ELEMENTOS DE UN FORMULARIO Seguiremos los siguientes pasos: Crear un formulario usando Insertar>Formulario. menú desplegable…) debe tener un texto descriptivo que informe al usuario sobre qué debe introducir o seleccionar.p65 58 08/11/2007. botón de opción. En el cuadro de diálogo.

Algunas veces la opción Etiquetas de FrontPage no es suficiente. Cambiar la etiqueta que no está adyacente a su elemento de formulario debe hacerse en la forma de visualización HTML. Lo más importante para aumentar la accesibilidad de los marcos es dar un título a cada uno. Pulsar el botón derecho del ratón sobre el marco y elegir Propiedades del marco. En el nuevo FrontPage 2003 (no existe en versiones anteriores) es posible crear los títulos para cada marco siguiendo una de estas dos opciones: 1. Hay que escribir el título descriptivo en el campo etiquetado Título. Para el usuario es como si ambas páginas coexistieran como una sola entidad. Escribir. cuando se usan tablas para maquetarlos). PONER TÍTULOS A LOS MARCOS (FRAMES) Una página web con marcos es la que está definida por. Se puede hacer añadiendo un título cuando se guarda cada marco. dos páginas web separadas. las etiquetas no están adyacentes a los elementos de formulario (por ejemplo. Ahora están asociados el elemento de formulario con su etiqueta de texto.queta se debe poner adyacente al elemento del formulario (aunque técnicamente puede ir en cualquier lugar de la página): Insertar el elemento del formulario que se desee. Los usuarios de algunos lectores de pantalla no pueden apreciar el contenido de páginas múltiples y relacionar sus contenidos. pero pueden desorientar al usuario. 2. es decir. pueden ver los contenidos de múltiples páginas todas a la vez. En el cuadro de diálogo emergente aparecen varios campos.p65 59 08/11/2007. Los marcos no son inaccesibles para los modernos lectores de pantalla. al menos. Seleccionar tanto el elemento como el texto de la etiqueta y los asociaremos pulsando Insertar>Formulario> Etiqueta. 59 diseño para todos. 12:18 . las cuales son combinadas en el mismo espacio visual. A menudo. a continuación el texto para la etiqueta. Hay que repetir esta operación para cada elemento del formulario.

Una información más completa (en inglés) sobre las posibilidades de construcción de páginas web accesible con FrontPage 2003 está disponible en: http://www. Las tecnologías de apoyo y los navegadores alternativos dependen del lenguaje de marcas.microsoft. de tal manera que parezca un tipo de fuente o dar apariencia de texto en negrita. de forma literal. que determina la estructura de la página.com/office/frontpage/prodinfo/accessibility. Para etiquetar los encabezados de nuestra página en FrontPage colocaremos el cursor sobre la línea 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. 12:18 . Lista de opciones del modo de texto para seleccionar el nivel de encabezado.mspx Imagen 7. 60 diseño para todos.AÑADIR ENCABEZADO Y SUB-ENCABEZADOS Hay que usar los encabezados (h1 – h6) para estructurar el contenido y no para dar formato al texto.p65 60 08/11/2007. Al insertar un salto de párrafo. la selección del modo de texto vuelve al estado Normal.

61 diseño para todos. 12:18 . Marcos. Para activar esta opción. 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 diálogo donde nos ofrecen la posibilidad de crear páginas a partir de muestras con diseño accesible (imagen 8).Dreamweaver de Macromedia Dreamweaver MX y MX 2004 son de las más populares y potentes aplicaciones para el desarrollo web disponibles hoy día. Imagen 8. Cuadro de diálogo que nos ofrece la posibilidad de crear páginas web en base a muestras diseñadas de forma accesible. hay que seleccionar Edición>Preferencias>Accesibilidad y activar las casillas de verificación de Objetos de formulario. Las nuevas versiones de MX y MX 2004 permiten que el desarrollador sea orientado para añadir atributos de accesibilidad cuando inserta algunos elementos web. Se han mejorado mucho las características de Dreamweaver MX 2004 con respecto a versiones previas. Desafortunadamente esta opción está desactivada en las preferencias por defecto. Media e Imágenes (imagen 9).p65 61 08/11/2007.

usablenet. Lamentablemente los materiales son demasiado técnicos y hacen preciso estar familiarizado con HTML y las técnicas generales de accesibilidad. Si se encuentra en la vista «Código» cuando inserte alguno de los elementos. Dreamweaver dispondrá de un sistema de orientación para las características de accesibilidad cuando cada uno de los elementos identificados sea insertado en el documento.com). Una vez seleccionado. Para que las orientaciones sobre accesibilidad estén disponibles. Los materiales provienen de UsableNet (http://www. Forma de activar las opciones de accesibilidad en Dreamweaver MX 2004.p65 62 08/11/2007. Entre otros materiales de referencia se incluye uno sobre Accesibilidad. Ahora son accesibles a los programas lectores de pantalla la mayoría de los cuadros de diálogo. Este programa de diseño puede ahora validar el contenido accesible utilizando los estándares más comunes. la orientación de accesibilidad no se mostrará. debe trabajarse sobre la vista «Diseño» en la interfaz. Macromedia también ha aumentado la accesibilidad de la interfaz de creación para permitir a los usuarios de lectores de pantalla crear contenido web. los menús y otros elementos de la interfaz. así como proporcionar un informe seleccionando Sitio>Informe.Imagen 9. 12:18 . 62 diseño para todos.

Imagen 10. por defecto. Cuadro de diálogo para insertar el texto alternativo y el enlace a la descripción larga. la opción de poner texto alternativo a ésta. 12:18 . También aquí se puede seleccionar la opción <vacío> en el menú desplegable del atributo alt.p65 63 08/11/2007. Cuando se inserta una zona interactiva en la imagen. 63 diseño para todos. El atributo longdesc no puede ser insertado desde este panel.TEXTO ALTERNATIVO PARA LAS IMÁGENES Con las opciones de accesibilidad habilitadas en las preferencias. el texto alternativo puede ser insertado o modificado utilizando el panel Propiedades que. Una vez que la imagen ha sido insertada en el documento. el atributo longdesc no es introducido en el código de la imagen. entre otras. se puede introducir una dirección URL o un marcador de la propia página utilizado para una descripción larga (atributo longdesc de la etiqueta img). Basta introducir el texto apropiado y equivalente a la imagen en el campo Texto alternativo. aparece bajo el área de diseño. También se proporciona la opción de insertar texto alternativo a las zonas interactivas del mapa de imagen del lado del cliente. Si no se introduce contenido en la descripción larga. Si a la imagen no conviene darle texto alternativo (por ser meramente decorativa o no proporcionar funcionalidad alguna) se puede seleccionar <vacío> en el campo Texto alternativo que proporcionará un texto alternativo de la siguiente manera: alt=’ ’ ’’ . Si la imagen es compleja. aparece en el panel de Propiedades. se mostrará un cuadro de diálogo para introducir el texto alternativo y el enlace a la descripción larga cuando se inserte una imagen.

hay tres métodos que pueden ser usados: 1. Para llevar a cabo este método de tra64 diseño para todos.p65 64 08/11/2007. 2. Imagen 11.ETIQUETAS DE FORMULARIO Con las opciones de accesibilidad habilitadas en preferencias. Borrar y luego reinsertar el elemento del formulario añadiendo la etiqueta apropiada por medio del cuadro de diálogo. Seleccionar la etiqueta y el elemento del formulario y seleccionar Insertar>Formulario>Etiqueta. Cuadro de diálogo para el etiquetado de los elementos del formulario. Añadir la información apropiada a la etiqueta desde la vista de código. Para añadir etiquetas a los elementos del formulario ya insertados en la página. 12:18 . o «no hay etiqueta de rótulo». El cuadro de diálogo «Atributos de accesibilidad de la etiqueta de entrada» también proporciona opciones para introducir tecla de acceso (Access key) e índice de fichas. Sólo hay que introducir el texto apropiado para la etiqueta en el campo Etiqueta del cuadro de diálogo. Se puede seleccionar uno de los estilos para la etiqueta: «Ajustar con la etiqueta de rótulo». «adjuntar etiqueta de título utilizando el atributo for». 3. El mejor resultado se consigue seleccionando «adjuntar etiqueta de título utilizando el atributo for». Dreamweaver orientará para etiquetar de forma apropiada cuando se inserten los elementos de formulario en la página web. También se puede elegir la posición de la etiqueta de formulario antes o después del ítem. Esto permite a la etiqueta del formulario ser movida a otra posición en la página y es más compatible con los lectores de pantalla existentes.

Asignar una orientación (en inglés. si las opciones de accesibilidad están disponibles en preferencias. asignar atributos headers (encabezados) e id (identificadores) a cabeceras y celdas de datos. (Encabezado). fila o columna y luego seleccionar en el panel Propiedades el campo Enc.bajo. si la tabla ya existe. La interfaz visual de Dreamweaver soporta la opción 1 (asignación de encabezados). Se puede elegir que la tabla no tenga encabezados (Ninguna). Para asignar encabezados a la tabla dispone de dos procedimientos. Segunda. Dreamweaver rodea la etiqueta y el elemento de formulario con la etiqueta de rótulo. la etiqueta y el elemento de formulario deben estar adyacentes. Diseñar los encabezados de tabla. se pueden identificar los encabezados de tabla seleccionado la celda. se presentará un cuadro de diálogo cuando la tabla vaya a insertarse. Imagen 12. 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. 3. Selección de encabezado en una tabla de datos. encabezados de columna (Superior) o encabezados de fila y columna (Ambos).p65 65 08/11/2007. 12:18 . parcialmente la 2 (asignación de orientación) y no soporta la 3. encabezados de fila (Izquierda). scope) a los encabezados de fila y columna. 2. Cuando se usa este método. lo cual limita la posibilidad de mover la etiqueta y no es completamente soportado por todos los lectores de pantalla. 65 diseño para todos. Para tablas complejas. Primero.

p65 66 08/11/2007. Para tablas complejas con encabezados que abarcan filas o columnas y para las cuales el atributo scope es insuficiente. En algunos casos esta celda debe actuar como encabezado de fila o no ser encabezado de nada. Si se elige la opción Ambos para los encabezados. Debemos asegurarnos en cualquiera de los casos de borrar o cambiar el atributo scope para esta celda en la vista de código para que sea marcada de forma apropiada en el maquetado de la tabla de datos. Segundo modo de elegir encabezados para una tabla de datos. Cuando se use el cuadro de diálogo proporcionado por las opciones de accesibilidad para seleccionar los encabezados. se designará la celda superior izquierda como encabezado de columna. 66 diseño para todos. también se insertará el atributo scope apropiado a esos encabezados (por ejemplo: scope=col o scope=row).Se designarán las celdas correctas como encabezados de tabla utilizando la etiqueta <th>. Imagen 13. La interfaz visual no soporta la adición de los citados atributos. 12:18 . se debe añadir atributos headers e id a la tabla en la vista de código. La única manera de añadir el atributo scope a tablas que ya existen en el documento es hacerlo manualmente en la vista de código.

ambos proporcionan información adicional sobre los contenidos de la tabla. 12:18 . Esta información será leída por los lectores de pantalla para identificar el marco. El cuadro de diálogo «Atributos de accesibilidad de la etiqueta de marco» sólo 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 página que ya tiene marcos (Modificar>Conjunto de marcos>Dividir marco…). Imagen 14. TÍTULOS DE LOS MARCOS (FRAMES) Si las opciones de accesibilidad se han seleccionado en las preferencias.p65 67 08/11/2007. 67 diseño para todos.El cuadro de diálogo también permite la adición de Texto para el pie (Caption) y Resúmenes (Summary). el programa proporciona orientación para colocar los títulos de los marcos cuando se va a crear un documento con marcos. Cuadro de diálogo para introducir títulos de marcos. La opción Título debe ser una breve descripción del contenido y funcionalidad del marco.

12:18 .p65 68 08/11/2007.68 diseño para todos.

su accesibilidad. los usuarios utilizan lo que conocemos como Aplicaciones o agentes de usuario (en inglés: User agent). Su objetivo es que estas aplicaciones dispongan 69 diseño para todos. La Iniciativa de Accesibilidad en la Web W3C/WAI. algo que nos importa particularmente. Para poder acceder a los contenidos que los desarrolladores colocan en la web. Lo habitual es que lo hagan mediante programas de software a los que se conoce genéricamente como Navegadores. su utilidad y. compitiendo en horas de uso con los procesadores de texto. ha redactado una «especificación» que proporciona pautas para los desarrolladores de las aplicaciones de usuario. Son programas que generalmente se distribuyen de forma gratuita.Las aplicaciones o agentes de usuario En la imagen 15 podemos ver cuáles son los elementos de accesibilidad a las páginas web. Su familiaridad hace que casi no prestemos importancia a sus posibilidades. 12:18 .p65 69 08/11/2007. Imagen 15. Se han convertido en compañeros inseparables de todos los que usan un ordenador para acceder a la información colocada en web. Elementos de accesibilidad a las páginas web.

70 diseño para todos. colores. Asegurar que el control del comportamiento de la interfaz lo tiene el usuario. tamaños del texto presentado o las características de la síntesis de voz) mediante la selección ofrecida por la aplicación de usuario. 12:18 .p65 70 08/11/2007. W3C elevó a rango de recomendación la especificación denominada «Pautas de Accesibilidad para las Aplicaciones de Usuario 1. audio. 4.de las medidas necesarias para que puedan ser usadas por personas con limitaciones funcionales o que accedan mediante dispositivos no estandarizados. como el texto alternativo de la imágenes) que debe haber sido proporcionado cumpliendo con los requerimientos de las Pautas de Accesibilidad al Contenido en la Web 1. En este documento se recogen los puntos básicos o pautas que se consideran imprescindibles para hacer que esas aplicaciones sean accesibles. Asegurar que el usuario puede interactuar con la aplicación de usuario (y el contenido que presenta) a través de diferentes dispositivos de entrada y salida de datos. vídeo o scripts) que pueda reducir la accesibilidad obstruyendo a otros contenidos o desorientando al usuario. Permitir la configuración de manera que no deje algún contenido que pueda reducir la accesibilidad. 3. con independencia del dispositivo utilizado. por el formato de la especificación. 5. debe estar disponible para el usuario a través de la interfaz en ciertas condiciones. Permitir al usuario anular los estilos especificados por el autor y los estilos por defecto de la aplicación de usuario.0 (en inglés: Web Accessibility Content Guidelines 1.0» (en inglés: «User Agent Accessibility Guidelines 1. Asegurar que el control de la presentación lo tiene el usuario. Soportar la entrada y salida de datos. El 17 de diciembre de 2002.0» – UAAG10). Asegurar que el usuario accede a todo el contenido. Asegurar igualmente que el usuario puede controlar el 2. Asegurar que el usuario puede desconectar la presentación del contenido (por ejemplo. Éstos son los doce puntos básicos que recoge la recomendación: 1.0 – WCAG10). particularmente al contenido condicional (entendido como el que. Asegurar que el usuario tiene acceso a todo el contenido. Asegurar que el usuario puede seleccionar los estilos preferidos (por ejemplo.

Permitir al usuario que configure su aplicación de usuario para que las tareas que realiza con frecuencia las haga bien y permitir al usuario aplicar sus preferencias.org/TR/UAAG10/guidelines. Aplicar las especificaciones que benefician la accesibilidad. Cumplir con las convenciones de los entornos del sistema operativo. Proporcionar información que ayude al usuario a entender el contexto de navegación. 71 diseño para todos. Proporcionar mecanismos de navegación. incluyendo los que pueden ser manipulados por el autor (por ejemplo. Asegurar que la documentación es accesible. 11. 12:18 . Aplicar interfaces inter-operables para comunicar con otros programas (por ejemplo. 6. búsquedas y navegación estructurada. Asegurar que el usuario puede entender las características del software que benefician la accesibilidad en la documentación aportada. navegación dirigida. tecnologías de ayuda. Hay que tener en cuenta las Recomendaciones de W3C cuando estén disponibles y sean apropiadas para una tarea. 8. Permitir la configuración y personalización. entornos del sistema operativo y plug-ins).comportamiento de las ventanas del navegador y los controles de la interfaz de usuario.w3. Apoyar las características de accesibilidad de todas las especificaciones aplicadas. como en la documentación.p65 71 08/11/2007. Orientar al usuario. 10. 12. a través de scripts). Aplicar interfaces de programación inter-operables para la aplicación. Proporcionar en forma accesible la documentación y las ayudas de la aplicación de usuario. 9. la configuración de entrada de datos y la instalación. Proporcionar acceso al contenido a través de una variedad de mecanismos de navegación.html. La documentación oficial de estas pautas (en inglés) se puede consultar en la dirección web: http://www. Cumplir con dichas convenciones tanto en la interfaz de la aplicación de usuario. incluyendo navegación secuencial. 7.

Es importante tener en cuenta que los desarrolladores de navegadores incorporan con cierta frecuencia nuevas versiones de sus programas.com/downloads/search.0 de Microsoft. haciéndola más ajustada a sus necesidades y demandas. 12:18 . en este apartado. Por lo tanto. Es esperable que las nuevas versiones de estos navegadores incorporen mejores utilidades para el acceso a la web y para la personalización de la navegación por parte del usuarios. Vamos a ver. Características de accesibilidad de Internet Explorer Para descargar de forma gratuita este programa: http://www. Éstas son: Internet Explorer 6. lo que supone que la mayoría de los ordenadores domésticos y muchísimos de los que se utilizan en el ámbito laboral disponen de él.microsoft. Pero sólo un reducido número de ellas son utilizadas por los usuarios de forma habitual. llevará instalado el navegador IExplorer (como se le conoce en abreviatura).aspx?displaylang=es Internet Explorer de Microsoft es el navegador web más utilizado en todo el mundo.Accesibilidad en las aplicaciones de usuario más comunes Existe un gran número de aplicaciones de usuario que se utilizan para navegar por la web.p65 72 08/11/2007. Firefox 1. 72 diseño para todos. Opera 7. Las cuatro escogidas lo son en función del gran número de usuarios que las utilizan.54. La causa no es otra que su integración en el sistema operativo que más ha calado en el mundo de la informática doméstica: Windows de Microsoft. por defecto.0 Navigator.5 de Mozilla. Netscape 7. cualquier ordenador que tenga instalado este sistema operativo. las características de accesibilidad que presentan algunas de ellas.

Imagen 16. Internet Explorer 6.0 de Microsoft.

Dado el peso específico que tiene en la navegación por la web (según fuentes se apunta que entre un 80% y un 95% de los usuarios de la Red acceden con este navegador), el que disponga de características 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 diálogo con varias pestañas. En la General podemos encontrar distintas opciones, entre las que se encuentra la de Accesibilidad.

73

diseño para todos.p65

73

08/11/2007, 12:18

Imagen 17. Cuadro de diálogo que ofrece acceso a las opciones de accesibilidad.

Las posibilidades que nos ofrece seleccionar son las siguientes: Omitir colores especificados en páginas web: Seleccionando esta opción nuestro navegador mostrará las páginas web con los colores por defecto asignados a los elementos por HTML (por ejemplo, los enlaces los mostrará en azul, si no están 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 dónde se encuentran los enlaces y anular ciertas combinaciones de colores para aquellos que tengan problemas de visualización. Omitir estilos de fuentes especificados en páginas web: Con esta opción hacemos que la visualización de las páginas se haga con el estilo de fuente definido por defecto en nuestro navegador. 74

diseño para todos.p65

74

08/11/2007, 12:18

Omitir tamaño de fuentes especificado en páginas web: Esta opción permite anular el tamaño especificado para las fuentes por el autor y posibilita al usuario una cierta ampliación o reducción de ellas, si lo precisa. Dar formato a los documentos utilizando mi hoja de estilos: Seleccionando esta opción, el programa nos pide la ubicación 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 páginas que visitemos mientras tengamos seleccionada la opción y nos permite elegir una amplísima gama de posibilidades para visualizar el formato de las páginas de acuerdo a nuestras necesidades (fuentes más grandes, cambio de colores, eliminación de fondos, etc.).

Imagen 18. Cuadro de diálogo Accesibilidad con las opciones que podemos seleccionar.

AUMENTAR EL TAMAÑO DE LA FUENTE
IExplorer, como la mayoría de los navegadores, nos permite aumentar el tamaño de la fuente en la página visualizada mediante Ver>Tamaño de texto y seleccionando entre las cinco posibilidades que ofrece (mayor, grande, mediana, pequeña y menor; por defecto viene seleccionada la mediana). 75

diseño para todos.p65

75

08/11/2007, 12:18

Es importante tener en cuenta que esta opción no nos será de utilidad si el autor ha definido en su hoja de estilo un tamaño en unidades absolutas (pixels o centímetros) en lugar de haberlo hecho en unidades relativas (porcentaje o em). Para modificar el tamaño de la letra en estos casos tendremos que acudir a las opciones apuntadas en el párrafo anterior.

Imagen 19. Selección de aumento o disminución del tamaño del texto.

BLOQUEO DE VENTANAS EMERGENTES
Una de las situaciones que más 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>Configuración del bloqueador de elementos emergentes.

76

diseño para todos.p65

76

08/11/2007, 12:18

la reproducción de sonido cuando se produzca un bloqueo. En el cuadro de diálogo para la configuración del bloqueador podemos definir a qué sitios permitimos que nos presenten elementos emergentes. 12:18 . También muestra una gran compatibilidad con las síntesis de voz que se utilizan para dar instrucciones al programa durante la navegación (por la 77 diseño para todos. la presentación de una barra que nos muestre la información del bloqueo y el nivel de filtrado (alto. COMPATIBILIDAD CON TECNOLOGÍAS DE APOYO IExplorer es compatible con algunas tecnologías de apoyo.p65 77 08/11/2007. medio o bajo) que aplicamos para los elementos emergentes. Probablemente es el navegador que mayor compatibilidad presenta (no en vano a los propios lectores de pantalla les interesa ser compatibles con el navegador más usado) como es el caso de Jaws de Freedom Scientific (diseñado específicamente para trabajar con Windows) o Home Page Reader de IBM. como es el caso de los lectores de pantalla. Cuadro de diálogo para la configuración del bloqueador de elementos emergentes.Imagen 20.

Barra de herramientas AIS incorporada al navegador IExplorer. Así. 12:18 .p65 78 08/11/2007. Se trata de una herramienta denominada AIS (Accessible Information Solutions) Web Accessibility Toolbar que nos permite: Imagen 21. como la lectura de la página por un navegador sólo texto o cómo vería la página una persona daltónica. Mostrar la página en escala de grises así como mostrar los colores empleados en la página y analizar el contraste entre ellos. Activar.misma razón apuntada en el párrafo anterior). Validar el código HTML y CSS de la página que estamos visualizando con distintas herramientas automáticas. desactivar y mostrar las hojas de estilo aplicadas. La 78 diseño para todos. en caso de existir. Mostrar la estructura del documento en pantalla con un alto nivel de detalle en cuando a los elementos estructurales incorporados a la misma. así como mostrar la existencia de elementos HTML 4 desaconsejados en la página visualizada. hasta la simulación de algunos efectos. BARRA DE HERRAMIENTAS DE ACCESIBILIDAD AIS Technosite (Fundosa Teleservicios S. Emplear una serie de utilidades que van desde analizadores automáticos de la accesibilidad en el código de la página visualizada.) ha traducido y puesto a disposición de los usuarios de IExplorer una barra de herramientas para comprobar y promover la accesibilidad en la web. Mostrar o no las imágenes en la página visualizada así como los textos alternativos. 1024x768 o cualquier otro personalizado). Especificar y personalizar de forma rápida el tamaño de visualización (640x480. 800x600.A. programas como Dragon Naturally Speaking de ScanSoft o Via Voice de IBM no muestran ningún problema de compatibilidad.

asp Características de accesibilidad en Firefox Podemos descargar este programa de forma gratuita en: http://www.p65 79 08/11/2007.technosite. Esta barra de herramientas.5 de Mozilla.mozilla-europe. Proporcionar referencias a documentos sobre pautas de accesibilidad. Proveer atajos para activar y desactivar elementos de IExplorer.org/es/products/firefox/ Imagen 22. cambiar el tamaño del texto o acceder al cuadro de diálogo de opciones de accesibilidad antes descrito. 12:18 . el tamaño y tiempo de descarga o la lista de marcos o enlaces. recursos sobre accesibilidad y usabilidad y referencias del lenguaje de codificación. Ofrecer información sobre el documento en pantalla. en su versión en castellano. Disponer de una lupa de pantalla o magnificador que nos permite reducirla (hasta un 25%) o ampliarla (hasta un 600%). como los metadatos.es/software. 79 diseño para todos. Firefox 1. se puede descargar de: http://www.amplia variedad de utilidades que se presentan en este apartado impide entrar en detalle en las mismas.

Heredero de la trayectoria de los navegadores conocidos como Mozilla. 12:18 . 80 diseño para todos.Se trata del navegador que está ocupando el segundo lugar (a mucha distancia del IExplorer) en el ranking de más utilizados por los usuarios de la web. al navegar con lectores o magnificadores de pantalla. pero aquí veremos las más destacables. ha ido escalando puestos a gran velocidad desbancando a otros navegadores de más solera. Presenta sólo dos opciones. ha facilitado que muchos usuarios no hayan tenido remilgos en sustituir su habitual IExplorer por este nuevo programa. Imagen 23. en sus distintas versiones. Dispone de bastantes posibilidades en lo que se refiere a características de accesibilidad. Opciones de accesibilidad en Firefox 1.p65 80 08/11/2007. OPCIONES DE ACCESIBILIDAD EN FIREFOX Para acceder a las opciones de accesibilidad que presenta este navegador debemos seguir la ruta Herramientas>Opciones>Avanzadas. Su gran compatibilidad y parecido en el aspecto externo con el navegador de Microsoft. algo extrañas: 1. Mostrar el cursor del sistema con cambios foco/selección: sirve para que.5. el cursor se desplace a la aplicación que éstos enfocan.

hasta 8 veces. como IExplorer. Esta opción la ejecuta con mayor eficiencia que otros navegadores como IExplorer.p65 81 08/11/2007. cambiar el tamaño del texto (las imágenes permanecen con el mismo tamaño). hasta 8 veces. Usar búsqueda al tipear (entiéndase este modismo como teclear o escribir con el teclado): esta opción permite que cuando tecleamos el nombre de una dirección web que queramos encontrar. ya que consigue cambiar el tamaño de fuentes que hayan sido definidas en unidades absolutas (pixels o centímetros) en lugar de relativas (porcentaje o em). Normal: para ver el tamaño de letra por defecto hay que pulsar control y la tecla 0 (cero) en el teclado alfanumérico. Veamos algunas más. Esta opción se presenta por defecto en otros navegadores. como casi todos los navegadores. pero en este caso lo hace mediante una combinación de teclas: Aumentar: pulsando control y la tecla +. lo que desactivará los estilos definidos por el autor y aplicará los que estén definidos por defecto en el navegador. 12:18 .2. Éstas no son las únicas posibilidades que nos ofrece este navegador en lo que se refiere a características de accesibilidad. CAMBIAR EL TAMAÑO DEL TEXTO Permite. vayan apareciendo bajo la barra correspondiente los nombres de direcciones que anteriormente se hayan buscado y cargado desde ésta. DESACTIVAR LOS ESTILOS DEFINIDOS POR EL AUTOR Siguiendo la ruta Ver>Estilo de página podremos seleccionar la opción Sin estilo. Disminuir: pulsando control y la tecla -. 81 diseño para todos. pero con Firefox la debemos activar.

ni da la posibilidad de aplicar una hoja de estilo definida por el usuario. Siguiendo la ruta Herramientas>Opciones>Contenidos podremos bloquear la apertura de ventanas emergentes. Posibilidad de desactivar los estilos definidos por el autor en Firefox 1.Imagen 24. como sucedía en IExplorer. Imagen 25.5. 12:18 . Esto no supone la desactivación completa de la hoja de estilo.p65 82 08/11/2007. BLOQUEO DE VENTANAS EMERGENTES Firefox permite bloquear la apertura de nuevas ventanas sin la participación activa del usuario. 82 diseño para todos. Opción para bloquear ventanas emergentes en Firefox 1.5.

p65 83 08/11/2007.5 que utiliza las voces que nuestro ordenador tenga instaladas. Acceso a las opciones de Firevox desde la barra de tareas de Firefox 1.Este navegador nos da la posibilidad de permitir que para los sitios que el usuario defina se permita la apertura de ventanas emergentes. Se trata de un lector de pantalla para el navegador Firefox 1.org/). 83 diseño para todos. lo que posibilita una navegación más rápida. y habilitar o no tanto Java como JavaScript.5. Una de las más relevantes para la accesibilidad es la denominada Firevox (que puede ser descargada en http://firevox. Éstas son desarrolladas voluntariamente por desarrolladores de programas y puestas a disposición de todos de forma gratuita. Imagen 26. 12:18 . FIREVOX. Su sencillez de instalación y uso convierte a esta extensión en una potente herramienta de accesibilidad.mozdev. Mediante este mismo cuadro de diálogo (Herramientas>Opciones>Contenidos) el usuario puede prescindir de cargar imágenes. que muestra una muy buena compatibilidad con otros lectores de pantalla que el usuario pueda tener instalados en su ordenador. es la posibilidad de incorporar extensiones. LECTOR DE PANTALLA PARA FIREFOX Una de las características básicas de un navegador que proviene de las prácticas llevadas a cabo entre los partidarios del software libre y el desarrollo compartido.

Ha sido desbancado por el 84 diseño para todos. La única pega es que no existe (en estos momentos) una versión castellanizada de los textos de esta extensión. animo al lector a que experimente directamente con ella. esta extensión pone sus opciones a disposición del usuario en la barra de tareas desde Herramientas>Firevox Options. analizar el código de una página y otras interesantes funciones. 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. aunque siempre a una discreta distancia.aola. con el paso del tiempo.p65 84 08/11/2007. Sólo se puede poner una pega a esta extensión: no está castellanizada en estos momentos. Por tal motivo.Una vez instalada. Web Developer Toolbar. activar o desactivar ciertas funciones. de forma rápida. lo que supone una considerable limitación para aquellos que no se manejen con suficiente soltura en inglés. mucha clientela. si bien hace un buen uso de las voces castellanas que se tengan instaladas. De características similares a las descritas para la Barra de Herramientas de Accesibilidad del IExplorer. Compitió con el navegador de Microsoft. es de gran utilidad tanto para desarrolladores como para todos aquellos que quieran. Imagen 27. 12:18 . Características de accesibilidad en Netscape Podemos descargar este programa de forma gratuita en: http://www. heredero de un auténtico clásico: Mosaic. barra de herramientas para desarrolladores web de Firefox. pero entre los usuarios ha perdido.com/netscape/download/ Se trata de uno de los navegadores gratuitos de más historia. Son muchas las posibilidades que tiene esta extensión y exceden las posibilidades de este documento.

una herramienta de creación (denominada Composer). aunque esto no es relevante en este navegador. Es decir. 12:18 . un programa de correo electrónico. 85 diseño para todos. Ello no quiere decir que no posea algunas características que facilitan la accesibilidad. La peculiaridad de este programa es que no se trata de un simple navegador. no encontramos un apartado en el que nos ofrezcan unas opciones directamente encaminadas a facilitar la accesibilidad. sino que ofrece la posibilidad de utilizar.0 Navigator. también. Netscape 7. OPCIONES DE ACCESIBILIDAD EN NETSCAPE Al contrario de lo que sucede con los anteriores navegadores de los que hemos hablado. Imagen 28. un servicio de mensajería instantánea (denominado ICQ) y una libreta de direcciones.navegador de Mozilla en el segundo puesto del ranking y ahora trata de recuperar el campo perdido. Netscape no presenta opciones específicas de accesibilidad.p65 85 08/11/2007.

posibilitar la función de completar automáticamente el texto escrito en la barra de ubicación. 12:18 .p65 86 08/11/2007. Como antes decíamos.Si seguimos la ruta Editar>Preferencias accederemos a una ventana de diálogo que nos permite la selección de preferencias para la navegación. Imagen 29. Función para completar automáticamente lo escrito en la barra de ubicación en Netscape 7. 86 diseño para todos. mediante las opciones de Navegación inteligente. 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 ocasión anterior. no existe un apartado especial para la accesibilidad pero sí encontramos la posibilidad de.

87 diseño para todos. La primera de ellas es mediante la combinación de las teclas Control y la tecla «+» o «-« (según queramos aumentar o disminuir el tamaño). 12:18 . Cuando lo que hacemos es disminuir. Imagen 30. 1. Con esta opción se nos permite incrementar con la primera pulsación al 120% del tamaño original. Para cambiar el tamaño del texto se nos ofrecen dos posibilidades.p65 87 08/11/2007. con la segunda un 75% y con la tercera un 50%. con la segunda al 150% y con la tercera al 200%.MODIFICACIÓN DEL TAMAÑO DEL TEXTO Netscape posibilita modificar el tamaño de visualización del texto (la aplicación de esta opción no modifica el tamaño de las imágenes). lo cual posibilita la adaptación de la visualización del texto en pantalla a las necesidades del usuario. Aumentar o disminuir el texto con Netscape 7. con la primera pulsación el texto se muestra en un 90% del tamaño original.

Características de accesibilidad de Opera Para descargar este programa de forma gratuita (con publicidad): http://www. Se trata de un programa que.000%. Navegador Opera 7. La segunda es mediante la ruta Ver>Zoom de texto (tras la opción Zoom de texto aparece el porcentaje que está seleccionado).opera.com/download/ Imagen 31.54. Se despliega una ventana de selección que nos permite elegir una de las opciones predeterminadas u otro tamaño. inclu88 diseño para todos.p65 88 08/11/2007. además del navegador. por introducir este tipo de opciones dentro del formato estándar de su programa. La posibilidad de cambiar el tamaño del texto nos la ofrece Netscape aunque el autor haya definido éste en forma absoluta (puntos. pixels o centímetros) y no de forma relativa (porcentaje o em).2. 12:18 . desde hace años. mediante la apertura de una ventana de diálogo donde podremos introducir un valor entre 1 y 2. 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.

ha descartado la introducción de un «apartado» específico. Cuadro de diálogo para configurar las opciones de usuario en Opera 7. 89 diseño para todos. su gran flexibilidad para acoplarse a las necesidades del usuario. por tal motivo. Ésta es una de las virtudes de este navegador.ye un gestor de correo electrónico y una aplicación para llevar a cabo encuentros en la web (los conocidos «chats»). que nos permite configurar un gran número de opciones. La última versión disponible en castellano está numerada como 7. No encontraremos en este cuadro un apartado concreto dedicado a las opciones de accesibilidad. ya que ésta es considerada como algo estándar por los desarrolladores del programa que está presente en todas las opciones estándar donde sea precisa y.p65 89 08/11/2007. Imagen 32.54. muy completo. que podemos configurar con nuestras preferencias.54 y el área de publicidad ha sido rediseñada y parece estorbar menos que en anteriores versiones. pero del que no podremos deshacernos. Esta última inserta un apartado de publicidad. OPCIONES DE ACCESIBILIDAD EN OPERA Si seguimos la ruta Herramientas>Opciones se abre un cuadro de diálogo. 12:18 . Tiene una versión que está a la venta por un precio módico y otra de descarga gratuita. permitiendo una visualización algo más grande del área de navegación.

Botones de acceso rápido para la modificación de ciertas opciones en Opera 7.p65 90 08/11/2007. respetando el modo de presentación. a través de un botón que se sitúa en la parte superior derecha del área de navegación ( ) que nos permite seleccio90 diseño para todos. sin tener que recurrir a los varios clic que supone ir a través de la vía Herramientas>Opciones. las tenemos disponibles en la interfaz de navegación para hacer más rápida su configuración. lo que permite al usuario interactuar más ágilmente con la interfaz. También. Este acceso rápido a ciertas funciones está disponible mediante unos botones situados en la parte superior derecha del área de navegación. nos permite la modificación de algunas opciones mediante teclas o combinaciones de teclas. Veamos ahora algunas de las características de accesibilidad más relevantes que presenta el navegador Opera. que nos permiten: La modificación del tamaño de la imagen (no sólo de la letra). En el caso de Opera la función de incremento o disminución del texto actúa como una lupa que modifica la visualización de toda la página (tanto texto como imágenes). AUMENTAR EL TAMAÑO DE LA VISUALIZACIÓN En anteriores navegadores hemos visto cómo permitían incrementar el tamaño del texto. muchas de las opciones que podemos configurar desde este cuadro de diálogo. El acceso a las funciones de seguridad. como veremos más adelante. Imagen 33. pero no permitían que se incrementara el tamaño de las imágenes que lo acompañan. 12:18 .Por otro lado. Cambiar las opciones de visualización de imágenes y del estilo de presentación de la página.54. como ya se ha dicho en el apartado anterior. La activación de esta opción se puede hacer.

El cambio de visualización se hará en intervalos de un 10%. que actúa tanto sobre el texto como sobre las imágenes. se dispone de un botón de acceso rápido ( ) a las funciones de carga de imágenes y modo de presentación de la hoja de estilos. del teclado numérico (o «6»). pulsamos Control y hacemos clic con la rueda del ratón. Como vemos. la visualización de las páginas navegadas y han utilizado diferentes vías (teclado o ratón) para realizar la función de modificación del tamaño. los desarrolladores de Opera han pensado en la posibilidad de facilitar. En este caso. Por defecto está seleccionada la visualización en un 100%. Opera facilita una amplia gama de posibilidades para la visualización de las páginas web. pero esto lo podemos modificar en el cuadro de diálogo de Herramientas>Opciones seleccionando la visualización por defecto que más nos interese en la opción Escala predeterminada de Estilo de página. 91 diseño para todos. particularmente a aquellos usuarios que tienen deficiencias visuales. con lo que se producirán saltos de un 100%. 12:18 . Para regresar a la visualización por defecto basta pulsar la tecla «*».nar el porcentaje de aumento o disminución de toda la página visualizada desde un 20 hasta un 1. Para regresar a la visualización por defecto.000%. CARGA DE IMÁGENES Y CAMBIO DEL ESTILO DE LAS PÁGINAS En el mismo sentido de flexibilidad y adaptación a las necesidades del usuario. podemos aumentar el tamaño de visualización pulsando la tecla «+» (o la tecla «0». podemos pulsar la tecla «Control» y las teclas «+» (u «8») o «-« (o «7»). asterisco. podemos aumentar o disminuir la visualización pulsando la tecla Control y moviendo la rueda hacia delante (aumenta la visualización a intervalos de un 10%) o hacia atrás (disminuye la visualización a intervalos de un 10%). Si queremos una modificación más drástica. Si nuestro ratón dispone de rueda. como en el anterior.p65 91 08/11/2007. cero) o disminuirlo con la tecla «« (o la tecla «9»). Una forma más rápida de modificar la escala de visualización de la página se nos presenta mediante el uso del teclado o del ratón: Utilizando el teclado.

Esta opción facilita una navegación más rápida y la verificación de la existencia de textos alternativos. podemos seleccionar una o varias al mismo tiempo. deberemos hacerlo desde Herramientas>Opciones>Estilo de página>Configurar modos. por defecto. Por defecto. De las distintas opciones que presenta este «modo de usuario» (que podemos ver en la imagen 32).Imagen 34. donde se posibilita elegir entre cinco posibili92 diseño para todos. el texto alternativo que haya aplicado el autor en aquellas imágenes que se nos muestran). el navegador tiene seleccionada la opción de mostrar todas las imágenes que presenta la página. donde es éste quien define qué estilo deberá aplicarse a la página visualizada. Se nos da la posibilidad de mostrar sólo aquellas que ya tenemos en caché o no mostrar ninguna (en su caso mostrará. si existe.p65 92 08/11/2007. tanto el modo de autor como el de usuario. Menú desplegado con las opciones de carga de imágenes y de presentación de hoja de estilos en Opera 7. Para configurar. por lo tanto la hoja de estilo definida por éste) o hacerla en «modo de usuario».54. de tal modo que las posibles combinaciones de hoja de estilo para visualizar son muy numerosas. 12:18 . En lo que se refiere a la forma de presentación de los estilos de la página nos ofrece la posibilidad de elegir entre dos opciones: mostrarla como la diseñó el autor (aplicando.

Imagen 35. BLOQUEO DE VENTANAS EMERGENTES Igual que el resto de los navegadores vistos hasta este momento. 12:18 .54. e incluso. Esta lista desplegable nos ofrece otras opciones interesantes para la accesibilidad como son: La desactivación de las animaciones GIF.p65 93 08/11/2007. Lo que sí debemos tener claro es que al escoger las dos primeras (Hojas de estilo de la página y Colores y fuentes de la página) las tres restantes no tendrán efecto. si tienen una cierta frecuencia. por ejemplo. Puede ser un ejercicio muy instructivo ir visualizando una misma página con las distintas posibilidades que nos ofrece Opera.dades para cada una de ellas. Cuadro de diálogo donde podemos seleccionar los modos de presentación con sus opciones en Opera 7. bloquear las no deseadas o bloquear todas. sin que sean mutuamente excluyentes. Opera permite que el usuario pueda bloquear la presentación de páginas en ventanas emergentes sin su participación. ya que priman los estilos definidos por el autor). pueden desencadenar ataques epilépticos. que pueden ser molestas para algunos usuarios. Para bloquear las ventanas emergentes pulsaremos F12 o seguiremos la ruta Herramientas>Opciones más a mano donde podremos escoger entre permitir que se abran todas en primer o segundo plano. 93 diseño para todos.

ATAJOS DE TECLADO Y GESTOS DEL RATÓN A algunos usuarios no les es posible manejar el ratón (o les supone una tarea muy dificultosa) o. Lista desplegable de las «opciones más a mano» donde bloquear las ventanas emergentes en Opera 7.54. etc. Opera ha definido una serie de opciones que les permita aligerar la tarea de navegar 94 diseño para todos.).p65 94 08/11/2007. 12:18 . Flash. Imagen 36. que puede interferir con el sonido de los lectores de pantalla. si existe.Deshabilitar el sonido de las páginas. Para ellos. RealPlayer. Shockwave. que permiten al usuario adaptar la navegación a sus características personales y a las de su equipo. se puede dar el caso de que este elemento lo manejan con más soltura que el teclado. por el contrario. Desactivar Java. QuickTime. JavaScript y otros conectores (PDF.

54. para no interferir con las funciones asignadas de forma especial por algunos usuarios a sus ratones o mecanismos apuntadores. donde activaremos la función correspondiente. Cuadro de diálogo donde podemos activar los gestos de ratón en Opera 7.y puedan así utilizar este programa en toda su extensión. La novedad y escasamente conocido uso de la funcionalidad de los gestos de ratón. 12:18 . navegan con ratón o mecanismos apuntadores: 95 diseño para todos. o pulsando F1. Esto se ha hecho mediante los denominados «atajos de teclado» y con los «gestos de ratón». donde seleccionaremos Teclado. Los atajos de teclado están siempre disponibles para el usuario y la extensa información con la relación de teclas y combinación de teclas habilitadas por Opera la podemos encontrar (en castellano) en la página de ayuda a la que podemos acceder desde la ruta Ayuda>Ayuda de Opera. Imagen 37. por las dificultades que tienen en el uso del teclado.p65 95 08/11/2007. Los gestos de ratón no se encuentran habilitados por defecto. Para habilitarlos lo tendremos que hacer desde Herramientas>Opciones>Ratón y teclado. nos alienta a recoger en este texto cuáles son éstos y qué funcionalidad ponen al servicio de aquellas personas que.

12:18 .derecha. • Recargar página: Pulsar el botón derecho. 96 diseño para todos. mover a la izquierda y luego abajo o pulsar el botón derecho y tecla mayúsculas.Gestos de Navegación: • Ir a la página anterior: Pulsar el botón derecho y hacer clic con el izquierdo o pulsar el botón derecho y mover el ratón hacia la izquierda. • Ir a página principal: Doble clic en una página vacía. Gestos de Página: • Navegar en una página nueva: Pulsar el botón derecho y mover hacia abajo. • Saltar: Pulsar el botón derecho y mover a la derecha y hacia arriba o pulsar el botón derecho y la tecla mayúsculas. • Ir al directorio padre: Pulsar el botón derecho. • Cerrar página: Pulsar el botón derecho y mover hacia abajo y luego hacia la derecha o pulsar el botón derecho y mover derecha -izquierda . • Restaurar o maximizar página: Pulsar el botón derecho y mover hacia arriba y luego hacia la derecha. mover el ratón hacia arriba y luego hacia la izquierda. • Rebobinar: Pulsar el botón derecho. mover hacia la izquierda. Gestos para enlaces: • Abrir enlace en una nueva página: Colocar el puntero del ratón sobre un enlace.p65 96 08/11/2007. • Duplicar página: Pulsar el botón derecho y mover hacia abajo y luego hacia arriba. pulsar el botón derecho y mover hacia abajo. mover hacia arriba y luego hacia abajo. • Ir a la página siguiente: Pulsar el botón izquierdo y hacer clic con el derecho o pulsar el botón derecho y mover el ratón hacia la derecha. • Minimizar página: Pulsar el botón derecho y mover hacia abajo y luego hacia la izquierda. mover hacia arriba. hacer doble clic en el espacio de trabajo o sobre la barra de Páginas. pulsar el botón derecho y mover hacia abajo y luego hacia arriba. • Parar carga: Pulsar el botón derecho. • Abrir enlace en una página en segundo plano: Mover el puntero del ratón sobre un enlace. mover hacia la derecha.

• Moverse adelante y atrás por el historial: Pulsar la tecla mayúsculas y accionar la rueda. Iniciativa para la Accesibilidad en la Web) de W3C (World Wide Web Consortium. • Ciclo entre páginas abiertas: Pulsar el botón derecho y accionar la rueda del ratón. 97 diseño para todos. • Aumentar y disminuir la escala: Pulsar la tecla control y accionar la rueda del ratón. • Desplazar la página (panning): Hacer clic con la rueda del ratón y moverlo.p65 97 08/11/2007.w3. • Recuperar la escala predeterminada: Pulsar la tecla control y hacer clic con la rueda del ratón. lo que significa que algunos de los recursos que en ella se nombran no están disponibles en la actualidad. Nos referimos a la función de autocompletar la dirección que queremos visitar mediante el despliegue de una lista de páginas ya elegidas por el usuario con anterioridad y que permanecen en el historial del programa. La imagen 35 nos muestra otra de las opciones de accesibilidad que antes hemos visto para otros navegadores. En este apartado vamos a ver algunas de ellas. Consorcio Mundial de la Web). Por tal motivo nos centraremos en aquellos cuya existencia actual sí hemos podido comprobar.Gestos con la rueda: • Deslizar arriba y abajo: Accionar la rueda del ratón arriba y abajo. Aplicaciones de usuario alternativas Para que ciertos grupos de personas puedan acceder a los contenidos que se colocan en la web. en la dirección: http://www.org/WAI/References/Browsing La página citada fue actualizada por última vez en julio del año 2001. se han desarrollado aplicaciones de usuario alternativas que facilitan dicha tarea. 12:18 . cuyas referencias han sido tomadas de la página sobre este tipo de recursos que mantiene el grupo WAI (Web Accessibility Initiative.

HOME PAGE READER 3. 12:18 .com/webapp/wcs/stores/servlet/CategoryDisplay? catalogId=-724&storeId=724&categoryId=2644214&langId=-5&dualCurrId=1221 Está disponible en castellano.Navegadores diseñados especialmente para personas con discapacidad Para cada una de estas aplicaciones se da la dirección web.p65 98 08/11/2007. ¡Ojo con esta dirección web que es muy larga! 98 diseño para todos. Sus últimas actualizaciones datan del año 2001.0 DE IBM http://www-134. BRAILLESURF DE BRAILLENET http://www. BROOKESTALK DE OXFORD BROOKES UNIVERSITY http://www.ac.snv. donde se puede encontrar una breve descripción y se menciona qué características adaptativas soporta. un magnificador para ampliar el tamaño del texto y es compatible con los dispositivos de lectura braille. La mayoría de ellos están disponibles en su versión en inglés.brookes. Es de distribución gratuita.htm Disponible una versión en castellano.uk/schools/cms/research/speech/spanish/spanish.htm Disponible en castellano. y sólo se señala la disponibilidad en castellano cuando ésta existe. Se distribuye gratuitamente. Se trata de un navegador sólo texto que dispone de un lector de pantalla.ibm.fr/inova/bs4/uk/index. 1. Funciona con los sistemas operativos Windows 95 y siguientes. Funciona para los sistemas operativos Windows 95 y siguientes. Se trata de un navegador por voz que presenta texto en imagen.jussieu. desarrollada en colaboración con la ONCE. Dispone de búsqueda inteligente y magnificador de pantalla.

Todos los menús y diálogos en voz.Es un navegador web con voz que proporciona acceso a internet y correo electrónico a las personas invidentes.htm No disponible en castellano. SENSU INTERNET BROWSER http://www. 12:18 . soporte para lector de línea braille y formato de fuentes especiales. Navegación a través de los controles estándar de Windows o un método de navegación opcional con el teclado numérico. pero no para la versión actual.sensus.p65 99 08/11/2007.dk/sib10uk. Sincronización oral y visual de gráficos. que utiliza el módulo de conversión texto-voz de IBM. Servidor web integrado y funciones de correo electrónico. Una Guía de Aprendizaje integrada para los usuarios nuevos y los que ya tienen experiencia. Sus principales características (según el fabricante) son: Tecnología de ayuda autónoma para acceder a internet. No se trata de software gratuito.0. Detección automática del idioma de la página web hasta en siete idiomas en las versiones de idioma seleccionadas. que incluye texto alternativo y metatexto. Posibilidad de buscar por todo el texto oído de la página web. en la actualidad). Su distribución es gratuita. 99 diseño para todos. Dispone de salida de voz. con graves problemas de visión y con dificultades para la lectura. texto y vistas de voz de páginas web. aunque tiene un precio asequible (146.00 euros. Se trata de un navegador por voz especialmente diseñado para entornos Windows 95/98 e Internet Explorer 4. En versiones anteriores se ha distribuido una demo ejecutable.

Veamos algunos de ellos (todos proporcionan versiones de demostración): ASAW DE MICROTALK http://www. 12:18 . Salidas: Voz y Braille. HAL DE DOLPHIN http://www.01) y funciona con todas las versiones Windows a partir de la 95.com/ Sistemas operativos: DOS y versiones Windows 95 y siguientes. Firefox.SIMPLY WEB 2000 http://www.p65 100 08/11/2007. Lynx).uk/ Sistemas operativos: DOS y versiones Windows 95 y siguientes.com/sw/ No disponible en castellano.co. Lectores de pantalla Un lector de pantalla es utilizado para permitir la navegación de la pantalla presentada por nuestro sistema operativo mediante la salida de voz o braille y.hj.microtalk. JAWS DE FREEDOM SCIENTIFIC http://www. Opera) o con otros navegadores del tipo «solo texto» (por ejemplo.com/fs_products/JAWS_HQ.asp Sistemas operativos: DOS y versiones Windows 95 y siguientes. 100 diseño para todos.dolphinuk. Otro navegador por voz que utiliza la ingeniería de Internet Explorer (desde la versión 4. Su distribución es gratuita. Salida: Voz. puede operar en las principales aplicaciones. Salidas: Voz y braille.econointl. por lo tanto. Netscape. En el contexto de navegación estos lectores se utilizan junto con un navegador estándar del tipo de los descritos aquí (IExplorer.

screenreader. Salidas: Voz y braille.com/ Sistemas operativos: Windows 95/98/ME Salida: Voz. 12:18 . Salida: Voz. SIMPLY TALKER DE ECONONET http://www.co.com/whywv97.econointl. WINDOW-EYES DE GWMICRO http://www. WINVISION FROM ARTIC http://www.htm Sistemas operativos: Versiones Windows NT/2000/XP.virgo4. 101 diseño para todos.uk/ Sistemas operativos: Versiones Windows 95 y siguientes.p65 101 08/11/2007.LOOKOUT DE CHOICE TECHNOLOGY http://www.com/products/ Sistemas operativos: Versiones Windows 95 y siguientes. VIRGO DE BAUM http://www.artictech. Salida: Voz.gwmicro.de/html/v45. Salidas: Voz y braille.htm Sistemas operativos: Versiones Windows 95 y siguientes.

12:18 .102 diseño para todos.p65 102 08/11/2007.

PC de automóvil. Cada pauta está asociada a uno o más 103 diseño para todos. explican cómo hacer los contenidos multimedia más accesibles a una amplia audiencia. entorno de manos libres. La especificación contiene catorce pautas.). El fin principal de estas pautas es promover la accesibilidad. cualquiera que sea la aplicación de usuario utilizada (por ejemplo. que son los principios generales para el diseño accesible. navegador de sobremesa. entornos ruidosos. vídeo. Estas pautas no desalientan a los diseñadores para la utilización de imágenes.). navegador de voz.Las pautas de accesibilidad al contenido en la web 1. por el contrario. habitaciones infra o supra iluminadas. siguiéndolas. o las limitaciones bajo las que opere (por ejemplo. teléfono móvil.0» son una especificación del W3C que proporciona una guía sobre la accesibilidad de los sitios de la web para las personas con discapacidad. 12:18 .0 de w3c/wai ¿Qué son las Pautas de Accesibilidad al Contenido en la web? Tal como sus redactores dicen: Estas pautas explican cómo hacer accesibles los contenidos de la web a personas con discapacidad. De cualquier modo. etc. se hará la web más asequible también para todos los usuarios.. Seguir estas pautas ayudará también a cualquier persona a encontrar información en la web más rápidamente. Las pautas están pensadas para todos los diseñadores de contenidos de la web (autores de páginas y diseñadores de sitios) y para los diseñadores de herramientas de creación. etc.p65 103 08/11/2007. Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. Las «Pautas de Accesibilidad al Contenido en la Web 1. etc.

Un apéndice de estas pautas. La Prioridad 2 el desarrollador debe cumplirla. los «niveles de adecuación»? Cada punto de verificación tiene asignado uno de los tres niveles de prioridad: • La Prioridad 1 es para los puntos de verificación que el desarrollador tiene que cumplir.p65 104 08/11/2007.0». 104 diseño para todos. ¿Qué son las «prioridades». • • • El nivel de adecuación «A» (A) incluye los puntos de verificación de prioridad 1. 2 y 3. la «Lista de puntos de verificación para las Pautas de Accesibilidad al Contenido en la Web 1. algunos grupos de personas serán incapaces de acceder a la información de un sitio. El nivel «Triple A» (AAA) incluye las prioridades 1. sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios. si no. El nivel «Doble A» (AA) incluye las prioridades 1 y 2. presenta los puntos de verificación clasificados por prioridades. Estas pautas no sólo hacen las páginas más accesibles para las personas con discapacidad. La Prioridad 3 el desarrollador puede cumplirla. en particular para los que utilizan navegadores diferentes o para los que manejan ordenadores portátiles con pantallas pequeñas o basados en la voz. • • La especificación tiene tres niveles de adecuación para facilitar la referencia por otras organizaciones.puntos de verificación que describen cómo aplicar esa pauta a las características particulares de las páginas web. 12:18 . para encontrarlas fácilmente. algunas personas hallarán dificultades para acceder a la información. sin ello alguien encontrará muchas dificultades para acceder a la información. de lo contrario.

La incapacidad para participar en el comercio en la red. El uso incorrecto de los elementos estructurales en las páginas. La ausencia de información alternativa para los usuarios que no pueden acceder a los marcos («frames») o a los programas incrustados («scripts»). las barreras pueden significar: • • • • • La falta de acceso a información precisa para programas educativos. con las barreras de las «aplicaciones de usuario» (navegadores.¿Por qué son necesarias estas pautas? Las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la web debido a la combinación de barreras en la información de las páginas web. dispositivos multimedia o ayudas técnicas como los lectores de pantalla o reconocedores de voz). auditiva y cognitiva/ neurológica. Los sitios con un contraste de colores pobre. Algunos ejemplos de barreras habituales en las páginas web Estas pautas se refieren a las barreras que pueden encontrar en las páginas web las personas con discapacidad física. Para algunas personas con discapacidad. Las tablas difíciles de interpretar cuando se alinean. Estas Pautas tienen relación específicamente con la reducción de barreras en las páginas web.p65 105 08/11/2007. La falta de acceso a información relacionada con el empleo o en las intranets del puesto de trabajo. visual. 105 diseño para todos. La falta de acceso a la información general de la web. La falta de acceso a información sobre actividades o programas cívicos. Los sonidos no subtitulados o las imágenes no descritas. 12:18 . Los problemas habituales de accesibilidad a los sitios web incluyen: • • • • • • • Imágenes sin texto alternativo. Ausencia de texto alternativo para los puntos sensibles de los mapas de imagen.

En algunos casos.p65 106 08/11/2007. sonidos.. de aprendizaje o sordera. El fundamento que sustenta la pauta y algunos grupos de usuarios que se benefician de ella. 12:18 . El texto puede ser interpretado por sintetizadores de voz o dispositivos braille y puede ser presentado visualmente (en varios tamaños) en visualizadores de ordenador y en el papel.). para tablas complejas. carteles o diagramas) o el sonido del contenido auditivo por ejemplo.¿Cómo se presentan las PAUTAS? Dentro del texto normativo. Así un texto equivalente para la imagen de una flecha ascendente que vincule con una tabla de contenidos. Esta pauta enfatiza la importancia de aportar equivalentes textuales para los contenidos no textuales (por ejemplo. podría ser «Ir a tabla de contenidos». etc directamente. un equivalente debería describir la apariencia del contenido visual (por ejemplo. Proporcione alternativas equivalentes para el contenido visual y auditivo Proporcione un contenido que. imágenes. cumpla esencialmente la misma función o propósito que el contenido visual o auditivo Algunas personas no pueden utilizar imágenes.. Pauta 1. las catorce pautas o principios generales de diseño accesible incluyen: • • • Número de la pauta. para los ejemplos sonoros usados en educación). applets. Exposición de la pauta. sonido pregrabado. presentado al usuario. pero sí pueden utilizar páginas que incluyen información equivalente a los contenidos visuales o auditivos. La información equivalente debe cumplir la misma finalidad que los contenidos visuales o auditivos. La importancia del texto equivalente radica en su capacidad para ser interpretado por vías que son accesibles para personas pertenecientes a diversos grupos de discapacidad usando diversa tecnología. películas. vídeo. El braille es esencial 106 diseño para todos. El sintetizador de voz es esencial para personas ciegas y para las que tienen dificultades de lectura que a menudo acompañan a discapacidades cognitivas.

no de acuerdo con las especificaciones) dificulta la accesibilidad. La salida visual de texto beneficia tanto a los usuarios sordos como a la mayoría de usuarios de la web. las personas que no puedan diferenciar ciertos colores. tanto como para muchos individuos que solamente son ciegos. Cuando los colores de primer plano y de fondo tienen un tono similar. no recibirán la información. A menos que se proporcionen descripciones verbales de las acciones representadas. Proporcionar equivalentes no textuales (dibujos. Pauta 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente Marque los documentos con los elementos estructurales apropiados. Pauta 2. En las películas o presentaciones visuales. Controle la presentación con hojas de estilo en vez de con elementos y atributos de presentación El uso de marcadores de forma inapropiada (es decir. y los usuarios que no tengan pantallas en color o utilicen dispositivos de salida no visuales. videos. especialmente los analfabetos o personas con dificultad para la lectura. la acción representada. tal como el lenguaje corporal u otras pistas visuales.para personas sordo-ciegas. las personas que no puedan ver (o visualizar) el contenido visual. El mal uso de marcadores para una presentación (por ejemplo. podrían no estar acompañadas de suficiente información auditiva como para transmitir la misma información. utilizando una tabla para maquetar o un encabezado —etiqueta H— para cambiar el tamaño de la fuente) dificulta que los usuarios con software especializado entiendan la organiza107 diseño para todos. pueden no proporcionar suficiente contraste en las pantallas monocromáticas. así como a las personas con diferentes tipos de deficiencias de percepción de los colores. sonido) del texto es también beneficioso para algunos usuarios.p65 107 08/11/2007. 12:18 . No se base sólo en el color Asegúrese de que los textos y gráficos son comprensibles cuando se vean sin color Si el color por sí mismo se usa para transmitir información. no podrán percibirlo.

los desarrolladores de contenidos no deben sacrificar el marcador apropiado porque un determinado navegador o ayuda técnica no pueda procesarlo correctamente. la utilización de los marcadores de presentación en lugar de marcadores estructurales para transmitir estructura (por ejemplo. incluso para aquellos con discapacidades de aprendizaje. es apropiado usar el elemento TABLE en HTML para marcar información tabular aunque algunos lectores de pantalla antiguos no manejen correctamente el texto contiguo. construir lo que parece una tabla de datos con un elemento HTML PRE) hace difícil interpretar una página de forma inteligible a otros dispositivos. haciendo el documento más accesible a usuarios multilingües. Deberían también proporcionar la expansión de las abreviaturas y los acrónimos. Identifique el idioma usado Use marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero Cuando los desarrolladores de contenido especifican los cambios en el idioma de un documento. cognitivas o sordera. Los marcadores de idioma mejoran también la legibilidad de la web para todo el mundo. Más aún. En el otro extremo. Además de apoyar a las ayudas técnicas. Por ejemplo. la identificación del idioma usado permite a los motores de búsqueda localizar las palabras claves e identificar los documentos en el idioma deseado. 12:18 .p65 108 08/11/2007. 108 diseño para todos. Los desarrolladores de contenidos pueden sentir la tentación de usar (o usar mal) construcciones que aseguren el formato deseado en los navegadores antiguos. Los desarrolladores de contenido deberían identificar el idioma predominante del contenido de un documento (a través de un marcador o en el encabezado HTTP). 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. los sintetizadores de voz y los dispositivos braille pueden cambiar automáticamente al nuevo lenguaje.ción de la página o cómo navegar por ella. Deben darse cuenta de que estas prácticas causan problemas de accesibilidad y deben considerar si el formato es tan importante como para hacer el documento inaccesible a algunos usuarios.

Usar tablas para cualquier finalidad crea también especiales dificultades para los usuarios de lectores de pantalla. Los puntos de verificación de esta pauta beneficiarán directamente a las personas que accedan a la tabla por medios auditivos (por ejemplo un lector de pantalla o un PC de automóvil). 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. éstas no proporcionaran a la aplicación de usuario la información necesaria para ello. A menos que marquemos apropiadamente las tablas.). 109 diseño para todos. Cree tablas que se transformen correctamente Asegúrese de que las tablas tienen los marcadores necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario Las tablas deberían utilizarse solamente para marcar la información tabular («tablas de datos»). Asegúrese de que las páginas que incorporan tecnologías digitales se transformen correctamente Asegúrese de que las páginas son accesibles incluso cuando no se soportan las tecnologías más modernas o éstas estén desconectadas Si bien se alienta a los desarrolladores de contenidos a usar tecnologías digitales que superen los problemas que proporcionan las tecnologías existentes. Pauta 6. 12:18 .Cuando los cambios en las abreviaturas y el idioma no son identificados. etc. Los desarrolladores de contenidos deberían evitar usarlas para maquetar páginas («tablas de composición»).p65 109 08/11/2007. pueden ser indescifrables para los lectores de pantalla y los dispositivos braille. o a aquellos que sólo visualicen una parte de la página cada vez (por ejemplo. los usuarios ciegos o de escasa visión que utilicen un sistema auditivo o un dispositivo braille u otros usuarios de dispositivos con pantallas pequeñas. deberán saber cómo hacer para que sus páginas funcionen con navegadores más antiguos. y para quienes decidan desconectar esta característica. Pauta 5.

Pauta 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes
Asegúrese de que los objetos o páginas que se mueven, parpadean, se desplazan o se actualizan automáticamente, 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 también distraer de tal manera que el resto de la página se vuelve ilegible para las personas con discapacidades cognitivas. Los lectores de pantalla son incapaces de leer textos móviles. Las personas con discapacidades físicas podrían no ser capaces de moverse tan rápida o certeramente como para interactuar con objetos móviles. Todos los puntos de verificación 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 característica.

Pauta 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas
Asegúrese de que la interfaz de usuario sigue los principios de un diseño accesible: funcionalidad de acceso independiente del dispositivo, teclado operable, voz automática, 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 solución alternativa accesible.

Pauta 9. Diseñe para la independencia del dispositivo
Utilice características que permitan la activación de los elementos de la página a través de diversos dispositivos de entrada El acceso independiente del dispositivo significa que el usuario puede interactuar con la aplicación de usuario o el documento con un dispositivo 110

diseño para todos.p65

110

08/11/2007, 12:18

de entrada (o salida) preferido: ratón, teclado, voz, puntero de cabeza (licornio) u otro. Si, por ejemplo, un control de formulario sólo puede ser activado con un ratón u otro dispositivo de apuntamiento, alguien que use la página 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 imágenes usadas como vínculos, hace posible a los usuarios interactuar con ellos sin un dispositivo de apuntamiento. Generalmente, las páginas que permiten la interacción a través del teclado son también accesibles a través 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 técnicas y los antiguos navegadores operen correctamente Por ejemplo, los navegadores antiguos no permiten al usuario navegar a cuadros de edición vacíos. Los antiguos lectores de pantalla leen las listas de vínculos consecutivos como un solo vínculo. Estos elementos activos tienen, por tanto, difícil 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 verificación de esta pauta se aplican hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) solucionen estos problemas. Los puntos de verificación están clasificados como «provisionales» lo que significa que el Grupo de Trabajo de las Pautas de Contenido en la web los considera válidos y necesarios para la accesibilidad de la web en el momento de la publicación de este documento. Sin embargo, el Grupo de Trabajo espera que estos puntos de verificación no sean necesarios en un futuro, una vez que las tecnologías de la web hayan incorporado las características y capacidades esperables.

111

diseño para todos.p65

111

08/11/2007, 12:18

Pauta 11. Utilice las tecnologías y pautas W3C
Utilice tecnologías W3C (de acuerdo con las especificaciones) y siga las pautas de accesibilidad. Donde no sea posible utilizar una tecnología W3C, o usándola se obtengan materiales que no se transforman correctamente, proporcione una versión alternativa del contenido que sea accesible Las actuales pautas recomiendan las tecnologías W3C (por ejemplo, HTML, CSS, etc.) por varias razones: • • Las tecnologías W3C incluyen características accesibles «incorporadas». Las especificaciones W3C pronto serán revisadas para asegurar que los temas de accesibilidad se toman en consideración en la fase de diseño. Las especificaciones W3C están 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 autónomas. A menudo, estos formatos no pueden ser visualizados o navegados con aplicaciones de usuario estándares (incluyendo ayudas técnicas). Evitar estos formatos y características no estándar (elementos, atributos, propiedades y extensiones patentados), tenderá a hacer más accesibles las páginas a más gente que utiliza una amplia variedad de hardware y software. Cuando deba utilizar tecnologías no accesibles (patentadas o no), debe proporcionar una página equivalente accesible. Incluso cuando se utilicen tecnologías W3C, deben ser usadas de acuerdo con las pautas de accesibilidad. Cuando utilice tecnologías digitales, asegúrese 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 página respecto a la accesibilidad y utilidad después del proceso de conversión. Si una página no se convierte de forma legible, revise la página hasta que su presentación original se convierta adecuadamente o bien proporcione una versión en HTML o en texto plano.

112

diseño para todos.p65

112

08/11/2007, 12:18

Pauta 12. Proporcione información de contexto y orientación
Proporcione información de contexto y orientativa para ayudar a los usuarios a entender páginas o elementos complejos Agrupar los elementos y proporcionar información contextual sobre la relación entre elementos puede ser útil a todos los usuarios. Las relaciones complejas entre las partes de una página pueden resultar difíciles de interpretar para personas con discapacidades cognitivas o visuales.

Pauta 13. Proporcione mecanismos claros de navegación
Proporcione mecanismos de navegación claros y coherentes, (información orientativa, barras de navegación, un mapa del sitio, etc.) para incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio Los mecanismos de navegación claros y coherentes son importantes para las personas con discapacidad cognitiva o con ceguera y benefician a todos los usuarios.

Pauta 14. Asegúrese de que los documentos sean claros y simples
Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos La maquetación coherente de páginas, los gráficos reconocibles y el lenguaje fácilmente comprensible benefician a todos los usuarios. En particular, ayudan a personas con discapacidades cognitivas o con dificultades en la lectura. Por tanto, asegúrese de que las imágenes tienen textos equivalentes para los ciegos, los de baja visión o para cualquier usuario que no puede o ha elegido no ver los gráficos. La utilización de un lenguaje claro y simple promueve una comunicación efectiva. El acceso a la información escrita puede ser difícil para personas con discapacidades cognitivas o de aprendizaje. La utilización de un lenguaje claro y simple también beneficia a las personas cuyo primer idioma es diferente al del autor, incluidas aquellas que se comunican principalmente mediante lengua de signos. 113

diseño para todos.p65

113

08/11/2007, 12:18

p65 114 08/11/2007. 12:18 .diseño para todos.

Segunda parte CODIFICACIÓN HTML Y CSS diseño para todos. 12:18 .p65 115 08/11/2007.

116 diseño para todos. 12:18 .p65 116 08/11/2007.

. XML. Por ejemplo. Por ejemplo. El elemento «h1» contiene un encabezado (por ejemplo. Probablemente no sepamos muy bien qué significa eso. en otras palabras. el elemento «p» contiene un párrafo de texto. El formato de los documentos se marca mediante etiquetas (tags) que indican el comienzo y el final de los elementos que componen el documento. el HTML.p65 117 08/11/2007. 12:18 . El HTML es un lenguaje muy simple. Probablemente hayamos leído que HTML es una aplicación de SGML. SGML. También habremos leído sobre otros lenguajes más «exóticos» como XHTML y XML y. Es un estándar internacional que permite definir lenguajes para dar formato a documentos (mark-up languages). SGML y HTML SGML significa Standard Generalized Mark-up Language o Lenguaje Generalizado Estándar para el Formato de Documentos («mark-up» es un término de imprenta que significa el conjunto de instrucciones estilísticas detalladas escritas en un manuscrito que debe ser tipografiado).Codificación HTML HTML. El comienzo del párrafo se marca con la etiqueta <p> y el final del párrafo se marca (opcionalmente) con la etiqueta </p>. Cada uno de estos elementos tiene un significado estructural diferente. una aplicación de SGML) para dar formato a documentos de hipertexto. XHTML. El elemento «a» indica un hipervínculo (o más concretamente el origen o el destino de 117 diseño para todos. probablemente. también nos preguntaremos qué son exactamente. es un lenguaje de formato de documentos definido de acuerdo con SGML (o.. el título de un capítulo) y está delimitado por las etiquetas <h1> y </h1>.

Etcétera. pueden ser representados de acuerdo con esa estructura por cualquier navegador.p65 118 08/11/2007. Todo ello introdujo rápidamente problemas. la utilización de tablas para colocar los elementos en la pantalla en lugar de para contener datos tabulares o la división de un mismo documento en marcos. los documentos así obtenidos carecen de atractivo visual. de dibujar los marcadores de las listas. 12:18 . Aunque haga un salto de línea. la HTML 4. seguirá siendo un párrafo. según sus capacidades. información sobre la estructura de los contenidos. Él mismo se encargará de escribir los títulos con un tipo más grande que el de los párrafos.01 de 1997. el siguiente párrafo: <p>Esto es un párrafo. ya que el HTML se complicó y los documentos se hicieron menos accesibles. De hecho los documentos perdieron su estructura. Por ejemplo. Aunque haga un salto de línea. seguirá siendo un párrafo. de poner el espacio entre párrafos. La simplicidad del HTML es un punto a su favor: como los contenidos están estructurados de manera lógica. declaró todos los elementos de presentación como «desaconsejados» (en inglés: 118 diseño para todos. Hoy es posible utilizar hojas de estilo para especificar la apariencia de los elementos. Los navegadores más antiguos ya no eran capaces de entender la estructura de los nuevos documentos. por tanto.</p> Esto se representará en el navegador así: Esto es un párrafo.un hipervínculo.. de dibujar las líneas entre las celdas de una tabla. según cómo se marque en el documento) y está delimitado por las etiquetas <a> y </a>. el código HTML sólo contiene. Si escribimos. pero durante varios años ha sido necesario recurrir a trucos y a elementos inventados para ello. En teoría. lo cual era la base misma del HTML. el elemento <font> para cambiar la fuente de un elemento. etc. sin que nosotros tengamos que preocuparnos de esos aspectos. por ejemplo. Sin embargo. La última especificación de HTML.

según sus necesidades. animaciones. música. <autor>. su propio vocabulario. el HTML ha ido aumentando su complejidad para responder a las demandas de los usuarios de la web. encerrados entre las etiquetas correspondientes: <titulo>. Si. es decir. es decir. <precio>.p65 119 08/11/2007. Cada usuario (o grupo de usuarios) puede crear su propio lenguaje para el formato de datos y documentos. 12:18 . deberían utilizarse hojas de estilo. A partir de ahí. un metalenguaje. El lenguaje de la web necesita seguir evolucionando. Es una versión de SGML. etc. etc. por ejemplo.deprecated). teléfonos móviles) y algún día se convertirá en una web realmente interactiva. diseñada precisamente para hacer frente a los problemas de compatibilidad y adaptabilidad de las tecnologías digitales a internet. Al principio era suficiente para los físicos nucleares para los que iba a servir. la idea no es que cada usuario se cree su propio lenguaje. siguiendo las reglas de XML. un lenguaje para definir lenguajes. En XML no hay elementos. y que se escojan los apropia119 diseño para todos. puedes definir tus propios elementos. Por supuesto. Por ejemplo. de modo que los nuevos navegadores no se verían obligados a soportarlos. como el SGML. SGML y XML Como hemos visto. en riesgo de ser declarados como obsoletos en próximas especificaciones. pero hoy los documentos HTML tienen gráficos. podrías definir una hoja de estilo para definir la presentación de cada tipo de elemento en un navegador visual o en una salida impresa. XML no es un nuevo lenguaje que vaya a suplantar a HTML. para ordenarlos. <editorial>. si quieres crear una lista de libros. En realidad es. XML significa «Extensible Mark-up Language». desde su creación. más sencilla y más fácil de aplicar que el propio SGML. quisieramos vender los libros por internet podríamos utilizar estas aplicaciones para permitir a nuestros clientes realizar búsquedas y hacer pedidos. cada día llega a tecnologías diferentes (dispositivos portátiles. En su lugar. sino que haya estándares generales. XML es una respuesta a esta necesidad. pero también podrías utilizar una aplicación (tal vez una de las muchas aplicaciones ya existentes para el manejo de documentos XML) para buscar libros por autor.

Desgraciadamente. exponenciales (<exp>). no importa. pero esto va a suponer esperar un tiempo de adaptación que se podría haber evitado. ¿Es necesario entonces escribir las nuevas páginas en XHTML? Realmente no. Esto permite crear lenguajes específicos para cada aplicación o para cada tecnología. ya lo hicieron. son diferencias formales. ya que todos los elementos necesitan una etiqueta inicial y otra final. XML y XHTML Si con XML se pueden definir lenguajes para formato de documentos. El XHTML 1. ¿se podría definir HTML como aplicación de XML? Sí. como sumatorios (<sum>). WAP no es una aplicación XML.0. Es más. MathML es un lenguaje para el formato de ecuaciones matemáticas. si es necesario. Como podemos observar. las etiquetas tienen que ir obligatoriamente en minúsculas. en HTML el elemento «p» no necesita la etiqueta final </p>. Vemos aquí un ejemplo de cómo los estándares pueden ayudar a facilitar la adaptación de tecnologías digitales a la web. 12:18 .0 es exactamente igual que el HTML 4. Por ejemplo. lo cual finalmente puede simplificar las cosas. El XHTML es en el fondo la 120 diseño para todos. La extensibilidad se refiere precisamente a eso.. En MathML hay definidos elementos útiles para las fórmulas matemáticas. Las capacidades de XHTML 1. DocBook es un lenguaje para el formato de libros electrónicos. En el futuro se espera que los teléfonos móviles soporten XML. excepto en que sigue las reglas de XML. Como el HTML es demasiado complicado para ellos. que son más estrictas que las de SGML. y lo llamaron XHTML 1. En DocBook hay un elemento para párrafos (<Para>). se desarrolló un nuevo lenguaje simplificado llamado WAP específico para teléfonos móviles. En HTML puedes escribir <p> o <P>. pero no hay un elemento para párrafos. En XHTML. En XHTML sí son necesarias. Por ejemplo.dos combinándolos entre sí. Por ejemplo. Hay muchos lenguajes definidos de acuerdo con las reglas de XML (aplicaciones XML). los teléfonos móviles tienen una capacidad de procesamiento mucho menor que los ordenadores personales.0 son exactamente las mismas que las de HTML 4.p65 120 08/11/2007. no va a haber ninguna diferencia. etc.

es decir. Sin embargo. La modularización de XHTML se ha hecho con vistas a las tecnologías digitales. las cosas evolucionan muy rápido. XML. Para HTML 4. encargado de la creación de los Standard Web. Los millones de páginas web que existen hoy son HTML. así que nunca está de más mantenerse al día. para otras podría ser interesante ampliarlo con nuevas capacidades. que debe hacer referencia a una de las tres definiciones del tipo de documento que existen. utilizando los módulos necesarios. Esta declaración debe ser la primera línea de nuestro documento y es necesaria para decirle al navegador qué versión de HTML es la que se usa en la página.p65 121 08/11/2007. Hoy XHTML ya es modular. etc. Es de esperar que en el futuro existan aplicaciones que permitan crear fácilmente documentos XHTML. XHTML deben tener una declaración de tipo de documento denominada DOCTYPE. los elementos y atributos que están disponibles para cada tipo de documento. define que los ficheros HTML. La DTD (definición del tipo de documento) es la estructura reglamentaria.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las hojas de estilo). Los navegadores seguirán entendiendo HTML. y hasta que no haya editores capaces de crear documentos eficientemente. Si no se hace. un módulo de imágenes.forma que tuvo el W3C de dar a entender que habían decidido apostar por la implementación de XML. W3C creó XHTML para posibilitar en el futuro la modularización del HTML. Pero HTML no va a desaparecer de golpe. Una solución es dividir el HTML en partes o módulos independientes y que cada navegador tome los que necesite según sus capacidades: un módulo de texto. el navegador procesará la página en modo Quirks (modo de compatibilidad) pudiendo no interpretar correctamente el código de la página. existen 3 tipos de DTD: 121 diseño para todos. Hemos visto que para algunas aplicaciones conviene definir un subconjunto simplificado del HTML. no deberíamos preocuparnos en exceso. 12:18 . un módulo de scripts. un módulo de formularios. Definición de tipo de documento EL W3C.

Éste es el modo recomendado por el W3C.org/TR/html4/strict. El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4. 12:18 . HTML 4.1. Esto implicará que sólo puedan usarse las etiquetas de HTML 4.w3.01. elementos desaconsejados o elementos obsoletos. El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4. El modo de definirlo sería: 122 diseño para todos. HTML estricto Si declaramos esta DTD.dtd\"> 3. generalmente encontraremos su forma estricta.w3.01 frameset: Ésta es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos).01 Transitional//EN\" \"http://www.01 transitorio El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict (estricto) pero agrega cualidades de presentación.dtd\"> 2.01//EN\" \"http://www.dtd\"> Las mismas tres formulaciones (transitoria.w3. El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4. el navegador pasará a actuar en cumplimiento de los estándares (Standards compílanse).org/TR/html4/frameset. Se llama Transitional (transitorio) porque está pensado como transición hacia HTML 4 estricto.p65 122 08/11/2007. ya que es compatible con el CSS y puede ser interpretado correctamente por todos los navegadores.org/TR/html4/loose.01 Frameset//EN\" \"http://www. frameset y estricta) existen para la codificación XHTML 1. por lo que. En la práctica no parece lógico utilizar esta codificación en sus formulaciones transitoria y frameset. lo que hace mucho más fácil el paso de nuestros documentos al XHTML que muy posiblemente tienda a sustituir al HTML en los próximos años. HTML 4.0.

El resultado es un documento con la siguiente estructura: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1strict.p65 123 08/11/2007. El cuerpo. que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto. por ejemplo. Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>.dtd"> <html> <head> 123 diseño para todos. 12:18 . flanqueado por las etiquetas <body> y </body>.0 Strict//EN" "http://www.w3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Sintaxis de HTML El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta (tag).0 Strict// EN" "http://www. el titulo de nuestra página. El encabezado.w3. Dentro de este documento.w3.org/TR/xhtml1/DTD/xhtml1-strict. podemos asimismo distinguir dos partes principales: 1. La etiqueta presenta frecuentemente dos partes: 1. Un cierre de tipo </etiqueta> Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta.org/.dtd"> Si queremos saber si nuestra página cumple con la DTD definida podemos hacerlo desde http://validator. Una apertura de forma general <etiqueta> 2. delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como. 2.

Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula.p65 124 08/11/2007. En la columna «DTD» se indica qué declaración de tipo de documento para XHTML 1. Parte del documento que será mostrada por el navegador: Texto. <html>. sonidos. T = transitorio. palabras clave. </body> </html> En HTML. Etiquetas HTML Veamos ahora cuáles son las etiquetas que se utilizan en la codificación HTML según la función que desempeñan (las que están desaconsejadas se señala esta condición en el propósito).Etiquetas y contenidos del encabezado. Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo. En la columna «etiqueta» figura la etiqueta de apertura. ya que otras XHTML.. metadatos.. F = frameset). 3. 2. <HTML> o <HtMl> son la misma etiqueta. En la columna «propósito» aparece la utilidad de cada etiqueta. que cada día tiene mayor grado de aplicación. a la que le corresponde una de cierre... Para leer la tabla hay que saber: 1.O está permitida la etiqueta (S = estricto. imágenes. vínculos relacionales como el de la hoja de estilo. </head> <body> Etiquetas y contenidos del cuerpo. no es tan permisivo y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro. 124 diseño para todos. las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas. 12:18 . elementos multimedia.

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 básicas Formato texto <b> <font> <i> <em> <big> <strong> <small> <sup> <sub> <bdo> <u> <pre> <code> <tt> <kbd> <var> <dfn> <samp> <xmp> Cómo se muestra Bloques <acronym> <abbr> <address> <blockquote> <center> STF STF STF STF TF 125 diseño para todos.. Define texto preformateado Define un acrónimo Define una abreviatura Define un elemento de dirección Define una cita textual larga DESACONSEJADO. Define texto subrayado Define texto preformateado Define texto mostrado como código informático Define texto de teletipo Define texto de teclado Define una variable Define un término de una definición Define código informático de muestra DESACONSEJADO. Define el tamaño 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 pequeño Define texto en superíndice Define texto en subíndice Define la dirección en la que se muestra el texto DESACONSEJADO. 12:18 .Etiqueta <!DOCTYPE> <html> <body> <h1> a <h6> <p> <br> <hr> <!—.p65 125 08/11/2007.—> Propósito 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 párrafo Inserta un salto de línea Inserta una línea (gráfica) horizontal Define un comentario Define texto en negrita DESACONSEJADO..

Etiqueta Propósito Define una cita textual corta Define una cita Define texto insertado Define texto borrado DESACONSEJADO. 12:18 . Define texto tachado Define un ancla (donde se sitúa el enlace) Define un recurso de referencia Define una sub-ventana (un marco) Define un conjunto de marcos Define una sección noframe Define una sub-ventana (marco) en línea Define un formulario Define un campo de entrada de datos Define un área de texto Define un pulsado (botón) Define una lista seleccionable Define una opción de grupo Define un ítem en una caja de lista Define una etiqueta de control de formulario Define un conjunto de campos Define un título para un conjunto de campos 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 diseño para todos. Define texto tachado DESACONSEJADO.p65 126 08/11/2007. Define un campo de entrada de una línea: Define una lista desordenada (con viñetas) Define una lista ordenada (con números) Define un ítem de una lista DESACONSEJADO. Define una lista de direcciones Define una lista de definiciones Define un término de definición Define una descripción de una definición DESACONSEJADO.

Define una fuente base Define un script Define una sección noscript DESACONSEJADO.Etiqueta Propósito Define una imagen Define un mapa de imagen Define un área dentro de un mapa de imagen Define una tabla Define un título (o subtítulo) de tabla Define una celda de encabezado de tabla Define una línea 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 definición de estilo Define una sección en un documento Define una sección en un trozo de documento Define información sobre el documento Define el título del documento Define meta información Define una URL de base para todos los enlaces de una página DESACONSEJADO.p65 127 08/11/2007. 12:18 . Define un applet Define un objeto incrustado Define un parámetro 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 Imágenes <img> <map> <area> Tablas <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> Estilos <style> <div> <span> <head> <title> <meta> <base> <basefont> Meta información Programación <script> <noscript> <applet> <object> <param> 127 diseño para todos.

head.Atributos HTML Las etiquetas del HTML pueden tener «atributos».p65 128 08/11/2007. 12:18 . script. meta. html. br. frameset. param y script. iframe. Atributos de idioma No válidos en los elementos: base. Los atributos enumerados aquí son los principales. param. los de idioma y los de teclado. style y title. Atributo dir lang Valor ltr | rtl Descripción Establece la dirección del texto Establece el idioma en que está el código language_code Atributos de teclado: Atributo accesskey tabindex Valor Descripción Establece un atajo de teclado para acceder a un elemento Establece el orden de tabulación para un elemento character number 128 diseño para todos. Atributo Class id style title Valor class_rule o style_rule Descripción La clase del elemento Identificador de un único elemento Una definición de estilo en línea Un texto mostrado como un tool tip* id_name style_definition tooltip_text *Tool tip: cuadro emergente que muestra información de ayuda o amplía la información. Atributos principales No son válidos en los elementos: base. frame. que son estándares para todas las etiquetas (con algunas excepciones). hr.

Atributo onload onunload Valor Descripción Script se ejecuta cuando el documento se carga Script se ejecuta cuando el documento se descarga script script Eventos de elementos de formulario Sólo valido para elementos de formulario. br. como iniciar un script cuando el usuario pincha sobre un elemento. script. iframe.p65 129 08/11/2007. html. meta. style y title. frame. Atributo onkeydown onkeypress onkeyup Valor script Descripción 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 diseño para todos. Atributo onchange onsubmit onreset onselect onblur onfocus Valor Descripción Script se ejecuta cuando el elemento cambia Script se ejecuta cuando el formulario se envía 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. 12:18 . bdo. head. param.Atributos de eventos en HTML A partir de HTML 4. frameset. Eventos de ventana Sólo válidos para en elementos de «body» y «frameset». En las tablas siguientes se describen los atributos que se pueden insertar en las etiquetas HTML para definir acciones de evento.0 se tiene la posibilidad de ejecutar eventos en el navegador.

frameset. frame. bdo. param.p65 130 08/11/2007. Atributo onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Valor Descripción Qué hace cuando se pica con el ratón Qué hace cuando se pica doble con el ratón Qué hace cuando el botón del ratón se presiona Qué hace cuando el puntero del ratón se mueve Qué hace cuando el puntero del ratón se mueve sobre un elemento Qué hace cuando el puntero del ratón se mueve fuera de un elemento Qué hace cuando el botón del ratón es liberado script script script script script script script 130 diseño para todos. 12:18 . br. script. html. iframe.Eventos de ratón No valido en los elementos: base. head. style y title. meta.

Supongamos que decimos «Éste es un encabezamiento». Los estilos son. Su finalidad es definir cómo se han de mostrar los elementos HTML y con qué estilo se han de presentar. Se pueden definir múltiples hojas de estilo para una misma página web.p65 131 08/11/2007. <p> o <table>. «Ésta es una tabla» y lo hacemos utilizando etiquetas HTML como <h1>. a la especificación original HTML. «Éste es un párrafo». CSS soluciona problemas comunes Las etiquetas HTML fueron diseñadas originalmente para definir el contenido de un documento. como veremos más adelante y son almacenadas en archivos CSS. W3C creó los Estilos. como complemento al HTML 4. Las hojas de estilo externas pueden ahorrar un buen montón de trabajo.0. Esto supuso más dificultades a la hora de crear sitios web.¿Qué es CSS? CSS es la abreviatura de Cascading Style Sheet (Hojas de estilo en cascada). almacenados en hojas de estilo y fueron añadidos en la codificación HTML para solucionar algunos problemas. La maquetación del documento así realizada debe ser tomada con cuidado por el navegador si no utiliza ningún formato para las etiquetas. Dos de los más utilizados navegadores (Internet Explorer y Netscape) añadieron nuevas etiquetas HTML y atributos. 12:18 . Hoy día la mayoría de los navegadores soportan CSS. donde el contenido de los documentos HTML estaba claramente separado de la maquetación de presentación del documento. 131 diseño para todos. tales como <font>. normalmente. Para resolver este problema.

Hoja de estilo interna (dentro de la etiqueta <head> de la página web). con un simple cambio en el estilo. Incluso varias hojas de estilo externas pueden ser referenciadas desde un solo documento HTML. Múltiples hojas de estilo en una Las hojas de estilo permiten especificar la información sobre el estilo de muchas maneras. todos los elementos de una web son renovados automáticamente. donde los números indican la prioridad: 1. Las CSS son un gran paso adelante en el diseño web porque permiten el control del estilo y la maquetación de muchas páginas desde una sola. tal como lo hacía la etiqueta <font> o el atributo de color en HTML 3. podemos decir que todo estilo está en una «cascada» en una nueva hoja de estilo «virtual» siguiendo la siguiente regla.Las hojas de estilo ahorran trabajo Las hojas de estilo definen cómo se muestran los elementos HTML. Los estilos pueden ser especificados dentro de un elemento HTML. en archivos CSS externos. 132 diseño para todos. ¿Qué estilo será usado cuando hay más de una especificación de estilo para un elemento HTML? Hablando de forma genérica. 12:18 .p65 132 08/11/2007. Así. normalmente. Hoja de estilo por defecto del navegador. Haciendo un cambio global. a la hoja de estilo externa o a la que usa por defecto el navegador. dentro del elemento <head> de una página HTML o en un archivo CSS externo. Hoja de estilo externa. Estas hojas de estilo externas están disponibles para cambiar la apariencia y la maquetación de todas las páginas de un sitio web.2. el estilo en línea tiene la más alta prioridad. Las hojas de estilo se guardan. Un desarrollador puede definir un estilo para cada elemento HTML y aplicarlos a tantas páginas como él quiera. solamente editando un documento CSS. 2. la cual significa que anulará a la declaración de estilo dentro de la etiqueta <head> de la página. Estilo en línea (dentro del un elemento HTML). 4. 3.

básicamente. éstas deberán ir entre comillas: p {font-family: "sans serif"} Si se desea especificar más de una propiedad para un selector. y cada propiedad puede tomar un valor. éstas deberán ir separadas por punto y coma: P {font-family: "sans serif". 2.p65 133 08/11/2007. 12:18 . Selector. Propiedad. la propiedad es el atributo que se desea cambiar. La propiedad y el valor están separados por dos puntos y rodeados por corchetes. de tres partes: 1.Sintaxis de CSS La sintaxis de CSS consta. Text-align: center } 133 diseño para todos. 3. Su expresión escrita sería: Selector {propiedad: valor} El selector es. un elemento o una etiqueta HTML al que se desea definir. Un ejemplo simple de sintaxis sería: body {color: #000000} Si el valor tiene varias palabras. Valor. text-align: center} Para hacer más legible la definición se suele redactar de tal manera que cada propiedad ocupe una línea: P { Font-family: "sans serif". normalmente.

Por ejemplo: <p <h1 class="centrado">Texto</> class="centrado">Encabezado</h1> 134 diseño para todos. h2. p. h4. h6 { color: #990099 } A los selectores se les puede añadir una «clase» (class) de tal manera que se pueden definir distintos estilos para un mismo elemento HTML. Por ejemplo: . 12:18 . Supongamos que queremos definir dos tipos de párrafos: uno alineado a la izquierda y otro centrado.centrado {text-align: center} Esta clase se la podremos aplicar a distintos elementos. Lo podemos hacer con clases para el elemento «p». separándolos con una coma. Se puede omitir el elemento que hace la función de selector y definir una clase que será usada por todos los elementos HTML en la que se defina.izquierda {text-align: left} Después basta especificar la clase para el selector dentro del código HTML de la siguiente manera: <p class="centrado">Este texto está centrado</p> <p class="izquierda">Este texto está alineado a la izquierda</p> Sólo se puede definir una clase para un elemento en la codificación HTML.centrado {text-align: center} p.p65 134 08/11/2007. h5. h1. h2.Se pueden agrupar selectores.

12:18 .p65 135 08/11/2007.diveintoaccessibility. En él nos hemos inspirado para realizar este trabajo y por ello creo obligado recomendar su lectura para cualquiera que esté interesado: http://www.org 135 diseño para todos.Tercera parte HACER UNA BITÁCORA ACCESIBLE EJERCICIO PRÁCTICO Esta práctica tiene una deuda personal con el trabajo realizado por Mark Pilgrim en el año 2002 al crear su «Dive into accessibility» [«Inmersión en la accesibilidad»].

136 diseño para todos. 12:18 .p65 136 08/11/2007.

Entremos en su sitio en la web (http://www.p65 137 08/11/2007. solicitemos crear una bitácora y familiaricémonos con la herramienta. Se ha tomado como herramienta de edición para la bitácora la que proporciona Blogger. La dirección de esta bitácora es: http://usuarios.Introducción Esta parte del documento tiene una intencionalidad didáctica.com). 137 diseño para todos. con el editor de Blogger. un tanto especial. Como el propio nombre de este apartado indica. 12:18 . Para ello habrá que seguir los pasos que se detallan en ella.es/disweb2000/blog/. realizada como una bitácora. la práctica consistirá en realizar una bitácora accesible.discapnet. Existe una versión en línea de esta documentación.blogger.

138 diseño para todos.p65 138 08/11/2007. 12:18 .

12:18 . lo colocaremos entre comillas y. 139 diseño para todos. nos debemos acostumbrar a la palabra «post». Cualquier término que necesite aclaración. encerrado entre corchetes [ ].p65 139 08/11/2007. daremos una breve explicación.Primeras instrucciones En primer lugar. justo detrás. que es el nombre que recibe cada uno de los pequeños artículos que componen la bitácora.

140 diseño para todos. 12:18 .p65 140 08/11/2007.

no existe (hoy día) ningún dispositivo que pueda interpretarlos de forma razonable para las personas con ceguera.Paso 1 ¿Para quién es la accesibilidad web? Si nos preguntamos: ¿para quién es la accesibilidad?. Esto lo veremos más adelante al hablar del atributo «alt». No hace mucho tiempo. mediante lectores de pantalla.p65 141 08/11/2007. Por ese motivo voy a dar una serie de explicaciones sobre a qué grupos de personas. Tuve que explicarle que ellos acceden al contenido a través del oído. charlando con un profesor universitario de informática sobre unos cursos de accesibilidad en la web. por lo que la información que trasmitamos mediante cambios de color no los podrán percibir. Así. la accesibilidad web va a beneficiar. «Y ¿cómo ven las imágenes. los iconos y demás elementos no textuales». Por ese motivo deberemos dar otro tipo de alternativa si queremos que la información les llegue. Otro típico problema con los colores es el contraste. que habitualmente asociamos con el «daltonismo». o por el tacto. éste se asombraba al saber que estas personas se colocaban ante un ordenador y realizaban con él una amplia gama de trabajos. «Pero. con sus dispositivos de salida braille. en un catálogo de libros donde se nos informe que los títulos en rojo no están disponibles habrá personas que no puedan apreciar este cambio. pese a que es completamente cierto. la respuesta es sencilla: «Para todos». El grupo más evidente es el de personas con ceguera. por ejemplo. Los hay que tienen las conocidas como cegueras de color. en concreto. Pero con problemas visuales hay mucha más gente. Por lo tanto. 12:18 . Estas personas no distinguen determinados cambios en el color. Ésa es la cuestión. habrá que hacer algo para que el contenido visual no textual pueda llegar a ellos. Pero mucho me temo que esto no convencería a mucha gente. Un texto o una imagen que contraste poco con su fondo pueden no ser percibida por personas con 141 diseño para todos. que les leen el contenido en pantalla. ¡si no ven!» fue su asombrada exclamación.

Por ello debemos hacer los contenidos comprensibles y proporcionar ayudas. tendrán problemas para captarlo. sobre los que también hablaremos. No sólo las personas con problemas visuales encuentran barreras al navegar por la web. lo que hacen ampliando el tamaño del contenido de nuestras páginas web o mediante programas magnificadores de pantalla. Las explicaciones. Siguiendo en el ámbito de los problemas visuales. También es posible. si éstos no van provistos de una alternativa visual. beneficia a todos y no estábamos exagerando. Las personas con dificultades motrices en sus manos pueden encontrar serios problemas para navegar si no diseñamos nuestra web de tal manera que permita la navegación mediante teclado.este problema visual. 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 también hablaremos. como la utilización de explicaciones para las abreviaturas o acrónimos. Ya lo dijimos al comienzo.p65 142 08/11/2007. serán de mucha utilidad para estas personas. si las letras o imágenes no están correctamente diseñadas para poder ser ampliadas. en el caso de usuarios de lengua de signos. También las personas con dificultades de aprendizaje o con discapacidades intelectuales encuentran obstáculos para navegar por la web. Son capaces de ver el contenido pero. 12:18 . hay otro grupo de personas que tienen problemas de agudeza visual. Pero la larga lista de grupos de personas a las que beneficia un diseño accesible de nuestras páginas web no acaba aquí. También hablaremos de esto al tratar sobre los tamaños relativos en la hoja de estilo. que podemos añadir mediante el atributo «title». Necesitan contenidos claros y ayudas visuales con iconos claros y explícitos de las funciones que cumplen. que tengan dificultades para comprender contenido textual si éste utiliza expresiones poco habituales o demasiado complejas sobre las que no hacemos una explicación sencilla y comprensible para todos. Las personas con poco dominio del idioma en que está escrita la web se benefician de unos contenidos claros e intuitivos. Todo ello lo veremos al hablar de los problemas con el color. Éstas necesitan ampliar mucho el contenido de la pantalla. Las personas con dificultades auditivas o sordera tendrán problemas con los contenidos sonoros. Las personas que 142 diseño para todos.

12:18 . justifica suficientemente los esfuerzos que podamos realizar para hacer una web accesible. Las personas que manejan ordenadores en entornos ruidosos o con deficiente iluminación captarán mejor el contenido si éste no se basa exclusivamente en sonidos y dispone de colores con buen contraste. Mi pretensión es guiarte en una práctica sencilla que tiene como finalidad introducirte en el diseño accesible. Todo lo que explico aquí podrás aplicarlo al diseño de cualquier tipo de página web. por lo tanto.) se ven beneficiadas de un correcto diseño que permita la flexibilidad suficiente para adaptarse a sus pequeñas pantallas.manejan equipos antiguos con sistemas operativos basados sólo en texto accederán a todo el contenido si las imágenes disponen de texto alternativo. ¡felicidades! Has hecho una buena elección al tratar de aprender cómo hacer una bitácora accesible. Así pues. Pero también las personas que manejan los nuevos dispositivos de acceso al contenido web (teléfonos móviles. etc.p65 143 08/11/2007. palmtop. La lista es larga y. 143 diseño para todos. Más adelante podrás seguir profundizando hasta conocer los más íntimos recovecos del «diseño para tod@s» aplicado a las web.

12:18 . Si editamos la plantilla principal (seleccionando la solapa «plantilla» del editor del Blogger) podemos ver que la primera línea de código fuente es: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Hacerlo de forma correcta nos beneficia a todos.dtd"> Ésta es una gran ventaja.1 y XML. 144 diseño para todos.net). al comenzar una página web nuestro código debe comenzar con un DOCTYPE.0 (en sus versiones «estricta» o «transacional»).p65 144 08/11/2007. básicamente.w3. El DOCTYPE es la forma que tiene nuestra página web de decirle al navegador que la visita en qué «lenguaje» está escrita para que éste pueda saber cómo entenderse con ella.org/TR/xhtml1/DTD/xhtml1strict. Compruébalo y recuerda que para otros desarrollos debes tener en cuenta que la primera línea de código de tus páginas web en HTML tiene que llevar este tipo de declaración.Consorcio Mundial de la Web]: HTML 4.Paso 2 Elegir un DOCTYPE Al igual que cuando comenzamos a escribir una frase lo hacemos con una letra mayúscula. ya que este paso no nos va a dar trabajo.conclase. En el caso de Blogger. ya que algunas de las funciones de nuestro navegador dependen de que la página visitada se presente correctamente. tantos como tipos de código recomendados por W3C [World Wide Web Consortium . los desarrolladores tuvieron en cuenta este detalle y nos han ahorrado trabajo. identificándose con el DOCTYPE correspondiente a su codificación. XHTML 1. Es una cuestión de gramática. por fortuna.01 y XHTML 1. Hay diferentes DOCTYPE.0 Strict/ /EN" "http://www. Para aprender más cosas sobre DOCTYPE puedes visitar el sitio «HTML conClase» (http://html.

gov/standars/iso639-2/englangn.. Si lo hacemos correctamente.org/1999/xhtml" xml:lang="en" lang="en"> Ahora nos toca modificarla así: <html xmlns="http://www.. y a los programas de navegación que estén usando.p65 145 08/11/2007. pero nosotros 145 diseño para todos. el inglés «en» o el francés «fr». así que debemos decírselo a nuestros lectores.html. los diseñadores de las plantillas de Blogger definieron el inglés como el idioma en que estará escrita nuestra página. los programas lectores de pantalla.loc. Se puede encontrar la larga lista de esta convención en: http://www. podrán pronunciar las palabras correctamente al leer en voz alta el contenido del documento. 12:18 . leyera un texto escrito en este idioma o viceversa.org/1999/xhtml" xml:lang="es" lang="es"> De origen. De otro modo sonará como si un inglés. que indexan las páginas que exploran por el idioma en que decimos que están escritos. sin conocimientos de español.w3. También es útil para los buscadores del tipo Google. Para hacer la declaración de idioma en nuestra bitácora tendremos que recurrir de nuevo a la plantilla principal (seleccionando la pestaña «plantilla» del editor de Blogger). Para que nuestra página web le informe al navegador sobre el idioma en que está escrito. Justo debajo del DOCTYPE encontraremos una línea de código como ésta: <html xmlns="http://www.w3. como JAWS. existe una convención por la cual éstos se declaran con dos letras.Paso 3 Identificar el idioma Sabemos en qué idioma estamos escribiendo. Así el castellano (o español) será «es».

frame. Si a lo largo del texto de nuestro contenido insertamos frases en otro idioma. 12:18 . base. frameset.</blockquote> A partir de ese momento prevalecerá la declaración de idioma realizada al comienzo y regresará a leer en castellano (español). deberemos declarar el cambio en la correspondiente etiqueta.vamos a usar el castellano (español). Este atributo se puede aplicar en todas las etiquetas excepto: applet. basefont. br.p65 146 08/11/2007. En las páginas con código HTML 4. iframe. Sin este cambio es posible que podamos confundir a los lectores de pantalla. param y script Un ejemplo de su aplicación podría ser: Y con suave voz le dijo en inglés: <blockquote lang="en">I love you.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». 146 diseño para todos.

si una de las categorías de agrupamiento fuera «legislación». Colocar títulos significativos a nuestras páginas beneficia a los navegantes con lectores de pantalla. A las personas con dificultades de comprensión también les reporta beneficios. Por ejemplo. Para la página principal podemos elegir como título el mismo que tiene todo nuestro sitio. que listan las páginas visitadas utilizando su título. lo suyo sería poner el nombre del sitio y a continuación la fecha de inserción del «post». por ejemplo. siguiendo la misma lógica apuntada antes. Pero también a los usuarios de navegadores sólo texto o con dispositivos de lectura braille. 147 diseño para todos. Así pues. 12:18 . ya que con una sola mirada ubican el contenido de la página entre otras que puedan tener abiertas.Paso 4 Elegir un título significativo Toda página web debería tener un título único y significativo. la página del «post» del 24 de mayo de 2006 la titularíamos «Nombre del sitio/25-05-2006».p65 147 08/11/2007. Los robots de búsqueda también utilizan el contenido de ese título de página para indexarlas. Si la mecánica de archivo que nos interesa hacer patente es la de fecha de inserción del «post». En el caso de una bitácora. Para cada uno de los «post» lo más indicado es que se titulen como el propio «post» o una abreviatura del mismo. reporta grandes beneficios elegir un título significativo para nuestras páginas web. Así. ya que lo primero que éstos hacen es leer ese título. la página de un «post» titulado «Accesibilidad en la Web» podríamos llamarla «Nombre del sitio/Accesibilidad Web». podemos elegir para los agrupamientos de páginas la combinación del título de nuestra web con el motivo del agrupamiento. Por ejemplo. pero siempre recomendamos que vaya acompañado (mejor precedido) por el título del sitio. podríamos titular a esa página que agrupa los «post» pequeños artículos] como «Nombre del sitio/Legislación». pero para el resto sería recomendable elegir un título que identificara su finalidad o contenido.

12:18 . De nuevo nos ahorra tiempo y se muestra como una buena elección para hacer nuestra bitácora accesible.org/ day_8_constructing_meaningful_page_titles.Blogger realiza este trabajo por nosotros. para las páginas de cada «post» utiliza dicho nombre seguido del título del «post» y para las páginas de las agrupaciones por meses toma el título de la bitácora al que hace seguir el mes correspondiente en el que se inserta el «post». sobre todo el comportamiento de otros programas para hacer bitácoras.html.p65 148 08/11/2007. concretamente en esta página: http://diveintoaccessibility. Si se quiere saber más sobre este tema (y se domina el inglés lo suficiente). ya que para titular la página de inicio utiliza el nombre de nuestra bitácora. se puede leer sobre ello en el sitio recomendado «Dive into Accessibility» de Mark Pligrim. 148 diseño para todos.

ya que la referencia a ellas se hace mediante esta etiqueta. 12:18 . Además de servirnos para hacer referencia a la hoja u hojas de estilo que queramos aplicar a nuestra bitácora. Nos tendremos que conformar con dar la posibilidad de proporcionar un acceso rápido a la página principal si insertamos en el <head> la siguiente declaración: <link rel="Principal" title="Página principal" href="<$BlogUrl$>" /> 149 diseño para todos. aunque también en algunos de los navegadores visuales como Mozilla. ya que muestran al usuario estos enlaces rápidos. Otra etiqueta habitual en esta zona es <link>.p65 149 08/11/2007. nos puede ser útil para proporcionar ayuda a los navegantes. Lamentablemente. dando la posibilidad de ir rápidamente a la página principal o a los «post» anterior o posterior. Firefox u Opera son de utilidad. Este efecto lo conseguiremos con un código parecido a este: <link rel="Principal" title="Página principal" href="http://dirección de la página principal" /> <link rel="Previa" title="Página anterior" href="http://dirección de la página anterior" /> <link rel="Siguiente" title="Página siguiente" href="http://dirección de la página siguiente" /> Esta ayuda es útil para ciertos navegadores no visuales como Lynx o Links.Paso 5 Ayudas adicionales a la navegación Seguimos todavía en esa parte oculta de las páginas web que no se muestra en los navegadores. que frecuentemente asociamos con las hojas de estilo en cascada. pero que podemos ver editando el código fuente de las mismas. en el caso de Blogger la plantilla principal no nos deja controlar esta posibilidad y no podremos automatizarla.

Nos cercioraremos de que en el código fuente de la plantilla el contenido principal está colocado antes que el menú de navegación. Por ello. Mozilla o Firefox. da igual el orden que • 150 diseño para todos. 12:18 . Los bloques <div> están maquetados y colocados en la página mediante los estilos de nuestra página. dirigimos nuestra mirada al contenido principal de la página. sin que la colocación de la barra de navegación de la web visitada nos afecte para nada. Si optamos por elegir otra de las plantillas que llevan el menú de navegación a la izquierda tendremos que emplear un pequeño truco. a la derecha o a la izquierda. seguro. Opera. Para ellos una barra de navegación colocada antes del contenido principal puede ser una auténtica tortura.p65 150 08/11/2007. Pero esto no es indiferente para las personas que navegan con lectores de pantalla (tipo JAWS). a la hora de hacer nuestra bitácora accesible. incluyendo ambos comentarios. sólo texto (como Lynx o Links) o con dispositivos de salida braille. es la más cómoda y sencilla de las soluciones. 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 —>. del tipo IExplorer.Paso 6 Colocar primero el contenido principal Las personas que navegamos por la web con navegadores visuales. ya que cada vez que visitan una página de nuestra web tendrán que escuchar o navegar por toda ella hasta llegar a lo que interesa: el contenido principal. Nos es indiferente que esté de forma horizontal o vertical. y lo trasladaremos detrás del contenido principal (que está colocado entre <!— Begin #main —> y <!— End #main —>). podremos optar por alguna de estas fórmulas: • Podemos elegir una plantilla prediseñada que muestre el menú de navegación en vertical a la derecha. Por ese motivo. Ésta.

dando a sus letras el mismo color del fondo de nuestra página. podemos optar por no ocultar completamente nuestro vínculo interno. Para ellos no es buena la opción anterior. es proporcionar un marcador o vínculo interno que posibilite el «salto de la barra de navegación». si optamos por una barra de navegación colocada antes que el contenido principal de la página. 12:18 .p65 151 08/11/2007.} 2. el orden del código fuente es el que se muestra en pantalla. Para aquellos que todavía maquetan con tablas (opción admitida. como es el caso de las personas con dificultades motrices en sus manos. creando una clase como esta: . Pero hay personas que no tienen una limitación visual y navegan utilizando sólo el teclado. Luego colocamos el vínculo interno "contenido" justo al comienzo del bloque que contiene el contenido principal. que hemos ocultado. les podemos aconsejar la siguiente fórmula. ¿Cómo podemos hacerlo?: 1. tendrán que ir saltando cada uno de los enlaces de nuestra barra de navegación hasta alcanzar el contenido principal y navegar por el mismo.letratransparente{font-color:#FFFFFF} (donde FFFFFF es el color del fondo). Luego basta con dar esta clase al párrafo <p> donde irá el salto de la barra de navegación y todo arreglado. aunque no recomendada). Otra posibilidad. siempre aparecerán en el lugar que les fija el estilo. esto lo podemos controlar mediante la hoja de estilo. En la hoja de estilos se crea una clase (class) que puedes llamar "ocultar" del siguiente modo: . Como el navegador no les muestra en pantalla el enlace para saltar la barra de navegación.ocultar {display:none. 151 diseño para todos. Sólo lo ocultaremos visualmente. Igual que hicimos antes.• • lleven en el código fuente. En el párrafo <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. Pero para los lectores de pantalla y navegadores que no interpretan las hojas de estilo. Para resolver este pequeño problema.

. contenido principal ... conetnido principal .gif" width="1" height="1" alt=""> </td> <!— contenido principal en la primera celda. barra de navegación . </td> </tr> </table> Pueden colocarla de esta forma: <table> <tr> <!— imagen espaciadora en la celda superior izquierda —> <td> <img src="/images/1.... en lugar de la maquetación obvia: <table> <tr> <td valign="top" align="left" width="25%"> . </td> </tr> <table> 152 diseño para todos. </td> <td valign="top" align="left"> .. con rowspan=2 —> <td valign="top" align="left" rowspan="2"> . 12:18 ...... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... barra de navegación .p65 152 08/11/2007...Si su página está maquetada con una tabla de dos columnas donde la izquierda es el menú de navegación y la derecha el contenido principal.

153 diseño para todos. Y esto nos puede afectar a todos. es decir algo así: «Los artículos en rojo ya no están disponibles en la web». estas personas no sabrán qué artículos de nuestra lista son. Si sólo hemos puesto el color rojo como pista para saber que ya no está disponible el artículo. Veamos un ejemplo: Supongamos que en nuestra bitácora estamos informando sobre artículos y documentos disponibles en la web sobre un determinado tema.p65 153 08/11/2007. Debemos procurar que los vínculos queden claramente perceptibles para nuestros visitantes en lugar de ocultarlos visualmente. 12:18 . Esto despista mucho a usuarios poco expertos y a personas que tienen problemas con la percepción del color. ¿Cómo podemos hacer para comunicar a nuestros visitantes de que un documento ya no está disponible en la web? Una forma. Dejamos atrás el <head> y empezamos a trabajar con elementos del <body>. más usual de lo que debería ser. La norma general es usar el color de forma segura.Paso 7 El uso de los colores Poco a poco nos vamos adentrando en tareas más complicadas. Otra mala costumbre que cada día se está generalizando más con el uso de las hojas de estilo es modificar la presentación de los vínculos de nuestras páginas web de tal manera que no destacan en el texto. El problema es que entre nuestros visitantes hay personas que no ven los colores o los perciben de forma incorrecta. pero debemos dar cuenta de aquellos que ya han desaparecido. A nosotros nos interesa mantener la información sobre los artículos y documentos. La web es un medio dinámico y algunos contenidos. pasado un tiempo. La manera de hacerlo es asegurarse de que no trasmitimos información exclusivamente a través del color. pueden desaparecer. empezando con el manejo del color.

vería estas tres frases del siguiente modo: 1. Este vínculo sólo coloreado. tenemos que transmitir la presencia del vínculo. la tercera frase pierde el color rojo y no da ninguna pista del vínculo para quien tenga ceguera para el color rojo. seguro que acertaremos con la más adecuada para cada usuario. 2. /* para que aparezca subrayado */ font-weight:bold. 3. Podemos incluir una categoría similar a esta: a { color:#3333FF. /* para que aparezca en negrita */ } De alguna manera. 2. Si lo hacemos de más de una. podemos dar propiedades para cuando estamos apuntando al vínculo ("hover") o cuando el vínculo ya ha sido visita154 diseño para todos. Este vínculo coloreado y en negrita. como el daltonismo. Una forma sencilla de solucionar la manera de destacar nuestros enlaces es mediante la hoja de estilo. también mediante las hojas de estilo. Luego. la presentación de vínculos exclusivamente mediante el cambio de color puede suponer un problema para algunos usuarios que al pasar sobre ellos el cursor del ratón o al colocar el foco sobre ellos mediante el teclado no perciben este cambio. Una persona con problemas de visión para los colores. pero sigue dando una pista con la letra negrita que resalta en el texto. además de mediante el color. pero podemos usar cualquier otro */ text-decoration:underline. Sin embargo.p65 154 08/11/2007. La segunda frase pierde el color rojo. /* el típico color azul de los vínculos. Este vínculo subrayado y en azul.Del mismo modo. La primera frase no presenta problemas. Una persona con daltonismo verá el color azul y tiene más pistas mediante el subrayado. 3. usando estilos de nuestra hoja. también usando estilos de nuestra hoja. 12:18 . que es el comportamiento por defecto. Un ejemplo lo tenemos aquí: 1.

que muestra el espectro de color tal como lo ven personas con diferentes tipos de ceguera de color.iamcal. Otras referencias importantes para conseguir más información sobre el correcto uso del color en nuestra web son éstas: • • Vischeck (http://www.technosite. que contiene una serie de imágenes que las personas con ceguera de color para el rojo y el verde ven de forma diferente o no las ven. Personalmente.vischeck. 12:18 . • • Ahora te toca a ti. La barra de accesibilidad de AIS (versión en castellano [español] en: http://www. me gusta usar la denominada «Analizador de contraste de color» (en inglés «Colour contrast analyser» CCA). 155 diseño para todos.org.com/toys/colors/).asp) dispone de una funcionalidad para el análisis de color. En función de ese algoritmo se han desarrollado algunas herramientas que nos pueden ayudar a aplicarlo.au/ais/web/resources/contrast_analyser/versions/es/.p65 155 08/11/2007.com/colorblind/Ishihara. Esto rige tanto para el texto como para las imágenes (sobre todo si éstas contienen texto).com/vischeck/). en Australia. Pero lo más importante es no olvidar que la información debe ser percibida independientemente del color.es/software.do ("visited").html). Otro problema que suele dar el uso de colores es la falta de contraste entre el fondo y la forma. que simula la ceguera de color y permite ver lo que las personas con ceguera de color ven. Utiliza alguna de estas herramientas para comprobar que en tu bitácora se respeta el contraste de color. Color Vision de Carl Henderson (http://www. Ishihara Test for Color Blind [Test para la ceguera de color Ishihara] (http://toledo-bend.nils. desarrollada por Accessible Information Solutions de NILS. El W3C ha recomendado un algoritmo que nos puede ser útil para saber si el contraste de los colores que usamos es el adecuado. Dispone de una versión en castellano [español] que se puede descargar gratuitamente en: http:// www.

12:18 . Son pseudo-vínculos que ejecutan un trozo de código JavaScript cuando pinchamos sobre ellos. y otros simplemente porque sus navegadores (ya sea por anticuados o por ser de características especiales) no lo soportan. También hay que tener en cuenta que buscadores. ante posibles intromisiones en su sistema. con un vínculo 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í. Unos lo hacen por motivos de seguridad. el de Blogger no utilizan la técnica del vínculo «javascript». ¿Por qué es un problema? Porque algunos usuarios de internet no utilizan JavaScript por diferentes motivos. no pueden indexar los enlaces en JavaScript. ya que no lo ejecutan.cgi?entryid=<MTEntryID$>" onclick="OpenComments (<MTEntryID$>).p65 156 08/11/2007.Paso 8 Vínculos reales Uno de los problemas que más molestan a los usuarios de páginas web es el uso de vínculos en «javascript». debes sustituirlo por algo así: <a href="<$MTCGIPath$>mt-comments. Afortunadamente. pero si manejamos alguna versión antigua podemos encontrarnos. concretamente. como Google. los editores de bitácoras y. para la edición de comentarios. return false">Comentarios<(<$MTEntryCommentCount$>)</a> 156 diseño para todos. Este último sería motivo suficiente para desistir de utilizar este tipo de pseudovínculo.

Como práctica habitual. 157 diseño para todos. olvide hacer sus enlaces mediante JavaScript.p65 157 08/11/2007. 12:18 . esto funcionará de igual manera porque el atributo "onclick" tiene preferencia sobre el atributo "href". Molestan a mucha gente y añaden poca funcionalidad a nuestro trabajo.En los navegadores con JavaScript habilitado.

es importante que los usuarios conozcan para qué sirven los vínculos en un sitio web. Si no existieran vínculos sería como compartir otro tipo de archivos. Son lo que les da sentido. 158 diseño para todos. simplemente. «aquí» dejan de tener su utilidad si se les saca de contexto. Mis aficiones favoritas las encontrarás aquí. Por lo tanto. que se puede hacer mediante otro tipo de protocolos. Así. también disponibles en internet. Cuando el navegador muestre o lea los vínculos de este texto.p65 158 08/11/2007. Ese mismo texto sería más útil con los enlaces colocados en otro lugar: Si quieres conocer mi currículum pincha aquí. ya que desconocemos que hay detrás de «aquí». proporcionan al usuario un listado de los vínculos de la página visitada. Desde aquí puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrarás aquí. El texto que utilizamos para un vínculo es esencial.Paso 9 Vínculos correctos y con títulos Lo más importante de una página web son sus vínculos. 12:18 . Desde aquí puedes acceder a las fotos de mi familia. tanto visuales como de otro tipo. Imaginemos que tengo un texto en el que proporciono los siguientes vínculos: Si quieres conocer mi currículum pincha aquí. el usuario se encontrará con: pincha aquí aquí aquí Este listado carece de utilidad para navegar. esos frecuentes vínculos con textos del tipo «pincha aquí» o. Algunos navegadores.

p65 159 08/11/2007. Solemos utilizar palabras sueltas o frases muy cortas. La próxima vez que encontremos un vínculo con texto «aquí» miraremos a ver si se podría haber colocado en un mejor lugar para hacer más comprensible el texto del vínculo. Veamos cuál sería su código fuente sin el atributo "title": Desde aquí puedes acceder a las fotos de <a href="http://mi/familia. Esta forma de proceder. El uso del atributo "title" se vuelve especialmente importante en los textos de nuestros menús de navegación. por lo que muchas veces no transmiten la suficiente información. hace más comprensibles su uso y destino para mucha gente. si activan la op159 diseño para todos. a los usuarios de lectores de pantalla. a los usuarios que manejen navegadores visuales les aparecerá una «tooltip» [cuadro emergente junto al puntero]. colocando títulos a los vínculos. Si usamos dicho atributo. Vemos como: Desde aquí puedes acceder a las fotos de <a href="http://mi/familia. en 9 de cada 10). 12:18 . Seguro que lo encontramos (al menos. Con el uso del atributo «title» podemos aumentar la información. Utilicemos la segunda frase del texto anterior para poner un ejemplo. principalmente para gente con problemas de comprensión. Otro factor que hace más comprensibles los vínculos es «titularlos».Ahora el listado será mucho más significativo: mi currículum mi familia Mis aficiones La diferencia entre uno y otro texto es sólo el lugar donde hemos colocado el vínculo.com">mi familia</a> No podemos decir que esto sea incorrecto. y añade información para el general de los usuarios. pero sí que no proporciona ayuda complementaria al usuario. Esto se hace mediante el atributo "title" colocado junto a la dirección del vínculo.com" title="Albúm de fotos familiar de las pasadas vacaciones">mi familia</a> Ahora tenemos más información sobre el destino del vínculo.

¡MUY IMPORTANTE! No confundir el atributo «title» y sus funciones el atributo «alt» y las suyas. En determinadas ocasiones nos puede interesar que no aparezca el cuadro emergente que nos muestran los navegadores visuales (por ejemplo. ya que ese cuadro emergente amplia información que puede ser útil a algunas personas.ción.p65 160 08/11/2007. y en ciertos navegadores sólo texto. como Lynx. acompañados del título explicativo. su programa les leerá el contenido del mismo. colocando como valor del atributo sólo las comillas sin espacio entre ellas. 12:18 . Sobre este atributo hablaremos más adelante. pero el primero se mostrará en todo tipo de navegadores y el segundo sólo debería ser leído por los lectores de pantalla o navegadores por voz (aunque en IExplorer el comportamiento de «alt» sea semejante al de «title». cuando usamos determinadas imágenes como vínculo). Esto hay que valorarlo seriamente. en ausencia de éste). 160 diseño para todos. al pulsar una tecla o combinación de tecla les aparecerá un listado de los vínculos. Ambos tienen una función explicativa. Para ello podemos utilizar un título vacío (title="").

así como para posicionarse en los campos de formulario. Los navegadores más antiguos no saben interpretar este atributo. ya sea porque utilizan lector de pantalla o porque no puedan utilizar el ratón u otro dispositivo apuntador. El efecto es que cuando utilizamos el atajo de teclado (pulsando la combinación pertinente) el navegador enfocará al lugar donde hayamos definido con el atributo "accesskey". 12:18 . No existe un estándar establecido que defina cuáles son las teclas de acceso en los atajos de teclado. los de su menú de navegación). ALT + 9: Formulario de contacto.Paso 10 Atajos de teclado Un atributo HTML de los menos conocidos es «accesskey» para los vínculos y los formularios. Veamos ahora cómo podemos hacer para aplicarlos. ALT + 2: Saltar la barra de navegación para ir al contenido principal. Sí existe una cierta conformidad en utilizar al menos estos tres atajos de teclado: ALT + 1: Página de inicio. Permite al diseñador definir atajos de teclado para los vínculos utilizados con frecuencia (por ejemplo. 161 diseño para todos.p65 161 08/11/2007. por lo que es útil emplearlo para dar facilidades a las personas que navegan con el teclado. En nuestra plantilla principal de Blogger (otra vez recordamos que está en la pestaña «plantilla» del editor de Blogger) buscamos <$BlogTitle$>. 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 documentación de ayuda del programa). pero tampoco les resulta pernicioso. por lo que el diseñador deberá establecer las suyas propias. Un atajo de teclado es una combinación en la pulsación de las teclas que para Windows es ALT más un número o letra de nuestro teclado y para Macintosh es CONTROL más el correspondiente número o letra.

LEGEND o TEXTAREA Pero recuerda que no existe ningún estándar. INPUT. nuestro visitante habrá saltado la barra de navegación y se habrá colocado en el contenido principal de la página.p65 162 08/11/2007. AREA. LABEL. 12:18 .blog" accesskey="1"><$BlogTitle$></a> De este modo habremos configurado nuestro atajo de teclado al lugar de nuestra página donde se ubica el enlace a nuestra página principal. Si disponemos de un vínculo para saltar la barra de navegación (tema del que hablamos con anterioridad en el paso 6) podemos proporcionarle un atajo de teclado. por lo tanto debemos explicar al visitante cuáles son los atajos de teclado que utilizamos en nuestro sitio. el usuario abrirá su programa de correo electrónico dispuesto para remitirnos un mensaje. Deberá quedar algo así: <a href="http://pagina. Al usuario le basta con pulsar ALT + 1 y después Intro para estar en la página principal de la bitácora.com" acceskey="9">Mándame un correo electrónico</a> Con la combinación ALT + 9 seguida de Intro. que podría quedar más o menos así: <a href="#saltabarra" accesskey="2">Saltar barra de navegación</a> Igual que antes. 162 diseño para todos. BUTTON.inicio. con la combinación ALT + 2 y después Intro. Si no está colocado en una etiqueta <a> le colocaremos una que nos lleve a nuestra página principal de la bitácora. podemos hacer una operación similar para hacer un atajo de teclado: <a href="mailto:yo@midominio.normalmente al comienzo de <body>. Si disponemos de un vínculo a un formulario de contacto o con nuestra dirección de correo electrónico. El atributo «accesskey» lo podemos colocar en cualquiera de estas etiquetas o elementos HTML: A.

si a pesar de todo pretendemos abrirlas. mediante el botón «Atrás» de su navegador. Algunos desarrolladores diseñan sus páginas para que el visitante no las abandone al primer click en un vínculo. Este pequeño. informemos al usuario que al seleccionar el enlace se abrirá el destino en una nueva ventana. Esta forma de proceder desconcierta a muchos usuarios. Para corregir un hipotético problema de este tipo en nuestra bitácora. permiten abrir distintas páginas en una misma sesión del navegador. También las personas con problemas de inteligencia o aquellas que tienen poco hábito de navegar por la web pueden encontrar sorprendente que no puedan regresar a la página de origen que les llevó a la página que visualizan en ese momento. busquemos si en alguno de los vínculos de la misma existe un atributo «target» como el que mostramos a continuación: <a href="direccion. Pero el habitual IExplorer (al menos hasta su versión actual 6) abrirá una nueva sesión con cada ventana abierta.de. pero incomodo. Pretenden permanecer en pantalla el máximo tiempo posible.Paso 11 No abrir nuevas ventanas Este paso es rápido y fácil de explicar (¡Esta vez ha habido suerte!). descubren que han perdido el hilo de su navegación y lo deberán encontrar entre las páginas abiertas en su ordenador. Las personas que no ven su pantalla y están navegando mediante un lector de pantalla o navegador por voz no saben que acaban de abrir una nueva ventana y si tratan de regresar. como Opera o Firefox. 163 diseño para todos.destino" target="_blank">Destino del vínculo</a> Simplemente tendremos que eliminar target=«_blank» y habremos solucionado el problema.p65 163 08/11/2007. Algunos navegadores. 12:18 . Para ello utilizan una técnica nada conveniente como es la de abrir una nueva sesión del navegador para que se muestre la página a la que nos lleva el vínculo que hemos seleccionado. problema es fácil de solucionar: no abramos páginas nuevas o.

) y. se suele hacer la extensión del acrónimo la primera vez que aparece. En nuestras páginas web tenemos la posibilidad de dar esa información mediante la etiqueta <acronym>. 164 diseño para todos. dejando al lector la tarea de que lo interprete en el resto. Si se coloca el cursor sobre los acrónimos convenientemente etiquetado. Por ejemplo: W3C (World Wide Web Consortium). XHTML. aparece una «tooltip» [cuadro emergente] con el contenido del título que le hemos dado a nuestro acrónimo. Pero si en un mismo texto tenemos que repetir mucho este acrónimo se volvería muy farragoso colocar continuamente el texto entre paréntesis. Una técnica clásica para resolver este problema es colocar en el propio contenido y junto al acrónimo su desarrollo completo. Veamos cómo lo haríamos para el acrónimo W3C: <acronym title= "World Wide Web Consotium" lang= "en">W3C</acronym> Veamos algunos detalles. Por ese motivo. que tendré que emplear unos cuantos más. El problema está cuando no todo el mundo entiende los acrónimos que se emplean. y «lang». Este segundo atributo no lo colocaremos cuando la extensión del acrónimo esté en el mismo idioma que usamos para el resto del contenido. ya que en este caso al estar en inglés tenemos que avisar de ello a los lectores de pantalla y navegadores por voz. 12:18 . con el que extendemos el texto. WAI. etc. En este documento hemos empleado ya un número considerable (W3C. La forma de aplicar la etiqueta <acronym> es sencilla.Paso 12 Acrónimos Los acrónimos y abreviaturas son cada vez más usuales en el lenguaje común y no digamos cuando estamos hablando jergas profesionales. La etiqueta lleva dos atributos: «title». que debe ser el texto extendido del mismo. y son tantos que es bien difícil que conozcamos todos. HTML.p65 164 08/11/2007. supongamos.

la apariencia visual de los acrónimos en pantalla se adereza con una línea punteada de subrayado. ya que ésta es una buena opción para informar al visitante de que existe una extensión para el acrónimo. Es evidente que lo mejor es etiquetar cada cosa con lo que procede. Si queremos extender esta posibilidad al resto de navegadores.En algunos navegadores. 165 diseño para todos. como Mozilla y Firefox. nos decantamos por recomendar el uso de <acronym>. 12:18 . podemos hacerlo en la hoja de estilo del siguiente modo: acronym { border-bottom: 1px dotted #000000. Pero optamos por una solución más práctica: como ninguna de las versiones del navegador más utilizado (IExplorer) nos muestra una «tooltip» al colocarnos sobre un texto etiquetado con <abbr>. Existe una constante discusión sobre qué es acrónimo y qué es abreviatura.p65 165 08/11/2007. } Para cerrar este »post» comentaremos que existe otra etiqueta relativa a las abreviaturas: <abbr>.

Una aclaración previa. al alinear su contenido. para saber hacerlas correctamente vamos a dar tres instrucciones que será preciso tener en cuenta.Paso 13 Tablas accesibles No es muy habitual encontrar tablas en las bitácoras. En primer lugar. Lo que debemos hacer es sustituir esa primara línea <tr> con el "falso" título por otra que contenga la etiqueta <caption> del siguiente modo: <table border="1" width="30%"> <caption>Junio 2005</caption> <tr> 166 diseño para todos. En todo caso..p65 166 08/11/2007. éste es comprensible). El código fuente que nos encontraríamos sería algo así: <table border="1" width="30%"> <tr> <td colspan="7" align="center">Junio 2005</td> <tr> <td align="center">Lu</td> . La única excepción probablemente sea las que se utilizan para insertar un calendario. hay que dar un título o subtítulo real a nuestra tabla mediante la etiqueta <caption>. Vamos a hablar de tablas de datos y no de tablas utilizadas para maquetar (que ya sabemos que no están recomendadas y sólo se aceptan si.. Nos puede ser útil el ejemplo de una hoja de calendario para las nociones que vamos a explicar. En muchas ocasiones nos encontramos un supuesto título de la tabla pero que realmente no es más una celda más de la tabla. 12:18 .

p65 167 08/11/2007. En nuestro ejemplo. siguiendo con el ejemplo anterior. y sobre el contenido. La tercera cosa que debemos hacer para que nuestra tabla sea accesible es utilizar encabezamientos apropiados. Siguiendo con el ejemplo que venimos usando. 167 diseño para todos. La segunda cuestión a tener en cuenta es proporcionar un resumen para las tablas. es: <table border="1" width="30%" summary="Calendario mensual con vículos a los posts de cada día"> <caption>Junio 2005</caption> <tr> <td align="center">Lu</td> . No tratemos de informar al usuario. 12:18 . informando al usuario de que no es un dato más en la tabla. para qué sirve. del formato de la tabla (por ejemplo. Esta tarea se realiza mediante el atributo «summary» de la etiqueta <table>. Esa información ya se la da el lector de pantalla. «esta tabla tiene seis líneas y siete columnas»). como Lynx... mediante este atributo. en el caso de una hora mensual de calendario está claro que los encabezados serán los nombres de los días de la semana. Esto se consigue utilizando la etiqueta <th>. donde proceda. mostrarán el título real de la tabla como lo que es. align="center">Lu</td> De esta forma los lectores de pantalla y ciertos navegadores sólo texto. Lo primero que tenemos que tener claro es cuales son los encabezados en nuestra tabla. Es importante que el texto del atributo «summary» sea lo más breve y explicativo posible. La forma de usarla. en lugar de la etiqueta <td>.<td .. al menos lo más destacado.. de tal manera que al usuario le puede llegar información previa del contenido de nuestra tabla y de los datos relevantes que contiene. que están en la primera línea de datos. El uso de este atributo proporciona información que es leída por los lectores de pantalla y navegadores por voz. Debemos informar del propósito de la misma. la tabla es un calendario mensual y en su contenido se puede encontrar el enlace a los «posts» diarios de nuestra bitácora.

p65 168 08/11/2007. Hemos cambiando la etiqueta y también hemos quitado la alineación central que le dábamos. ya que queremos que sea leído por los lectores de pantalla y navegadores por voz. 168 diseño para todos.. Pero lo visto hasta aquí sirve para la mayoría de las tablas simples que solemos incluir en nuestras páginas web.. Para tablas más complejas habría que hacer otras cosas.Extendemos algo más el código fuente que hemos venido usando y una tabla correctamente etiquetada nos quedaría así: <table border="1" width="30%" summary="Calendario mensual con vículos a los posts de cada día"> <caption>Junio 2005</caption> <tr> <th abbr="Lunes">Lu</th> <th abbr="Martes">Ma</th> <th abbr="Miércoles">Mi</th> <th abbr="Jueves">Ju</th> <th abbr="Viernes">Vi</th> <th abbr="Sábado">Sa</th> <th abbr="Domingo">Do</th> </tr> . 12:18 . que en este caso sí procede. También hemos incluido el atributo »abbr». pero no necesitamos que se muestre visualmente. porque el formato de <th> ya centra el texto en la celda y si queremos proporcionarle alguna característica de estilo lo deberemos declarar en nuestra hoja de estilo.

ajustándose a los criterios semánticos. en el código HTML. Entonces pensamos sustituir esos feos bolitos que aparecen en nuestra lista con el menú de navegación por algo más atractivo.html" title="El artículo del día">Lo último</a>< /br> Podemos preguntarnos si algo está mal en este código. un pequeño trébol. Tiene atributo «alt» (del que más adelante hablaremos) para la imagen. tiene el atributo «title» para el vínculo y en principio parece que está todo correcto.jpg" width="C8" height="8" alt="*2><a href=2principal. pero los lectores de pantalla no la interpretan como tal.jpg" width="8" height="8" alt="*"><a href="hoy. Su apariencia puede resultarnos sosa o aburrida y queramos darle un «toque de diseño».html2 title="Página principal de la bitácora">Principal</a>< /br> <img scr="/imagenes/trebol. Técnicamente sí. tienen sus propias etiquetas para marcarlas. El usuario visual puede que lo perciba como una lista aleatoria. Nos olvidamos del marcado correcto y hacemos algo así: <img scr="/imagenes/trebol. que de forma mucho más sencilla. porque no lo es. me atrevería a decir.html" title="Tabla de contenidos de la bitácora">Contenidos</a>< /br> <img scr="/imagenes/trebol. y. Usamos la etiqueta <ul> para las listas aleatorias (ésas que aparecen con bolitas) y <ol> para las ordenadas (que aparecen con números o letras consecutivos). pero semánticamente no. por ejemplo. 12:18 .Paso 14 Usar listas reales Las listas.jpg" width="8" height="8" alt="*"><a href="contenidos. 169 diseño para todos. pero sí podemos afirmar que se puede hacer mucho mejor.p65 169 08/11/2007. Sería demasiado osado decir que esto la hace inaccesible.

ya podremos escribir nuestra lista usando marcadores de lista apropiados: <ul class="menu"> <li><a href="principal. el clásico Netscape 4) y los que tengan las imágenes deshabilitadas mostrarán la lista con las viñetas negras. Pues no hay problema.Veamos cómo hacerla aprovechando las características de la hoja de estilo.menu { list-style: } url(/imagenes/trebol.jpg) disc. Los navegadores más antiguos (por ejemplo.p65 170 08/11/2007. Los lectores de pantalla y navegadores por voz interpretarán de forma semánticamente correcta que se encuentran ante una lista y así se lo dirán al visitante. A continuación. No tenemos 170 diseño para todos.html" title="Tabla de contenidos de la bitácora">Contenidos</a></li> <li><a href="hoy. Los navegadores sólo texto ignorarán la hoja de estilo y mostrarán la lista como tengan definido por defecto (normalmente con viñetas en forma de asterisco). • • Pero lo que queremos es hacer una lista donde no se vean las viñetas y el texto esté alineado a la izquierda. Lo primero que tenemos que definir es el estilo que le vamos a dar: queremos que aparezcan unos pequeños tréboles en lugar de los sosos puntos que aparecen por defecto en este tipo de listas.html" title="Página principal de la bitácora">Principal</a></li> <li><a href="contenidos. Vamos a definir un estilo para nuestra lista del menú en la hoja de estilo: ul. 12:18 .html" title="El artículo del día">Lo último</a></li> </ul> Los resultados que obtendremos son: • • Los navegadores modernos mostrarán la imagen del trébol como viñetas de lista.

} De igual manera. Del siguiente modo: ul. apropiado. text-align: right. sobre todo. 171 diseño para todos.menu { list-style: none. podremos dar cualquier otro estilo a la apariencia de nuestra lista.p65 171 08/11/2007. sin tener que tocar el código fuente y sólo añadiendo o modificando características de la hoja de estilo. Sólo tenemos que dar unos retoques a las características de la lista en la hoja de estilo para hacer desaparecer la viñeta y alinear el texto a la derecha. 12:18 . Fácil.que tocar el código fuente de la lista. bonito y.

Es. en primer lugar.. Responde por tanto a dos preguntas: «¿Qué es? y ¿para qué sirve?». Supongamos que en nuestra bitácora queremos insertar una foto del autor que sirva de enlace a una página con un resumen curricular de su trayectoria profesional. Pero no por conocido es menos necesario explicar su uso y. Sin este atributo. sobre todo. a ver cómo se utiliza el atributo "alt" para las imágenes dentro de la etiqueta <img>. se quedarán sin conocer su contenido y utilidad. las personas que utilizan navegadores sólo texto. por una u otra razón. 12:18 . Probablemente éste sea el elemento más conocido cuando se habla de accesibilidad en la web. cuando ésta no puede llegar al usuario de forma visual. no tienen habilitada la descarga de imágenes. lectores de pantalla o navegadores por voz y todos aquellos que. se merece una atención relevante. el elemento de accesibilidad que afecta a mayor número de personas y.jpg /> </a> Si lo dejamos con esa codificación habremos dejado fuera a todos aquellos que relacionábamos al comienzo. 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. por lo tanto.p65 172 08/11/2007. Como siempre. Vamos./imagenes/foto.Paso 15 Equivalente textual para imágenes Ha llegado el momento de hablar del atributo "alt". tomaremos un ejemplo para saber cómo hacerlo de forma correcta. Es primordial saber qué función tiene este atributo: pretende trasmitir el contenido y la función de la imagen. Tenemos que modificar el códi172 diseño para todos. sin dudarlo.htm"> <img src=http://. su correcto uso.

No debemos poner como texto alternativo el nombre del archivo de imagen. como ya explicamos en el paso 9. Por ejemplo. 12:18 .. Las etiquetas dentro del atributo se leerán como texto plano. 173 • • • diseño para todos. hemos colocado el atributo "alt" en la etiqueta <img> informando a los que no vean la imagen de qué es y para qué sirve.jpg" alt="Foto del autor que enlaza con un resumen de su currículum" title="Conoce al autor de esta bitácora" /> </a> Hemos añadido dos cosas: • Lo más importante ahora. sólo texto plano y caracteres especiales. Por ejemplo. No utilices como texto alternativo.go para que nos permita hacerlo accesible para todos./imagenes/foto. Recordemos qué y para qué está la imagen: es la foto del autor y sirve para llevarnos a otra página donde podemos conocer más sobre él. cuando la imagen sirva como enlace.p65 173 08/11/2007. un texto que ya desaconsejamos para los vínculos. Eso es lo que debemos transmitir en el atributo "alt" y lo tenemos que hacer de la manera más breve y clara que podamos. Por ejemplo. Ésta sería una buena forma de hacerlo: <a href="http://autor. También hemos colocado el atributo "title" para proporcionar información adicional de forma visual.htm"> <img src="http://. Algunas herramientas de edición de páginas web colocan un texto alternativo por defecto a las imágenes para que éste sea sustituido por uno correcto.jpg". no dejemos un texto alternativo del tipo alt="Texto alternativo". 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 currículum". no pongamos nunca alt="¡Pinche aquí!". alt="foto. • Al colocar el texto alternativo para las imágenes debemos tener en cuenta algunas cosas: • No podemos utilizar marcadores de código en el texto alternativo.

p65 174 08/11/2007. Esto es algo así como si una persona ciega nos preguntara la hora y mostrándoles nuestro reloj le dijéramos: «¡Mírala tú!». 12:18 .• No nos pasemos de listos y hagamos algo tan sin sentido como este ejemplo que vi en una página web: alt="Activar las imágenes". 174 diseño para todos.

En caso de no encontrar el atributo dirían «imagen» o leerían la dirección del archivo que la contiene. Otros mostrarán en cualquier caso la palabra «imagen».p65 175 08/11/2007. si han visto que utilizamos correctamente el etiquetado de las imágenes en el resto de la página. ¿Qué podemos hacer para solucionarlo? Poner un atributo «alt» vacío. para los navegadores sólo texto o para quienes tienen deshabilitadas las imágenes. Pero tampoco podemos ir colocando imágenes en nuestra página que. y es tan sencillo como colocarlo dentro de la etiqueta <img>. según el caso. Demos un voto de confianza a nuestros visitantes con este tipo de navegadores y. Sería algo así: <img src="http://ImagenEspaciadora. 12:18 . porque siempre lo hacen. pongamos o no texto alternativo. Hay gente que opina que para estos casos sería mejor poner un texto alternativo del tipo «imagen decorativa» o «imagen espaciadora».Paso 16 Atributo «alt» vacío En determinadas ocasiones. deberán suponer que esta imagen no trata de trasmitir contenido. dichos dispositivos lean diciendo algo así como «imagen» o aparezca este texto en pantalla. pero eso «ensuciaría» mucho la lectura de otros navegadores.jpg" alt=""> Los lectores de pantalla reconocerán el atributo y leerán lo que contiene: nada. pero sin poner texto entre las comillas. Algunos navegadores sólo texto también reconocerán el atributo y mostrarán en pantalla lo que contiene: nada. En esos casos no procede utilizar el atributo "alt" de forma activa para los lectores de pantalla. por defecto. 175 diseño para todos. los diseñadores de páginas web utilizamos las imágenes como meros recursos estéticos o para dar formato a la apariencia de nuestra página.

por el motivo que sea. ya que. • Es muy importante recordar que lo correcto para el "alt" vacío es colocar las comillas seguidas (alt="") y no dejando un espacio entre ellas (alt=""). ni siquiera mediante el «alt» vacío.p65 176 08/11/2007. tengamos fe en la capacidad de nuestros visitantes y hagamos uso del "alt" vacío. aunque éste sea un artificio que no es recomendable y que podemos sustituir por un buen diseño de bloques mediante la hoja de estilo. Para las imágenes de fondo que colocamos dentro de etiquetas como <body> o <td>. los lectores de pantalla leerán «espacio». siempre verán el cuadro de imagen que su navegador muestre por defecto y éste no tendrá texto alternativo. 176 diseño para todos. deberemos usar el "alt" vacío: • • Cuando utilizamos imágenes decorativas. no precisan de texto alternativo. Igual que en el caso anterior. Cuando utilizamos imágenes para separar texto u otras imágenes. entonces. 12:18 . como ésas que redondean las esquinas de los fondos de texto.Las personas que utilizan navegadores visuales y tienen deshabilitada la carga de imágenes. En general. Estas imágenes son meramente decorativas y son ignoradas tanto por lectores de pantalla como por navegadores sólo texto. cuando la imagen que colocamos no pretenda transmitir contenido. Principalmente.

12:18 . 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. El espíritu de la web va en contra de este rígido pensamiento. 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 vínculo y que sea el servidor quien defina dichas coordenadas de forma absoluta sin conocer el tipo de navegador y resolución que está empleando el visitante. Su intención apunta más hacia el control por parte del usuarios de los contenidos que otros han colocado en internet. La segunda cuestión es dar alternativas textuales tanto a la imagen de la que haremos el mapa. Tampoco sería correcto renunciar a una de las posibilidades que nos ofrece el diseño de páginas web. con lo que puede provocar graves equivocaciones. pero éste la utiliza mayor o menor. Esto puede ser cierto para un gran número de usuarios de la web que utilizan el navegador más difundido en su última versión. Veamos cómo se hace con un ejemplo: 177 diseño para todos.p65 177 08/11/2007.Paso 17 Mapas de imagen accesibles Es sorprendente la cantidad de sitios donde podemos encontrar mapas de imagen. como a cada una de las zonas sensibles que éste contenga. puede estar definiendo el área sensible con el vínculo fuera de la imagen que lo presenta o en un lugar distinto. 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). Pero no es válido para todos. Muchos desarrolladores de sitios web piensan que colocar uno de estos mapas de imagen es garantía de que la apariencia que ellos quieren dar a su web llega al visitante tal como ellos la concibieron. como gusta decir en ciertos ámbitos). Si el servidor. por ejemplo. piensa que el usuario utiliza una resolución de 800 x 600 pixels.

129" 178 diseño para todos. como a cada una de las zonas sensibles definidas dentro del mismo mediante la etiqueta <area>. Blogger nos permite hacer esto. Por hacerlo sencillo. supongamos que en la imagen colocamos tres zonas sensibles para enlazar con la página principal de la bitácora. con la que contiene el currículo del autor y con otra que tiene la tabla de contenidos ordenados por temas.258.114.348.114.Supongamos que.258.html" alt="Conoce al autor"> <area shape="rect" coords="364.html"> <area shape="rect" coords="277.jpg" width="500" height="200" usemap="#map"> <map name="Map"> <area shape="rect" coords="203. queremos colocar como pie de nuestra bitácora y en todas sus páginas un mapa de imagen que sirva para contener los vínculos de navegación principales de nuestra bitácora. 12:18 .401. por la razón que sea.p65 178 08/11/2007. En principio podríamos tener un código 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" alt="Navegación por mi bitácora"> <map name="Map"> <area shape="rect" coords="203.114.129" href="autor. ya que podemos colocar una imagen y definir áreas o zonas sensibles que sirvan como vínculos (aunque lo tendremos que hacer mediante el editor HTML.114.html"> <area shape="rect" coords="364. insertando manualmente el código fuente).114.129" href="contenidos.348.129" href="principal. Tendría que quedarnos algo así: <img src:"MiMapa.114.html" alt="Página principal"> <area shape="rect" coords="277.401.html2> </map> Para hacer nuestro mapa accesible tendremos que colocar atributo "alt" tanto a la imagen completa.129" href="principal.129" href="autor.

p65 179 08/11/2007. La única posibilidad de hacerlo accesible es proporcionar un listado de los enlaces del mapa de imagen en forma textual anexo a éste. ¿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. Y. Los navegadores sólo texto no son capaces de mostrar los textos alternativos de las zonas sensibles de un mapa de imagen. Una última advertencia. 179 diseño para todos. Todas las reglas para escribir un buen texto alternativo para las imágenes. También se puede añadir un title="" a la imagen principal y a cada área para eliminar el «toolpip» [cuadro emergente] en los navegadores visuales. son aplicables a los mapas de imagen. se puede hacer de forma interactiva en el inspector de preferencias. 12:18 . Es posible que la mejor opción sea no ponerlo y buscar una alternativa vistosa y más accesible. como vimos en el paso 15.href="contenidos.html" alt="Tabla de contenidos"> </map> Es algo relativamente sencillo y que en herramientas de diseño. como Dreamweaver de Macromedia.

Así que la solución más correcta será vía hoja de estilo.p65 180 08/11/2007. marcadas con la etiqueta <hr>. así que. Tengamos en cuenta que el lector de pantalla leerá para cada guión la palabra «guión». será tan sencillo como colocar el código siguiente: <img src="/imagenes/LineaDecorativa. con los nuevos navegadores se mostrará nuestra imagen decorativa utilizada como línea horizontal.Paso 18 Líneas horizontales Vamos a poner una línea marcar la división entre los «post».. De esa manera. Si nos limitamos a poner una imagen en sustitución de la línea horizontal. Basta con colocar 2 o 3 y será suficiente. guión. guión. Eso funciona y puede ser hecho accesible fácilmente añadiendo el atributo "alt" adecuado. Las líneas horizontales. Pero si queremos respetar la semántica correcta podemos utilizar las características de la hoja de estilo para realizarlo.. usaremos una etiqueta <div> sencilla para mostrar la imagen. en su lugar queremos colocar una imagen. ¿No querremos que el visitante pase un minuto oyendo «guión. Como el soporte de los navegadores a las etiquetas <hr> es extraño. pero atenta contra la semántica propia del lenguaje de marcado de hipertexto (HTML). Los navegadores más antiguos y los navegadores sólo texto ignorarán el CSS y sólo mostrarán una línea horizontal en su estilo propio. 12:18 .jpg" title=""> alt="—" En el atributo "alt" no hace falta poner 80 o 90 guiones. esta solución no plantea problemas de accesibilidad. pueden resultar sosas y aburridas.? Como ya dijimos. En la hoja de estilo colocaremos el siguiente código: 180 diseño para todos.

como Nestcape 4. } 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 dirección donde se ubica. mostrarán una línea horizontal normal. background-image: url(/imagenes/ LinedaDecorativa. Algunos navegadores antiguos. background-repeat: no-repeat. Los navegadores sólo texto siempre ignoran la hoja de estilo. margin: 1em 0 1em 0. height: 25 px. background-position: center center. 181 diseño para todos.p65 181 08/11/2007.hr{ display: block.hr {display:none} /*/*/a{} div.div. ya podemos colocar nuestra línea decorativa en el lugar oportuno del código fuente poniendo: <div class="hr"></div><hr /> Los resultados serán: • • • Todos los navegadores visuales modernos mostrarán la imagen en lugar de la línea horizontal plana normal.jpg). Con esto hecho. por lo que mostrarán una regla horizontal formada por guiones normales o de subrayado. 12:18 .

están provocando problemas para la visualización y correcta lectura del contenido para aquellos que aumentan el tamaño de la fuente con su navegador. opiniones. 12:18 . etc. su contenido principal sigue siendo las palabras (noticias. Como no queremos que esas personas se queden sin poder acceder a nuestros contenidos. porcentaje o palabras clave (este último realmente es un valor absoluto pero con un comportamiento flexible para su interpretación por el navegador). tendremos que presentar la fuente con valores relativos. tales como puntos o pixels. Esto facilita la flexibilidad necesaria al navegador para modificar el tamaño de la fuente y respeta la proporción entre los distintos tamaños que utilizamos para destacar o diferenciar ciertos textos. Podemos recomendar la lectura de uno de los capítulos del texto de Mark Pilgrim «Dive into accessibity». pensamientos. Pero hay que 182 diseño para todos.p65 182 08/11/2007. animaciones y otros contenidos multimedia. algunos diseñadores se empeñan en definir el tamaño de la fuente (carácter o letra) con valores absolutos. Con la permanente pretensión de controlar la presentación de los contenidos. el del día 26 referido a «Usar tamaños de fuente relativos». Al presentar un tamaño absoluto.Paso 19 Tamaños de fuente relativos Aunque las páginas web cada vez contienen más imágenes. tales como unidades em.). Se han escrito muchas reglas para explicar cómo hacer un texto con tamaño de fuente relativo que trabaje correctamente con todos los navegadores visuales (recordamos que esta característica de accesibilidad es indiferente para los navegadores sólo texto —que siempre lo mostrarán con el mismo tamaño— y para los lectores de pantalla que se limitan a leer y presentar el contenido de forma oral). Al hacer esto así. Mi particular experiencia me lleva a decantarme por el uso de porcentajes al definir los tamaños de fuente en la hoja de estilos. el navegador no es capaz de agrandar la fuente y siempre la muestra con el tamaño definido por el autor. artículos.

x-large y xx-large) y porcentajes que parece dar un buen resultado. medium. para los navegadores más antiguos (aunque de éstos queden ya muy pocos activos) este tipo de aplicación de porcentajes puede producir algunos efectos muy poco deseables. Señalamos que si el tamaño de fuente definido para el cuerpo general de la página es del 90% y dentro de este bloque definimos otro. large. Además. por ejemplo para el tamaño de las fuentes en los «posts» del 90%. Blogger utiliza una curiosa mezcla entre palabras clave (que puede tomar los valores xx-small. 183 diseño para todos.tener mucho cuidado y hacer muchas pruebas para ver que los resultados de la aplicación de sucesivas reducción en bloques de contenido anidados en otros no provoque una reducción de tal magnitud que haga ilegible el texto. el resultado será que la letra se mostrará al 81% (el 90% de 90%). 12:18 .p65 183 08/11/2007. small. x-small.

como Google. No es extraño encontrar páginas donde sus títulos 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. Por eso es importante el uso correcto de estos encabezados. son capaces de indexar el contenido de nuestras páginas localizando los encabezados de ella. Cada uno de estos niveles responde a un nivel de encabezado en la codificación HTML (existen hasta 6 niveles) que se marcan mediante las etiquetas <h1>. 12:18 . Los buscadores. en el caso de JAWS. tiene la posibilidad de leer la relación de encabezados si se pulsa INSERT+F6 o navegar entre encabezados con CONTROL+INSERT+INTRO). El nivel superior será el propio título de la bitácora. como la mayoría de los documentos escritos. También el navegador Opera nos permite saltar al siguiente encabezado pulsando la tecla «S» y retroceder al anterior con la tecla «W». 184 diseño para todos. En el cuarto nivel estaría la sección de «comentarios» para cada «post». 3.p65 184 08/11/2007. Esto atenta contra la semántica de la codificación HTML y provoca inconvenientes de navegación para ciertos usuarios que supondrán barreras al no encontrar la correspondiente etiqueta de encabezado. un esquema por niveles que podríamos describir así: 1. El correcto uso de estas etiquetas facilita la navegación mediante lectores de pantalla (que. 7 de junio de 2006». 4.Paso 20 Encabezados correctos Una página de una bitácora tiene. 2. El segundo nivel sería cada uno de los días en los que colocamos «posts». Por ejemplo: «Martes. <h3> y <h4>. El tercer nivel lo ocuparía el título de cada uno de los «post» de cada día. <h2>.

En Blogger. utilizar las etiquetas de encabezado y hacerlo de forma correcta. Debemos. por lo tanto. la plantilla principal define en su hoja de estilo la forma en que se presentarán los encabezados y en el cuerpo del contenido a qué textos se aplican. 12:18 . que realmente no es un encabezado. 185 diseño para todos.Otras páginas utilizan el formato que proporciona la etiqueta de encabezado para aumentar el tamaño de un texto.p65 185 08/11/2007.

La validación del código HTML hay que hacerla para cada página. Si todo está bien. el validador te presentará los resultados. de forma automática. para saber si hemos conseguido el objetivo de hacer una bitácora accesible. Eso es lo que debemos hacer en este paso. El análisis que proponemos no sirve para colocarse medallas ni obtener certificados. Escribimos la dirección web donde se encuentra la hoja de estilo. El siguiente paso será verificar el código de nuestra hoja de estilo. hay que verificar sus resultados. Recomendamos comprobar una serie de pasos. 12:18 . En la dirección http://validator.org se puede encontrar la herramienta para realizarlo.w3. antes de colocar los contenidos a disposición de todos. No se trata de hacer una «auditoría de accesibilidad» exhaustiva y profesional.org/css-validator/. Veamos los pasos a dar: • El primero de ellos será verificar si el código fuente de nuestra bitácora se ajusta a las recomendaciones de W3C sobre HTML. Basta con que pongamos la dirección web donde se ubica tu bitácora y.p65 186 08/11/2007. rápidos y sencillos. ya que la verificación del código puede ser completamente realizada por una herramienta automática. ¡felicidades! Si te devuelve una página en la que te muestra los errores encontrados. también ajustándose a las recomendaciones de W3C para CSS.w3. el validador realiza el análisis de forma automática. Para ello disponemos de una herramienta automática que podemos encontrar en: http://jigsaw. Este procedimiento es completamente fiable. El código de la hoja de estilo es analizado tanto si ésta se en- • 186 diseño para todos. Su pretensión es que aprendamos algo sobre verificación de la accesibilidad y nos acostumbremos a usarla en tus trabajos futuros en la web.Paso 21 Verificar la accesibilidad Para considerar correctamente finalizado un trabajo. debemos revisar el código y modificar con las recomendaciones que ellos mismos nos proporcionan.

el validador localiza el trozo de código que corresponde la hoja de estilo (si está correctamente marcado) y lo analiza. Para hacer accesible una web. Hay muchos criterios cuya revisión tenemos que realizarla de forma personal o manual. la herramienta e instalarla en el ordenador. tendremos que realizar un análisis para cada una de ellas. Normalmente habremos utilizado una sola hoja de estilo. entre otras ventajas. en princi187 diseño para todos.0. al menos en parte. En cuanto nos salgamos de éstos.es/disweb2000/WCAG2003/wcag10/WAIWEBCONTENT-19990505_es. tienen mucho que ver con accesibilidad.html). En este tercer paso vamos a hacer un análisis automático de los criterios de accesibilidad promovidos por W3C en sus WCAG 1.tawdis. «castellanizado». lo que puede hacer más fácil su uso. permite realizar el análisis de todas las páginas de dominio de una sola vez. De forma automática y completamente fiable. posiblemente comencemos a poner en problemas a algunas personas. presentará los resultados. En cualquier caso. Los dos pasos anteriores. ¡felicidades! Si encuentra errores nos los comunicará y deberemos revisarlos y modificarlos para adecuarlos al estándar.css) como si está dentro de una página web normal (del tipo: pagina. de forma gratuita.discapnet. En este último caso. Si son varias las aplicadas.net/. lo primero es hacerla de forma correcta y adecuada a los estándares. aunque no lo parezca. mientras que en línea tendríamos que hacerlo página a página. Si la respuesta obtenida del validador es que todo está bien.• cuentra en un archivo propio (del tipo: estilo.p65 187 08/11/2007.html). el análisis automático nos permite conocer si hemos cometido errores que se pueden detectar de esta forma y nos recomienda la verificación de otros criterios de forma personal. Para ello vamos a utilizar la herramienta desarrollada por la Fundación CTIC y conocida con el nombre TAW (Test de Accesibilidad Web) que puedes encontrar en http:// www. elaboradas por grupo WAI (dispones de una traducción al castellano [español] en: http://usuarios. El análisis automático de accesibilidad se puede realizar en línea o se puede descargar. Una observación importante es que el análisis de la accesibilidad no se puede hacer al 100% de forma automática. por lo que sólo tendremos que hacer un análisis. Este validador está. Recomendamos esta segunda opción porque. Con los resultados que nos ofrece esta herramienta podemos saber si. 12:18 .

es/software. Para desactivar la hoja de estilo.au/ais/web/resources/ contrast_analyser/versions/es/. Al estar completamente en castellano [español] su uso es más fácil y comprensible.technosite. Esta barra de herramientas sólo trabaja con el navegador IExplorer. ¡felicidades!) o si debemos revisar y modificar algo en nuestras páginas. Visitemos la bitácora con un navegador sólo texto o con un simulador como Lynx Viewer y comprobemos como llegará a los usuarios 188 diseño para todos. 12:18 . Podemos hacer alguna prueba más. Debemos procurar que todos sean positivos para todos los casos. Si es así. La forma más rápida y fácil es utilizando la barra de herramientas de accesibilidad desarrollada por el equipo de AIS que. El manejo de esta herramienta en muy sencillo e intuitivo.asp. muy exigente.• • pio. revisaremos y modificaremos lo que corresponda. Disponemos de una herramienta para hacer este análisis. todo está correcto en materia de criterios de accesibilidad (si es así. en su versión «castellanizada» (realizada por Technosite [Fundosa Teleservicios]). Como ya vimos en el paso 7. En este cuarto paso haremos un análisis del contraste de color del sitio. complementaria como: • • Deshabilitar las imágenes en el navegador y comprobar si los textos alternativos están puestos correctamente y son comprensibles. cuyo programa en castellano [español] podemos descargar gratuitamente en esta dirección: http://www. W3C ha promovido un algoritmo. ¡felicidades! En caso contrario.nils. al hablar del uso de los colores. para verificar el contraste de colores. Verifica que todos los colores que hemos empleado superan los valores mínimos. Observamos que la herramienta ofrece unos valores para la «visión normal» y otros para distintas «cegueras de color». Verifica que todo el contenido de las páginas de tu bitácora se comunica correctamente sin la hoja de estilos.p65 188 08/11/2007.org. Una última prueba es visualizar la bitácora quitando la hoja de estilo. podemos descargarla gratuitamente desde: http://www. tenemos que hacerlo desde la opción etiquetada como «IE».

Con la demo del lector de pantalla JAWS (la versión 5. Si tenemos alguna versión antigua de navegadores visuales.p65 189 08/11/2007.01 de este programa en castellano [español] se puede encontrar en: ftp://ftp.• • que dispongan de este tipo de navegadores el contenido de la bitácora. 12:18 . 189 diseño para todos. que es muy peculiar.once.0) escucharemos cómo se oyen los contenidos de la bitácora. visitaremos la bitácora con ella para ver los resultados. como Netscape 4.es/ pub/utt/tiflosoftware/04_Revisor_Jaws/jaws_5.

p65 190 08/11/2007. 12:18 .190 diseño para todos.

conclase.diveintoaccessibility. 12:18 .discapnet.org.net/ Opera: http://www.Anexo Web recomendadas • • • • • • • Blogger: http://www.com/ Hojas de Estilo.com/ 191 diseño para todos.com/ Dive into Accessibility: http://www.sourceforge.blogger.com/doslynx/lynxport.sidar.org/recur/desdi/mcss/index.au/ais/web/resources/contrast_analyser/versions/es/ Barra de Herramientas de Accesibilidad: http://www.php Analizador del Contraste de Color: http://www.fdisk.htm Links: http://links. CSS: http://www.opera.asp Navegadores • • • Lynx: http://www.es/disweb2000/WCAG2003/index.nils.es/software.p65 191 08/11/2007.htm HTML con Clase: http://html.technosite.org/ Pautas accesibilidad web: http://usuarios.

netscape.icab.ibm.com/able/solution_offerings/hpr.org/ iCab: http://www.mozilla.0 IBM Home Page Reader: http://www-3.mozilla-europe.org/es/products/firefox/ MS Internet Explorer: http://www.es/ Netscape: http://www. 12:18 .com/es/ 192 diseño para todos.es/pub/utt/tiflosoftware/04_Revisor_Jaws/jaws_5.html Mozilla: http://www.microsoft.once.• • • • • • • JAWS: ftp://ftp.p65 192 08/11/2007.de/ Firefox: http://www.

193 • • • • diseño para todos.0. artículos y material formativo sobre accesibilidad web (inglés). http://www.Enlaces de interés (Actualizados a diciembre de 2006) Para completar este texto.es/document_accesibilidad.webaim. http://usuarios.w3.org Sitio del Consorcio Mundial de la Web.ogr/WAI Páginas de la Iniciativa de Accesibilidad en la Web con amplia información sobre sus actividades y todos los documentos que elaboran.htm Páginas sobre accesibilidad web en el sitio de Carlos Egea: DisWeb2000. http://www.p65 193 08/11/2007.technosite.0 y documentos relacionados (castellano).asp Paginas de Technosite (Fundosa Teleservicios) que ofrecen la traducción al castellano de las Pautas de Accesibilidad al Contenido en la Web 1.discapnet. imprescindible referencia en materia de normativa y desarrollo de la web (inglés). de especial interés las WCAG 1. 12:18 . Información y acceso a la traducción de las WCAG 1.w3.es/disweb2000/webaccesible/index. http://www.0 (inglés). Información general • http://www. incluimos a continuación una lista de enlaces de interés con información sobre los aspectos tratados en este documento.org Sitio de la iniciativa Web Accessibility in Mind en la que podemos encontrar recursos. incluyendo el formato PDF de las dos ediciones impresas (castellano). técnicas.

it Sitio de la Fundación Ugo Bordoni con información.org/ Mucha información sobre accesibilidad web en este sitio italiano.net/ Bitácora de Marco Giacomuzzi sobre accesibilidad en la web (castellano e italiano). http://ferguweb.ni4. incluyendo una herramienta de evaluación (italiano). http://www. http://www.com.ru/ Bitácora de Fernando Gutiérrez Ferreira sobre temas de accesibilidad y usabilidad en la web (castellano). Han elaborado un protocolo de cumplimiento de criterios de accesibilidad web para este colectivo (castellano). http://www. 12:18 .com/ Sitio de Alejandro Gonzalo Bravo García con información. pero de fácil lectura por hispano parlantes (italiano).ar/default.tx.• http://diveintoaccessibility. http://accesibleweb.com. recursos y artículos sobre accesibilidad web (castellano). http://www. normativa y recomendaciones de accesibilidad.webaccessibile.sidar.org Sitio de la Fundación SIDAR y de su Seminario Iberoamericano sobre Discapacidad y Accesibilidad en la Red con mucha información sobre el tema (castellano).org/ Mark Pilgrim escribió este didáctico manual de introducción a la accesibilidad web.webposible. • • • • • • • • 194 diseño para todos. http://www.htm La argentina Andrea Stiparo mantiene este sitio con información sobre accesibilidad web (castellano).org/ AFANIAS y el Instituto de Apoyo Empresarial mantienen esta web sobre «Navegación fácil» que toca la accesibilidad web desde el punto de vista de la discapacidad intelectual.seraccesible.p65 194 08/11/2007. que ha sido traducido a algunos idiomas (inglés).webxtutti. http://www.

ceyas. • Empresas españolas comprometidas con la accesibilidad web • • http://www.vialibre. incluyendo la accesibilidad web. Desarrollo y Aplicación Tiflotécnica de la ONCE.com/ Consultoría y diseño web accesible.es Web del Centro de Investigación.lotura. http://webmastercristiano. 195 • diseño para todos.once. empresa del grupo Fundosa.asp Catálogo de ayudas técnicas que distribuye TecnicAID. Ésta la mantiene José Luis Velázquez (castellano).com/ Bitácora de Daniel Calisaya que toca.es/catalogo_ortopedia/Page0001. http://www. http://www. http://www.timon. diseño y estudios sobre accesibilidad web. temas de accesibilidad web (castellano).net/ Otra bitácora que toca los temas de accesibilidad web. estudios y diseño web accesible. http://www.es Consultoría.es Consultoría en temas discapacidad y dependencia. entre otros.com Asesoramiento.p65 195 08/11/2007. http://www. 12:18 . http://www.jlvelazquez.acctiva. • • • • Recursos para deficiencia visual • http://cidat.com Diseño de sitios web accesibles.accesibilidadweb.com Asesoramiento y estudios sobre accesibilidad web.technosite.• http://www.

webaim.au/info.it/testa.funcaragol.wave.p65 196 08/11/2007.htm TORQUEMADA: Herramienta de evaluación de páginas web (italiano).net TAW Test de Accesibilidad en la Web: Verificador de sitios y páginas. que incluyen la extensión web Developer para Firefox.watchfire. descargable (castellano).aspx?page=959 Analizador de Contraste de Color 1. http://www. http://www.org/ Web de la Fundación Manuel Caracol con interesantes recursos informáticos para personas ciegas y con deficiencia visual.tawdis. Evolución del anterior (inglés).technosite. la barra de herramientas de accesibilidad web AIS (castellano) y una versión de evaluación de JAWS. http://www. http://webxact. http://www.webxtutti. http://www.sidar.1.es/software.asp Páginas de Technosite (Fundosa Teleservicios) sobre recursos en materia de accesibilidad web.org.wat-c.1/ Analizador de Contraste de Color 1. http://www.0.org WAVE: Herramienta de evaluación de páginas web (inglés).org/tools/CCA/1.• http://www.org/ Catálogo de ayudas técnicas para personas con discapacidad del Centro Estatal de Autonomía Personal y Ayudas Técnicas del IMSERSO.visionaustralia. de pago la versión descargable (inglés).catalogo-ceapat.org/hera HERA: Verificador de páginas (castellano). incluye versión descargable (castellano). descargable. http://www. • Herramientas para evaluar y validar la accesibilidad web • http://www. 12:18 .com BOBBY: Verificador de páginas gratuito en su versión web. • • • • • • • 196 diseño para todos.

p65 197 08/11/2007.197 diseño para todos. 12:18 .

diseño para todos.p65 198 08/11/2007. 12:18 .

p65 199 08/11/2007. 12:18 .diseño para todos.

12:18 .p65 200 08/11/2007.diseño para todos.

Sign up to vote on this title
UsefulNot useful