Documente Academic
Documente Profesional
Documente Cultură
09
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.
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:
4
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
5
aprovechan las ventajas de la traducción automática que YouTube proporciona de forma
gratuita.
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”.
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:
6
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
<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>
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:
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
7
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:
8
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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.
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
9
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.
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é.
10
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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.
1
Caption Tube es una herramienta gratuita y que se puede usar para subtitular videos en la siguiente dirección:
http://captiontube.appspot.com/
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
11
Ilustración 8: Traducción automática al árabe.
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
12
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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).
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.
Detener movimiento.
• Punto 8: Proporcione una manera de detener el movimiento.
• Técnica: Visual.
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.
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
13
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.
Después de hacer las pruebas con Jaws, esta animación no interfiere en el correcto
funcionamiento de la interfaz.
14
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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.
El mapa no tiene audio. El video está totalmente subtitulado y sincronizado, tal y como se
explicó en el punto 6.
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:
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
15
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:
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/
16
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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.
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.
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.
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
17
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:
Destellos de pantalla.
• Punto 19: Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar
destellos en la pantalla.
• Técnica: Visual.
18
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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).
• Técnica: Visual.
No existen elementos en los dos objetos estudiados, que presenten parpadeo de contenido.
Este punto no aplica.
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
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.
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
19
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
20
Evaluación de accesibilidad web en dos contenidos en Flash del Portal Oficial de Turismo de Colombia
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 dos contenidos en Flash del Portal Oficial de Turismo de Colombia 21