Download Accesibilidad en la web de Facebook

Document related concepts

Accesibilidad web wikipedia , lookup

Diseño web wikipedia , lookup

Tableless wikipedia , lookup

JavaScript no obstructivo wikipedia , lookup

Scalable Inman Flash Replacement wikipedia , lookup

Transcript
Accesibilidad en la web de Facebook
Página 1 de 14
Accesibilidad en la web de FACEBOOK
URL: http://es-es.facebook.com/
Fecha: 6 de abril de 2010
Accesibilidad en la web de Facebook
Página 2 de 14
Análisis de accesibilidad
Este documento recoge el resultado del análisis en materia de accesibilidad
web de los elementos más representativos de un sitio web. La correcta
implementación de estos elementos permite el acceso a la información por
parte de todos los usuarios, en igualdad de condiciones.
A continuación se detallan los resultados obtenidos tras evaluar la
accesibilidad de un conjunto de elementos representativos sobre la web de
Facebook.
1. Alternativas textuales
Algunas imágenes no se describen adecuadamente. Por ejemplo, una vez
que el usuario ha rellenado sus datos de autenticación, en la página
principal de Facebook aparecen tres importantes iconos sin alternativa
textual en la cabecera y con escaso contraste.
Figura 1: Iconos importantes sin alternativa de texto
Por otro lado, se han detectado equivalentes textuales vacíos o sin
significado a imágenes inexistentes.
Figura 2: Alternativas ALT vacías o descontextualizadas
Accesibilidad en la web de Facebook
Página 3 de 14
Las imágenes publicitarias no presentan ninguna alternativa de texto. Entre
estas imágenes, se incluyen las imágenes con texto, como se muestra en
las siguientes figuras.
Figura 3: Imagen de texto sin el atributo ALT
Figura 4: Imágenes sin alternativa de texto
Accesibilidad en la web de Facebook
Página 4 de 14
2. Encabezados
Todas las plantillas analizadas del sitio web de Facebook implementan una
estructura de encabezados, pero no es correcta en las páginas evaluadas.
Los principales problemas detectados afectan a la estructura de los
encabezados y el orden jerárquico dentro de los contenidos.
La estructura de encabezados es incorrecta, ya que no se han definido cuál
o cuáles son los encabezados principales de nivel 1 y, al mismo tiempo, no
se ha seguido una jerarquía respetuosa con el orden. Ver figuras adjuntas:
Figura 5: Estructura de encabezados no ordenada
Figura 6: No existen encabezados de nivel 1
Accesibilidad en la web de Facebook
Página 5 de 14
3. Listas
En el contenido de las páginas se implementan numerosas listas pero, por
lo general, su aplicación es incorrecta.
Cuando analizamos el uso de listas en las páginas del portal de Facebook
se encuentran incumplimientos, por ejemplo, en la página del “Servicio de
ayuda” deberían agruparse en una lista de elementos.
Figura 7: Elementos de lista sin etiquetar
Accesibilidad en la web de Facebook
Página 6 de 14
4. Hojas de estilo
La presentación y posicionamiento de los contenidos se realiza mediante
hojas de estilo y tablas de maquetación. Las unidades que fijan el tamaño
de los contenedores y su contenido, y que permiten a su vez manipular el
tamaño de las fuentes a las necesidades de los usuarios, están definidas en
valores absolutos, impidiendo modificar el tamaño de las páginas.
Facebook no funciona de una forma adecuada con navegadores antiguos
(Internet Explorer 6 ni Internet Explorer 7).
Figura 8: Facebook no es operativo en Internet Explorer 7
El portal web hace uso de hojas de estilo, pero en algunas ocasiones,
cuando se deshabilitan, se observan cambios en los contenidos. Al
desactivar todos los estilos, aparecen imágenes animadas que no se
encuentran con los estilos activados. Ver figura adjunta:
Figura 9: Elemento animado con las hojas de estilo desactivadas
Accesibilidad en la web de Facebook
Página 7 de 14
En la siguiente imagen aparecen los estilos activados:
Figura 10: Formulario con las hojas de estilo habilitadas
En la misma imagen anterior, se han deshabilitado todos los estilos:
Figura 11: Formulario con las hojas de estilo deshabilitadas
5. Formularios
Los formularios analizados no están desarrollados con los criterios de
accesibilidad que marcan las directrices de accesibilidad al contenido en la
web. No se implementa una asociación explicita entre etiqueta y control y
se observan controles sin etiquetas.
Este tipo de prácticas hace que un usuario ciego mediante un lector de
pantalla no pueda utilizar el servicio de búsqueda disponible en la web. En
la siguiente ilustración puede observar el formulario de búsqueda sin
etiqueta para poder ejecutar la búsqueda:
Accesibilidad en la web de Facebook
Página 8 de 14
Figura 12: Formulario sin asociación explícita de etiquetas
6. Enlaces
En las páginas evaluadas, se han encontrado enlaces cuyo texto no es
suficientemente descriptivo, por ejemplo del tipo "pics/q_silhouette". El
texto de un enlace debe identificar claramente cuál es el objetivo del
vínculo, y debe poderse comprender leído fuera del contexto.
Figura 13: Lista de enlaces sin sentido
Igualmente, se han detectado enlaces cuyo texto es el mismo pero con
destino diferente.
Accesibilidad en la web de Facebook
Página 9 de 14
Figura 14: Lista de enlaces sin sentido fuera de contexto
7. JavaScript
De forma generalizada, en el desarrollo de la web se observa dependencia
de este tipo de tecnologías para mostrar y acceder a los contenidos y
servicios que ofrece. Si se deshabilita esta tecnología, importantes enlaces
que abren calendarios dejan de ser funcionales.
Figura 15: Calendario dependiente de tecnología JavaScript
Accesibilidad en la web de Facebook
Página 10 de 14
Figura 16: Los enlaces Foto, Vídeo o Regalos desaparecen al desactivar JavaScript
Por otro lado, se han observado algunos errores en el código JavaScript.
Figura 17: Errores en el código JavaScript
8. Validación de código
Los validadores del consorcio W3C muestran numerosos errores en las
páginas de Facebook, como por ejemplo, elementos de encabezados
perdidos o atributos no permitidos. Ver la figura siguiente:
Accesibilidad en la web de Facebook
Página 11 de 14
Figura 18: Errores de validación en el código según el W3C
Figura 19: Errores de validación en las hojas de estilo según el W3C
9. Navegación y Orientación
Los títulos de las páginas de Facebook
no resultan descriptivos ya que
únicamente se ha utilizado como título “Facebook” en cada uno de los
documentos.
Accesibilidad en la web de Facebook
Página 12 de 14
Figura 20: El TITLE es el mismo en todas las páginas
Se
ha
comprobado
que
existen
actualizaciones
y/o
redirecciones
automáticas.
El orden lógico de tabulación que se sigue en los documentos desactiva el
focus en el navegador de Mozilla Firefox.
Facebook
proporciona una sección de accesibilidad en la que se indican
únicamente ayudas para usuarios con discapacidades visuales o físicas.
Estas indicaciones no se presentan dentro de una sección de accesibilidad
clara y coherente para facilitar su identificación.
Facebook no proporciona un mapa web donde se incluya de forma
esquemática y jerarquizada una lista con todas las páginas que conforman
el sitio web.
Facebook no proporciona mecanismos de ayuda a la navegación como
“migas de pan” que permitan indicar al usuario dónde se encuentra y la
relación jerárquica de ese documento con el resto de la estructura del sitio
web.
Accesibilidad en la web de Facebook
Página 13 de 14
Conclusiones
El sitio web de Facebook presenta características positivas que favorecen
la accesibilidad destacando:

La utilización de hojas de estilo para maquetar sin elementos ni
atributos HTML que controlen la presentación.

Atajos de teclado para los enlaces importantes.
Sin embardo, Facebook no ofrece un desarrollo que cumpla los criterios de
accesibilidad necesarios para garantizar el acceso completo a todos los
usuarios que accedan a sus servicios e información, independientemente de
la forma de navegación y su discapacidad. Por lo tanto, el sitio web de
Facebook no supera los criterios marcados por las Pautas de
Accesibilidad al Contenido de la Web (WAI/WCAG 1.0), en su nivel de
prioridad doble A.
Los principales problemas de acceso son:

Imágenes sin describir de forma adecuada e imágenes con carga
informativa sin un valor alternativo adecuado.

Implementación de unidades absolutas sobre
los valores del
tamaño de las fuentes y sus contenedores. Este desarrollo no permite
cambiar el tamaño de las fuentes a las necesidades de los usuarios.

Todas las páginas evaluadas disponen de una estructura de
encabezados, pero no es correcta en la mayoría de las páginas
evaluadas.

Los objetos programados con JavaScript no implementan un
contenido alternativo si no existe soporte.

Todos los formularios evaluados no son desarrollados correctamente
bajo los criterios establecidos por las WCAG 1.0.

El texto de los enlaces no describe correctamente su destino o
funcionalidad, no pudiendo ser leídos fuera de contexto.

Existen actualizaciones y/o redirecciones automáticas.
Accesibilidad en la web de Facebook

Página 14 de 14
No hay mecanismos que proporcionen información sobre la
estructura del sitio (mapa web o tablas de contenidos).

El elemento TITLE no describe unívocamente la página web
que identifica a la misma.