WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando

Presentación del tema: "WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando"— Transcripción de la presentación:

1 WEBTEC-1205 Diseño Visual Digital 2 Profesor: Mauro Laurent Obando

2 Accesibilidad para la web
La accesibilidad en los sitios web se refiere a la práctica inclusiva de que la información presente en la página web sea accesible para las personas de todas habilidades y discapacidades Entendemos como discapacidades en los usuarios como:

3 Accesibilidad para la web
Visuales: En sus distintos grados, desde la baja visión a la ceguera total, además de problemas para distinguir colores (Daltonismo). Motrices: Dificultad o la imposibilidad de usar las manos, incluidos temblores, lentitud muscular, etc

4 Accesibilidad para la web
Auditivas: Sordera o deficiencias auditivas. Cognitivas: Dificultades de aprendizaje (dislexia, discalculia, etc) o discapacidades cognitivas que afecten a la memoria, la atención, las habilidades lógicas, etc.

5 Guías para aumentar la accesibilidad
Guía #1: Provea de alternativas equivalentes para el contenido visual y auditivo Esta guía enfatiza primariamente a proveer de texto a contenidos no-textuales con su contenido equivalente

6 Guías para aumentar la accesibilidad
Conforme al audio, si está presente en la página, las buenas prácticas de accesibilidad dictan poner subtítulos sincronizados con la pista de audio Todo enlace sensible debe estar acompañado de una etiqueta de texto

7 Guías para aumentar la accesibilidad
Guía #2:No confie solo en el color. Asegúrese que los gráficos y los textos sean visibles aún sin color. Principalmente se refiere a colores de fondo y de frente muy similares, lo cuál lleva a problemas de lectura inclusive para la buena vista

8 Guías para aumentar la accesibilidad
Guía #3: Use el lenguaje de marcado y las hojas de estilo de forma apropiada Los programas que leen las páginas web para los sordos dependen directamente de que el marcado de los archivos html y css estén bien para su correcto funcionamiento

9 Guías para aumentar la accesibilidad
Guía #4: Utilice las tablas HTML solo para presentar contenido tabular, y asegurarse de utilizar el marcado correctamente En primera instancia, evitar completamente la práctica de hacer diseños basados en tablas. Para este caso, utilizar CSS para manejar el diseño

10 Guías para aumentar la accesibilidad
Usar adecuadamente etiquetas como TH y TD

11 Guías para aumentar la accesibilidad
Guía #5: Asegúrese de que las nuevas tecnologías se transformen adecuadamente Por ejemplo, si FLASH o JAVA están presentes en la página, es necesario proveer de un enlace que contenga el contenido presentado en estas tecnologías esté en HTML

12 Guías para aumentar la accesibilidad
Guía #6: Asegúrese de que el usuario tenga control sobre contenido que dependa de una línea de tiempo Asegúrese de que el contenido que parpadee, se mueva, haga auto-scroll o tenga refrescamiento automático sea posible pausarlo

13 Guías para aumentar la accesibilidad
Guía #7: Asegúrese de que las interfaces personalizadas no sean dependientes de un solo dispositivo Es decir, si hay un componente que solo funciona con gestos del mouse, deben también funcionar con comandos de teclado para asegurar que sean compatibles con tecnologías de asistencia

14 Guías para aumentar la accesibilidad
Guía #8: Provea de mecanismos claros para la navegación Como por ejemplo, mapas de sitio visibles, barras de navegación e información de orientación para que el usuario pueda encontrar lo que anda buscando de una forma clara

15 Niveles de accesibilidad
Podemos manejar diferentes niveles de accesibilidad dependiendo del tráfico del sitio. Aunque hay reglas básicas que hay que respetar en todo momento, es evidente que aumentar la accesibilidad de un sitio incrementa el mantenimiento que hay que darle un sitio

16 Niveles de accesibilidad
Nivel 1 (Indispensable): Uso correcto de HTML y CSS para el diseño de la página Evitar uso de tablas cuando el contenido no es tabular Poner descripciones alternativas a contenido no textual Uso correcto de contrastes entre texto y fondo

17 Niveles de accesibilidad
Nivel 2 (Deseable): Uso de mapas de sitio y navegación clara, breadcrumbs y guías de navegación Validación de archivos HTML Y CSS con resultados positivos al 100%

18 Niveles de accesibilidad
Nivel 3 (Alto tráfico > 1000 visitas): Uso de interfaces alternativas a tecnologías que no sean HTML Control del usuario sobre contenido que dependa de una línea de tiempo Inclusiones de controles para manejar el tamaño de la fuente y control de contraste fondo/texto

19