Progresive Enhancement

Accesibilidad en proyectos Flash

1. Flash Professional 8 y la accesibilidad Desde la primera versión MX, Flash incluye un panel de accesibilidad • Texto alternativo o Alt de las imágenes • Descripciones textuales o Describe a través del lector de pantalla lo que ocurre en la película • Atajos de teclado o control sencillo de la aplicación a las personas con movilidad reducida • Orden de tabulación. o control sencillo de la aplicación a las personas con movilidad reducida

Requerimientos • lector de pantalla (sólo con JAWS o Window-Eyes) • Internet Explorer con al menos la versión 7 del reproductor Flash • Windows o En MacOS las funciones son limitadas o En Linux ni se sabe (Adobe no ofrece documentación al respecto) o En Plataformas móviles…je,je.

Requerimientos tecnológicos = Inaccesibilidad contextual o tecnológica

Recomendaciones SIDAR (Seminario iberoamericano sobre discapacidad y accesibilidad en la red) • Evitar el movimiento constante o Esto crea distracciones y dificulta la lectura a muchas personas con determinados tipos de deficiencia cognitiva o Permita que el usuario tenga el control del movimiento, añadiendo controles que permitan pararlo •

Acceso por teclado o Añada atajos de teclado a los elementos más importantes

o Hay que evitar dar funcionalidad de botón a otro tipo de elemento o el lector de pantalla no lo reconocerá • Exponer las estructuras complejas y el estado de los controles o Para que los usuarios de lectores de pantalla conozcan la interfaz o forma de funcionamiento de la película o Los cambios de estado (botones por ejemplo) deben ser perceptibles

Extraído de la guía de desarrollo de aplicaciones accesibles con PDF y Flash desarrollada por Emmanuelle Gutiérrez y Restrepo y Charles McCathieNevile.

Nos estamos dejando algo atrás • La semántica. • El reconocimiento por parte de los buscadores. • Nos cargamos nuestro posicionamiento.

Si pensamos crear algo más que un banner con una finalidad estrictamente estética tendremos que recurrir a la creación de contenido alternativo.

2. progressive enhancement* * Mejora progresiva

¿Qué es? • Metodología de desarrollo en Adobe Flash que procura contenido alternativo en marcado estándar para sistemas sin el plugin de Adobe. • Desarrollar un proyecto web teniendo varios escenarios y usuarios en mente.

¿Quién esta detrás? Bobby van der Sluis, miembro de Refunk, empresa holandesa de desarrollo web.

¿En qué está basado? • XHTML+CSS+JS • SWF • UFO

Sabemos que son XHTML, CSS, JS y SWF, pero… ¿Qué puñetas es UFO? Unobtrusive Flash Objects (UFO) v3.20 UFO es un Script del DOM que detecta el plug-in e inserta elementos flash.

• Está diseñado para cumplir los estándares de la W3C. Usa JS no intrusito • Favorece el reconocimiento por parte de los motores de búsqueda (Mejora del posicionamiento) • UFO es gratis, con licensia CC-GNU LGPL y Open Source Flash Project • Preferiblemente usa métodos del DOM de la W3C sobre otros métodos propietarios, siempre que el navegador lo permita

El responsable del DOM es el World Wide Web Consortium (W3C). Es una API para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (Javascript).

¿Cómo lo hacemos?

Los elementos que componen este sistema de desarrollo son:

• Versión XHTML que incluye contenido optimizado para los web crawlers navegadores sin el plugin. • Hojas de estilo para generar la presentación de la versión básica. o Navegadores sin plugin pero compatibles con CSS. • JavaScript para añadir comportamientos (opcional). • Contenidos en Flash. o Para los navegadores que lo soporten.

Metodología de Refunk 1. Creación de contenidos en Flash. 2. Hacer una versión en correcto lenguaje de marcado. 3. Añadir la semática apropiada. 4. Colocar el código en un orden lógico. a. Tener en cuenta como lo van a ver los usuarios de la versión básica. 5. Crear CSS y marcado posicional. 6. Crear JavaScript y marcado conductual.

Ejemplo http://demo.refunk.com/adobe/devnet/progressive_enhancement/example3/

Marcado

Vusualización de la versión básica

º

Versión con CSS

Versión Flash

• Guía de desarrollo de aplicaciones accesibles con PDF y Flash de Emmanuelle Gutiérrez y Restrepo y Charles McCathieNevile. o http://www.sidar.org/acti/jorna/050224/4/index.html • Web corporativa de Refunk y blog personal de Bobby van der Luis. o http://www.refunk.com/blog/ o http://www.bobbyvandersluis.com/ o http://demo.refunk.com/adobe/devnet/progressive_enhancement/example3/ • Adobe Flash Developers Center o Progresive Enhancement http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html o Accesibility best practices http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html