IX Congreso Iberoamericano de

Informática Educativa Especial

TALLER DE DISEÑO DE SITIOS WEB ACCESIBLES

Delia Esquer Meléndez

desquer@uabc.edu.mx desquer@gmail.com

Montevideo, Uruguay Mayo de 2015

1

Contenido

INTRODUCCIÓN..................................................................................................................................... 2

¿Qué es accesibilidad? ...................................................................................................................... 2

¿Qué es accesibilidad web? ............................................................................................................ 2

¿Por qué necesitamos accesibilidad? ........................................................................................... 2

COMPONENTES ESENCIALES DE ACCESIBILIDAD WEB ...................................................... 6

PRINCIPIOS DEL DISEÑO UNIVERSAL O DISEÑO PARA TODOS ....................................... 7

1º Principio: Uso equiparable ......................................................................................................... 7

2º Principio: Uso flexible .................................................................................................................. 7

3º Principio: Simple e intuitivo ...................................................................................................... 8

4º Principio: Información perceptible ......................................................................................... 8

5º Principio: Con toleracia al error .............................................................................................. 8

6º Principio: Que exija poco esfuerzo físico .............................................................................. 9

7º Principio: Tamaño y espacio para el acceso y uso ........................................................... 9

NORMAS Y PAUTAS ........................................................................................................................... 10

Pautas ................................................................................................................................................. 10

Prioridades ......................................................................................................................................... 10

Niveles de Conformidad ................................................................................................................. 11

RECOMENDACIONES ........................................................................................................................ 12

EVALUACIÓN DE LA ACCESIBILIDAD DE UN SITIO WEB ................................................... 13

Herramientas de Evaluación ....................................................................................................... 13

RECURSOS .............................................................................................................................................. 14

PRÁCTICAS ............................................................................................................................................ 15

2

INTRODUCCIÓN

¿Qué es accesibilidad?

Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas o físicas.

¿Qué es accesibilidad web?

La accesibilidad Web es la posibilidad de que un producto o servicio web pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso. Las limitaciones propias del individuo no solo representan aquellas relacionadas a la discapacidad, sino también a otras como puede ser el idioma, conocimientos o experiencia.

Accesibilidad significa proporcionar flexibilidad para acomodarse a las necesidades de cada usuario y sus preferencias. En el medio físico, por ejemplo, significa proporcionar una rampa para los usuarios que no puedan (o no deseen) usar escaleras o aceras altas. En el contexto de Internet, la accesibilidad hace a la tecnología de computadoras y los recursos de Internet útiles a más personas, o como bien dice Paula Maciel: “Que los contenidos sean configurables por el usuario, controlables por el usuario, comprensibles para el usuario y compatibles con el dispositivo o aplicación que tenga el usuario”. (C. Segovia, Accesibilidad e Internet)

¿Por qué necesitamos accesibilidad?

Encontramos varias razones: (C. Segovia, Accesibilidad e Internet)

Razones éticas:

Buscar la accesibilidad es hacer lo correcto. Como cualquier otra actividad que implique tener en cuenta algo más que nuestro propio ombligo, el incentivar la accesibilidad en Internet ayuda a mejorarnos como personas.

Razones sociales:

La accesibilidad en Internet permite participar a un público más amplio. Las páginas accesibles estimulan la participación individual, ya que permite ampliar el público potencial a millones de personas con problemas de discapacidad, conexiones lentas o computadoras antiguas.

3

Estimula la participación grupal de sectores sociales, como las poblaciones alejadas de los centros económicos, los pueblos originarios, los barrios de escasos recursos, etc.

Nos sirve de auxilio para lograr metas sociales de participación plena y de igualdad ya que colabora en la disminución de la llamada “brecha o exclusión digital” y, por extensión, la “brecha social” ya que, si bien es cierto que actualmente hay más gente que accede a tecnologías de información y comunicación (las tan nombradas TICs, tales como los teléfonos, fijos y móviles, la televisión, la computadora, Internet, la radio, etc.) que hace 10 años, también es cierto que es más grande la diferencia entre las personas que tienen acceso a la información que las que no 9. Y en este caso la accesibilidad juega un importante papel 10.

Contribuye a fortalecer la diversidad, permitiendo que amplios grupos de la población puedan no sólo recibir información en forma pasiva (como sucede en el caso de los medios de información masivos como la televisión o los periódicos), sino aportar sus opiniones y participar en la construcción de una sociedad más equilibrada.

Ayuda a la inserción laboral a través del teletrabajo, no sólo ampliando la oferta laboral para personas con problemas de discapacidad, sino para los dueños de computadoras antiguas o para los que sólo tienen acceso desde telecentros o cibercafés, (permitiendo ahorro en transporte, comida y mayor disponibilidad de tiempo libre y productivo, entre otras ventajas) entre tantos otros grupos favorecidos por esta modalidad de trabajo.

Implica un apoyo a las denominadas “pequeñas y medianas empresas” (o PyMEs) y a los microemprendimientos, poseedoras de equipamiento informático que, en la mayoría de los casos, no es de última generación y que no poseen los recursos necesarios para su actualización. También es el caso de las que utilizan determinadas aplicaciones 11 que están diseñadas y pensadas para una versión concreta de sistema operativo y no pueden darse el lujo de actualizar el software sin correr el riesgo de tener problemas organizativos.

Dada la infraestructura y la antigüedad de las computadoras instaladas en las escuelas de nuestros países latinoamericanos (cuando las hay), la accesibilidad contribuye a que “ninguna niña o niño quede fuera del sistema educativo” 12 ya que permite utilizar equipos viejos o conexiones lentas.

Razones políticas:

Promueve la democracia, pero como dice Bernardo Kliksberg “democracia no sólo referido a lo electoral, sino a la participación en la gestión”.

4

Los usuarios que desean ingresar a un sitio oficial son votantes, que harán saber su descontento de no poder ingresar al mismo, entre otras oportunidades, en las elecciones.

También, dichos usuario son contribuyentes, a los que no les causará mucha gracia que sus aportes al fisco sean mal usados o gastados en brindarle información a otros ciudadanos y no a ellos.

.Razones económicas:

Si el potencial cliente que intenta ingresar en nuestro sitio comercial, se encuentra con problemas de accesibilidad, es muy probable que deje de utilizar ese sitio, en el que hemos invertido tanto tiempo y dinero... ¡o quizás deje de ser nuestro cliente! Y no creo necesario recordar el alcance internacional de Internet, esto es, que no sólo estaremos perdiendo clientes de nuestra ciudad, sino de todo el mundo.

El tener un sitio comercial accesible mejora la imagen corporativa de la empresa. Y lo opuesto: está muy mal visto que una empresa actúe de forma discriminatoria... y sus clientes se enteren.

Si deseamos obtener colaboraciones (económicas o de cualquier tipo) a través de nuestro sitio web y los interesados no pueden ingresar sus datos por problemas de accesibilidad, se corre el riesgo de perder sus aportes.

Razones legales:

En algunos países, es ley 14. En los Estados Unidos, por ejemplo, existe la Sección 508 de la Ley de Rehabilitación que exige alojamiento razonable para empleados con problemas de discapacidad, y ese requisito se extiende a la accesibilidad en la Red. En Europa, a través de la Iniciativa eEurope, a partir del año 2005 los sitios oficiales deben ser accesibles. Algo similar sucede en Australia. Y todo esto no queda dentro del país que dictó la legislación, ya que si pretendemos participar en alguna contratación que incluya un sitio web,éste deberá ser accesible.

Razones técnicas:

Navegar por Internet ya no es una actividad que se hace desde un solo tipo de equipamiento, sino que actualmente se puede navegar desde teléfonos celulares, kioscos interactivos, televisores, mesas interactivas… ¡y hasta heladeras! Cada uno de dichos equipos tiene sus propias características, por lo que sólo los sitios accesibles podrán adaptarse (y disfrutarse) ante tal variedad de sistemas de navegación.

5

¿Qué tipo de usuarios puede tener problemas de accesibilidad en Internet?

TODOS!!!!, como nos dice Claudio Segovia en su documento Accesibilidad e Internet, puesto nadie tiene garantizada la salud y cualquiera de nosotros puede tener algún problema de discapacidad temporal o permanente, una enfermedad o simplemente la vejez, por otro lado la situación económica de una persona puede cambiar y restringir el acceso a una computadora con las últimas actualizaciones o recursos y en el mejor de los casos, cualquiera de nosotros podríamos vernos en la necesidad de trabajar con una computadora de alguien más, en otro país, otro idioma, etc. Pero ..... podríamos pensar en los usuarios que padecen de alguna de las siguientes dificultades:

Problemas de visión: ceguera, visión reducida y problemas en visualización de color que necesitan navegar con lectores de pantalla o navegadores con altavoz (parlantes) como JAWS, PwWebSpeak, Orca, Home Page Reader o terminales Braille, entre otros. Problemas de visión, como miopía o daltonismo que requieren hacer uso de magnificadores de pantalla o que trabajan en ambientes con poca iluminación.

Problemas de audición: aún cuando se consideran menos limitantes en el acceso y uso de contenidos web, puesto que el canal sonoro es mucho menos usado que el visual, aún así, se recomienda tener presentes las limitaciones y barreras derivadas de esta discapacidad, como es el caso del lenguaje. O bien, cuando se trabaja en ambientes muy ruidosos.

Problemas motrices, se refiere a la capacidad de movilidad del usuario que le impida interactuar con el sistema a través de los dispositivos de entrada tradicionales (ratón o mouse y/o teclado) y se requiera el uso de alternativos.

Problemas cognitivos, se refiere a la dislexia, diversos grados de retraso mental o con limitaciones de aprendizaje. También hay personas que tiene un nivel intelectual “normal” en diversos aspectos pero presentan problemas en aspectos concretos, como por ejemplo, los que tienen mucha capacidad verbal pero baja inteligencia numérica o espacial.

Personas de edad avanzada que no no poseen todas sus capacidades físicas y/o mentales en su mejor nivel.

Problemas de nivel educativo, con analfabetismo, o con pocos años de formación, o que hablen un idioma diferente.

Usuarios con diversos problemas o situaciones, tales como aquellas derivadas de las características propias del equipo de navegación o del entorno ambiental desde donde se intenta trabajar, tales como el uso computadoras obsoletas con monitores con número reducido de colores, poca memoria RAM para ejecutar software, poco espacio en disco duro que le impida actualizar software, procesador de poca capacidad, software obsoleto o demasiado moderno, hardware no estándar (como WebTV, teléfonos celulares, iPhone, smartphones, palmtops, terminales Braille, terminales UNIX, PDA’s, Blackberry), conexiones lentas, etc..

6

COMPONENTES ESENCIALES DE ACCESIBILIDAD WEB

Es esencial que los diferentes componentes de desarrollo Web e interacción trabajen conjuntamente para que la Web sea accesible para aquellas personas con discapacidad:

o Contenido - información presente en una página Web o en una aplicación Web, incluyendo:

información como por ejemplo texto, imágenes y sonidos código o etiquetado que define estructura, presentación, etc.

o Navegadores Web, reproductores multimedia y otros "agentes de usuario"

o Tecnología asistiva, en algunos casos - lectores de pantalla, teclados alternativos, intercambiadores, software de escaneo, etc.

o Conocimiento de los usuarios, experiencias y, en ocasiones, estrategias de adaptación para la utilización de la Web

o Desarrolladores - diseñadores, codificadores, autores, etc., incluyendo desarrolladores que tienen alguna discapacidad y usuarios que proporcionan contenido.

o Herramientas de autor - software para crea sitios Web o Herramientas de evaluación - herramientas para evaluar la

accesibilidad Web, validadores de HTML, validadores de CSS, etc

¿COMO SE RELACIONAN LOS COMPONENTES?

Los desarrolladores Web normalmente utilizan herramientas de autor y herramientas de evaluación para crear contenido Web.

Las personas ("usuarios") utilizan navegadores Web, reproductores multimedia, tecnologías asistivas u otros "agentes de usuarios" para obtener e interactuar con el contenido.

7

PRINCIPIOS DEL DISEÑO UNIVERSAL O DISEÑO PARA TODOS

Los 7 Principios del Diseño Universal o Diseño para Todos, se centran en el diseño utilizable universalmente o por todos, pero hay que tener en cuenta que en el diseño intervienen otros aspectos, como el costo, la cultura en la que será usado, el ambiente, etc.; que tampoco pueden olvidarse.

Estos principios generales del diseño, son aplicables y de hecho se aplican en la arquitectura, la ingeniería y, por supuesto, las páginas y aplicaciones Web, entre otros campos de aplicación.Los principios del Diseño para Todos o, como es llamado en Estados Unidos, Diseño Universal, fueron compilados por: Bettye Rose Connell, Mike Jones, Ron Mace, Jim Mueller, Abir Mullick, Elaine Ostroff, Jon Sanford, Ed Steinfeld, Molly Story, y Gregg Vanderheiden.

Los principios que se mencionan a continuación pertenecen al Centro para el Diseño Universal (NC State University, The Center for Universal Design, an initiative of the College of Design) y corresponder a la versión 2.0 del 1 de abril de 1997 traducidos y adaptados por Emmanuelle Gutiérrez y Restrepo, creadora y coordinadora del Seminario SIDAR.

1º Principio: Uso equiparable

El diseño es útil y vendible a personas con diversas capacidades.

Pautas para el Principio 1:

Que proporcione las mismas maneras de uso para todos los usuarios: idénticas cuando es posible, equivalentes cuando no lo es.

Que evite segregar o estigmatizar a cualquier usuario. Las características de privacidad, garantía y seguridad deben estar

igualmente disponibles para todos los usuarios. Que el diseño sea atractivo para todos los usuarios.

2º Principio: Uso flexible

El diseño se acomoda a un amplio rango de preferencias y habilidades individuales.

Pautas para el Principio 2

Que ofrezca posibilidades de elección en los métodos de uso. Que pueda accederse y usarse tanto con la mano derecha como con la

izquierda. Que facilite al usuario la exactitud y precisión. Que se adapte al paso o ritmo del usuario.

8

3º Principio: Simple e intuitivo

El uso del diseño es fácil de entender, atendiendo a la experiencia, conocimientos, habilidades lingüísticas o grado de concentración actual del usuario.

Pautas para el Principio 3

Que elimine la complejidad innecesaria. Que sea consistente con las expectativas e intuición del usuario. Que se acomode a un amplio rango de alfabetización y habilidades

lingüísticas. Que dispense la información de manera consistente con su importancia. Que proporcione avisos eficaces y métodos de respuesta durante y tras

la finalización de la tarea.

4º Principio: Información perceptible

El diseño comunica de manera eficaz la información necesaria para el usuario, atendiendo a las condiciones ambientales o a las capacidades sensoriales del usuario.

Pautas para el Principio 4

Que use diferentes modos para presentar de manera redundante la información esencial (gráfica, verbal o táctilmente)

Que proporcione contraste suficiente entre la información esencial y sus alrededores.

Que amplíe la legibilidad de la información esencial. Que diferencie los elementos en formas que puedan ser descritas (por

ejemplo, que haga fácil dar instrucciones o direcciones). Que proporcione compatibilidad con varias técnicas o dispositivos usados

por personas con limitaciones sensoriales.

5º Principio: Con toleracia al error

El diseño minimiza los riesgos y las consecuencias adversas de acciones involuntarias o accidentales.

Pautas para el Principio 5

Que disponga los elementos para minimizar los riesgos y errores: elementos más usados, más accesibles; y los elementos peligrosos eliminados, aislados o tapados.

Que proporcione advertencias sobre peligros y errores. Que proporcione características seguras de interrupción. Que desaliente acciones inconscientes en tareas que requieren vigilancia.

9

6º Principio: Que exija poco esfuerzo físico

El diseño puede ser usado eficaz y confortablemente y con un mínimo de fatiga.

Pautas para el Principio 6

Que permita que el usuario mantenga una posición corporal neutra. Que utilice de manera razonable las fuerzas necesarias para operar. Que minimice las acciones repetitivas. Que minimice el esfuerzo físico continuado.

7º Principio: Tamaño y espacio para el acceso y uso

Que proporcione un tamaño y espacio apropiados para el acceso, alcance, manipulación y uso, atendiendo al tamaño del cuerpo, la postura o la movilidad del usuario.

Pautas para el Principio 7

o Que proporcione una línea de visión clara hacia los elementos importantes tanto para un usuario sentado como de pie.

o Que el alcance de cualquier componente sea confortable para cualquier usuario sentado o de pie.

o Que se acomode a variaciones de tamaño de la mano o del agarre. o Que proporcione el espacio necesario para el uso de ayudas

técnicas o de asistencia personal.

10

NORMAS Y PAUTAS

Con el objeto de hacer los contenidos Web accesibles se han desarrollado las llamadas Pautas de Accesibilidad al Contenido en la Web (WCAG) que tienen como función primordial servir de guía en el diseño de páginas web hacia un diseño accesible, reduciendo las barreras de acceso a la información. La WCGA consiste en 14 pautas que ofrecen soluciones de diseño y que utilizan siempre como ejemplo aquellas situaciones que pudiera causar problemas de acceso a la información. A su vez, las pautas contienen una serie de puntos de verificación que ayudan a detectar posibles errores, describen la forma de diseñas páginas accesibles sin lastimar el diseño, ofreciendo la flexibilidad necesaria para que la información esté al alcance de los usuarios

Pautas

1. Proporcione alternativas equivalentes al contenido visual y auditivo. 2. No se base sólo en el color. 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente. 4. Identifique el idioma original usado. 5. Cree tablas que se transformen correctamente. 6. Asegure que las páginas que incorporan nuevas tecnologías se

transformen correctamente. 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-

dependientes. 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. 9. Diseñe para la independencia del dispositivo. 10. Utilice soluciones provisionales. 11. Utilice las tecnologías y pautas W3C. 12. Proporcione información de contexto y orientación. 13. Proporcione mecanismos claros de navegación. 14. Asegure que los documentos sean claros y simples.

Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.

Prioridades

Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.

Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.

Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.

11

En función a estos puntos de verificación se establecen los siguientes niveles de conformidad:

Niveles de Conformidad

Nivel de Conformidad "A": Se satisfacen todos los puntos de verificación de prioridad 1.

Nivel de Conformidad "Doble A": Se satisfacen todos los puntos de verificación de prioridad 1 y 2.

Nivel de Conformidad "Triple A": Se satisfacen todos los puntos de verificación de prioridad 1,2 y 3. se satisfacen.

COMO UTILIZAR LOS LOGOTIPOS DE LOS NIVELES DE CONFORMIDAD:

Nivel de Conformidad "A"

<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explicación del Nivel A de Conformidad"> <img height="32" width="88" src="http://www.w3.org/WAI/wcag1A" alt="Icono de conformidad con el Nivel A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI"></a>

Nivel de Conformidad "Doble A"

<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explicación del Nivel Doble A de Conformidad"> <img height="32" width="88" src="http://www.w3.org/WAI/wcag1AA" alt="Icono de conformidad con el Nivel Doble A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI"></a>

Nivel de Conformidad "Triple A"

<a href="http://www.w3.org/WAI/WCAG1AAA-Conformance" title="Explicación del Nivel Triple A de Conformidad"> <img height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA" alt="Icono de conformidad con el Nivel Triple A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI"></a>

Las pautas describen cómo hacer páginas Web accesibles sin sacrificar el diseño, ofreciendo esa flexibilidad que es necesaria para que la información sea accesible bajo diferentes situaciones y proporcionando métodos que permiten su transformación en páginas útiles e inteligibles.

12

RECOMENDACIONES

1. Imágenes y animaciones: Use texto alternativo (incluya el atributo alt) para describir la función de los elementos visuales.

2. Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas activas.

3. Multimedia: Facilite subtítulos y trascripción de los archivos de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos no accesibles.

4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, no usar «da un clic aquí».

5. Organización de las páginas: Use encabezados (H1, H2, H3,...), listas y estructura consistente. Use Hojas de Estilos en Cascada (CSS) para maquetación y estilo, donde sea posible.

6. Gráficos de datos: Resuma o use el atributo longdesc. 7. Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso

de que las características activas no sean accesibles o no tengan soporte. 8. Marcos (Frames): Etiquete con los atributos title o name. 9. Tablas: Realícelas de manera que se puedan leer línea a línea. Incluya

un resumen. Evite el uso de tablas para dar formato a las páginas. 10. Revise su trabajo: Valide el código HTML. Use herramientas de

evaluación y navegadores sólo-texto para verificar la accesibilidad

Referencia: Guía Breve de Accesibilidad Web

13

EVALUACIÓN DE LA ACCESIBILIDAD DE UN SITIO WEB

Evaluar la accesibilidad a lo largo del desarrollo de un sitio web permite encontrar problemas de accesibilidad desde el inicio, justo a tiempo para poder solucionarlos. Hay herramientas de evaluación que ayudan a realizar tests de accesibilidad en los sitios web, sin olvidar que éstos y todos los componentes técnicos son de gran ayuda pero no debemos olvidar que es necesaria la intervención del elemento humano para determinar si realmente cumple con las normas establecidas.

Web Accesibility Initiative (WAI) dirige los grupos de trabajo y de interés de las herramientas de evaluación y reforma y ayuda a coordinar los esfuerzos de los desarrolladores implicados en la construcción de diversas herramientas que ayuden a la accesibilidad.

Herramientas de Evaluación

Es una herramienta para el análisis de la accesibilidad de sitios web, alcanzando de una forma integral y global a todos los elementos y páginas que lo componen. Su objetivos es comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web con el fin de permitir el acceso a todas las personas independientemente de sus características diferenciadoras. http://www.tawdis.net/taw3/cms/es

Es una herramienta de evaluación de Accesibilidad las páginas Web de acuerdo a la especificación de las Pautas de Accesibilidad al Contenido en la Web (WCAG 1.0). Realiza un conjunto de pruebas preliminares en la página e identifica automáticamente errores detectables o puntos de revisión http://sidar.org/hera

El algoritmo de eXaminator analiza los diversos elementos y atributos en el código de una página web y cuenta el número de situaciones (errores y buenas prácticas) posibles de inferir automáticamente, teniendo como base las Pautas de Accesibilidad al Contenido en la Web 1.0 (WCAG 1.0). http://examinator.ws

14

RECURSOS

http://desquer.ens.uabc.mx/accesibilidad

Descargas

Taller de Diseño de Sitios Web Accesibles (documento)

Taller de Diseño de Sitios Web Accesibles (presentación)

JAWS - Lector de Pantalla

Manuales y Tutoriales

Dreamweaver CS3 - Guía del usuario

Dreamweaver 8 - Guía del usuario

Pautas de Accesibilidad (C. Egea, A. Sarabia)

Pautas de Accesibilidad (C. Egea, A. Sarabia, A. Chuter)

Introducción al diseño Web Accesible

Accesibilidad Web ( C. Segovia)

Manual de Aplicación de las WCAG 1 con Dreamweaver

Pautas de Accesibilidad para Herramientas de Autor

Artículos

Accesibilidad Web, un problema pendiente ( A. Bravo)

Legislación sobre Accesibilidad Web ( Acctiva)

Qué es la Accesilidad Web?

Dreamweaver y Accesiblidad

Instituciones y Organismos

World Wide Web Consortium (WC3)

Web Accesibility Iniative (WAI)

Fundación SIDAR

Accesibilidadweb.com

Grupo DIM

Otros

Glosario de directrices de Accesibilidad

Guía Breve de Accesibilidad Web

15

PRÁCTICAS

16

PRÁCTICA 1: PREFERENCIAS DE ACCESIBILIDAD EN DW

1. Inicio > Todos los programas > Adobe Web Premium> Adobe

Dreamweaver CS3

Seleccionar la opción Abrir un elemento reciente o Crear Nuevo

Cuando ya existe el archivo: Cuando se desea crear un nuevo archivo:

2. Establecer las preferencias de Accesibilidad en Dreamweaver

Edición > Preferencias > Accesibilidad

17

PRÁCTICA 2: IMÁGENES Y ANIMACIONES

Use el atributo "alt" para describir la función de cada elemento visual. Este

atributo opcional se puede utilizar en algunas etiquetas HTML para ofrecer información adicional o alternativa sobre un elemento. Su utilidad depende plenamente del programa que se emplee para visitar (ver u oir) las páginas web.

El lector de pantalla lee la información introducida en el campo de Texto alternativo. Se recomienda limitar la entrada a alrededor de 50 caracteres. Si desea introducir descripciones más largas, puede proporcionar un enlace (vínculo) en el cuadro de texto Descripción larga, a un archivo que contenga más información sobre la imagen.

En el cuadro Descripción larga, escriba la ubicación de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vínculo a un archivo con el que está relacionado u ofrece más información acerca de la imagen.

Insertar imagen:

1. Insertar > imagen (Ctrl + Alt + I) 2. Seleccionar archivo de imagen en unidad de almacenamiento y oprimir

el botón de Aceptar

3. Especificar el texto alterno (texto que describe la función del elemento visual) en la ventana de Atributos de Accesibilidad de la etiqueta de imagen

Si se considera necesario agregar más información que describa el elemento visual, se puede incluir el enlace (vínculo) de acceso a un archivo HTML en el atributo longdesc (Descripción larga).

Nota: Una vez que se haya insertado el atributo longdesc, se deberá insertar un enlace (vínculo) al lado del elemento visual.

18

Ejemplo:

La flor nacional del Uruguay

Código HTML:

<img src=ceibo.jpg" alt="Ceibo, la flor nacional del Uruguay" width="288" height="250" longdesc="ceibo.html" />

<a href="ceibo.html">La flor nacional del Uruguay</a>

19

PRÁCTICA 3: MAPAS DE IMAGEN

Use el elemento “map” y texto para zonas activas. Los mapas de imágenes

permiten a los autores especificar regiones en una imagen u objeto y asignar una acción específica a cada región (por ejemplo abrir un documento, ejecutar un programa, etc.). Cuando la región es activada por el usuario, se ejecuta la acción. Un mapa de imágenes se crea asociando un objeto con una especificación de las áreas geométricas sensibles del objeto.

Hay dos tipos de mapas de imágenes:

Cuando un usuario activa una región de un mapa de imágenes en el lado del cliente con un ratón (mouse), las coordenadas en píxeles son interpretadas por el agente de usuario. El agente de usuario selecciona el enlace (vínculo) especificado por la región activada y lo sigue.

Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al agente del lado del servidor especificado por el atributo href del elemento A. El agente del servidor interpreta las coordenadas y realiza alguna acción.

Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en el servidor por dos razones: son accesibles a las personas que utilizan agentes de usuario no gráficos y permiten saber en todo momento si el apuntador está sobre una región activa o no.

Insertar mapa de imagen (mapa sensible):

1. Insertar > imagen (Ctrl + Alt + I) 2. Seleccionar archivo de imagen en unidad de almacenamiento y oprimir

el botón de Aceptar

3. Seleccionar la imagen (clic sobre imagen) 4. Definir las áreas del mapa de imagen utilizando una de las opciones

de Herramientas de Zona Interactiva (rectangular, elíptica o polígonal) que se encuentra en la ventana de propiedades.

20

Ejemplo:

Resultado:

Un mapa sensible con enlaces (links o ligas) a los diferentes departamentos de

la Republica Oriental del Uruguay

Código:

map name="Map" id="Map"> <area shape="rect" coords="49,14,162,70" href="http://www.luventicus.org/mapas/uruguay/artigas.html" target="_blank" alt="Artigas" /> <area shape="rect" coords="26,126,139,183" href="http://www.luventicus.org/mapas/uruguay/paysandu.html" target="_blank" alt="Paysand&uacute;" /><area shape="poly" coords="142,344,138,354,146,360,154,360,161,352,155,346" href="http://www.luventicus.org/mapas/uruguay/montevideo.html" target="_blank" alt="Montevideo" /> <area shape="circle" coords="175,157,34" href="http://www.luventicus.org/mapas/uruguay/tacuarembo.html" target="_blank" alt="Tacuaremb&oacute;" /> <area shape="poly" coords="138,278,132,255,138,292,139,315,147,320,159,311,177,306,193,296,207,275,207,264,213,249,214,231, 186, 243,158,255, 149,254, 138,251,133,256" href="http://www.luventicus.org/mapas/uruguay/florida.html" target="_blank" alt="Florida" /> <area shape="circle" coords="55,258,30" href="http://www.luventicus.org/mapas/uruguay/soriano.html" target="_blank" alt="Soriano" /> <area shape="poly" coords="267,262,261,273,255,289,256,300,255,314,249,324,253,332,252,346,262,344,266,335,274,342,283,332, 289,324,294,312, 308,302,312,282, 313,274,309, 262,309,249,306, 239,299,235" href="http://www.luventicus.org/mapas/uruguay/rocha.html" target="_blank" alt="Rocha" /> </map>

21

PRÁCTICA 4: MULTIMEDIA

Proporcione subtítulos y transcripción del sonido y descripción del

video. Los elementos multimedia que tanto se utilizan en las páginas web hoy en día pueden ocasionar graves problemas de accesibilidad, ya no sólo a las personas con algún tipo de discapacidad, sino a todo el mundo en general. Al ser elementos que no son HTML requieren, en la mayoría de los casos, la instalación de un visor específico (plug-in, add-in o extensión) que sea capaz de interpretar el elemento multimedia.

Se recomienda no abusar de los elementos multimedia y hacer uso de ellos solo en casos de ser esenciales y/o que no puedan ser sustituidos por otro tipo de elementos. Si nos centramos en los problemas de accesibilidad que pueden tener las personas con discapacidad, los elementos multimedia más problemáticos son los vídeos, las grabaciones sonoras y las animaciones.

Para las personas ciegas y para aquellos que tienen deficiencias visuales es necesario incluir una descripción de lo que ocurre en la pista visual de una aplicación multimedia o vídeo. Por ejemplo, una descripción del escenario, de los gráficos que se presentan, de las acciones, etc.

Insertar video:

1. Insert > Media > Plugin 2. Seleccionar el archivo de video (.avi, .mpeg) que se desea insertar

3. Aparecerá el símbolo 4. Adecuar el área de visualización del video:

o Seleccionar el símbolo con un clic o Seleccionar el nodo de edición (cuadrito negro) inferior derecho

para establecer tamaño de área de visualización 5. Editar la etiqueta <embed>

o Clic derecho sobre el objeto de multimedia (video) o Seleccionar la opción Editar etiqueta <embed>

Código:

<embed src="limpieza.mpe" width="380" height="321" autostart="false" dir="ltr" lang="es"></embed>

22

PRÁCTICA 5: TABLAS

Proporcione tablas bien definidas con un título, un resumen que

describa brevemente el contenido de la tabla y encabezamientos de columnas y filas. Una tabla de datos definida con la etiqueta <table> es muy fácil de entender si se puede ver toda ella en su conjunto, pero es muy difícil de entender si sólo se puede ver un dato aislado cada vez. Este problema lo sufren los usuarios que emplean navegadores no visuales, ya que ellos tienen que recorrer las tablas de formal lineal pero la naturaleza de una tabla es bidimensional, por lo que pierden la visión global de la tabla y pierden las referencias que permiten interpretar el contenido de cada celda de la tabla. Insertar tabla:

1. Insertar > Tabla 2. Especificar número de filas y columnas, ancho y grosor de tabla (en

pixeles o porcentaje) 3. Especificar elementos de Accesibilidad: texto y resumen

4. Editar una tabla: o Seleccionar la tabla posicionando el cursor sobre una de las

celdas o Clic derecho o Seleccionar la opción Tabla > Seleccionar tabla o Modificar las propiedades de la tabla en el Inspector de

Propiedades

Ver ejemplo de una tabla

23

PRÁCTICA 6: LECTOR DE PANTALLA

1. Verificar que exista un lector de pantalla instalado en su computadora, en caso contrario descargue JAWS e instálelo.

2. Ejecute el programa (que queda residente en su computadora).

3. Abra la página web (HTML) que desea leer y escuche la narración.

Nota: Observar que el lector de pantalla empezará la lectura desde el título de la página web,

textos e imágenes, por esta razón es muy importante asegurarse que el título es adecuado al contenido, así como no olvidar que todos los elementos visuales deben llevar la etiqueta

"alt".

PRÁCTICA 7: VALIDACIÓN DE ACCESIBILIDAD DE UN SITIO WEB

1. Utilizar un validador de accessibilidad de contenido web, se recomiendan: TAW, Examinator, HERA

2. Especificar la dirección del sitio web en el cuadro de diálogo de "dirección" o "URL"

3. Analizar el reporte o informe emitido y considerar las recomendaciones.