Diseño para Todos 2

8/9/2019 Diseo para Todos 2

1/168

WEB PARA TODOS.p65 12/11/2007, 12:171


2/168

WEB PARA TODOS.p65 12/11/2007, 12:172


3/168

DISEO WEB PARA TOD@S II

WEB PARA TODOS.p65 12/11/2007, 12:173


4/168

WEB PARA TODOS.p65 12/11/2007, 12:174


5/168

PROGRAMA MODULAR ENTECNOLOGAS DIGITALES Y SOCIEDAD DEL CONOCIMIENTO

DISEO WEBPARA TOD@S II

CREANDO UNA WEB ACCESIBLE

Materiales elaborados por:CARLOS EGEA GARCA

Con la colaboracin de:ALICIA SARABIA SNCHEZ

SOCIEDAD DEL CONOCIMIENTO

WEB PARA TODOS.p65 12/11/2007, 12:175


6/168

Diseo de la cubierta: Carmen Rosa Redondo

UNED (Universidad Nacional de Educacin a Distancia)

Carlos Egea Garca

Colaboradores: Alicia Sarabia Snchez

Coordinadora de la coleccin: Sara Osuna Acedo

De esta edicinIcaria editorial, s.a.Arc de Sant Cristfol, 11-23 - 08003 Barcelonawww.icariaeditorial.com

ISBN: 978- 84-7426-957-4Depsito legal: B-52.806-2007

Fotocomposicin: Text Grfic

Impreso en Romany/Valls, s.a.Verdaguer, 1, Capellades (Barcelona)

WEB PARA TODOS.p65 12/11/2007, 12:176


7/168

NDICE

Prlogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

CREANDO PGINAS WEB ACCESIBLES

Creando hojas de estilo en cascada accesibles . . . . . . . 19Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Qu son las hojas de estilo en cascada? . . . . . . . . . . . . . . . 19Por qu se las llama en cascada? . . . . . . . . . . . . . . . . . . 20El aspecto del control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Usando CSS a nuestro favor . . . . . . . . . . . . . . . . . . . . . . . . . . 23Dificultades de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Creando imgenes accesibles . . . . . . . . . . . . . . . . . . . . . . . . 31Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Ilustraciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Vdeo y multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Color y contraste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Texto con grficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Grficos que pueden causar ataques epilpticos . . . . . . . . . . 39

Texto alternativo (alt text) efectivo . . . . . . . . . . . . . . . . . . . . . . 40Mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Imgenes de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

WEB PARA TODOS.p65 12/11/2007, 12:177


8/168

Descripciones largas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Creando marcos (frames) accesibles . . . . . . . . . . . . . . . . . 59Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Accesibilidad en los marcos (frames) . . . . . . . . . . . . . . . . . . . 60Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Creando tablas accesibles . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Tablas de maquetacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Tablas de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Creando formularios accesibles . . . . . . . . . . . . . . . . . . . . . . 79Accesibilidad general de los formularios . . . . . . . . . . . . . . . . . 79Accesibilidad del lector de pantalla al formulario . . . . . . . . . . 82Asociacin de etiquetas con elementos de formulario . . . . . . 85Controles de formulario accesibles . . . . . . . . . . . . . . . . . . . . . 87Usando Dreamweaver y FrontPage . . . . . . . . . . . . . . . . . . . . 92Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Creando JavaScript accesible. . . . . . . . . . . . . . . . . . . . . . . . 95

Qu es JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Manejadores de evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99Usando manejadores de evento independientesdel dispositivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Otros aspectos de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 102Alternativas a JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Resumen de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Creando contenido accesible con Flash de Macromedia 113Visin general de la accesibilidad de Flash . . . . . . . . . . . . . . . 113

Tecnologas de apoyo soportadas por Flash . . . . . . . . . . . . . . 115Accesibilidad con lector de pantalla . . . . . . . . . . . . . . . . . . . . . 117Equivalentes textuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

WEB PARA TODOS.p65 12/11/2007, 12:178


9/168

Accesibilidad del teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Otras tcnicas y consideraciones de accesibilidad . . . . . . . . . 129Pautas aplicables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Verificando la accesibilidad en pginas web . . . . . . . . . . . 139Verificando el cdigo HTML y CSS . . . . . . . . . . . . . . . . . . . . . 139Verificando la accesibilidad web con herramientasautomticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Verificando la accesibilidad con Dreamweaver 2004 MX . . . . 148La barra de herramientas de accesibilidad web de AIS

para Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149La barra de herramientas Web Developer para Firefox . . . . . 161

Enlaces de inters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Informacin general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Empresas espaolas comprometidascon la accesibilidad web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Recursos para deficiencia visual . . . . . . . . . . . . . . . . . . . . . . . 165Herramientas para evaluar y validar la accesibilidad web . . . 166

WEB PARA TODOS.p65 12/11/2007, 12:179


10/168

WEB PARA TODOS.p65 12/11/2007, 12:1710


11/168

The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

El poder de la Web est en su universalidad.El acceso para todos, a pesar de la discapacidad,

es un aspecto esencial

Tim Berners-Lee, Director de W3C e inventor de World Wide Web

WEB PARA TODOS.p65 12/11/2007, 12:1711


12/168

12

WEB PARA TODOS.p65 12/11/2007, 12:1712


13/168

13

Prlogo

La irrupcin del servicio web a travs de internet ha supuesto un cambiodrstico y no previsto en la forma de acceder a la informacin, sin que ni

los ms aventurados escritores de ciencia ficcin de principios del siglo XXpudieran anticipar su impacto social para finales de l.

Las posibilidades que se abren a todos los ciudadanos para democra-tizar el acceso a la informacin se han visto incrementadas por la aparicinde este nuevo sistema de comunicacin. Desde cualquier punto conectadoa internet podemos acceder a un inmenso mundo de informacin hasta lafecha inabarcable.

Estos avances han supuesto, tambin, para las personas con limitacio-nes funcionales la apertura de expectativas hace poco impensables. Lasventanas de internet pueden suponer la eliminacin de barreras fsicasque obstaculizaban el acceso a medios y servicios que antes no podan

ser utilizados por algunas personas.Pero la web, con su poder universal, de poco sirve si en su diseono tenemos en cuenta las especiales caractersticas de algunos de sususuarios. Para tal fin, el Consorcio Mundial de la Web (World Wide WebConsortium), conocido por las siglas W3C, puso en marcha una iniciativaencaminada a definir y difundir las pautas para la accesibilidad de la web.La Iniciativa de Accesibilidad en la Web (Web Accessibility Initiative), cono-cida por sus siglas WAI, comenz su andadura redactando un documentode bases en el que se recogieran, como recomendaciones tcnicas, loscriterios a tener en cuenta para disear de forma accesible las pginasweb.

El resultado final de estos trabajos en pro de una normativa tcnica

para hacer accesibles los contenidos de la web se plasm en un documen-to que fue aprobado como Recomendacin W3C, con el nombre de Pau-tas de Accesibilidad al Contenido en la Web 1.0 (Web Content

WEB PARA TODOS.p65 12/11/2007, 12:1713


14/168

14

Accessibility Guidelines 1.0), tambin conocidas por sus siglas WCAG 1.0.Esta Recomendacin, junto a otras dedicadas a las herramientas de edi-cin y las aplicaciones de usuario, conforman la referencia de normativatcnica para aplicar los criterios para un diseo accesible de la web.

En sus catorce pautas se recogen los principios bsicos para conse-guir el objetivo de poner los contenidos de la web a disposicin de TODOS.Para llevar a efecto dicha tarea, junto al documento normativo, se redactun anexo que recoge las tcnicas para aplicar los criterios de accesibilidad.stos y otros documentos pueden encontrarse en la web que, dentro delsitio de W3C, mantiene el grupo WAI (http://www.w3.org/WAI/). Tambin

est disponible una versin traducida al castellano de estos documentos,que se puede encontrar en una de estas direcciones:

http://usuarios.discapnet.es/disweb2000/WCAG2003/index.htm http://www.technosite.es/document_accesibilidad.asp

Las frecuentes preguntas sobre cmo aplicar los criterios de accesibi-lidad han llevado a algunos grupos de trabajo a redactar sus propios docu-mentos que, con un afn pedaggico, tratan de explicar a quienes se acer-can a la accesibilidad web el procedimiento para conseguir el objetivopropuesto.

Una de estas iniciativas es la llevada a cabo por la web WebAccessibility In Mind (Teniendo en cuenta la accesibilidad en la web),conocida por las siglas WebAIM. Entre los trabajos que este sitio web (http://www.webaim.org) pone a disposicin de todos, destacan aquellos referi-dos a las tcnicas y conceptos.

Tomando como referencia algunos de los documentos que WebAIMha realizado, hemos elaborado este material sobre cmo aplicar a deter-minadas tareas de diseo los criterios de accesibilidad para el contenidoen la web.

El resultado es este documento que trata de orientar a aquellos quepretenden conseguir una web para todos.

WEB PARA TODOS.p65 12/11/2007, 12:1714


15/168

15

Introduccin

Los materiales que recoge este libro sirven de referencia para la segunda

parte del mdulo sobre Diseo para todos, dentro del Programa Modu-lar en Tecnologas Digitales y Sociedad del Conocimiento de la Universi-dad Nacional de Educacin a Distancia (UNED). Sin el conocimiento y lacomprensin de los materiales correspondientes a la primera parte de estemdulo,1 puede que el contenido de este documento no sea entendido.

Con el nombre genrico de Creando pginas web accesibles, presen-tamos en este documento una serie de captulos que tratan de orientar aldesarrollador sobre qu tareas debe realizar para conseguir este objetivo.

Comenzaremos por ver cmo hacer que nuestra hoja de estilos hagaque los contenidos de nuestras pginas web sean accesibles. El segundocaptulo recoge uno de los apartados claves: el referido a la creacin de

imgenes, de todo tipo, que sean accesibles. Los dos siguientes captulosse dedican a la correcta y accesible aplicacin de marcos (frames) y tablas(tanto de maquetacin como de datos).

La creacin de formularios accesibles, el procedimiento para hacer unjavascript siguiendo los criterios de accesibilidad y la forma de realizar unflash que no suponga una barrera insalvable para aquellos que manejanaplicaciones de usuario especiales, son los contenidos que tratamos en lossiguientes tres captulos.

El captulo Verificando la accesibilidad en pginas web lo dedica-mos a describir herramientas y procedimientos para la evaluacin y valida-cin de la accesibilidad de las pginas web. Su correcto uso nos propor-ciona indicadores de la accesibilidad de un sitio web, lo que nos permitir,

1. Egea Garca, C., (2007), Diseo Web para Todos I, Icaria, Barcelona.

WEB PARA TODOS.p65 12/11/2007, 12:1715


16/168

16

conociendo los errores, hacer un diseo que se ajuste a las necesidadesde cualquier persona con independencia de sus limitaciones, ya sean per-sonales o de equipamiento.

El ltimo bloque de este libro se reserva para una serie de referenciasen la web con documentos que nos proporcionan informacin y herramien-tas para la aplicacin de todo lo tratado en este mdulo.

Carlos Egea GarcaFebrero de 2007

WEB PARA TODOS.p65 12/11/2007, 12:1716


17/168

17

Creando pginas webaccesibles

Traduccin y adaptacinsobre textos de WebAIM por

CARLOS EGEA GARCAY ALICIA SARABIA SNCHEZ

WEB PARA TODOS.p65 12/11/2007, 12:1717


18/168

18

WEB PARA TODOS.p65 12/11/2007, 12:1718


19/168

19

Creando hojas de estiloen cascada accesibles

Introduccin

Durante aos, la nica manera de maquetar HTML con un aspecto atracti-

vo era usando tablas, aunque las tablas fueron creadas originalmente paramostrar datos tabulares. A medida que la web evolucion y se hizo mssofisticada, los diseadores queran hacer algo ms que mostrar texto,queran emular los documentos escritos. Queran hacer una exposicin ar-tstica. Eso no es malo. De hecho, las tablas se pueden usar para maquetarsin arruinar por ello la accesibilidad de un sitio. S, est bien usar tablaspara maquetar.

Sin embargo, podemos elevar el nivel de diseo de una web eliminandolas tablas completamente. La forma de hacerlo es mediante las CSS (hojasde estilo en cascada). Antes de avanzar demasiado, puntualizaremos quetambin se puede crear un sitio web INaccesible usando CSS. No hay nada

mgico en las CSS que elimine las barreras a la accesibilidad.

La fuerza de las CSS reside en su capacidad para separar el contenidode la presentacin y para permitir un control ms preciso sobre lamaquetacin.

Qu son las hojas de estilo en cascada?

Las hojas de estilo en cascada, o CSS, permiten modificar las propieda-des de las etiquetas HTML existentes. Todos los navegadores web estnbasados en una hoja de estilo incorporada. Esta hoja de estilo forma parte

del programa y no es visible. Da instrucciones al navegador sobre cmomostrar aspectos o elementos particulares de su pgina. Por ejemplo, cuan-do el navegador ve la etiqueta

, sabe que tiene que saltar de lnea y

WEB PARA TODOS.p65 12/11/2007, 12:1719


20/168

20

empezar una nueva seccin, ya que sta es la informacin que le da lahoja de estilo incorporada. Las etiquetas , y cualquier otrade HTML se definen en esta hoja de estilo: tamao, color, posicin y otrascaractersticas, que estn definidas en ella. Cuando el usuario aade supropia hoja de estilo a una pgina web, puede anular la hoja de estiloincorporada y dar instrucciones al navegador sobre cmo mostrar los ele-mentos de una forma diferente, de acuerdo con su propia hoja de estilo.

Aunque la mayora de etiquetas permiten aadir atributos para darlesciertas caractersticas (por ejemplo, color= rojo), con las hojas de estilotenemos mayor flexibilidad y la capacidad de aadir bastantes atributos

que no estn disponibles en el HTML normal. Una de las ventajas de lashojas de estilo (o simplemente estilos, para abreviar) es que no se tie-nen que aadir atributos extra a las etiquetas individuales, sino que, en sulugar, se puede definir un estilo para que esa etiqueta cumpla con eseatributo cada vez que se use. As, si queremos que todos los prrafos deuna pgina tengan un cierto tamao, no tenemos porqu usar la etiqueta (fuente o tipo de letra) en cada uno. En su lugar, la CSS le dice alnavegador que cada vez que lea la etiqueta

coloque el elemento alque sta se refiere en el tamao que hayamos seleccionado. Igualmente,los estilos son fciles de editar y cambiar; en lugar de tener que encontrary editar cada etiqueta HTML que aparezca, podemos cambiar el estilo queestuviera definido para esa etiqueta y todas las etiquetas de ese tipo de lapgina web (o del sitio completo) se cambiarn.

Por qu se las llama en cascada?

Las Hojas de Estilo en Cascada aplican una jerarqua de importancia. Elusuario tiene el mximo nivel de control. Mediante la aplicacin de unahoja de estilo seleccionada por el usuario, ste tiene el completo controlsobre los estilos de la pgina web. El siguiente nivel descendente de jerar-qua est en el propio documento. Si se aplica un estilo a la etiqueta, tienepreferencia sobre cualquier otra declaracin de estilo (excepto para los

estilos del propio usuario). Ms abajo en la jerarqua se encuentran losestilos especificados mediante el (encabezado) de una sola pgi-na y despus los estilos especificados en documentos externos. Se puede

WEB PARA TODOS.p65 12/11/2007, 12:1720


21/168

21

decir que el documento especificado ms recientemente es el que real-mente se aplica. Esta cascada de jerarquas es la razn por la que sedenominan hojas de estilo en cascada.

Imagen 1. Jerarqua de la cascada de estilos.

Del mismo modo, si se declara ms de una vez un estilo para el mis-mo elemento, se aplicar el ltimo estilo que se declare. Echemos un vis-

tazo a los mismos atributos de estilo de abajo:

h1

{

color:red;

background-color:yellow;

}

h1

{

color:blue;

background-color:red;

}

h1

{color:white;

background-color:black;

}

WEB PARA TODOS.p65 12/11/2007, 12:1721


22/168

22

En este ejemplo, hay tres combinaciones de colores diferentes para laetiqueta h1. Las dos primeras combinaciones de colores sern ignoradas.Slo se aplicar la ltima. La ltima de la cascada prevalece sobre lasdems.

El aspecto del control

El hecho de que el usuario final sea quien tiene el mximo control sobrelos estilos de una pgina web beneficia la accesibilidad. Ello significa que

una persona con una visin extremadamente baja puede convertir el colorde fondo de todas las pginas web en negro, y la fuente en un texto blancoen negrita aumentado al 300% (o cualquier otro estilo que beneficie lasnecesidades de ese individuo). Algunos diseadores son reticentes a en-tregar el control sobre el aspecto y sensacin de sus creaciones. La ver-dad es que ellos nunca han tenido ese control. La web es un formato elec-trnico. La gente puede verla con cualquier navegador que elija y puedemanipularla tanto como quiera.

Por ejemplo, estamos acostumbrados a ver el sitio web de Google as:

Imagen 2. Vista de la pgina principal de Google con un navegador estndar.

WEB PARA TODOS.p65 12/11/2007, 12:1722


23/168

23

Imagen 3. Vista de la pgina principal de Google con un navegador slo texto.

Cuando uno cae en ello, se da cuenta que la idea de que los desarro-lladores de web tienen control sobre cmo se muestran sus contenidoses una mera ilusin.

El aspecto y sensacin finales siempre han estado bajo control delusuario. Con las hojas de estilo, este control simplemente se incrementa.En vez de luchar contra ello, los desarrolladores web deberan simplemen-

te aceptarlo y asegurarse de que sus documentos se transforman biencuando se aplique una hoja de estilo diferente de la especificada por ellos.

Usando CSS a nuestro favor

Separando el contenido de la presentacin

Tal y como hemos mencionado anteriormente, uno de los primeros benefi-cios de las CSS es que permiten a los autores separar el contenido de supresentacin. Contenidoincluye el texto, las imgenes y otros elementosque constituyen el ncleo del documento. Presentacines el modo enque ese contenido se presenta. La forma ms fcil de hacerlo es con el

navegador Opera (disponible en www.opera.com).

No obstante, si lo viramos en un navegador slo texto, tendra unaspecto similar a ste:

WEB PARA TODOS.p65 12/11/2007, 12:1723


24/168

24

Imagen 4. Pantalla de la opcin de Opera que le permite ira Modo de usuario ydeshabilitar los estilos de pgina.

Sin los estilos, el sitio parece otro completamente diferente. La presen-tacin del contenido est separada del contenido en s mismo. El conteni-do puede presentarse con diversas combinaciones de estilos, pero el con-tenido en s mismo no cambiar. Esto es lo que significa separar el contenido

de la presentacin.

Alterando la maquetacin alineada

Con las hojas de estilo tenemos mayor control sobre la maquetacin quecon las tablas. Uno de los beneficios de accesibilidad de este control esque se puede cambiar la maquetacin alineada de una pgina sin alterarla maquetacin visual. La maquetacin alineada se refiere al orden de loselementos de una pgina web cuando se han eliminado todos los estilos yformateos. El orden de lectura alineada del contenido web es importantepara los usuarios de lectores de pantalla, porque ese es el orden en quelos lectores de pantalla acceden al contenido. Los lectores de pantalla ig-

noran cualquier estilo del contenido web. Todo lo que queda es el conteni-do, sin ninguna presentacin. Esta versin desnuda de las pginas webes todo a lo que acceden los lectores de pantalla.

WEB PARA TODOS.p65 12/11/2007, 12:1724


25/168

25

Cmo se puede decir cul ser el orden de lectura alineada de unapgina web? Aqu est la respuesta:

El orden de lectura alineada de una pgina web es el orden literal delcontenido en el marcado HTML.

Una de las cosas buenas de las hojas de estilo es que no se tiene quealterar el formateo visual de una pgina web cuando se altera el orden delectura alineada. Esto puede ser til cuando se quiera asegurar que losusuarios de lectores de pantalla acceden al contenido de la pgina en un

cierto orden.Mediante la etiqueta que rodea el contenido principal podemos

colocarlo al principio del documento, ponindolo al inicio del orden de ali-neacin. Este ejemplo es un poco simple, pero esperamos que d unapista de algunas de las posibilidades que tiene usar hojas de estilo.

Sin embargo, no se debe suponer que siempre es mejor colocar el conte-nido principal al inicio. La mayora de los usuarios de lectores de pantalla es-tn acostumbrados a tener la navegacin al principio de la pgina. Es siempremejor proporcionar los medios para saltarse los elementos de navegacin.

El vnculo que permite a los usuarios saltarse la barra de navegacinsuele estar oculto a la vista y slo se puede acceder a l con un lector depantalla. Ello nos lleva al asunto del uso de CSS oculto con fines de acce-sibilidad.

Usando CSS oculto

He aqu un pequeo secreto: algunos sitios tienen un vnculo oculto al prin-cipio de la pgina que dice Saltar al contenido principal. Este vnculo nose percibe cuando se accede al contenido de una pgina en forma visual,pero se puede detectar si se accede al sitio web a travs del teclado. Si nolo ha hecho todava, use la tecla de tabulacin para navegar por los vncu-los de una pgina web (o mediante las teclas a y q si usa Opera).Cuando tabulamos al vnculo para saltarnos la navegacin, el texto apare-

ce de repente, aunque antes era invisible.El vnculo no tiene porqu estar oculto en absoluto. Podra haber sido

visible para cualquiera, pero por cuestiones estticas en muchas ocasiones

WEB PARA TODOS.p65 12/11/2007, 12:1725


26/168

26

interesa ocultarlo. El vnculo para saltarse la barra de navegacin podraparecer un poco fuera de lugar. A muchos diseadores no les gusta laforma en que este tipo de vnculo interfiere en sus diseos. Su reticencia ausar vnculos para saltarse la barra de navegacin es comprensible porquede hecho alteran la apariencia de la maquetacin. No obstante, sta no esuna excusa suficientemente buena para eliminarlos completamente del di-seo del sitio. Saltarse la barra de navegacin es una caracterstica tiltanto para aquellos que usan lectores de pantalla como para aquellos quedependen del teclado por otras razones, como tener algunos tipos dediscapacidad motrica. La idea de saltarse los elementos de navegacin

es demasiado valiosa para ignorarla. Probablemente en un futuro este tipode solucin ser obsoleta, pero de momento es todava una de las mejo-res maneras de permitir a los usuarios saltar directamente al contenidoprincipal de una pgina web.

Para ocultar el salto de la barra de navegacin, en primer lugar, eltexto y el fondo deben tener el mismo color. Si el fondo es blanco, el colorde la fuente que usemos ser tambin blanco. En segundo lugar, parahacer el vnculo visible cuando se tabule a l, proporcionaremos al vnculoun estilo CSS propio que cambiar el color del fondo del vnculo. El mar-cador HTML para el propio vnculo sera:

Saltar

al contenido principal.

Usando CSS, crearemos un estilo separado para el elemento de vn-culo dentro del elemento div skipnav. El estilo da al texto un color defuente que es igual que el color del fondo.

#skipnav a

{

color:#FFFFFF;

}

Adems, si hay un estilo que resalta los vnculos ponindoles un colorde fondo cuando se pasa sobre ellos con el ratn, o cuando se tabula aellos desde el teclado, necesitaremos crear un estilo adicional que cancele

WEB PARA TODOS.p65 12/11/2007, 12:1726


27/168

27

este resalte cuando el ratn pase por encima (si bien el efecto se mantie-ne para aquellos que navegan con teclado).

El resultado final es un vnculo que es invisible hasta que la gente utili-za el teclado para acceder a l. Este vnculo es tambin completamenteaccesible para los lectores de pantalla. El efecto de pasar por encima po-dra haberse dejado intacto para el vnculo de saltar la barra de navega-cin, pero entonces la gente lo hubiera encontrado con el ratn. Este des-cubrimiento sera una sorpresa y podra confundir a los usuarios,especialmente porque los usuarios de ratn generalmente no saben paraqu utilidad tiene un vnculo de saltar la navegacin. Para ellos, parece

innecesario: pueden saltarse la navegacin simplemente mirando ms abajo.No tienen que pinchar o hacer algo para obviarla.

Hay otros modos ms complejos de ocultar texto usando CSS, peropuede ser un reto hacer un trabajo aceptable para todos los navegadores.

Por ejemplo, usando display:none or visibility:hidden, el estiloevitara que el texto se mostrara en el navegador. Algunos lectores de panta-lla tambin siguen las indicaciones de estos estilos, por lo que el contenidoqueda oculto tambin para los usuarios de lectores de pantalla. Sin embar-go, hay formas de trabajar este problema, como cambiar la visibilidad de laspropiedades mostradas del vnculo cuando se enfoca desde el teclado. Heaqu un ejemplo de un conjunto de estilos que causaran un efecto similar:

#skipnav a

{

display:none;

}

#skipnav a:active,

#skipnav a:focus

{

background-color:#ffffcc;

color:#000000;

display:inline;

}

En el ejemplo de arriba, el estilo display: none se aplica al vnculoen su estado inactivo (cuando no se ha tabulado a l). Se aplica otro estilo

WEB PARA TODOS.p65 12/11/2007, 12:1727


28/168

28

distinto display: inline cuando el vnculo est activo o enfocado. Elestilo inline provoca que el texto aparezca visualmente en el lugar enque est. Tambin se han aplicado un ligero color amarillo de fondo(#ffffcc) y texto negro (#000000) al vnculo cuando es visible.

Si todo esto parece demasiado complejo, no es ningn error hacer elvnculo visible a todo el mundo, incluso si altera en cierta forma lamaquetacin de la pgina.

Dificultades de CSS

Revolver el contenido

Algunas de las fortalezas de las hojas de estilo son tambin sus debilida-des. Por ejemplo, la posibilidad de cambiar el orden de lectura alineada desu contenido sin cambiar la maquetacin visual puede conducir a algunassoluciones de accesibilidad maravillosas, pero tambin puede crear un te-rrible desorden. Si, sin darnos cuenta, creamos un orden de lectura alinea-da contrario al orden lgico de lectura de la pgina, habremos creado unabarrera de accesibilidad ms que una solucin de accesibilidad.

Los problemas con el orden de lectura alineada surgen principalmentecuando se usan posicionamientos absolutos. En CSS esto se llamaposition: absolute. Con el posicionamiento absoluto, tendremos un con-trol total y absoluto sobre la maquetacin visual, as que podemos encon-trarnos a nosotros mismos recolocando elementos posicionados de formaabsoluta hasta no tener ni idea de cul es el orden de lectura alineada. Esfcil encontrar salida a esto: simplemente hay que ir al cdigo y mirar elorden de lectura literal del contenido. Si ese orden tiene sentido, no senecesita cambiar nada. Si no lo tiene, tendremos que mover algunas eti-quetas hasta que el orden tenga sentido.

Aspectos de soporte del navegador

Cuando usemos CSS tendremos que aceptar el hecho de que en algunos

navegadores su contenido no se ver como nosotros (los diseadores)queremos. Internet Explorer y Netscape no intentaron soportar CSS hastala versin 4.0, por lo que todas las versiones anteriores no mostrarn los

WEB PARA TODOS.p65 12/11/2007, 12:1728


29/168


30/168

30

WEB PARA TODOS.p65 12/11/2007, 12:1730


31/168

31

Creando imgenes accesibles

Introduccin

Algunas personas piensan que los grficos son malos para la accesibili-dad. La verdad es que los grficos pueden ser un gran beneficio para laaccesibilidad de una pgina web, porque proporcionan ilustraciones, iconos,animaciones y otras claves visuales que facilitan la comprensin a quienesven la pgina. Tambin, a menudo, olvidamos que cuando diseamos parapersonas con discapacidades, no estamos diseando slo para ciegos.Debemos considerar discapacidades de todo tipo. Los grficos pueden serespecialmente tiles para individuos con ciertas dificultades para la lecturao discapacidades del aprendizaje, como desrdenes por dficit de aten-cin y discapacidades cognitivas.

IlustracionesMuchos conceptos se comunican con mayor efectividad con la incorpora-cin de ilustraciones. Imaginemos tratar de aprender la anatoma humanaen un libro (o pgina web) sin ilustraciones. Sera efectivo? Podemos verun ejemplo con la ilustracin en la pgina siguiente de los msculos de lamano.

Probablemente encontraremos difcil imaginar que una descripcin ni-camente textual pueda ser tan comprensible como un texto complementa-do con ilustraciones. Las ilustraciones hacen el contenido ms accesible.

Las ilustraciones pueden beneficiar no slo a aquellos que ven, sinoque pueden ser especialmente beneficiosas para quienes tienen

discapacidades de aprendizaje o desordenes de lectura. Los desarrolladoresde materiales educativos deberan considerar especialmente el uso de ilus-traciones para realzar la comprensin.

WEB PARA TODOS.p65 12/11/2007, 12:1731


32/168

32

Animaciones

Animaciones que distraen

Las animaciones raras veces se usan para realzar la accesibilidad del con-tenido web. La mayora de las veces son simplemente molestas. Los anun-cios mediante banners se aprovechan de las cualidades de las anima-ciones con el propsito de distraernos del tema principal del documento.En las escuelas elementales es habitual usar animaciones atractivas queno sirven para su propsito real, sin embargo quiz se puede argumentarque las animaciones capturan la atencin de los nios. Esto puede sercierto, pero la mayora de estas animaciones en realidad distraen la aten-cin de los nios del propsito real de la pgina.

Por ejemplo, una animacin muy usada es la de un buzn de correosque se abre y se cierra. La pregunta que debemos hacernos es si la ani-macin es o no el contenido central de la pgina. El propsito de la pgi-

na es animar a la gente a enviar correos electrnicos? Es posible, peroprobablemente no. Este tipo de animacin se encuentra muy a menudo enla parte baja de una pgina cuyo propsito principal no tiene nada que ver

Imagen 5. Msculos de las manos.

WEB PARA TODOS.p65 12/11/2007, 12:1732


33/168

33

con enviar mensajes de correo electrnico a la persona que escribi lapgina. La animacin es una distraccin, incluso cuando se usa en sitiosweb para nios. Sera mejor eliminar esta distraccin.

Animaciones que realzan la comprensin

Que los grficos sean usados muy a menudo para distraer la visin noquiere decir que no puedan servir a propsitos ms tiles. Las animacio-nes pueden ilustrar movimientos o procedimientos de una forma que seramuy difcil de hacer con un texto. Supongamos, por ejemplo, que quere-

mos aprender los pasos de una danza. Podramos tener una descripcinde los pasos en un texto y quiz esto funcionara, pero para mucha genteresultar ms fcil ver una animacin de cada uno de los pasos, para po-der imitar los movimientos de la animacin. En el caso de individuos condiscapacidades de lectura o cognitivas, el beneficio de las animaciones esincluso ms acentuado.

Naturalmente, la descripcin textual sera necesaria para quienes sonciegos, pero trataremos de este tema un poco ms tarde.

Iconos

Muchos programas de ordenador usan iconos que o suplementan o reem-plazan el texto de las barras de men (pensemos en Microsoft Word, porejemplo, y los iconos para abrir archivo, imprimir , etc.). A conti-nuacin podemos ver un grupo de iconos de la barra de navegacin deInternet Explorer:

Imagen 6. Iconos de la barra de navegacin de Internet Explorer.

Imagen 7. Iconos de la barra de navegacin de Opera.

ste es un grupo similar de iconos del navegador web Opera:

WEB PARA TODOS.p65 12/11/2007, 12:1733


34/168

34

La utilidad de un icono depende de:

Que est bien dibujado. Que el concepto se transmita bien. Que el pblico objetivo entienda bien el concepto. Que el icono focalice bien en la idea que se intenta transmitir.

Los iconos necesitan ser simples y fcilmente entendibles. Su mritoartstico es una cuestin secundaria, aunque los iconos que no son atracti-vos pueden tener un efecto negativo en su comprensin.

Uno de los problemas con los iconos es que raramente son entendidosde la misma forma por todos los que los ven. La mayora de la genteoccidental asocia una flecha que apunta a la izquierda (como la que ve-mos a continuacin) con el concepto de regresar o ir hacia atrs, pero enlos idiomas donde se escribe de derecha a izquierda (por ejemplo, el ra-be) lo opuesto puede ser cierto.

Imagen 8. Icono que representa regresar o ir hacia atrs.

No hay iconos completamente compartidos por todas las culturas eidiomas. Incluso dentro de la misma cultura e idioma, los iconos puedenser malinterpretados con bastante facilidad. Digamos que alguien decideaadir un icono a una pgina para indicar que los tems de un prrafoconcreto son slo especulaciones y no deberan ser tenidos como verda-des generalmente aceptadas. Para indicar esto, se coloca un signo deinterrogacin, como el que aparece abajo, antes de cada uno de estostipos de prrafos.

Imagen 9. Icono que representa ayuda.

WEB PARA TODOS.p65 12/11/2007, 12:1734


35/168

35

Sabramos inmediatamente qu quiere decir el signo de interroga-cin? Probablemente no. No obstante, si explicsemos el significado delsigno de interrogacin antes de usarlo, el icono sera til. Se pueden usariconos y, de hecho, pueden incrementar la comprensin, pero slo cuandolos usemos sensatamente.

Para la poblacin general los iconos pueden ser tiles, pero no sonsiempre absolutamente necesarios. No obstante, algunos individuos concierto tipo de discapacidades cognitivas deben ver los iconos para podercomprender la materia. Algunos sitios se desarrollan especficamentecon esta poblacin en mente. Incluso con las ilustraciones y los iconos,

estos individuos a menudo tambin requieren la asistencia de otra per-sona al principio, pero pueden aprender la interfaz icnica con algo deprctica.

Vdeo y multimedia

Aunque no entraremos en detalles sobre vdeo y multimedia ahora mismo,debemos mencionar que estos elementos pueden usarse para realzar lacomprensin, de la misma forma que las ilustraciones, las animaciones ylos iconos. En lo que concierne al vdeo, aunque proporcionemos unatrascripcin del texto (para los ciegos) y subttulos (para los sordos), debe-mos ser conscientes de que estos elementos realzan la comprensin msque eliminan los problemas de accesibilidad. En lo que se refiere a otrostipos de multimedia, como Flash, los aspectos de accesibilidad son un pocoms complejos, pero habitualmente es posible presentar el contenido deforma que sea accesible a las personas con discapacidades.

Color y contraste

Color

La regla de accesibilidad establece que no debemos usar slo el color

para transmitir significado. Esta frase es un poco confusa para algunos.Qu quiere decir transmitir significado slo con el color? Tomemos untrozo del plano del Metro de Madrid (que, intencionadamente, hemos

WEB PARA TODOS.p65 12/11/2007, 12:1735


36/168

36

escaneado en escala de grises) para nuestra discusin sobre ceguerade color:

Imagen 10. Trozo del plano del metro de Madrid, en blanco y negro.

Una persona que pudiera verlo en colores no tendra problemas en

distinguir entre la lnea roja, la lnea azul, la verde y etc. Una persona queno puede ver bien los colores, debido a ceguera de color o baja visin,probablemente no podr distinguir las diferentes rutas fcilmente. Los cie-gos no podrn verlas en absoluto. Cmo sabramos qu lnea debemostomar para llegar desde Alonso Martnez a Callao?

Antes de que vayamos ms lejos, deberamos indicar que las personascon ceguera de color pueden ver algunos colores (con la excepcin de unospocos casos particulares). As pues, el dibujo en escala de grises de arribano es representativo de la ceguera de color, es meramente un ejemplo deuna imagen en la cual se ha usado el color para transmitir significado. Cuan-do se quita el color, las diferentes rutas son casi imposibles de distinguir.

Debemos verificar las pginas web asegurndonos de que no se pier-

de ninguno de los significados cuando quitamos los colores. Podemos ha-cerlo imprimiendo la pgina en una impresora de blanco y negro, asegu-rndonos de que en las preferencias la impresin incluye los colores de

WEB PARA TODOS.p65 12/11/2007, 12:1736


37/168

37

fondo. Si trabajamos con el navegador Explorer, tambin podemos hacerla verificacin mediante la barra de herramientas de accesibilidad AIS,1

utilizando la opcin Escala de grises del botn Color.

Imagen 11. Opcin Escala de grises en la barra de herramientasde accesibilidad AIS.

1 Una versin en castellano de esta barra de herramientas de accesibilidad la podemos en-contrar en el sitio de Teleservicios: http://www.technosite.es/software.asp.

Contraste

Tomemos como ejemplo la barra de navegacin del sitio Onobox. Aun-que la que presentamos es una impresin de pantalla de la pgina en laque el texto es considerablemente ms pequeo y est un poco msdesenfocado en la pgina actual, notaremos que todo el texto es fcilmen-te distinguible de los colores de fondo que lo rodean. Donde hay un colorde fondo ms claro, hay un texto ms oscuro. Donde hay un color de

fondo oscuro, el texto es claro. Las personas con baja visin no tendrndificultad en distinguir entre los diferentes niveles de contrastes del texto yel fondo.

Si se hubiera elegido un color ms claro para el fondo de las pestaasde recursos, el texto sera difcil de leer.

Imagen 13.- Barra de navegacin de Onobox, en escala de grises.

Tenemos que ser cuidadosos cuando elijamos los colores de fondopara que no reduzcan el nivel de contraste hasta el punto de hacer el textoilegible.

WEB PARA TODOS.p65 12/11/2007, 12:1737


38/168


39/168

39

Una buena herramienta para verificar el contraste de color puede encon-trarse en http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/ donde se puede descargar un programa para instalacin en local. Otrabuena herramienta, on line, para analizar el contraste de color (en ingls)est disponible en: http://www.snook.ca/technical/colour_contrast/colour.html

El texto pixelado puede ser especialmente difcil de leer cuando hayotros elementos en el fondo, como en esta ampliacin de la cubierta dellibro Diseo accesible de pginas web:

Imagen 16. Cubierta del libro Diseo accesible de pginas webaumentadadesde una imagen muy pequea.

Aunque el texto contrasta bastante bien con el fondo oscuro, el diseodel fondo oscurece el texto un tanto.

Grficos que pueden causar ataques epilpticos

Parpadeo y efecto estroboscpico2

No hay mucho que decir sobre este tema, pero es muy importante. Elpunto esencial es:

Los efectos visuales de parpadeo o producidos como un efecto estrobos-cpico pueden causar ataques epilpticos en algunos individuos.

2. Efecto que permite ver como lentos o inmviles objetos que se mueven de forma rpida yperidica, mediante su exposicin intermitente.

WEB PARA TODOS.p65 12/11/2007, 12:1739


40/168

40

Los ataques inducidos por el parpadeo o los efectos estroboscpicosson conocidos como ataques foto-epilpticos, y pueden ser peligrosospara quien los sufra. No sea responsable de causarlos.

Cmo saber si un grfico puede causar ataques?

No hay un umbral absoluto a partir del cual una inofensiva animacin setransforma en un peligroso grfico que provoca ataques. Ahora bien, laspautas utilizadas en Estados Unidos dentro de la Seccin 508 del Acta deRehabilitacin (que regula temas relativos a la accesibilidad en la web para

los productos y servicios que se quieran vender al gobierno federal) mar-can el umbral entre los 2 y los 55 parpadeos por segundo. Esto NOquieredecir que lo que se mueva en ese rango causar ataques, porque esohara in-usables todos los vdeos y animaciones. La cuestin no es el mo-vimiento, sino el parpadeo y los efectos estroboscpicos.

La mayora de los diseadores no crean grficos que se aproximen alumbral de riesgo de provocar ataques, pero algunos desarrolladoresmultimedia se aventuran en este territorio. Los diseadores de Flash sonespecialmente conocidos por crear animaciones modernas que parpa-dean o producen efectos estroboscpicos en la pantalla. Tenemos que sercuidadosos al disear animaciones y procurar no causar ataques. Pode-mos ver un ejemplo extremo en: http://www.webaim.org/media/graphics/singleuse/images/seizure2.gif.

Texto alternativo (alt text) efectivo

Visin general

Ahora entramos en un apartado con el que mucha gente est al menos untanto familiarizada: el texto alternativo (alt text). Por cierto, no existealgo llamado etiqueta alt (alt tag), aunque la gente a menudo se refiereal texto alternativo por ese nombre. Para ser tcnicamente correcto, es elatributo altde la etiqueta (imagen). Su nombre no es tan importante

como su funcin, sin embargo, echemos una ojeada a lo que significa te-ner un texto alternativo efectivo.

WEB PARA TODOS.p65 12/11/2007, 12:1740


41/168

41

Pautas para el texto alternativo:

1. Asegrese de que los textos alternativos comunican el propsito delgrfico con precisin y sucintamente.

2. Proporcione texto alternativo vaco o nulo para los grficos que no trans-miten contenido.

3. Proporcione texto alternativo tanto para la imagen principal como paracada punto sensible de los mapas de imagen.

4. No repita el texto alternativo de una imagen en el texto adyacente.5. No coloque imgenes importantes en el fondo.

La importancia del texto alternativo

Uno de los mayores problemas de la accesibilidad en la web hoy da es lacarencia de texto alternativo para los grficos y las imgenes. Las perso-nas ciegas a menudo utilizan lectores de pantalla o dispositivos Braille queleen el texto de la pgina para ellos. Cuando estas tecnologas de apoyoatraviesan imgenes sin texto alternativo, son incapaces de comunicar susignificado.

Cuando un lector de pantalla atraviesa una imagen sin el atributo alt,pueden ocurrir un par de cosas:

1. Puede, simplemente, saltar la imagen como si sta no estuviera en lapgina.

2. Puede encontrar algn texto que se asocie con la imagen, tal como elnombre del archivo, y ser esto lo que lea.

El comportamiento exacto del lector de pantalla vara entre marcas delectores de pantalla y segn las circunstancias de la pgina web en s mis-ma, pero de cualquier manera el resultado es indeseable. El usuario, obien pierde el contenido de la imagen completamente, o consigue un textoque probablemente no tenga sentido.

WEB PARA TODOS.p65 12/11/2007, 12:1741


42/168

42

Aadir texto alternativo

Echemos un vistazo a un ejemplo de imagen:

Imagen 17. Retrato de Silvia.

El cdigo HTML para esta imagen es:

Podemos escribir el cdigo exactamente como lo hemos visto arribaen un editor de texto o podemos usar la interfaz de una herramienta deautor, tal como Dreamweaver o FrontPage, para realizar esto.

En Dreamweaver, el texto alternativo se aade desde la ventana dePropiedades, tal como vemos en la imagen de abajo.

Imagen 18. Ventana de Propiedades de Dreamweaver, resaltando dondese coloca el texto alternativo para las imgenes.

WEB PARA TODOS.p65 12/11/2007, 12:1742


43/168

43

En FrontPage, podemos hacer doble clic sobre la imagen y aparecerel cuadro de dilogo Propiedades de la Imagen. Luego aadiremos eltexto alternativo en el campo Texto, en el apartado de Representacionesalternativas.

Imagen 19. Ventana de Propiedades de FrontPage, resaltando dondese coloca el texto alternativo para las imgenes.

Otros editores tienen funciones similares para aadir texto alternativo.Consulte la documentacin de su editor para ver las instrucciones sobrecmo aadir el atributo alt.

Ahora que tenemos una mejor idea de qu es un atributo alt y losimple que es aadirlo a una imagen, hablaremos sobre qu debe conte-ner el atributo alt.

Para qu usamos las imgenes

Las imgenes en los sitios web se usan principalmente con tres fines:

1. Para trasmitir contenido importante.2. Para proporcionar un realce visual sin contenido real.3. Para vincular a otras reas del sitio.

WEB PARA TODOS.p65 12/11/2007, 12:1743


44/168

44

El texto alternativo ms apropiado para una imagen depende de paraqu se use sta. De hecho, la misma imagen puede ser usada por diferen-tes razones y bajo diferentes circunstancias y en cada ocasin esta ima-gen podra tener diferente texto alternativo. Tenemos que grabar la siguienteregla en la mente:

El texto alternativo ms apropiado es aquel que comunica el prop-sito del grfico, no su apariencia.

Con esto en mente, la informacin ms importante a trasmitir en el

texto alternativo de la imagen del ejemplo es que el usuario puede pincharen esta imagen para ir a otra rea del sitio.

Comunicando el propsito de un grfico

Imgenes que tienen contenido importante

Si la imagen del grfico contiene informacin que es relevante para el con-tenido del sitio, el atributo alt debera tambin proporcionar este conteni-do, de manera coherente con el propsito de la imagen. Recordemos queel propsitode la imagen no es necesariamente el mismo que la aparien-ciade la imagen.

EJEMPLO 1

Supongamos un sitio dedicado al cine que usa imgenes para su navega-cin principal, tal como muestra la imagen de abajo.

Imagen 20. Barra de navegacin basada en imgenes.

WEB PARA TODOS.p65 12/11/2007, 12:1744


45/168

45

Esta imagen aparece como un negativo de pelcula de cine. El textode cada uno de los enlaces (que son imgenes) est en un color. Cuandose selecciona el cuadro de enlace, se invierten los colores.

Imagen 21. Opcin del men destacada mediante inversin de colores.

Parte del texto est en maysculas y otra parte en minsculas. Todosestos detalles son importantes para el aspecto y la sensacin del sitio web,pero para aquellos que no pueden ver cmo es la apariencia del sitio, elaspecto y sensacin son irrelevantes. La cuestin ms importante de estosgrficos es que vinculan a otras reas del sitio. As pues, deberamos pro-porcionar un texto alternativo que transmita el hecho de que el usuariopuede pinchar esta imagen e ir a otra rea del sitio. En este caso, el des-tino del vnculo sera el apartado de Cine Clsico. El texto alternativo msapropiado para esta imagen sera: Cine Clsico.

En este caso, el texto alternativo coincide, al menos en parte, con eltexto que aparece en el grfico. En muchos casos donde hay un texto en

la imagen, sta es la mejor solucin. No importa la descripcin de la ima-gen. Lo importante a saber sobre ella es su propsito y no su apariencia.

EJEMPLO 2

Tomaremos de nuevo la imagen del retrato de Silvia que aparece abajo:

Imagen 22. Retrato de Silvia.

WEB PARA TODOS.p65 12/11/2007, 12:1745


46/168


47/168


48/168

48

texto alternativo nulo, porque algunos lectores de pantalla leen el nombredel archivo de la imagen, el cual puede ser confuso para el que lo oye.Cuando aadimos texto alternativo nulo, los lectores de pantalla saltan so-bre la imagen sin leer nada en absoluto.

Dreamweaver MX permite al autor crear texto alternativo nulo en elcuadro de dilogo Propiedades:

Imagen 24. Opcin vaco para la alternativa textual en la ventanade propiedades de Dreamweaver con.

Desafortunadamente, muchos otros editores HTML no permiten crearatributos alt vacos mediante la interfaz grfica, de manera que debere-mos hacerlo directamente sobre el cdigo fuente HTML. Para ello, tendre-mos que localizar la imagen en el cdigo y aadir alt= a la etiqueta de la

imagen.

IMGENESTRANSPARENTESYESPACIADORAS

Los desarrolladores a menudo utilizan imgenes transparentes yespaciadoras para crear espacio entre los elementos de una pgina. Aun-que los usuarios videntes no vean la imagen transparente, sta puede servisible para los individuos que utilizan navegador de texto o lectores depantalla. Deberamos aadir un texto alternativo vaco para todas las im-genes transparentes y espaciadoras.

IMGENESREDUNDANTESAlgunas veces, los desarrolladores web aaden a una imagen un textoalternativo que es exactamente el mismo que el texto del contenido de la

WEB PARA TODOS.p65 12/11/2007, 12:1748


49/168

49

pgina o que el texto colocado junto un grfico, como el ejemplo de msabajo:

Imagen 25. Imgenes complementadas con texto.

En casos como ste, se debe aadir un texto alternativo nulo, paraque los usuarios de lectores de pantalla no tengan que leer la misma infor-macin dos veces. El lector de pantalla JAWS, para la imagen anterior,dir: Imagen: Enfermedades de la espalda, Enfermedades de la espal-da, cuando lea esta seccin del contenido de la web, lo cual puede serconfuso o al menos irritante.

Mapas de imagen

Mapas de imagen del lado del cliente

Todas las herramientas comunes de desarrollo web crean mapas de ima-gen tanto del lado del cliente como del lado del servidor. Tal como sugiereel nombre, los mapas de imagen del lado del servidor requieren unscripting especial en el servidor, mientras que los del lado del cliente sonprocesados solamente en el navegador del cliente. Los mapas de imagendel lado del cliente pueden ser accesibles, mientras que los del lado delservidor no pueden serlo.

Los mapas de imagen del lado del cliente requieren texto alternativopara cada imagen y para cada uno de los puntos sensibles (hot spots).Supongamos un ejemplo con la imagen de la pgina siguiente:

WEB PARA TODOS.p65 12/11/2007, 12:1749


50/168

50

Hay una sola imagen, pero tiene 5 puntos sensibles. Cada uno de s-tos dirige a una diferente localizacin en el sitio web, as que es necesariotransmitir el propsito de navegacin de cada uno de ellos. El texto alter-nativo de estos puntos sensibles podra ser exactamente el mismo textoque en la imagen: Inicio, Productos, Servicios, Contacto e ndice. Ahoratenemos el texto alternativo para los puntos sensibles, pero, qu hay dela imagen en s misma? Aparte de los puntos sensibles, esta imagen notransmite una informacin significativa. El texto alternativo ms apropiadopara la imagen completa sera un texto nulo. ste sera el cdigo para laimagen y los puntos sensibles:


51/168

51

No todas las imgenes usadas como mapas de imagen tendrn untexto alternativo nulo. Segn el contexto, deberemos determinar el msapropiado para cada situacin (por ejemplo, para este caso podramoshaber optado por dar un texto alternativo a la imagen completa del tipoalt=men de navegacin).

Mapas de imagen del lado del servidor

No hay forma de hacer mapas de imagen del lado del servidor accesibles,el consejo ms simple es no usarlos. A algunos diseadores les preocupa

que los mapas de imagen del lado del cliente no puedan crear las formasde las figuras geomtricas que quieren disear y saben que es posiblehacerlo con los mapas de imagen del lado del servidor. La verdad es quelos mapas de imagen del lado del cliente pueden dibujar cualquier forma,siempre que el desarrollador tenga la paciencia de crear todas las coorde-nadas.

Imgenes de fondo

Es imposible aadir texto alternativo a las imgenes de fondo, as quedeberamos poner imgenes en el fondo slo si no transmiten un conte-nido importante.

Si la imagen del fondo contiene texto importante u otra informacinvisual clave, deberemos escribir de nuevo el HTML para que la imagenest en primer plano, de modo que se le pueda aplicar la propiedad detexto alternativo.

Descripciones largas

Cundo proporcionar descripciones largas

En algunos casos, una imagen es demasiado compleja para describirla enunas pocas palabras. Grficos y grficas son los ejemplos principales detales imgenes. Aunque aqu no se ha mencionado ningn lmite de longi-

WEB PARA TODOS.p65 12/11/2007, 12:1751


52/168

52

tud para los textos en el atributo alt, ste debera ser relativamente cor-to. Es un abuso de este atributo escribir ms que unas pocas palabras o, alo sumo, unas pocas frases cortas. La respuesta, por lo tanto, est enproporcionar un texto breve en la descripcin alt de la imagen y luegoproporcionar una descripcin larga en otro sitio.

Mtodos para proporcionar descripciones largas

Hay varias maneras de proporcionar una descripcin larga para las imge-nes. Las distintas opciones se detallan a continuacin, de la ms a la me-

nos recomendable:

1. Proporcionar la descripcin larga en el contexto del mismo documento.2. Proporcionar un vnculo a una descripcin larga mediante un vnculo de

texto normal.3. Proporcionar un vnculo a una descripcin larga mediante el atributo

.4. Proporcionar un vnculo a una descripcin larga mediante el vnculo

d.

Quienes estn familiarizados con las tcnicas de accesibilidad quizse sorprendan al encontrar que el atributo y el vnculo destn al final de la lista. La razn para esto es que ambos mtodos sonbastante oscuros. El atributo es invisible (e inaccesible paraalgunos navegadores) para las personas que no estn usando un lector depantalla. El vnculo d no es convencional y puede ser confuso para laspersonas que no estn familiarizadas con su propsito. La forma ms sim-ple de hacer las descripciones largas accesibles es hacerlas obvias y dis-ponibles para todo el mundo, tenga o no discapacidad.

Proporcionar la descripcin larga en el contexto del propiodocumento

Poniendo la descripcin larga correctamente en el contexto del documentodonde el grfico aparece, se pone al servicio de todos y no slo para aque-llos que tienen una discapacidad. Todos podrn leer la descripcin larga y

WEB PARA TODOS.p65 12/11/2007, 12:1752


53/168

53

se beneficiarn de ella. ste es un ejemplo de cmo podemos hacerlo conla imagen de un grfico.

Imagen 27. Grfico sobre datos de la poblacin de chimpancs.

El grfico de barras de arriba muestra la poblacin de chim-pancs de diferentes pases de Asia. El nmero estimado dechimpancs para cada pas es el siguiente:

China: 1.545.458 Birmania: 945.421 Laos: 545.845 Vietnam: 785.752

Bangladesh: 352.548 Tailandia: 489.238 Camboya: 885.465

En el ejemplo anterior, los datos aparecen detrs de la imagen y sonaccesibles para todos.

Proporcionar un vnculo a una descripcin larga medianteun vnculo de texto normal

La segunda mejor manera de proporcionar una descripcin larga es tansimple como un vnculo. No hay aqu un cdigo sofisticado o una tcnica

Chimpancs

1.800.0001.600.0001.400.0001.200.0001.000.000

800.000600.000400.000200.000

0

WEB PARA TODOS.p65 12/11/2007, 12:1753


54/168

54

complicada. Slo un vnculo a una descripcin, tal como vemos en el si-guiente ejemplo:

Imagen 28. Grfico de datos sobre chimpancs con un enlacea su descripcin textual.

La descripcin textual de este grfico est disponible en otra pgina.

La informacin tambin est disponible para todos mediante este m-todo, tan slo tienen que pinchar sobre el vnculo para acceder a ella. Elvnculo es percibido por todos y pueden elegir si lo siguen o no.

El atributo

El atributo , que se puede aadir a la etiqueta (ima-gen), no hace ms que proporcionar un vnculo a otra pgina donde estdisponible la descripcin larga. Acta de la misma forma que en el ejemploanterior, excepto que el vnculo es invisible para los lectores visuales.

Los que acceden visualmente perciben que no hay nada sobre el atri-buto . Por lo que a ellos respecta, no est all. Los nicos quepueden acceder al atributo fcilmente son los que utilizanlectores de pantalla modernos, ya que los lectores de pantalla ms anti-guos tampoco interpretan este atributo. Incluso entre los que utilizan la l-

tima versin del lector de pantalla, hay muchos que no estn familiarizadoscon este atributo (porque no se usa frecuentemente) y no saben cmoacceder a l, aunque su lector de pantalla sepa interpretarlo.

2.000.000

1.500.000

1.000.000

500.000

0Chimpancs

WEB PARA TODOS.p65 12/11/2007, 12:1754


55/168

55

La aplicacin del atributo beneficia por tanto a una pe-quea audiencia, a pesar de que tanto las Pautas de WAI (WCAG) comolas de la Seccin 508 del Acta de Rehabilitacin de Estados Unidos larecomienden.

sta es la forma de marcar el atributo :

El vnculo D

Antes de que el atributo fuera interpretado por los lectoresde pantalla, un grupo de personas decidieron que necesitaban un mtodoequivalente que fuera soportadoy, as, inventaron el vnculo d. La letrad significa descripcin. Este vnculo d no es ms que un vnculonormal a otra pgina en la que el texto del mismo es la letra d. Pode-mos ver un ejemplo de uso del vnculo d:

Imagen 29. Grfico sobre chimpancs con vnculo d.

Podemos usar la letra en maysculas (D) o minscula (d), no hay dife-rencia. El vnculo d se coloca, normalmente, a la derecha, tras la ima-gen. Esta tcnica funciona con todos los navegadores y consigue el prop-

sito de acceder a la descripcin larga, pero es menos elegante(estticamente hablando) que otros mtodos. Algunos se confundirn alver un vnculo de una sola letra. Otros, simplemente, lo ignorarn. Pode-

2.000.000

1.500.000

1.000.000

500.000

0Chimpancs

WEB PARA TODOS.p65 12/11/2007, 12:1755


56/168

56

mos usar este mtodo, pero slo si tenemos una buena razn para nousar otros.

sta sera la forma de marcar el vnculo d:

D

Pautas aplicables

Se aplican a las imgenes las siguientes pautas WCAG 1.0:

Prioridad 1: 1.1 - Proporcione un texto equivalente para todo elemento no tex-

tual (Por ejemplo, a travs de alt, longdesc o en el contenidodel elemento). Esto incluye:imgenes, representaciones grficas deltexto, mapas de imagen, animaciones (Por ejemplo, GIFs anima-dos), applets y objetos programados, ascii art, marcos, scripts,imgenes usadas como vietas en las listas, espaciadores, botonesgrficos, sonidos (ejecutados con o sin interaccin del usuario), ar-chivos exclusivamente auditivos, banda sonora del vdeo y vdeos.

1.2 - Proporcione vnculos redundantes en formato texto para cadazona activa de un mapa de imagen del servidor.

1.4 - Para toda presentacin multimedia tempo dependiente (porejemplo, una pelcula o animacin) sincronice alternativas equiva-lentes (por ejemplo, subttulos o descripciones de la banda visual)con la presentacin.

2.1 - Asegrese de que toda la informacin transmitida a travs delos colores tambin est disponible sin color, por ejemplo medianteel contexto o por marcadores.

6.2 - Asegrese de que los equivalentes de un contenido dinmicoson actualizados cuando cambia el contenido dinmico.

7.1 - Hasta que las aplicaciones de usuario permitan controlarlo, evite

WEB PARA TODOS.p65 12/11/2007, 12:1756


57/168

57

provocar destellos en la pantalla. 9.1 - Proporcione mapas de imagen controlados por el cliente en

lugar de por el servidor, excepto donde las zonas sensibles no pue-dan ser definidas con una forma geomtrica.

Prioridad 2: 2.2 - Asegrese de que las combinaciones de los colores de fondo y

primer plano tengan el suficiente contraste para que sean percibidaspor personas con deficiencias de percepcin de color o en pantallasen blanco y negro [Prioridad 2 para las imgenes. Prioridad 3 para

los textos]. 3.1 - Cuando exista un marcador apropiado, use marcadores en vez

de imgenes para transmitir la informacin. 7.2 - Hasta que las aplicaciones de usuario permitan controlarlo, evite

el parpadeo del contenido (por ejemplo, cambio de presentacin enperiodos regulares, as como el encendido y apagado).

Prioridad 3: 1.5 - Hasta que las aplicaciones de usuario interpreten el texto equi-

valente para los vnculos de los mapas de imagen de cliente, pro-porcione vnculos de texto redundantes para cada zona activa delmapa de imagen de cliente.

9.5 - Proporcione atajos de teclado para los vnculos ms importan-tes (incluidos los de los mapas de imagen de cliente), los controlesde formulario y los grupos de controles de formulario.

14.2 - Complemente el texto con presentaciones grficas o auditivascuando ello facilite la comprensin de la pgina.

WEB PARA TODOS.p65 12/11/2007, 12:1757


58/168

58

WEB PARA TODOS.p65 12/11/2007, 12:1758


59/168

59

Creando marcos (frames) accesibles

Introduccin

Proporcione ttulos con sentido para los marcos en los que se descri-ba el propsito del marco.

Proporcione contenido con sentido para .

Un grupo de marcos (frameset) es una pgina web que define unacoleccin de al menos otras dos pginas separadas, cuya combinacin semuestra en un mismo espacio visual. Los usuarios videntes habitualmenteperciben los grupos de marcos como una entidad cohesionada. Ellos pue-den ojear el contenido de mltiples pginas, todas a la vez.

Aquellos que utilizan lectores de pantalla no pueden ojear rpidamentelos contenidos de mltiples pginas. Todo el contenido se percibe en forma

lineal, un marco cada vez. Los marcos no son inaccesibles a los modernoslectores de pantalla, pero pueden desorientar.El lector de pantalla JAWS habitualmente lee todos los marcos de un

grupo de marcos, casi como si pertenecieran a la misma pgina. Avisa alusuario de que hay un grupo de marcos y luego contina leyendo todas laspginas del grupo de marcos. Existe un atajo de teclado que permite allector saltar rpidamente entre los marcos.

Otros programas manejan los marcos de forma distinta. Home PageReader no lee automticamente las pginas de un grupo de marcos, sinoque presenta al usuario una lista de los marcos del grupo y le permiteelegir cul de los marcos ir el primero.

WEB PARA TODOS.p65 12/11/2007, 12:1759


60/168

60

Accesibilidad en los marcos (frames)

Una pgina que contiene marcos.

Este grupo de marcos contiene:

Pgina de navegacin

Contenido principal

Una de las cosas ms importantes que podemos hacer para aumentarla accesibilidad de los marcos es dar un ttulo (title) a cada marco:

Cuando un usuario de lector de pantalla escucha la lista de los marcos,le es til saber el propsito de cada uno. Los ttulos de los marcospermiten a los desarrolladores web comunicar el propsito de cadamarco a los usuarios de lectores de pantalla.

Cuando no ponemos ttulos a los marcos, los lectores de pantalla bus-can otras fuentes de informacin, tales como el atributo nombre(name) de los marcos o la denominacin del archivo. Algunas ve-

ces estas otras fuentes de informacin no son muy tiles. Si a unmarco se le da un atributo nombre o un nombre de archivo del tipodefault3 (o algo por el estilo, nada descriptivo), no hay manera de

WEB PARA TODOS.p65 12/11/2007, 12:1760


61/168


62/168

62

WEB PARA TODOS.p65 12/11/2007, 12:1762


63/168

63

Creando tablas accesibles

Tablas de maquetacin

IntroduccinSi como alumnos tenemos que consultar un sitio web para saber dnde vaa tener lugar la clase 205 de biologa, iremos a una pgina web que tieneesta informacin en formato tabla. Aunque algo abigarrada, no ser com-plicado averiguar la informacin deseada (se celebrar en el aula 6).

Cdigo

de Matricu- Matricu- Hora

Depar- Nmero lacin lacin Nmero Hora de de fina-

tamento de clase Seccin mxima actual de aula Das comienzo zacin Profesor

BIO 100 1 15 13 5 Lun, Mi, 10:00 11:00 Martnez

Vie

100 1 15 7 5 Mar, Jue 11:00 12:30 Lpez

205 1 15 9 6 Mar, Jue 9:00 10:30 Martnez

315 1 12 3 6 Lun, Mi, 13:00 14:00 LpezVie

BUS 150 1 15 15 13 Lun, Mi, 9:00 10:00 GarcaVie

210 1 10 9 13 Lun, Mi, 8:00 9:00 PrezVie

Supongamos por un momento que somos usuarios de un lector depantalla. Iremos a la pgina web que tiene esta informacin, y esto es loque oiremos:

Tabla con 10 columnas y siete filas. Cdigo de Departamento, Nmerode clase, Seccin, Matriculacin mxima, Matriculacin actual, Nmero

WEB PARA TODOS.p65 12/11/2007, 12:1763


64/168

64

de aula, Das, Hora de comienzo, Hora de finalizacin, Profesor, BIO,100, 1, 15, 13, 5, Lun, Mi, Vie, 10:00, 11:00, Martnez, 100, 1, 15, 7, 5,Mar, Jue, 11:00, 12:30, Lpez, 205, 1, 15, 9, 6, Mar, Jue, 9:00, 10:30,Martnez, 315, 1, 12, 3, 6, Lun, Mi, Vie, 13:00, 14:00, Lpez, BUS, 150,1, 15, 15, 13, Lun, Mi, Vie, 9:00, 10:00, Garca, 210, 1, 10, 9, 13, Lun,Mi, Vie, 8:00, 9:00, Prez.

Despus de escuchar esta informacin, tendremos alguna idea acer-ca de dnde se supone que se impartir Biologa 205? Probablemente no.Cuando escuchamos tablas todas de seguido, sin usar el modo de lectura

de tablas en un lector de pantalla, este tipo de informacin puede ser bas-tante confusa. Incluso si usa el modo de lectura de tabla, seguir siendomuy confuso si la tabla no est marcada apropiadamente.

Usos de las tablas

Hay dos usos bsicos de las tablas en la web: como tablas de datos ycomo tablas de maquetacin. El uso original de las tablas HTML era paradatos. Una tabla es una tabla de datos cuando hay encabezamiento defilas, encabezamiento de columnas o ambos. Por ejemplo, he aqu unatabla de datos simple:

Hijas de Sonia

Nombre Edad Cumpleaos

Mara 5 5 de abril

Isabel 8 14 de enero

En la prctica, las tablas se usan de forma mayoritaria para maquetarpginas. Las tablas de maquetacin no tienen encabezamientos lgicos delos que se pueda trazar un mapa con la informacin de las celdas de latabla. He aqu un ejemplo simple de tabla de maquetacin:

WEB PARA TODOS.p65 12/11/2007, 12:1764


65/168

65

Algunos defensores de la accesibilidad dicen que el uso de tablas para

maquetar es una mala idea, y que es preferible usar tcnicas demaquetacin CSS. Tienen razn en lo que dicen, pero, siendo honesto, eluso de tablas para maquetar no es lo peor que se puede hacer en trmi-nos de accesibilidad. Las personas con todo tipo de discapacidades pue-den acceder fcilmente a las tablas, siempre que se hayan diseado te-niendo en mente la accesibilidad.

Alineacin de contenidos

La alineacin de contenidos se refiere al orden del contenido cuando seelimina todo el formato. Si eliminamos la tabla de las citas de BenjamnFranklin, vemos en la siguiente pgina el orden de alineacin de la lectura

que se obtiene:

Imagen 30. Contenido web Pensamientos de Benjamin Franklinmaquetado mediante tablas.

WEB PARA TODOS.p65 12/11/2007, 12:1765


66/168

66

Como vemos, las citas del lado derecho se han ledo antes que lascitas del lado izquierdo. En el orden de alineacin de lectura de esta tabla,hemos terminado leyendo las frases en el orden equivocado. El resultadoes probablemente el contrario al orden en que pensamos que se leera elcontenido. Cuando miramos la tabla, la revisamos visualmente de izquier-da a derecha, sin embargo, el lado derecho es ledo antes que el izquier-do. Esto es debido a las filas y columnas cruzadas que componen estatabla. La tabla no es tan sencilla cuando miramos el cdigo.

Muchos de los sitios de internet usan tablas para maquetar, y muchosusan filas y columnas cruzadas para conseguir efectos de formato. El re-sultado final es que el orden de lectura alineada puede no ser el mismo

que el orden de lectura visual. Esto puede llevar a confusin a aquellosque acceden al orden de lectura alineada, como las personas que utilizanlectores de pantalla.

Imagen 31. Contenido alineado de la maquetacin con tablas anterior.

(Esta imagen deber llevar texto alternativo)

Pensamientos de Benjamn FranklinLea stos en segundo lugar:Bendito quien no espera nada, porque nunca quedar decepcionado.Cuando hayas acabado de cambiar, estars acabado.Lea stos primero:Aquellos que aman profundamente nunca envejecen; puede que mueran a unaedad avanzada, pero morirn jvenes.No escondas tus talentos. Fueron hechos para usarlos. Qu sera de la agujadel reloj de sol cuando est en la sombra?

WEB PARA TODOS.p65 12/11/2007, 12:1766


67/168

67

Los lectores de pantalla ignoran esencialmente el hecho de que elcontenido est dentro de una tabla. El lector de pantalla simplemente leeel contenido en el orden literal que aparece en el cdigo. Si el ordenliteral del contenido del cdigo es lgico, el orden de lectura alineadaser lgico.

Los lectores de pantalla leen el contenido de las pginas web comosi no fueran HTML. Lo leen todo en el orden en que aparece en elcdigo.

ste es un concepto muy importante. Vamos a ver otro caso en el queesta circunstancia se convierte en una cuestin que hay que tener en cuen-ta. He aqu una tabla creada con fines de efectos visuales:

Imagen 32- Contenido sobre el uso del inodoro, maquetado con tablas.

El lector vidente leer: Los aseos del stano deben limpiarse tirandode la cadena hacia arriba.

El usuario de lector de pantalla oir (o notar en el Braille) Los aseoshacia arriba del stano limpiarse tirando de la cadena deben.

Por qu existe esta diferencia entre el orden visual y el orden dellector de pantalla? Para responder a esta cuestin, tenemos que mirar laestructura de la tabla. He aqu la misma tabla, a la que se han aadido los

WEB PARA TODOS.p65 12/11/2007, 12:1767


68/168


69/168

69

weight:bold; ">limpiarse tirando de la cadena

deben

Revisin de la buena alineacin de la tabla

Una forma de revisar el orden de lectura de las celdas de la tabla es usarel navegador Opera (www.opera.com), ya que ste permite al usuariodeshabilitar las tablas completamente.

En Opera 7, se selecciona Modo de usuario>Deshabilitar tablas.

Imagen 34. Opcin para deshabilitar las tablas en el navegador Opera 7.

WEB PARA TODOS.p65 12/11/2007, 12:1769


70/168

70

Una vez hecho esto, se puede activar o desactivar el Modo de Usuariocon un clic del ratn.

Tambin nos daremos cuenta de que el modo de usuario deshabilitalos colores y estilos. Esto se debe a que est usando suhoja de estilo, conlo cual, si nosotros no tenemos especificada una, no habr ninguna hojade estilo. Cuando eliminamos las tablas y estilos de una pgina, nos hare-mos una idea adecuada de qu aspecto tiene la pgina para los usuariosde lectores de pantalla.

Etiquetas de encabezadoCuando utilizamos la etiqueta de encabezado de tabla (), la mayorade navegadores hacen que el texto aparezca en negrita y centrado, lo cualpuede producir un bonito efecto visual, pero la etiqueta slo deberausarse en tablas de datos. No la utilice para maquetar tablas porque pue-de confundir a los usuarios de lectores de pantalla, hacindoles pensar queestn en una tabla de datos cuando no lo estn.

Usemos tamao proporcional en lugar de tamaos absolutos

Los documentos de internet y las pginas web son distintos de sus corres-pondientes impresos en papel. Las pginas impresas tienen un tamaoabsoluto, que no se puede cambiar. Las pginas web no. Podemos exten-der nuestro navegador hacia arriba, abajo, a la derecha, a la izquierda yconseguir casi cualquier tamao. La maquetacin web debe ser fluida paraencajar con la naturaleza fluida del navegador web.

Una tabla de maquetacin con un ancho prefijado no vara su tamaopara encajar con el rea de visin de la ventana del navegador. Si el reade visin es muy pequea, exigir al usuario que se desplace demasiadasveces de un lado para otro utilizando la barra de desplazamiento (scrollbar). Puede ser bastante molesto para las personas con baja visin quedeben usar un programa especial para ampliar el rea de visin. Este pro-

grama, que suele ser denominado programa de magnificacin, puede am-pliar los contenidos de la pantalla mucho ms de lo que puede hacerlo elsistema operativo. Algunas personas tienen una ampliacin tan alta que

WEB PARA TODOS.p65 12/11/2007, 12:1770


71/168

71

slo pueden ver una o dos palabras a la vez. Ms habitualmente, los usua-rios fijarn una ampliacin de entre un 200% y un 500%.

Imagen 35. Opcin para ampliar la visualizacin de contenidos en Opera 7.

Los desarrolladores pueden usar el navegador Opera para simular losefectos del uso de un magnificador de pantalla. Opera puede aumentar eltamao de las pginas web hasta un 1.000%. La opcin de magnificacin

se encuentra en la esquina superior derecha de la ventana del documento.Cuando ampliemos las pginas, nos daremos cuenta de que aumentasignificativamente la cantidad de deslizamiento horizontal. Esto no puedeevitar, pero podemos reducir su impacto especificando unidades relativas,tales como porcentajes, en el maquetado de las tablas en lugar de unida-des prefijadas como pxeles.

Usemos la configuracin de tabla lo ms simple posible

Algunos diseadores se vuelven locos con las tablas de maquetacin. Creantodo tipo de filas y columnas innecesarias, usando filas y columnas cruza-das de todas las formas posibles, hasta que la tabla no parece en absoluto

una tabla. Todo ello resultar invisible para el usuario vidente si el borde dela tabla se coloca en cero, pero los usuarios ciegos lo vern. Los lecto-res de pantalla les informarn del nmero de filas y columnas de la tabla.

WEB PARA TODOS.p65 12/11/2007, 12:1771


72/168

72

Cuando intenten navegar de un rea a otra de la tabla, se desorientarn.La regla principal aqu es lo ms simple es lo mejor.

Tablas de datos

Marcado de tablas de datos

Las tablas de datos son diferentes de las tablas de maquetacin. La finali-dad de las tablas de datos es presentar informacin en una parrilla, o ma-triz, y tener columnas o filas que muestren el significado de la informacin

en la parrilla.Cuando los lectores de pantalla leen linealmente las tablas de datos,

especialmente las grandes, es fcil que los usuarios se pierdan.Para que las tablas de datos sean accesibles, deben tener el marca-

dor apropiado en HTML. Cuando ste est colocado en su sitio, los usua-rios de lectores de pantalla pueden navegar por la tabla de datos de celdaen celda, y el lector les dir la fila y columna en que estn situados.

Designemos los encabezados de fila y columna usandola etiqueta

El primer paso para crear una tabla de datos accesible es designar losencabezados de fila y/o columna. Esto es fcil de hacer. La mayora de lasherramientas de autor proporcionan un mtodo para convertir las celdasde datos en celdas de encabezado. En el marcado, la etiqueta se usapara las celdas de la tabla de datos y la etiqueta se usa para lasceldas de encabezado de la tabla. Volviendo a nuestro ejemplo de tablaHijas de Sonia, los encabezados de columna para esta tabla son Nom-bre, Edad y Fecha de Nacimiento. Los encabezados de fila son MaraeIsabel.

Hijas de Sonia

Nombre Edad CumpleaosMara 5 5 de abril


WEB PARA TODOS.p65 12/11/2007, 12:1772


73/168

73

Asociemos las celdas de datos con los encabezadosadecuados

Ahora que hemos creado los encabezados, necesitamos asociar las cel-das con los encabezados adecuados. Hay dos maneras de asociar lasceldas de datos con sus encabezados.

Scope (alcance)

Deberamos usar el atributo scope en las tablas simples de datos, como

la del ejemplo. He aqu el marcador para la tabla, usando el atributoscope:

Hijas de Sonia

Nombre

Edad

Fecha de nacimiento


74/168

74

Encabezados (headers) e id

Otra forma de conseguir el mismo objetivo es usar los atributos "headers"e "id". Este mtodo NO se recomienda para tablas sencillas como la delprimer ejemplo. El mtodo "headers" e "id" slo debe usarse cuandoen la tabla hay ms de un nivel lgico y cuando es necesario vincular a unacelda de datos ms de dos encabezados. Si ampliamos el ejemplo inicial,podemos crear una tabla que encaje con este criterio. En la tabla de aba-jo, los datos tienen tres encabezados cada uno, por lo cual es apropiadousar una tcnica ms compleja.

Hijas de Sonia

Nombre Edad Fecha de nacimiento

Por nacimientoMara 5 5 de abril


Por matrimonio Juana 12 12 de febrero

El cdigo de marcado HTML es:

Hijas de Sonia

Nombre

Edad

Fecha de nacimiento

Por nacimiento

Mara

5

5 de abril

WEB PARA TODOS.p65 12/11/2007, 12:1774


75/168

75

Isabel

8

14 de enero

Por matrimonio

Juana

12

12 de

febrero

De nuevo, debemos remarcar que este mtodo es ms complejo.Debera usarse con tablas de naturaleza ms complicada, en las que elatributo scope no funciona.

Otra advertencia: el lector de pantalla JAWS, que es el ms usado, nomaneja bien las filas y columnas cruzadas. Si es posible, evitemos lastablas de datos complejas o representemos los datos de la forma menoscompleja posible, preferiblemente con no ms de dos encabezados paracada celda de datos.

Usemos tamao proporcional en lugar de tamaos absolutos

La regla aplicable a tablas para maquetar tambin se aplica a las tablas dedatos. Dejemos que la ventana del navegador determine el ancho de latabla cuando sea posible, para reducir el desplazamiento horizontal querequieren las personas con baja visin.

Proporcionemos nombres o ttulos a las tablas de datosusando la etiqueta

Las tablas deben tener algn tipo de ttulo o caption. Esto se hace co-rrectamente usando la etiqueta caption justo despus de la etiqueta deapertura , de la siguiente manera:

WEB PARA TODOS.p65 12/11/2007, 12:1775


76/168

76

Hijas de Sonia

No es absolutamente necesario tener etiquetas caption en todas lastablas de datos para favorecer la accesibilidad, pero sigue siendo una bue-na prctica.

Proporcionemos resmenes usando el atributo

Esta pauta no es un requerimiento necesario para las tablas sencillas, pero

puede incrementar la comprensin de las tablas ms complejas para laspersonas que utilizan lectores de pantalla. Una tabla compleja de datossobre el clima debera tener un resumen que diga:

Se ha observado una tendencia al caldeamiento en el Valle deEscombreras, con temperaturas que superan en cerca de 5 grados lasmedias histricas de los ltimos 2 meses, con un mximo de diferenciade temperatura de 25 grados sobre la media.

Esta descripcin debera resaltar los elementos importantes de la tablay ayudar al usuario sobre qu buscar en los datos.

Algunos defensores de la accesibilidad insisten en que todas las tablastengan resmenes, incluyendo las tablas de datos. La verdad es que esteesfuerzo no merece la pena. A los lectores de pantalla no les es necesarioescuchar las palabras Esta tabla slo se usa para maquetar al principiode cada tabla de un sitio. Algunos sitios usan tantas tablas que este textoaadido slo provoca confusin e incrementa el tiempo que se tarda enescuchar la pgina. Sera mejor usar los resmenes de tabla cuando cum-plen la funcin para la que fueron diseados: proporcionar breves resme-nes de datos complejos.

Evitemos las tablas con ms de dos niveles de encabezado de

fila y/o columnaHay mtodos de marcado de tablas de mayor complejidad que los ex-puestos aqu. Algunos lectores de pantalla pueden leer estos marcadores y

WEB PARA TODOS.p65 12/11/2007, 12:1776


77/168

77

mostrar el contenido de forma adecuada. La triste verdad es que el lectorde pantalla ms popular, JAWS, no puede hacerlo tan fcilmente. Si esposible, utilicemos tablas simples, unidimensionales o bidimensionales sinfilas o columnas cruzadas. Es la apuesta ms segura.

Pautas aplicables

Se aplican a las tablas las siguientes pautas WCAG 1.0:

Prioridad 1: 5.1 - En las tablas de datos, identifique los encabezamientos de fila

y columna. 5.2 - Para las tablas de datos que tienen dos o ms niveles lgicos

de encabezamientos de fila o columna, utilice marcadores para aso-ciar las celdas de encabezamiento y las celdas de datos.

Prioridad 2: 5.3 - No utilice tablas para maquetar, a menos que la tabla tenga

sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido,proporcione una alternativa equivalente (la cual debe ser una ver-sin alineada).

5.4 - Si se utiliza una tabla para maquetar, no utilice marcadoresestructurales para realizar un efecto visual de formato.

Prioridad 3: 5.5 - Proporcione resmenes de las tablas. 5.6 - Proporcione abreviaturas para las etiquetas de encabezamiento. 10.3 - Hasta que las aplicaciones de usuario (incluidas las ayudas

tcnicas) interpreten correctamente los textos contiguos, proporcio-ne un texto lineal alternativo (en la pgina actual o en alguna otra)para todaslas tablas que maquetan texto en paralelo, en columnasde palabras.

WEB PARA TODOS.p65 12/11/2007, 12:1777


78/168

78

WEB PARA TODOS.p65 12/11/2007, 12:1778


79/168

79

Creando formularios accesibles

Accesibilidad general de los formulariosIntroduccin

Hay dos medios principales en la web para recibir informacin de un sitio web:el correo electrnico y los formularios. El correo electrnico no suele tenerningn gran problema de accesibilidad, y permitir a los usuarios de un sitioweb acceder a una direccin de correo electrnico de contacto es una granherramienta para la usabilidad y accesibilidad. Los formularios proporcionan, amenudo, un medio de comunicacin mejor. Pueden ser enviados fcilmente yno requieren de un programa de correo o un servicio web. Con los formulariostambin se puede obtener la informacin especfica que se necesita. Pero losformularios tambin suponen algunos problemas de accesibilidad.

Cuando hablamos de la accesibilidad de los formularios, solemos refe-rirnos a su accesibilidad para los lectores de pantalla y las personas con

discapacidades visuales. Las personas con otros tipos de discapacidadessuelen verse menos afectadas por los formularios defectuosos que care-cen de algunas de las caractersticas de accesibilidad de HTML. Debemospuntualizar, no obstante, que todo el mundo resulta beneficiado si los for-mularios estn bien organizados, especialmente las personas condiscapacidades cognitivas. La maquetacin visual puede ser importante paralos usuarios videntes. Cuanta menos explicacin precise el formulario, mejor.Sin embargo, el objetivo de este ejercicio es bsicamente la elaboracinde un f

Diseño para Todos 2

Documents

Transcript of Diseño para Todos 2