Evaluación de accesibilidad web en contenidos en Flash

Junio 
09 

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

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

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.

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

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”.

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

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>
internacional/destino/barranquilla">Barranquilla</a></li>
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>
internacional/destino/cartagena">Cartagena</a></li>
internacional/destino/medellin">Medellín</a></li>
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>
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.

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.

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.

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].


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.

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.

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.

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"> <object width="256" height="206"
<param name="movie" type="application/x-shockwave-flash"
value="http://www.youtube.com/v/r44r852 data="http://www.youtube.com/v/r44r852RO
ROtg&hl=es&fs=1&"></param> tg&hl=es&fs=1&">
<param name="allowFullScreen" <param name="quality" value="high"/>
value="true"></param> <param name="menu" value="false"/>
<param name="allowscriptaccess" <param name="allowFullScreen"
value="always"></param> value="true"/>
<embed <param value="always"
src="http://www.youtube.com/v/r44r852RO name="allowscriptaccess"/>
tg&hl=es&fs=1&" type="application/x- <param name="movie"
shockwave-flash" value="http://www.youtube.com/v/r44r852R
allowscriptaccess="always" Otg&hl=es&fs=1&"/>
allowfullscreen="true" width="425" <p>El video "Colombia: el riesgo es que
height="344"></embed> te quieras quedar" puedes también verlo
</object> a través de <a
href="http://www.youtube.com/watch?v=r44
r852ROtg">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

Recommandé

Recommandé

Contenu connexe

Similaire à Evaluación de accesibilidad web en contenidos en Flash

Similaire à Evaluación de accesibilidad web en contenidos en Flash (20)

Plus de Mario Carvajal

Plus de Mario Carvajal (15)

Evaluación de accesibilidad web en contenidos en Flash