Este documento resume los principales conceptos de accesibilidad web, incluyendo las pautas WCAG 2.0, los componentes de la accesibilidad, cómo evaluar sitios web para accesibilidad y simuladores de lector de pantalla. El objetivo final es que los sitios web sean accesibles para todos los usuarios, independientemente de discapacidades.
2010
Segundo Seminario RES NON VERBA (HECHOS, NO PALABRAS):
”Accesibilidad para Todos, nuevos retos en el Siglo XXI”
Red Especial Uruguaya, UNIT
Presentacion: Accesibilidad Web en Blogs
-------------------
Simposio Internacional FIDA-SICA – Miradas, un solo propósito
Fundación FREE. Universidad Católica. Unesco.
Presentacióna: “Accesibilidad Web en Blogs”
http://capacidad.es/fida2010sica/
2010
Segundo Seminario RES NON VERBA (HECHOS, NO PALABRAS):
”Accesibilidad para Todos, nuevos retos en el Siglo XXI”
Red Especial Uruguaya, UNIT
Presentacion: Accesibilidad Web en Blogs
-------------------
Simposio Internacional FIDA-SICA – Miradas, un solo propósito
Fundación FREE. Universidad Católica. Unesco.
Presentacióna: “Accesibilidad Web en Blogs”
http://capacidad.es/fida2010sica/
Documento elaborado por el Observatorio para la Calidad de la Formación en Salud para ayudar a los usuarios de la aplicación GPDI en la propuesta de acciones formativas y de mejora al Plan de desarrollo individual, desde el perfil de los responsables de unidad.
Documento elaborado por el Observatorio para la Calidad de la Formación en Salud para ayudar a los usuarios de la aplicación GPDI en la propuesta de acciones formativas y de mejora al Plan de desarrollo individual, desde el perfil de los responsables de unidad.
El e-learninig inclusivo, debe tener un diseño centrado en el usuario, desde esta investigación se proponen cambios profundos no solo de su plataforma sino además de las estrategias de abordaje al conocimiento.
Pruebas de accesibilidad ¿por dónde empezar?Lisandra Armas
En esta presentación vamos a estar conociendo cómo todos los integrantes de un equipo de proyecto podemos comenzar desde nuestro rol a poner en práctica las pruebas de accesibilidad a través de varias técnicas de filtrado, herramientas de evaluación automática y pruebas con usuarios. Vamos a descubrir que para comenzar con nuestras evaluaciones de accesibilidad no necesitamos de un laboratorio especializado ni de muchos recursos, en el transcurso de la charla iremos descubriendo que muchas de las pruebas son bien sencillas y que con mucho amor y dedicación podemos lograr que nuestras aplicaciones sean accesibles para tod@s.
Espero les guste este tema ya que es muy importante saber sobre las computadoras ya que en un futuro las maquinas seran las que usemos mas a diario Fin.
Accesibilidad Web (Una introducción de 3 horas)tayzee
Clase de Accesibilidad como parte del Taller de Desarrollo de Portales realizado por AGESIC en 2010.
Original publicado en: www.agesic.gub.uy
http://www.agesic.gub.uy/innovaportal/file/1189/1/Clase2_Accesibilidad.pdf
Pruebas de usabilidad desde la mirada del testing - Pia TobarPia Tobar
Se menciona ¿Qué es Usabilidad? y sus beneficios. Pero principalmente se mencionan 2 técnicas de usabilidad que se pueden involucrar en las pruebas, como la Evaluación Heurística y Las Pruebas con Usuarios.
Curso Especializado en Metodologías de Usabilidad y Accesibilidad, organizado por Ainda.info en colaboración con el Instituto Canario de Telecomunicaciones (IT7) y el Gobierno de Canarias. Módulo de Accesibilidad Web. Mayo de 2006
DIA 1 - SESIÓN 1.2: COMPONENTES DE LA ACCESIBILIDAD WEB
Dirigido a: Gestores y los tomadores de decisión, autores de contenido web y diseñadores visuales, desarrolladores de sitios web y programadores de aplicaciones y otras audiencias clave
Objetivos de aprendizaje:
- Explicar los componentes de la accesibilidad web, incluidas las herramientas de creación y los agentes de usuario
- Explicar el papel de las Directrices W3C / WAI en la provisión de una norma técnica para la accesibilidad
- Definir los conceptos básicos de WCAG 2.0, sus principios y directrices de organización
- Describir la importancia de las herramientas de creación que soportan la producción de contenido accesible
- Describir los beneficios de involucrar a personas con discapacidades en cualquier desarrollo web
Resumen:
Sesión experiencial práctica que muestra el uso de estrategias adaptativas y tecnologías de asistencia
Introducción a los componentes de la accesibilidad web
Introducción a WCAG 2.0, sus cuatro principios básicos de diseño y directrices
Beneficios de WCAG 2.0
Dia 1 - SESIÓN 1:
INTRODUCCIÓN A LA ACCESIBILIDAD WEB
Dirigido a: Gestores y los tomadores de decisión, autores de contenido web y diseñadores visuales, desarrolladores de sitios web y programadores de aplicaciones y otras audiencias clave
Objetivos de aprendizaje:
- Explicar la importancia de la accesibilidad web para personas con discapacidad y las personas mayores
- Enumerar las barreras comunes que experimentan las personas con discapacidad y las personas mayores
- Describir los beneficios de la accesibilidad web para personas con y sin discapacidad
- Entienden que el W3C / WAI Directrices son el estándar internacional para la accesibilidad web
Resumen:
Descripción general de la accesibilidad web, incluyendo la accesibilidad web es lo que y por qué es importante
Vídeos que muestran las personas con discapacidad utilizando la Web
Información sobre el envejecimiento de la población y las deficiencias relacionadas con el envejecimiento
La legislación pertinente u otras políticas aplicables a las organizaciones participantes
Traspaso de beneficios del diseño universal para personas con y sin discapacidad
beneficios comerciales de la accesibilidad web, incluyendo algunos estudios de casos
experiencias que se solapan de las personas con discapacidad y los usuarios móviles
Introducción a las directrices WAI como el estándar internacional para hacer la Web accesible
5. Accesibilidad Web
La posibilidad que recursos web
(información y servicios) puedan ser
utilizados de forma satisfactoria por el
mayor número posible de personas,
independientemente de las limitaciones
personales o de limitaciones derivadas de
su entorno, sean éstas de carácter físico,
mental, educativo, familiar o socio-
económico.
8. Principios, pautas y criterios de
conformidad de WCAG 2.0
Niveles de Accesibilidad
4
Principios
12
Pautas
61
Criterios de
conformidad
Conceptos
fundamentales
Objetivos
Básicos
Requisitos
concretos a cumplir,
testeables
• Perceptible
• Operable
• Comprensible
• Robusto
9. Documentos complementarios
WCAG 2.0
Pautas de accesibilidad de
contenido web
Como Cumplir Técnicas Comprender
How to meet
WCAG2.0
Techniques for
WCAG 2.0
Understanding
WCAG2.0
Ejemplo 1
Pautas online
10. ¿Cómo profundizo después de esta clase?
• Guías Agesic:
http://www.agesic.gub.uy/
• Pautas WCAG 2.0:
http://www.codexexempla.org/traducciones/pautas-accesibilidad-
contenido-web-2.0.htm
• Mapa conceptual:
http://www.triplea.es/blog/wp-content/uploads/2009/04/mapa-wcag2.pdf
• Olga carreras:
http://olgacarreras.blogspot.com/
• Curso de Introducción a la Accesibilidad
http://www.astrolabio.com.co/clientes/cintel/index.html
13. Algunas herramientas para evaluar
eXaminator:
http://examinator.ws
TAW para WCAG2.0:
http://www.tawdis.net
AccessMonitor (portugués):
http://www.acesso.umic.pt/accessmonitor/
Ejercicio 1
http://www.mides.gub.uy/
14. Si nos dice: Imágenes sin alternativa textual.
1.1 Alternativas textuales
Brindar descripciones alternativas cortas para imágenes.
Perceptible | Operable | Distinguible | Robusto
alt = “Mafalda escuchando música
en la radio”
Además: Probar que
sean correctos.
15. ¿Qué descripción le pondría a cada imagen?
Ítem 1
Ítem 2
1 2 3
4 5 6
Ejercicio 2
16. Una posible solución…
Ítem 1
Ítem 2
1 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
alt = “3 años de
garantía”
alt= "Introduzca las
letras de la imagen"alt = “”
Ejercicio 2
17. 2/09/1
Permitir aumentar hasta un
200% el texto
• sin desarmar la estructura
• sin scroll horizontal para
leer una línea de texto.
Si nos dice: Se usan medidas absolutas
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
Se deben usar medidas relativas (% y em) para elementos y
fuentes. Ejercicio 3
http://www.boe.es/
Además: Probar que no
desborde al ampliar.
18. 2/09/1
Si dice: Texto justificado / Interlineado
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
•El texto no debe estar justificado.
•Colocar interlineado de, al menos, un espacio y medio.
19. <label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name="busqueda" type="text"
title="Término para la búsqueda" />
input type="submit" value="Buscar" />
Ejemplo:
Si dice: Formularios
1.1 Alternativas textuales
Controles de formularios.
Perceptible | Operable | Distinguible | Robusto
20. Si dice: No se usan encabezados.
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Usar encabezados.
Además: Probar que
sean coherentes
21. Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Agregar un enlace para saltar al contenido.
Ejercicio 4
http://ct.ctic.es/
Además: Probar que
funcionen
22. Los títulos deben:
•Identificar el tema
•Entenderse fuera de contexto
•Ser cortos
•Únicos dentro del sitio
Si dice: Títulos de las páginas
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Titular las páginas.
Además: Probar que sea
adecuado y único
23. Si dice: Manejadores de evento no redundantes
• Usar enlaces y controles de formulario estándar de HTML.
• Usar manejadores de evento que puedan lanzarse mediante
teclado.
onmousedown con onkeydown
onmouseup con onkeyup
onmouseover con onfocus
onmouseout con onblur
• Usar onclick.
• Comprobar que no existen trampas para el foco del teclado.
Perceptible | Operable | Distinguible | Robusto
2.1. Accesible por teclado
Todas las funcionalidades deben ser accesibles por teclado.
24. ¿Y si no puedes usar el mouse y/o la mano derecha
(o izquierda) …
•Por un accidente
•Porque tener una mano ocupada
•Porque se rompió el mouse
…y necesitaras el teléfono del Departamento de RRHH de la
AIN? http://www.ain.gub.uy/nosotros/nosotros_edificio.html
El teclado también existe
Ejercicio 5
25. Si dice: Validación del código (X)HTML / CSS
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
Perceptible | Operable | Distinguible | Robusto
4.1. Compatible
Utilizar código estándar (X)HTML y CSS.
26. Como validar los estándares
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
• Validador HTML [http://validator.w3.org/]
• Validador CSS [http://jigsaw.w3.org/css-validator/]
27. Si dice: Contraste menor a 3:1
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
Debe existir un contraste suficiente entre color de fondo y de letra.
Además: Probar textos
más pequeños
29. Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
Debe existir un contraste suficiente entre
color de fondo y de letra.
Herramienta para verificar contraste Simulador
http://www.paciellogoup.com/resources/contrast-analyser.html
Ejercicio 6
http://www.pas.edu.uy/
30. Cual es un enlace?
Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
No usar el color como único medio de transmitir información.
Por ejemplo:
• “Los campos marcados en
rojo son obligatorios.”
• “Por favor revisa los campos
obligatorios marcados en
rojo.”
31. Indicar situación actual dentro de las barras de navegación
Miga de pan
Navegación
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Ejemplo 2
www.cmat.edu.uy
40. Cumplir las pautas no es lo mismo que ser
accesible
Un portal web...
• Puede cumplir con todas las pautas
• Puede pasar todos los test automáticos
• Puede parecer accesible
Sin embargo ...
• Puede seguir teniendo barreras de acceso
Entonces...
• El objetivo no es cumplir pautas, sino ser accesible
• Las pautas son herramientas para llegar a la accesibilidad
• Información de contacto disponible para que el usuario reporte barreas
de acceso.
41. Navegar con lector de pantalla
1. Activar NVDA
2. Navegar usando NVDA
• http://www.sanidadpolicial.gub.uy/
• http://www.fundacionctic.es/
3. Ahora escuchar el sitio de sus organismos
Ejercicio 7