Evaluación de accesibilidad web en contenidos en Flash

Mario Carvajal Máster en Tecnologías Accesibles para la Sociedad de la Información, UOC, Barcelona (España)

Junio09

Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia

2 Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia

Introducción. La Web desde hace años ha dejado de ser solo texto e imágenes. Gracias a la posibilidad de incluir elementos multimediales, una página web enriquece la experiencia del usuario, a través de interfaces animadas y, sobre todo, a la posibilidad de incluir contenidos inimaginables en la génesis de Internet: audio y video.

En la actualidad sería difícil pensar una Web estos dos elementos. ¿Cómo serían nuestros días sin YouTube? ¿Qué tal sin Last.Fm? ¿Sin Radio.Blog?

Sin embargo, estos elementos multimediales requieren de una tecnología no estándar, aunque más popular que Blanca Nieves en la casa de los enanos: se llama Flash.

Las personas poco a poco la han ido reconociendo. Nada raro escuchar, —como diseñador— que un cliente me diga: “Mira, Mario, yo quiero mi sitio en Flash… Que se mueva el menú… Yo no quiero una página estática, sino dinámica, interactiva. Que haga pim, pam, pum, con música de fondo… Ah, y no se te olvide: que el logo dé vueltas como un trompo”.

Cuando escucho tanta ingenuidad reunida detrás de una corbata, siento ganas de lanzarme del piso 33 sin paracaídas. Pero respiro profundo y entiendo que la inmadurez de quienes toman decisiones en Web, hace parte de un proceso lógico de evolución de la profesión. Así que tomo el ascensor y bajo de las nubes al cándido cliente, argumentándole las razones para no cometer el suicidio de hacer una web totalmente en Flash. Ah, y de —¡por el amor de Dios!— no convertir en trompo su imagen corporativa.

Esta posición de resistencia frente al Flash, hace parte de la forma en que entiendo debe usarse: como un complemento. Eso es. Ni siquiera la casa Adobe (productora del software Flash) tiene su sitio completamente realizado en esta tecnología. Por algo será.

Se trata entonces de saber en qué momento usarlo. Es más: se trata de hacerlo lo más accesible que se pueda.

¿Flash accesible? Sí, claro. Afortunadamente en las versiones más recientes es posible añadir accesibilidad al contenido de un objeto en Flash. Es más: ¡un lector de pantalla puede leer el contenido! ¡Y se puede navegar sin ratón, gracias a la tecla TAB!

Claro, siempre y cuando se tengan en cuenta algunas buenas prácticas, muy sencillas de llevar a cabo.

En el presente documento analizaré dos objetos de Flash que se encuentran en la página de inicio en español del Portal Oficial de Turismo de Colombia (www.colombia.travel).

Para ello, usaré un cuestionario que a manera de puntos de verificación, establezca el cumplimiento o no, de las directrices de accesibilidad WCAG 1.0.

Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia 3

Objetos de Flash analizados. En la página de inicio en español, hemos seleccionado los dos únicos objetos que hay en Flash: un mapa de Colombia con los destinos turísticos más importantes y un video de YouTube con la campaña “Colombia, el riesgo es que te quieras quedar”.


Puntos de verificación. Equivalentes textuales.

• Punto 1: Para todo contenido no textual se proporcione un equivalente textual. • Técnica: Visual comparando con información de Jaws.

El mapa, ubicado en la columna izquierda de la interfaz, demarca claramente los límites políticos del territorio colombiano y dentro de él resalta los trece destinos que se promueven a turistas extranjeros. Veamos:

Ilustración 1: Pantalla del Portal Oficial de Turismo de Colombia (www.colombia.travel).

Por su parte, el video se encuentra ubicado también en la columna izquierda. Se trata de un video alojado en YouTube, que se ha incrustado según el método Satay y no con el código que de forma predeterminada sugiere el propio YouTube, pues este contiene una etiqueta no estándar y que produce errores de validación: <embed>.


Ilustración 2: Video de la Campaña "El Riesgo", traído directamente de YouTube.

Al utilizar esta técnica de insertado de objetos en Flash, la validación de esta página de inicio da cero errores, usando un marcado estándar.

Ambos objetos de Flash tienen contenidos no textuales. El mapa, por ejemplo, tiene marcados los destinos a través de iconos rojos. El video, tiene audio como banda sonora. Veamos cómo Jaws verbaliza en cada caso:

”Tab San Andrés botón. Tab Providencia y Santa Catalina botón. Tab Santa Marta botón. Tab Barranquilla botón. Tab Cartagena botón. Tab Nuquí botón. Tab Triángulo del Café botón…”

Como podemos observar de la verbalización anterior, para el mapa, todo el contenido no textual tiene su respectivo equivalente textual, lo que permite un buen nivel de accesibilidad.

En el caso del video, toda la banda sonora se encuentra subtitulada gracias a la nueva función de subtitulación nativa de YouTube. Esta es una buena práctica pues el texto no está embebido en la película, sino que es independiente, a pesar de estar absolutamente sincronizado. Con esto, se


aprovechan las ventajas de la traducción automática que YouTube proporciona de forma gratuita.

Ilustración 3: La banda sonora está subtitulada gracias a la herramienta de YouTube.

De igual forma, constatamos que algunos elementos no textuales, Jaws puede acceder leyendo; desafortunadamente esta interfaz tiene combinaciones de textos en inglés y en español, lo que en mi concepto degrada la accesibilidad del video. Veamos la verbalización de Jaws, leyendo la interfaz:

“Tab Play barra pause botón. Tab 17 botón. Tab Volume barra mute botón. Tab Widescreen botón”.

Descripciones en imágenes complejas. • Punto 2: Para imágenes complejas, se proporciona una descripción. • Técnica: Visual comparando con información de Jaws.

Podría considerarse el mapa de Colombia como una imagen compleja. Si así fuera, el objeto presenta un contenido alternativo muy interesante, que permite que alguien que no tenga instalado Flash, pueda acceder a los mismos contenidos que tiene el mapa. Veamos el código usado:

<object width="270" height="270" data="/es/images/stories/animaciones/colombia.swf" type="application/x-shockwave-flash"> <param value="high" name="quality"/>


<param value="false" name="menu"/> <param value="true" name="allowFullScreen"/> <param value="/es/images/stories/animaciones/colombia.swf" name="movie"/> <p>Mapa de Colombia con destinos a visitar:</p> <ul> <li><a href="/es/turista-internacional/destino/amazonas">Amazonas</a></li> <li><a href="/es/turista-internacional/destino/barranquilla">Barranquilla</a></li> <li><a href="/es/turista-internacional/destino/bogota">Bogotá</a></li> <li><a href="/es/turista-internacional/destino/cali-y-valle-del-cauca">Cali y Valle del Cauca</a></li> <li><a href="/es/turista-internacional/destino/cartagena">Cartagena</a></li> <li><a href="/es/turista-internacional/destino/medellin">Medellín</a></li> <li><a href="/es/turista-internacional/destino/nuqui">Nuquí</a></li> <li><a href="/es/turista-internacional/destino/san-andres-y-providencia">San Andrés y Providencia</a></li> <li><a href="/es/turista-internacional/destino/santa-marta">Santa Marta</a></li> <li><a href="/es/turista-internacional/destino/santander">Santander</a></li> <li><a href="/es/turista-internacional/destino/triangulo-del-cafe">Triángulo del Café</a></li> </ul> </object> Nótese cómo se ha usado un contenido alternativo, gracias al método de inserción de Flash utilizado. Una simple lista en HTML suple el mismo contenido que la interactividad de la película.

Secuencia de lectura consistente. • Punto 3: La secuencia de lectura con dispositivo de voz o con teclado debe ser

consistente con la distribución visual en pantalla. • Técnica: Lectura con JAWS y visual.

Al no ser un objeto de Flash que represente una interfaz compleja, ambos objetos no presentan ningún problema de secuencia cuando se accede con teclado o lector de pantalla.

En el caso del mapa, tiene 13 elementos que al ser navegados con el teclado van apareciendo como un listado sencillo, sin orden específico (en HTML sería perfectamente un <ul>). Este orden noto que tiene una lógica espacial “arriba – abajo” e “izquierda – derecha”. Por eso el primer destino que aparece, después de ingresar al objeto, es San Andrés, porque se encuentra más cerca al extremo superior izquierdo. Mientras que el último es Amazonas, que se encuentra en la parte inferior derecha. Veamos:


Ilustración 4: El primer elemento que sale en foco es la Isla de San Andrés, pues se encuentra más cerca de la parte superior izquierda, mientras que el último es Amazonas que está en la parte inferior derecha.

Por otra parte, el video de la campaña “Colombia, el riesgo es que te quieras quedar”, tiene también un orden lógico de secuencia de los elementos de la interfaz, igual al mapa: arriba – abajo, izquierda – derrecha. Veamos esa secuencia:


Ilustración 5: Secuencia de lectura en Jaws de cada uno de los elementos que conforman la interfaz del video de YouTube.

Al hacer foco mediante el comando de Jaws de la tecla “O”, así lo interpreta: “Inicio de animación Flash”. Luego, con la tecla “TAB” dice: “Tab URL botón”. Considero que debería estar etiquetado de otra forma, algo como “Tab Presione enter para comenzar video”, pues esta es la instrucción más cercana a lo que en realidad sucede.

Esta misma situación sucede con varios elementos de interfaz que al parecer no están correctamente etiquetados, por ejemplo “Tab seis botón”, en realidad debería ser “Tab presione enter para comenzar video”. O “Tab dieciséis botón”, debería ser algo como “ir al sitio web de YouTube”.

En todo caso, alejándonos del problema de rotulación, creo que la secuencia es lógica.


Orden lógico de navegación. • Punto 4: En caso de necesidad se cree un orden lógico para navegar con el teclado a

través de vínculos, controles de formulario y objetos. • Técnica: Comprobación visual, navegando con teclado.

Según el punto anterior, no hay necesidad de alterar el orden lógico de navegación de los vínculos y los elementos de teclado.

Atajos de teclado. • Punto 5: Proporcionar atajos de teclado para funciones de uso frecuente y

documentarlos claramente. • Técnica: Detección Visual del control y con Jaws.

El mapa de Colombia de www.colombia.travel no tiene atajos de teclado, lógicamente porque su contenido es un listado de 13 elementos, que de asignársele atajo de teclado se sumaría a los ya atajos de teclado que tiene el menú principal. Veamos:

• ¿A dónde ir? (Alt + 1) • ¿Qué hacer? (Alt + 2) • Colombia (Alt + 3) • Información práctica (Alt + 4) • Multimedia (Alt + 5) • Comunidad (Alt + 6)

Ilustración 6: Menú principal de Colombia.Travel, compuesto por seis elementos, todos tienen asignado un atajo de teclado.

¿Qué pasaría entonces si en el mapa de Colombia existieran más atajos de teclado? Por hacer más, simplemente se haría menos. Se llegaría a tal nivel de confusión que difícilmente un usuario se aprendería 19 atajos.

Por el lado del video de YouTube, cuando está en foco, es posible manejar el “Play” y el “Pause” a través de la barra espaciadora. Si esto se puede considerar como un atajo de teclado, sería entonces el único que encontré.


Subtitulación sincronizada de audio narrativo. • Punto 6: Para todo contenido narrativo sonoro, existan subtítulos sincronizados. • Técnica: Visual.

El mapa de Colombia no tiene ningún tipo de audio. Pero el video, por supuesto sí que lo tiene. Y como buena práctica en accesibilidad, lo tiene no embebido en el propio video, sino usando la nueva herramienta de YouTube, que permite generar los subtítulos con “Caption Tube”1. Esta herramienta facilita la labor de generación de subtítulos y sincronización exacta con el video. Luego, es posible exportarla mediante el formato SUB, que es el que acepta YouTube.

Una vez subido, es posible hacer traducciones manuales (en este momento el video solo tiene versión de subtítulos en español, tal vez porque el video en inglés tiene un audio diferente). Pero también es posible que las traducciones se realicen automáticamente gracias al traductor de Google.

Ilustración 7: Traducción automática al chino han simplificado.

1 Caption Tube es una herramienta gratuita y que se puede usar para subtitular videos en la siguiente dirección: http://captiontube.appspot.com/


Ilustración 8: Traducción automática al árabe.

Ilustración 9: Traducción automática al griego.

En cierta forma, tener los subtítulos bajo esta herramienta, que permite una traducción (aunque imperfecta), potencia la accesibilidad de un sitio, para aquellas personas que pudieran tener una


barrera lingüística, al intentar acceder a la información, además de aquellos usuarios con deficiencias auditivas, de comprensión o simplemente aquellos que se encuentren en condiciones de discapacidad ambiental, por estar en un ambiente inapropiado (ruidoso como un aeropuerto o silencioso como una biblioteca).

Pausa, repeticiones sin fin y equivalentes textuales. • Punto 7: Toda animación se detenga tras un intervalo razonable. La película no

contenga ninguna repetición sin fin. Alternativamente se oculta la animación de las ayudas técnicas y se proporciona un equivalente textual.

• Técnica: Lectura con JAWS.

El mapa no tiene animaciones ni loops. El video cuando termina de reproducirse, no se repite, sin embargo tiene la opción de que el usuario determine si desea verlo de nuevo.

Ilustración 10: El usuario puede repetir voluntariamente el video.

Detener movimiento. • Punto 8: Proporcione una manera de detener el movimiento. • Técnica: Visual.

Como mencionamos en el punto anterior, el mapa de Colombia no tiene ningún tipo de animación, ni movimiento. El video sí. Para ello existen controles a los que se puede acceder a través de la tecla “TAB”: Play / Pause y Línea de Tiempo.

Sin embargo, también es posible detener una película a través de la barra espaciadora, la que se alterna no solo para detener (o pausar) sino también para reiniciar.


Flash sin animación. • Punto 9: En el contexto de una página Web, la animación no debe contener animación

hasta el punto de distraer el usuario con discapacidad cognitiva, a menos que se proporcione una manera de detener la misma.

• Técnica: Visual.

Este punto no aplica a ninguno de los dos casos, pues tanto el mapa como el video, en el contexto de la página, cuando cargan, lo hacen sin iniciar animación de forma automática. Por lo tanto no genera ningún problema de distracción para los usuarios.

Animaciones en botones. • Punto 10: No se emplean animaciones en botones. • Técnica: Visual.

En el mapa no se utilizan animaciones en botones. Sin embargo, en el video, la interfaz de YouTube tiene una ligera animación en el botón “Widescreen”, en la parte inferior derecha.

Ilustración 11: Botón animado.

Después de hacer las pruebas con Jaws, esta animación no interfiere en el correcto funcionamiento de la interfaz.

Animaciones cortas y animaciones extensas. • Punto 11: Los contenidos animados serán de corta duración. Las animaciones largas se

dividirán en secuencias activadas por el usuario mediante un botón [siguiente]. • Técnica: Visual.


En el mapa no existe el concepto de animación secuencial. En el video tampoco. Sin embargo, al finalizar la reproducción del video, YouTube permite continuar reproduciendo videos relacionados que aparecen como si fueran miniaturas.

En cierta forma, aunque no es este el caso, se podría dividir una conferencia de una hora, en seis partes de 10 minutos, con lo que se le da al usuario mayor control sobre la carga del streamming.

Ilustración 12: Miniaturas de videos relacionados.

Alternativas equivalentes al audio. • Punto 12: Para toda presentación multimedia tempo dependiente (por ejemplo, una

película o animación) sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación.


El mapa no tiene audio. El video está totalmente subtitulado y sincronizado, tal y como se explicó en el punto 6.

Activación de elementos mediante teclado. • Punto 13: Todos los elementos activos sean accesibles y se puedan activar mediante el

teclado. • Técnica: Detección visual de los elementos; con teclado.

Cuando un usuario pasa el cursor por encima de cualquiera de los 13 destinos, la película en Flash permite el despliegue de un recuadro con el nombre del lugar. Este recurso fue usado por el diseñador, por la dificultad que representaría involucrar todos los nombres en un área tan pequeña. Veamos:


Ilustración 13: Cuando el usuario utiliza el ratón, puede acceder a información pasando el cursor encima de cada punto. Aparece entonces el nombre de la ciudad y una foto decorativa, a través de una ventana emergente.

¿Qué pasa entonces con esta información para una persona que no tenga ratón? En el caso concreto de este mapa, sigue siendo accesible. Lo comprobamos a en Windows con Internet Explorer 6, además en Leopard (Mac)2 con Safari 4 y Firefox 3: Al ingresar al objeto, podemos usar la tecla “TAB” y logramos navegar entre los diferentes destinos, tal y como si estuviéramos usando el ratón. Al navegar con el teclado dentro de la película, se resalta en amarillo el foco. Veamos:

Ilustración 14: El foco se resalta en amarillo.

2 Es importante señalar que en Leopard el usuario debe configurar las preferencias del sistema y de cada navegador para que sea posible desplazarse con la tecla TAB. Una completa información sobre cómo hacerlo, se encuentra en: http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/


Etiquetas de control de fomulario. • Punto 14: Se colocan las etiquetas de los controles de formularios correctamente (al

lado, encima). • Técnica: Visual; con JAWS.

En el caso de los dos objetos evaluados, no existe formulario, por lo que el punto de comprobación no aplica en ningún caso.

Equivalente textual en control de formulario. • Punto 16: Todo control de formulario tiene un equivalente textual cuando éste sea

necesario. Por ejemplo, cuando el texto se encuentre alejado del control, o se emplea un texto adicional compartido entre diferentes controles (similar al FIELDSET en HTML).

• Técnica: Visual; con JAWS.

No aplica a ninguno de los dos objetos de estudio.

Información transmitida a través de color. • Punto 17: Asegúrese de que toda la información transmitida a través de los colores

también esté disponible sin color, por ejemplo mediante el contexto. • Técnica: Visual.

Ni en el mapa, ni en el video hay información transmitida a través de color, como el típico caso de “haga clic en el botón verde”. Por lo tanto, este punto no aplica.

Color de fondo y primer plano. • Punto 18: Asegúrese de que las combinaciones de los colores de fondo y primer plano

tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color.


Gracias a la herramienta Coulor Contrast Analyzer he podido verificar que las combinaciones de color de fondo y primer plano son lo suficientemente contrastadas como para no generar problemas de percepción en personas con problemas visuales. Veamos…

En el mapa de Colombia, la letra usada es blanca sobre un fondo que aunque gris, genera un tipo de transparencia sobre el fondo, que es de color verde. De todas formas, esta combinación ha superado todas las pruebas (según las directrices WCAG 2.0, que son las que evalúa el Colour Contrast Analyzer), tanto para la Prioridad 2, como para la 3.


Ilustración 15: Herramienta Colour Contrast Analyzer, para verificación de cumplimiento de suficiente contraste en brillo y en color.

En el caso del video, la letra que analizamos fue la del título y los subtítulos. Al tener la letra en blanco sobre fondo negro, el contraste es totalmente válido. De todas formas, usamos Colour Contrast Analyzer y el resultado es este:

Ilustración 16: Contraste de color y brillo para la letra usada en el video.

Destellos de pantalla. • Punto 19: Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar

destellos en la pantalla. • Técnica: Visual.

En ninguno de los dos objetos hay destellos de pantalla.


Parpadeo de contenido. • Punto 20: Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo

del contenido (por ejemplo, cambio de presentación en periodos regulares, así como el encendido y apagado).


No existen elementos en los dos objetos estudiados, que presenten parpadeo de contenido. Este punto no aplica.

Actualizaciones periódicas de animaciones. • Punto 21: Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener

las actualizaciones, no cree páginas que se actualicen automáticamente de forma periódica. Que el Flash no realice un “refresh” de la página.


Ninguno de estos objetos de Flash genera actualización automática de la página web.

Objetivo de cada vínculo. • Punto 22: Identifique claramente el objetivo de cada vínculo. • Técnica: Visual.

Dentro del contexto de la página de estudio (página principal del Portal Oficial de Turismo de Colombia), los vínculos establecidos en el mapa considero son lo suficientemente ilustrativos: San Andrés, Providencia, Cartagena, Santa Marta, Barranquilla, Cali, Amazonas, Medellín, Bogotá, etc.

En el video, los botones de la interfaz de YouTube no tienen una coherencia con su respectiva acción. Por ejemplo, considero que están mal:

Tabla 1: Comparación de rótulos actuales de la interfaz de YouTube, frente a los rótulos propuestos.

Actual Propuesto Tab - Seis botón Tab - reproducir Tab - URL Botón Tab - ir a la página web del video en YouTube Tab - Play barra Pause Tab - reproducir barra detener Tab - Widescreen Tab - ver a pantalla completa

Contenido accesible con ayudas técnicas. • Punto 23: El contenido es directamente accesibles o compatibles con las ayudas

técnicas.

Verificamos con dos lectores de pantalla: Jaws y Nvidia el acceso posible a cada uno de los dos objetos de Flash. Usamos el zoom incluido en Leopard, donde obviamente escaló cada objeto hasta llegar a pantalla completa.


La accesibilidad y compatibilidad a los lectores de pantalla puede deberse a la metodología con que fue insertado el objeto (Método Satay), en contraposición con el método propuesto por Adobe de forma predterminada en su suite de desarrollo, y al método difundido por YouTube desde su web, cuando ofrece el código listo para pegar en el sitio.

Veamos:

Tabla 2: Comparación método de inserción de películas con YouTube frente al método Satay

Código de YouTube Código Método Satay <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/r44r852ROtg&hl=es&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/r44r852ROtg&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>

<object width="256" height="206" type="application/x-shockwave-flash" data="http://www.youtube.com/v/r44r852ROtg&hl=es&fs=1&"> <param name="quality" value="high"/> <param name="menu" value="false"/> <param name="allowFullScreen" value="true"/> <param value="always" name="allowscriptaccess"/> <param name="movie" value="http://www.youtube.com/v/r44r852ROtg&hl=es&fs=1&"/> <p>El video "Colombia: el riesgo es que te quieras quedar" puedes también verlo a través de <a href="http://www.youtube.com/watch?v=r44r852ROtg">YouTube</a>.</p> </object>


Conclusiones. Considero que la solución del mapa de Flash logra superar las barreras básicas de accesibilidad de contenidos en Flash, pues permite en primer lugar acceder a su contenido, no solo a ayudas técnicas tan importantes como Jaws, sino también a personas que naveguen con teclado. Está bien etiquetada y, finalmente, cumple con su objetivo que es servir de menú hacia los contenidos internos de los destinos turísticos de Colombia.

Por otra parte, el video tiene los elementos básicos de accesibilidad y uno muy importante y poco difundido a pesar de las facilidades de lograrlo: los subtítulos. De todas formas, los problemas detectados corresponden a problemas de la propia interfaz de YouTube, que esperamos sean arreglados por ellos algún día.

Este buen trabajo reflejado en la página de inicio en español debe llevarse también al resto de páginas internas y en diferentes idiomas (inglés y portugués), actualmente al aire y tratar de mantenerse en el tiempo, como un hábito de los generadores de contenidos de este importante portal.

Evaluación de accesibilidad web en contenidos en Flash

Travel

Transcript of Evaluación de accesibilidad web en contenidos en Flash