accesibilidad - technical university of...

76
ACCESIBILIDAD Prof: Moisés Mañas [email protected] Master en Artes Visuales y Multimedia Dpto. Escultura / Pintura -Universidad Politécnica de Valencia

Upload: others

Post on 17-May-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

ACCESIBILIDAD

Prof: Moisés Mañ[email protected] en Artes Visuales y Multimedia

Dpto. Escultura / Pintura -Universidad Politécnica de Valencia

Page 2: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Decreto Ley DPR 384 de fecha 24/10/78. Aspectos fundamentales. http://www.argon.interclub.net/normas/accesibilidad.htm

Accesibilidad en espacios:

Page 3: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La accesibilidad es la posibilidad de que un sitio o servicio Web pueda ser visitado y utilizado de forma satisfactoria por elmayor número posible de personas, independientemente de sus propias limitaciones o de las derivadas de su entorno.

El W3C, a través de su iniciativa WAI (Web Accessibility Iniciative), busca que la Web sea accesible para todos-as independientemente de su cultura, idioma, recursos materiales y discapacidad de los usuarios-as.

1997

Page 4: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La accesibilidad web beneficia a los siguientes colectivos:

Personas mayoresPersonas con discapacidad

Físicas, psíquicas, sensoriales Cognitivas y de lenguaje

Page 5: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Usuarios con discapacidades atendidas por los estándares

• No todos lo usuarios usan navegadores web• Existen dispositivos especiales para discapacitados• Existe software especifico paradiscapacitados

Page 6: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

• Usuarios Ciegos• Usuarios con Ceguera al Color• Usuarios con visión débil que no pueden leer texto pequeño• Usuarios con deficiencia auditiva o sordos• Usuarios que no usan ratón• Usuarios con discapacidades debidas a la artritis u otros problemas de control motor• Epilepsia fotosensible

Usuarios con discapacidades atendidas por los estándares

• No todos lo usuarios usan navegadores web• Existen dispositivos especiales para discapacitados• Existe software especifico paradiscapacitados

Page 7: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

¿La accesiblidad está únicamente dirigida a discapacitados?

Page 8: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

¿La accesiblidad únicamente dirigida a discapacitados?

• Usuarios con acceso a internet vía modem (56Kbits)

• Usuarios con resoluciones inferiores a 1024x768px y 16/24/32bits color.

• Usuarios con dispositivos de representación distintos a los comunesmonitores, tanto CRT como TFT/Plasma. Por ejemplo, PDAs, GPS de loscoches, etc...

• Usuarios que carecen de plugins específicos (Flash, SVG, MathXML, etc...)

• Usuarios con un hardware un poco obsoleto (p.e. grandes cantidades dejavascript, mucho consumo de cpu y memoria)

Page 9: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Principales problemas de accesibilidad web

Existen diferentes barreras que dificultan la navegación por Internet. Una clasificación muy general de estas barreras podría ser la que propone Alejandro Gonzalo García Bravo[1] :

[1] Bravo García, Alejandro Gonzalo. Accesibilidad web. Un problema pendiente. Nuevas oportunidades de negocio para las empresas de TIC. <http://www.webposible.com/articulos/accesibilidad_web_problema_pendiente.html> Consulta: 29-04-2007

1.Dificultades de software o hardware.

2.Dificultades de entorno o contexto.

3.Dificultades debidas al diseño del documento.

4.Dificultades debidas a discapacidades.

Page 10: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades visuales

Ceguera: Pérdida importante e incorregible de la visión en ambos ojos.

Necesidades:

• Lector de pantalla (reproduce en contenido a través de síntesis de voz o braille).• Navegadores solo texto. Ej.: Lynx.• Navegadores de voz.

Principales barreras:

•Imágenes sin texto alternativo.•Imágenes complejas: gráficos o planos sin descripción.•Video sin descripción textual o sonora.•Lectura de tablas secuencial.•Marcos sin alternativas NOFRAME o sin nombres significativos.•Formularios que no permiten el uso del tabulador.•Formatos no estándar de documentos que pueden ser problemáticos parael lector de pantalla.

Page 11: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

http://www.funcaragol.org/html/mainjaws.htm

http://www.freedomscientific.com/fs_products/software_jaws.asp

JAWS for Windows (o JFW, forma abreviada con la que se lo conoce generalmente) es un potente lector de pantalla que permite a una persona totalmente ciega acceder a los contenidos de la salida visual de un ordenador personal mediante voz y/o el alfabeto Braille; para la emisión hablada se emplean generalmente programas sintetizadores de voz aunque también es posible utilizar dispositivos externos diseñados para tal fin, y la salida en Braille se realiza siempre a través de terminales generadores de este código

Discapacidades visuales

Page 12: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

http://lynx.browser.org/

Visualización en navegadores de solo texto :

Discapacidades visuales

Page 13: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Navegación por voz:

http://www.freedomscientific.com/fs_products/displays.asphttp://www.gwmicro.com

Discapacidades visuales

http://www.gwmicro.com/Audio_Video_Archive/flashPlayer.php?movieNo=1&movieList=Window-Eyes_Tutorials/tutorial_list&class=gw_tutorial&var=tutorialList&size=small

Page 14: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades visuales

Baja visión: Existen diferentes tipos de baja visión, por ejemplo falta de agudeza (visión poco nítida), distrofia macular (solo se ve la parte central del campo visual o solo los bordes) o visión borrosa.

Necesidades:

•Monitores muy grandes.•Aumento del texto e imágenes a nivel de sistema operativo.•Ampliadores de pantalla o software específico.•Selección de determinadas combinaciones de colores o tipos de letra.

Principales barreras:

•Páginas web con tamaño de letra difícil de cambiar o que se desconfiguran al cambiarlo.•Imágenes con poco contraste y cuyo contraste no se puede cambiar mediante la redefinición de la hoja de estilo.•Texto en forma de imagen que nos salta a la línea siguiente al final de la línea.•Dependiendo de la severidad de la deficiencia visual, algunas de las descritas en el apartado anterior.

Page 15: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Uso de cambio de tamaños de tipografias

Page 16: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Ejemplo de posibilidad de ampliación del interfaz gráfico

Ejemplo de posibilidad de convertir el interfaz en negativo (mayor contraste)

Page 17: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Ejemplo de teclado accesible con teclas aumentadas

Ejemplo de teclado accesible con teclas aumentadas en negativo, mayor

contraste

Ejemplo (homemade) de teclado con señalización de teclas importantes

Page 18: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades visuales

Daltonismo: Falta de sensibilidad a ciertos colores. Las formas comunes del daltonismo incluyen dificultad para distinguir rojo y verde, o amarillo y azul. En algunos casos puede ser incapacidad para percibir cualquier color.

Necesidades:

Hojas de estilo propias (adaptadas)

Principales barreras:

•Color que se emplea como indicador único para dar énfasis al texto.•Texto con contraste insuficiente con el color o el diseño de fondo.•Navegadores que no soportan el uso de hojas de estilo de usuario.

Page 19: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

http://www.once.es

Page 20: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades auditivas

Sordera: Pérdida importante e incorregible de la capacidad auditiva en ambos oídos. El idioma principal de algunos es una lengua de signos.

Necesidades:

Activar o desactivar los subtítulos de los contenidos sonoros durante la navegación.

Principales barreras:

•Falta de subtítulos o transcripciones de contenidos sonoros.•Falta de imágenes relacionadas con los contenidos en páginas llenas de texto, que puede resultar en comprensión más lenta para personas no habituadas al uso de lenguaje escrito o hablado.

Page 21: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades auditivas

Duro de oído: Persona con sordera ligera o moderada.

Necesidades:

•Subtítulos para contenidos sonoros.•Amplificadores de sonido.•Poder ajustar el nivel de sonido de un archivo sonoro.

Principales barreras:

Falta de subtítulos o transcripciones de sonido.

Page 22: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades físico motoras

Discapacidades motrices: Debilidad, limitaciones de control muscular (movimientos involuntarios, falta de coordinación, parálisis), limitaciones de sensibilidad, artritis o falta de miembros.

Necesidades:

•Ratón especial.•Teclado con disposición de teclas adecuado al rango de movimiento. •Dispositivos especiales como ratones de cabeza, licornio o apuntador de boca.•Software de reconocimiento de voz u otras ayudas técnicas.•Activar comandos mediante secuencias de teclas individuales en vez de con combinaciones de teclas.•Más tiempo para rellenar formularios interactivos..

Principales barreras:

•Opciones de respuesta con restricción de tiempo en páginasWeb.•Navegadores y herramientas de edición que no soportan alternativas de teclado para los comandos del ratón.•Formularios que no permiten la navegación en secuencialógica con la tecla tabulador.

Page 23: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Ejemplo de teclado con trackballpreparado para minusvalías del tipo

parálisis cerebral

Ratón para boca

Ratón para mentón

Ratón para mano

Page 24: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Deficiencias en el habla

Deficiencias en el habla: Dificultad para pronunciar de forma reconocible poralgunas aplicaciones de reconocimiento de voz, o por el nivel sonoro o la claridad.

Necesidades:

Modo alternativo de entrada de datos, como el teclado.

Principales barreras:

Sitios que requieren interacción mediante voz.

Page 25: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades cognitivas y neuronales

Dislexia-discalculia: Dificultades con el proceso del lenguaje escrito o imágenes que se leen visualmente, o con lenguaje hablado cuando éste se escucha o con números leídos y escuchados.

Necesidades:

Obtener la información por más de un medio a la vez. Es decir, visual y auditivamente al mismo tiempo.

Principales barreras:

Falta de modalidades alternativas para acceder a la información.

Page 26: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades cognitivas y neuronales

Trastorno de déficit de atención: Dificultades para concentrarse en la información.

Necesidades:

Desactivar las animaciones de un sitio para poder concentrarse en los contenidos.

Principales barreras:

• Elementos visuales o sonoros que no se puedan desactivar fácilmente.• Falta de una organización clara y regular de los sitios.

Page 27: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidad cognitiva: Aprendizaje lento y dificultades paracomprender conceptos complejos.

Necesidades:

• Elementos gráficos que faciliten la compresión.• Lenguaje claro y sencillo.

Principales barreras:

• Uso de lenguaje innecesariamente complejo.• Falta de gráficos en los sitios web.• Falta de organización clara y coherente.

Discapacidades cognitivas y neuronales

Page 28: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Falta de memoria: Problemas de memoria a corto plazo, largo plazo o pérdida de habilidades del lenguaje.

Necesidades:

Estructura de navegación coherente dentro del sitio y elementos de orientación dentro del sitio como bread crumbs(home>nivel1>nivel2), mapas del sitio, etc.

Principales barreras:

• Falta de organización coherente del sitio.• Falta de elementos de orientación.

Discapacidades cognitivas y neuronales

Page 29: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades de salud mental: Dificultad para concentrarse en la información o por visión borrosa o temblor de manos debidos a los efectos secundarios de los medicamentos.

Necesidades:

• Deshabilitar los elementos visuales o sonoros.• Amplificadores de pantalla.

Principales barreras:

•Elementos visuales o sonoros que el usuario no puede deshabilitar.•Páginas con tamaño de letra fijo.

Discapacidades cognitivas y neuronales

Page 30: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Trastornos de epilepsia: Ataques provocados por destellos visuales o sonoros a ciertas frecuencias.

Necesidades:Desactivar animaciones, texto parpadeante o frecuencias de sonido.

Principales barreras:Uso de frecuencias visuales o de sonido que puedan provocar ataques.

Discapacidades cognitivas y neuronales

Page 31: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Discapacidades relacionadas con la edad

Envejecimiento: Cambios en la capacidad funcional de los usuarios. Pueden ser cambios sutiles y paulatinos en sus capacidades o en combinaciones de capacidades incluidas en la visión, el oído, la destreza o la memoria.

Necesidades:Dependen de las discapacidades funcionales detectadas..

Principales barreras:Dependen de las discapacidades funcionales detectadas.

Page 32: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Normativas- legalidades

Page 33: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

1993 - “Normas Uniformes sobre la igualdad de oportunidades para las personas con discapacidad”, son una resolución aprobada por la Asamblea General de la ONU en diciembre de 1993.

2001 - CEI (Comisión Electrotécnica Internacional) se desarrolló la guía ISO/IEC 71 “Directrices para que la normalización atienda las necesidades de los mayores y de las personas con discapacidad”.

Normativas- legalidades

Page 34: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Legislación Española:

La primera ley de ámbito nacional en la que se trata específicamente la accesibilidad web es la LEY 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSICE). Publicada el 12 de julio de 2002.

LEY 51/2003

La importancia y trascendencia de esta ley, viene dada sobre todo por su alcance, declarándose la obligatoriedad de

cumplir el Nivel AA de conformidad a todos los sitios web de las administraciones públicas y de aquellos organismos en

parte financiadas por éstas.

Normativas- legalidades

Page 35: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

“Informática para la salud. Aplicaciones informáticas para personas con discapacidad.Requisitos de accesibilidad de las plataformas informáticas. Soporte lógico". Ha desarrollado una marca Accesibilidad TIC

Norma 139.802

Desde 1999- Resolución del Consejo sobre "Accesibilidad electrónica" - Mejorar el acceso de las personas con discapacidad a la sociedad del conocimiento: Resolución del 14 de enero de 2003

Normativas- legalidades

Page 36: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

RECOMENDACIONES

Page 37: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

WCAG 1.0 (Web Content Accessibility Guidelines 1.0)

UAAG (User Agent Accessibility Guidelines 1.0 )

ATAG (Authoring Tool Accessibility Guidelines 1.0)

http://www.w3c.es/Traducciones/es/WAI/intro/uaag

http://www.w3c.es/Traducciones/es/WAI/intro/wcag

http://www.w3c.es/Traducciones/es/WAI/intro/atag

WCAG UAAG ATAG

RECOMENDACIONES

Page 38: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La accesibilidad Web se entiende desde tres áreas bien diferenciadas:

•Sitios Web y aplicaciones. Relativo a la accesibilidad del contenido de los sitios Web, permite que las personas con discapacidad interactúen adecuadamente con la Web.WCAG

RECOMENDACIONES

Page 39: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La accesibilidad Web se entiende desde tres áreas bien diferenciadas:

•Sitios Web y aplicaciones. Relativo a la accesibilidad del contenido de los sitios Web, permite que las personas con discapacidad interactúen adecuadamente con la Web.

•Aplicaciones de usuario-a . Estudia cómo mejorar la accesibilidad en las aplicaciones software que se emplean para acceder al contenido de la Web, como navegadores y reproductores multimedia, para que las personas con discapacidad puedan utilizarlos correctamente. UAAG

WCAG

RECOMENDACIONES

Page 40: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La accesibilidad Web se entiende desde tres áreas bien diferenciadas:

•Sitios Web y aplicaciones. Relativo a la accesibilidad del contenido de los sitios Web, permite que las personas con discapacidad interactúen adecuadamente con la Web.

•Aplicaciones de usuario-a . Estudia cómo mejorar la accesibilidad en las aplicaciones software que se emplean para acceder al contenido de la Web, como navegadores y reproductores multimedia, para que las personas con discapacidad puedan utilizarlos correctamente.

• Herramientas de autor. Sobre las aplicaciones usadas por los desarrolladores-as para la creación de las páginas Web se trabaja en dos líneas:

• Que las herramientas de autor produzcan contenido Web Accesible. • Que puedan ser utilizadas por personas con discapacidad.

UAAG

WCAG

ATAG

RECOMENDACIONES

Page 41: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

WCAG

UAAGATAG

Page 42: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

1. Desarrollo más rápido y más simple

2. Menores costos

3. Compatibilidad

4. Descarga más rápida

5. Accesibilidad

6. Posicionamiento

7. Adaptación

8. Contenido reutilizable

9. Mayor audiencia

10.Web Semántica

11. Internacionalización

12. Cuestiones legales y normativas.

VENTAJAS

Page 43: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

1. Proporcione alternativas equivalentes para el contenido visual o auditivo. 2. No se base solo en el color. 3. Utilice marcadores y hojas de estilo y hágalo adecuadamente. 4. Identifique el idioma usado. 5. Cree tablas que se transformen correctamente. 6. Asegúrese de 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 de dispositivo. 10. Utilice soluciones provisionales. 11. Utilice las tecnologías y pautas del W3C. 12. Proporcione información de contenido y presentación. 13. Proporcione mecanismos claros de navegación. 14. Asegúrese de que los documentos sean claros y simples.

El documento está formado por 14 Pautas Generales sobre el diseño accesible:

WCAGWCAG

Page 44: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Las principales barreras que encuentran los usuarios-as para acceder a los sitios web son:

• Contenidos visuales, como imágenes, sin texto alternativo. • Elementos multimedia sin subtitular o sin describir su contenido visual. • Mapas de imagen sin texto alternativo para las diferentes zonas activas del mismo. • Uso inadecuado de elementos estructurales o con fines sólo de presentación. • Tablas usadas para maquetación y difíciles de interpretar cuando se interpretan por tecnologías asistivas. • Falta de contenido alternativo para los marcos (frames), scripts, u otros elementos programados, impidiendo la navegación a usuarios-as cuyo navegador no los soporte.

BARRERAS

Page 45: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Prioridades y niveles de adecuación

Page 46: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Prioridades y niveles de adecuación

Cada punto de verificación tiene asignada una prioridad que indica cómo afecta a la accesibilidad de un sitio Web si dicho punto de verificación no se cumple. Es decir, según cuál sea su impacto en la accesibilidad.

Prioridad 1Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web.

Page 47: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Prioridad 1Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web.

Prioridad 2Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

Cada punto de verificación tiene asignada una prioridad que indica cómo afecta a la accesibilidad de un sitio Web si dicho punto de verificación no se cumple. Es decir, según cuál sea su impacto en la accesibilidad.

Prioridades y niveles de adecuación

Page 48: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Prioridad 1Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web.

Prioridad 2Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

Prioridad 3Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Satisfacer este punto de verificación mejorará la accesibilidad de los documentos Web.

Cada punto de verificación tiene asignada una prioridad que indica cómo afecta a la accesibilidad de un sitio Web si dicho punto de verificación no se cumple. Es decir, según cuál sea su impacto en la accesibilidad.

Prioridades y niveles de adecuación

Page 49: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Prioridad 1Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web.

Prioridad 2Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

Prioridad 3Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Satisfacer este punto de verificación mejorará la accesibilidad de los documentos Web.

Adecuación de nivel A (A)Se satisfacen todos los puntos de verificación de prioridad 1.

Adecuación de nivel Doble A (AA)Se satisfacen todos los puntos de verificación de prioridad 1 y 2.

Adecuación de nivel Triple A (AAA)Se satisfacen todos los puntos de verificación de prioridad 1, 2 y 3.

Prioridades y niveles de adecuación

Page 50: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Validación del código HTML o XHTML:

Validación de estilos CSS

Validación de Accesibilidad

Desarrollo de validación de un sitio web:

UAAG

WCAG

ATAG

Page 51: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Pruebas /software

Page 52: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

La primera comprobación la haremos con nuestro propio navegador.

• Visualizar la página sin hoja de estilo.•• Visualizar la página sin cargar imágenes.

• Visualizar la página sin cargar objetos programados (applets, scripts, plugin, etc.).

• Visualizar la página sin sonido.

• Visualizar la página sin colores, ni fondos.

Visualización en nuestro navegador :

Page 53: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Sin CSS estilos Con CSS estilos

Page 54: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

funciones que ofrece son:

• Redimensionar el tamaño del navegador para comprobar cómo se ve la página Web en diferentes resoluciones sin tener que modificarla en el monitor.

• Activar y desactivar las hojas de estilo.

• Buscar elementos HTML desaconsejados.

• Analizar la página mediante enlaces a varios validadores HTML o CSS.

• Reconocer, listar o resaltar las imágenes presentes o sustituirlas por su texto alternativo.

• Hacer pruebas de color, como listar los colores usados o mostrar la página en escala de grises. Esta herramienta ofrece enlaces a direcciones Web para analizar el contraste, así como a las simulaciones de Vischeck de diferentes tipos de daltonismo.

• Identificar y resaltar los elementos estructurales o semánticos de la página Web (encabezados, listas, tablas de datos, frames...). En la siguiente imagen puedes ver que permite conocer algunas propiedades y la jerarquía estructural de un elemento situando el puntero del ratón sobre él.

Accessibility Toolbar

http://www.nils.org.au/ais/web/resources/toolbar,

Software

Page 55: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Validadores TAW Software

Page 56: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Validadores HERA Software

Page 57: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

PORTABILIDAD

Page 58: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

http://www.accesible.com.ar/examinator/

Validadores Examinator Software

Page 59: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Validadores WEBXACT Software

Page 60: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Versión online: http://juicystudio.com/services/colourcontrast-es.php

http://www.visionaustralia.org.au/info.aspx?page=959

Colour Contrast Analyser Software

Page 61: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Ejemplos /código

Page 62: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

<a href="#mainmenu" title=" Acceso rapìdo, tecla 0" accesskey="0">Ir al menu</a

<a href="/index.php"><img src="images/esiLogo.gif" alt="ESI logo and link to main page" class="flotaizda" /></a>

Uso de title en los hipervínculos

Uso de alts en los hipervínculos

TITLE

ALT

Código

Page 63: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Sirve para proveer el texto de la descripción del gráfico para aquellas personas que requieran usar los lectores de pantalla. La descripción se encuentra en un archivo separado el cual es desplegado en una ventana nueva cuando el usuario elije escuchar la descripción. (Puede ser descriptores amplios de la imagen)

LONGDESCCódigo

Page 64: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

<div><img src="AfrApePopulations.jpg" width="438" height="323" border="0" alt="African GreatApe Populations“ longdesc="greatape_description.html"></div>

LONGDESCCódigo

Page 65: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Transcript del lector de pantalla JAWS

[Graphic. African great ape populations.Left paren. Press enter for long description right paren.(note: paren is short for parenthesis)Enter.New browser window.African great apes chart: text description - Microsoft Internet Explorer.Heading. Description of African great apes chart.Blank. (blank line)The chart, “African Great Apes,” is a histogram displaying estimated population sizes for all 9 known subspecies of African Great Apes. All are currently listed by the International Union for Conservation of Nature and Natural Resources left paren IUCN right paren as endangered or critically endangered. The scientific and English common names and population sizes for each species or subspecies are listed below.Blank.Table with three columns and ten rows.Summary: A three-column chart giving the names and population sizes for endangered species of African Great Apes.]

http://www.utexas.edu/research/accessibility/resource/how_to/graphic/img_w_longdesc/img_w_longdesc.mp3

Ejemplo de traducción del gráfico complejo:

Ejemplo de traducción sonora mediante síntesis de voz:

CódigoLONGDESC

Page 66: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

<ul><li class="oculto"><a href="#mainmenu" title=" Acceso rapido, tecla 0" accesskey="0">Ir al menu</a></li><li class="oculto"><a href="#content" title=“Acceso rapido, tecla 9" accesskey="9">Ir al contenido</a></li></ul>

Navegación por teclado:ACCESSKEY Código

Page 67: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

•Reducir al mínimo el uso de gráficos.

•Dar a todos los gráficos (incluso banners) que nombres comprensible y que transmita a fondo lo que el hay en el gráfico y lo que hace.

•Utilice texto ALT para describir brevemente las imágenes, y el atributo LONGDESCpara describirlos minuciosamente. Nunca difuminar las imágenes para indicar no disponibilidad.

•Cuando los gráficos contienen información útil, también proporcionar la información en textual.

•Consulte a los usuarios maneras alternativas de obtener la informacióncontenida en cualquier gráficos a los que se enfrentan.

• No reducirá una imagen de una página en su sitio y usarlo como Gráfica (o de botón) en otra página.

•Al hacer uso de gráficos, elija siempre imágenes claras y nítidas.

•Facilitan a los usuarios saltarse cualquier multimedia y Flash.

•No crear automáticamente una versión de sólo texto de su sitio.

Gráficos y multimedia

Page 68: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Ventanas pop-up, rollover texto, las nuevas ventanas, y los menús en cascada

•Evite el uso de ventanas emergentes. (pop-up), asegúrese de que no es la acción por defecto

•Evite abrir nuevas ventanas del navegador.Si lo hace abrir nuevas ventanas del navegador, siempre proporcionar una forma sencilla de obtener, Volver a la página principal del sitio principal.

•No confíe en rollover de texto para transmitir cualquier información.

•Evite el uso de los menús en cascada.

Page 69: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Enlaces y botones

•Limite el número de enlaces en una página.

•Evite pequeños botones y enlaces de texto minúsculo.

•Deje espacio entre los enlaces y botones.

•Evite el uso de imágenes como el único método para vincular a algo.

•Subrayar todos los enlaces.

•Crear vínculos dentro de texto cuando tiene sentido. Use sólo los botones adicionales cuando es necesario.

Page 70: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

PÁGINA DE ORGANIZACIÓN

•Inmediatamente confirmar el nombre de la compañía una vez se haya cargado la página principal.

•Inmediatamente confirmar lo que la página tiene una vez que ha cargado.

• No asociar la palabra página principal con el logotipo de su empresa si planea volver a utilizar el mismo gráfico en todas las páginas.

•Reducir la necesidad de desplazarse (Scrolls – nunca horizontales).

•Cuando los usuarios deben hacer una elección, tenga todas las posibilidades en la misma zona.

•Cuando los usuarios deben hacer una elección, advertir que la elección se acerca, Y decirles la cantidad de opciones que tienen.

•Con cuidado, considere la posibilidad de utilizar "Ir a Enlaces" para que los usuarios puedan saltar o enlaces

•Elementos de navegación.

•Elija una simple dirección Web de su sitio, y que mantenga URL en el campo de la dirección de la página después de la carga. (dirección lógica.)

Page 71: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

•Limite la cantidad de información que requieren formularios; recoger sólo la mínimo necesario.

•Ponga etiquetas de texto para el campo

•No utilice sólo texto rojo o amarillo, para indicar los errores.

•No confíe en sólo un asterisco (*) para indicar los campos obligatorios.

•Alinear campos en una columna vertical.

•Crear oferta estándar de campos de entrada para números de teléfono.

•En cualquier página con un solo cuadro de selección o campo de entrada, poner en el botón Ir , Lo más cerca posible de ese cuadro o campo.

•En los formularios, poner el botón "Enviar" lo más cerca posible de la última entrada de los campos.

•Ponga todas las instrucciones relativas a un campo antes de que el campo, no después de ella.

•Considerar cuidadosamente el tiempo que se agotó el tiempo de espera del formulario

Formularios y campos

Page 72: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

TEXTO

•Elija los colores del texto con un buen contraste con el fondo.

•No usar texto pequeño para el cuerpo del contenido.

•No utilizar pequeñas o sutiles líneas de texto en las categorías

• No se base en una imagen de fondo como una página de fondo para crear contraste con el texto.

•Pruebe en su sitio web, el texto, los tipos de letras y colores de la pantalla con lupas.

•Asegúrese de que es posible ampliar su sitio (cambio de tamaño tipografia).

•Escriba de manera concisa, y elimine los texto superfluos.

•Si el nombre de la compañía incluye un acrónimo, comunique a los lectores de pantalla como pronunciarlo (Software:JAW) (usted debe hacer esto para todas las abreviaturas de este tipo en todo el sitio).

•Repensar la forma de usar paréntesis y asteriscos.

Page 73: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

Búsquedas

•Ofrecer un motor de búsqueda que perdone los errores de ortografía.

•No confíe únicamente en una interfaz de navegación de su sitio de búsqueda

•No ponga la caja de búsqueda en un terreno poco probable.

•Describir claramente los resultados de la búsqueda.

Page 74: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

•Describir minuciosamente las imágenes de los productos que se vende, como si no hubiera en todas las imágenes. Ayudan a los usuarios a seguir comprando después de ejecutar la orden del formulario de llegar de nuevo a donde estaban.

•Posicionar “Añadir a la cesta de la compra” y a la compra botones cerca de los puntos de compra. Considere la posibilidad de tener dos botónes, uno hacia la parte superior de la página, y uno hacia la parte inferior de la página.

Comprar

Page 75: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

TABLES y FRAMES

•Evite el uso de las tablas de diseño estético en la página.

•Evite el uso de tablas grandes, por cualquier motivo.

• Asegúrese de que las listas alfabéticas visibles también coincide con la lista alfabética de los lectores de pantalla.

•Resumir todas las tablas. Antes de utilizar un diseño de la columna, estudie la forma en que aparecerán en las pantalla.

•Describa todos los marcos.

Page 76: ACCESIBILIDAD - Technical University of Valenciapersonales.upv.es/moimacar/master/download/accesibilidad.pdfLa accesibilidad Web se entiende desde tres áreas bien diferenciadas: •Sitios

http://www.fundamentosweb.org/2007/

http://www.fundamentosweb.org/2006/

http://www.fundamentosweb.org/2005/

http://www.happycog.com/news/category/other-engagements/http://www.w3.org/

http://usuarios.discapnet.es/disweb2000/PautaWAI/WCAG10.htm#validacion

Prof: Moisés Mañ[email protected] en Artes Visuales y Multimedia

Dpto. Escultura / Pintura -Universidad Politécnica de Valencia