Agencia Interactiva

A día de hoy, la Accesibilidad Web sigue siendo tan temida como desconocida para muchos. Parte de la culpa de que se vea como un extra de difícil implementación la tiene el hecho de que se piense que es “para ciegos”.

Entre los grupos de usuarios a los que pretende beneficiar la Accesibilidad Web están lógicamente los discapacitados, pero también están todos aquellos que no tienen ninguna discapacidad permanente y que pueden tenerla en un momento dado o simplemente verse limitados por las circunstancias en las que acceden a La Web.

La Accesibilidad Web busca el acceso universal

No hace falta pensar en un móvil antiguo, un monitor monocromo o en una conexión a Internet lenta desde un país tercermundista, ya que el abanico de dispositivos “menos capaces” desde los que se puede navegar cada vez es más amplio: pequeños portátiles como el OLPC (One Laptop per Child) y otros Netbooks con sistemas operativos simplificados, consolas como la Nintendo Wii, la PlayStation 3 o la XBox, Internet en la televisión, lectores de eBooks e incluso móviles de última generación hechos para la interacción táctil en lugar de la tradicional mediante ratón usada en los navegadores de escritorio.

Por último, la Accesibilidad Web también beneficia a las personas mayores y a los nuevos usuarios no familiarizados con Internet, grupos a los que todos pertenecemos en algún momento de la vida.

El WAI y sus pautas

El WAI (Web Accessibility Initiative) es un grupo de trabajo permanente del W3C encargado de definir unas pautas para la Accesibilidad Web basadas en la investigación, tanto para el contenido web, las WCAG (Web Content Accessibility Guidelines), como para los navegadores y otras aplicaciones que utilizamos.

Estas pautas son utilizadas y citadas como referencia en las legislaciones sobre Accesibilidad Web mundiales. En España, la Norma UNE 139803 está basada en las WCAG 1.0, aunque ya existen las WCAG 2.0, que son una versión corregida y más adaptada a La Web actual de las primeras.

EL WAI define cuatro principios fundamentales (perceptible, operable, comprensible y robusto) que engloban doce pautas o guías en total, para las que se ofrecen unas recomendaciones o técnicas a seguir tanto por desarrolladores, como por diseñadores y editores de contenido.

Para ver las doce pautas y sus técnicas, recomiendo una versión amigable de las WCAG 2.0 traducida al castellano en Qweos.

En resumen, entre esas pautas definidas por el WAI, destacan algunas como las de no basarse sólo en características visuales como el color, tamaño o posición para transmitir información, hacer el contenido navegable y funcional mediante teclado (independencia de dispositivo), proporcionar alternativas textuales para el contenido no textual (imágenes con texto o elementos multimedia) o estructurar y etiquetar el contenido de forma lógica, de manera que tenga sentido cuando se presente de forma simplificada, por ejemplo, sin estilos.

Todas estas recomendaciones benefician a las personas con discapacidades más graves, como por ejemplo las relacionadas con la visión (ceguera, daltonismo, ceguera total al color, etc). Estas personas utilizan lectores de pantalla que procesan el contenido de una página web de forma lineal, tal y como aparece en el código HTML, y para las que es de gran ayuda que el documento esté correctamente organizado y etiquetado, así como que los enlaces tengan textos descriptivos en lugar de “click aquí”. Al igual que el resto de usuarios, estos no se tragan todo el contenido entero de una página, sino que se mueven saltando de enlace en enlace o a través de los encabezados hasta que encuentran algo que llama su atención.

Las personas con movilidad reducida, pueden utilizar el teclado u otros dispositivos para navegar en lugar del ratón. Un menú desplegable mediante rollover (al pasar el ratón por encima) se convierte en un obstáculo si no se ha tenido en cuenta la independencia de dispositivo.

Por qué la Accesibilidad es importante

Se podrían nombrar más discapacidades, como la sordera o las deficiencias cognitivas y siempre se podrá pensar que estos usuarios son minoría o que están acostumbrados y saben cómo apañárselas. La verdad es que deberíamos hacer webs accesibles simplemente porque estas personas tienen el mismo derecho que cualquiera a usarlas.

La Web ofrece a aquellas personas con discapacidad una oportunidad de acceder a la información y de interactuar.

Fuente: Introducción a la Accesibilidad Web

Al igual que cuesta darse cuenta de lo útiles que son pequeñas cosas cotidianas hasta el día en que se rompen o faltan, también cuesta darse cuenta de los beneficios de una web accesible mientras todo va bien. Cualquier persona puede verse discapacitada temporalmente si por ejemplo se rompe un brazo o circunstancialmente si su ratón se queda sin pilas.

La Accesibilidad Web cada vez debería ser más importante y tenida en cuenta, ya que cada vez son más variadas las formas de acceder a La Web e interactuar con ella. A pesar de esto, muy poca gente se preocupa por la Accesibilidad desde un primer momento, a no ser que tenga obligación de hacerlo, porque no se ven sus ventajas. Todo lo contrario ocurre con el posicionamiento en buscadores. Todo el mundo sabe algo de SEO y quiere gustarle a Google. Pues bien, todo lo que beneficia a los usuarios discapacitados, beneficia también a los buscadores.

Google es un usuario ciego. Un usuario ciego millonario, con millones de amigos que escuchan cada una de sus palabras. Si un usuario ciego no puede ver tu sitio, entonces Google, tampoco.

Fuente: Curso de Accesibilidad Web

Más información

• Introducción a la Accesibilidad Web
• Sobre el W3C y el WAI
• Curso de Accesibilidad Web

El jueves 29 de abril, Steve Jobs publicó una carta abierta con una serie de reflexiones acerca de la tecnología Flash de Adobe, que constituyen la primera explicación oficial de Apple de los motivos por los que sus dispositivos móviles como el iPhone o el iPad ni soportan, ni soportarán dicha tecnología.

Si bien existe ya desde hace años un cierto consenso acerca de los inconvenientes del Flash de parte de la comunidad de desarrolladores web, la carta abierta de Steve Jobs certifica el nulo interés por parte de uno de los principales actores en dar soporte a esta tecnología. Si unimos a esto que Google y Microsoft ya han declarado su apoyo y han empezado a utilizar HTML5, probablemente estemos asistiendo al principio del fin del Flash, al menos en lo que se refiere al desarrollo parcial o completo de sitios web, y reproductores de audio y vídeo.

Carta abierta de Steve Jobs original (en inglés):

• Thoughts on Flash

Carta abierta de Steve Jobs traducida al español:

• Pensamientos sobre Flash

El mismo día 29 de abril, Shantanu Narayen, el CEO de Adobe respondió a la carta de Steve Jobs en una entrevista publicada en The Wall Street Journal, repitiendo los mismos argumentos que llevamos oyendo desde hace más de 10 años acerca de las ventajas del Flash, como si los estándares, las tecnologías y los dispositivos no hubieran cambiado en todo este tiempo.

En menos de 3 días, la entrevista a Shantanu Narayen de The Wall Street Journal ha generado más de 400 comentarios, una muestra suficientemente amplia como para sacar conclusiones acerca de la opinión de los usuarios, que en general resulta negativa. El comentario más habitual quizás esté siendo que Flash es una tecnología vieja que ha quedado obsoleta.

Una selección de comentarios divertidos de los usuarios de The Wall Street Journal a la entrevista al CEO de Adobe, que replica a los 'Pensamiento sobre Flash' de Steve Jobs.

Desde nuestro punto de vista, el monopolio de Flash para el desarrollo de aplicaciones sobre web se acaba, pero Adobe podría reaccionar con agilidad aportando nuevas soluciones para el desarrollo sobre HTML5, convirtiendo la amenaza actual a Flash en una transición de Adobe a los nuevos estándares.

Estamos buscando diseñadores de interfaces web especialistas en usabilidad e interacción. Quizás tengas un amig@ que nos puedas recomendar: si finalmente lo contratamos te recompensaremos con 300€.

Tienes más información acerca de nuestras ofertas y de las ventajas de trabajar en Cool Z en nuestra sección de ofertas de trabajo.

Concretamente, estamos buscando diseñadores web que sean capaces de participar en la definición de proyectos web a partir de los requerimientos y de los objetivos de los clientes, planteando diversas alternativas para el desarrollo de interfaces de usuario, cuidando especialmente aspectos como la usabilidad y los procesos de interacción del usuario.

Requisitos básicos:

• Tener más de 3 años de experiencia.
• Tener las ideas claras en relación a la usabilidad
• Ser experto en el manejo de Photoshop o Fireworks
• Ser muy creativo en los desarrollos gráficos
• Saber escribir correctamente y con imaginación

Requisitos deseados:

• Saber manejar Illustrator
• Maquetar en HTML, CSS y JS
• Estar familiarizado con entornos de trabajo Mac

Requisitos generales:

• Tener ganar de aprender
• Tener una actitud proactiva

Para participar en el proceso de selección es imprescindible que podamos ver referencias publicadas en Internet, por lo que rogamos se incluyan URLs de trabajos realizados. La mejor manera de presentarte como candidato o de enviarnos tu recomendación es a través de nuestro formulario de contacto.

De todas las opciones que tenemos a la hora de diseñar una web, la menos utilizada con diferencia es la que da título al post y sin embargo, es una de las opciones más accesibles por su adaptabilidad a diferentes resoluciones de pantalla.

Las causas de que este tipo de diseños se vean poco son varias:

• Desconocimiento. Si no se ve a menudo no existe y por lo tanto los desarrolladores no lo tienen en cuenta como una opción a elegir.
• Falta de soporte por versiones antiguas de Internet Explorer.
  La técnica no es en absoluto nueva, pero cuando surgió sólo podía funcionar correctamente en algunos navegadores.
• Dificultad. En este tipo de diseños es necesario usar porcentajes como unidad de medida, que no suelen ser tan exactos como los píxeles.

Hoy en día, con Internet Explorer 8 superando en porcentaje de uso las versiones anteriores de este navegador, es el momento de empezar a usar este tipo de diseño con la seguridad de que será beneficioso para la mayoría de usuarios y por lo menos, no perjudicial para los que todavía usan versiones antiguas de Internet Explorer.

Uso navegadores en España. Fuente StatCounter Global Stats

Explico a continuación los tipos de diseño o layout más utilizados y las ventajas e inconvenientes de cada uno.

Diseño fijo

Son aquellos en los que las medidas de los distintos bloques de la página se definen en píxeles. Son los más fáciles de llevar a cabo y los que obtienen unos resultados más fieles a los diseños.

Las Pautas para la Accesibilidad Web del W3C recomiendan utilizar unidades de medida relativas como los porcentajes o las emes, ya que algunos navegadores como Internet Explorer 6 y versiones antiguas de Firefox o Google Chrome, no pueden escalar los elementos de la página (hacer zoom) cuando se utilizan píxeles. Por otra parte, cuando los tamaños de fuente se definen en píxeles, en Internet Explorer 6 no se puede aumentar o disminuir el tamaño de fuente a voluntad, lo que supone una dificultad para personas con problemas de visión.

A estos inconvenientes hay que sumar que un diseño fijo cuya anchura supere la resolución de pantalla del usuario, no se verá completo en la ventana del navegador y aparecerán barras de scroll horizontales.

Hoy en día se usan mayoritariamente resoluciones de 1024 píxeles o mayores, por lo que el típico dilema de diseñar para 800 x 600 o mayor casi ha pasado a la historia, sin embargo, nunca podemos tener la certeza de que el usuario tenga la ventana maximizada o paneles que limiten la anchura de página.

Navegador con paneles

Diseño elástico

Los diseños elásticos son aquellos en los que las medidas de los bloques se definen en emes, de manera que al aumentar el tamaño de fuente, aumenta también la anchura de estos bloques, es decir, aumentar el tamaño de fuente provoca un efecto zoom sobre toda la página.

Las emes son una unidad relativa, y por lo tanto este tipo de diseños cumple la pauta anteriormente mencionada de no utilizar unidades absolutas, sin embargo en la práctica se comportan exactamente igual que los diseños fijos y tampoco están libres de problemas, aunque son una de las técnicas recomendadas para cumplir con las Pautas para la Accesibilidad Web.

La principal ventaja que tienen frente a los diseños fijos es que sí permiten aumentar el tamaño de texto y hacer zoom de todos los elementos de la página en navegadores antiguos. Los navegadores modernos pueden hacer zoom de página en cualquier tipo de diseño.

Diseño líquido

En los diseños líquidos la anchura de bloques se define en porcentajes, de manera que se adaptan a la resolución de pantalla del usuario ocupando por completo la anchura de la ventana del navegador. Como ejemplo tenemos la Wikipedia.

Los diseños líquidos funcionan bien en pantallas pequeñas, sin embargo en pantallas grandes dan lugar a líneas de texto muy largas que dificultan su lectura. La cantidad máxima recomendada de caracteres por línea es de 80. A mayor longitud, resulta difícil leer en pantalla sin perderse entre líneas.

Longitud excesiva de líneas en pantallas grandes

Diseño híbrido líquido-elástico

Estos diseños tienen las ventajas de los elásticos (anchos de línea óptimos y escalables en navegadores antiguos) y los líquidos (adaptables a resoluciones pequeñas).

La anchura de los bloques de contenido se define en emes y se añade la propiedad max-width de CSS que permite especificar la anchura máxima que podrá tener un bloque.

El resultado es un diseño aparentemente fijo, que se adapta a resoluciones menores y mayores sin que aparezcan barras horizontales de desplazamiento en el navegador.

Como ejemplo tenemos nuestro sitio web.

Diseño aparentemente fijo a una resolución de 1280 x 1024

Tamaño de texto aumentado en una ventana de 1024 píxeles de ancho. La anchura de los bloques se adapta a la ventana del navegador sin que aparezcan barras de scroll horizontal.

Layout adaptado a una ventana de 800 píxeles de ancho

Por supuesto, este tipo de diseño también tiene sus inconvenientes:

• Los porcentajes no proporcionan la exactitud de los píxeles.
• En Internet Explorer 6 la propiedad max-width no funciona y en Internet Explorer 7 lo hace de manera deficiente.

A pesar de estos inconvenientes, Internet Explorer 6 y 7 pueden seguir beneficiándose con los diseños híbridos de las ventajas de los diseños elásticos. Es un ejemplo perfecto de lo que se suele llamar Progressive Enhancement.

Cómo conseguir un diseño híbrido líquido-elástico

La clave de estos layouts consiste en utilizar emes como unidad de medida para los bloques contenedores y añadir la propiedad max-width de CSS para establecer su anchura máxima.

Suponiendo que tenemos un diseño de dos columnas, el bloque contenedor de ambas tendría un max-width del 100% y sus bloques anidados tendrían como ancho máximo el porcentaje relativo a la anchura del bloque que los contiene.

Ejemplo esquemático de un layout de dos columnas

El código que se utilizaría en la imagen del ejemplo podría ser similar a este:

#contenedor{width: 100em; max-width: 100%;}
#navegacion{width: 40em; max-width: 40%;}
#contenido{width: 60em; max-width: 60%;}

Para este sitio web hemos adaptado la CSS del sistema de retícula de 960.gs, reemplazando las unidades de medida en píxeles por emes y añadiendo la propiedad max-width para cada ancho de columna.

Esta técnica aparece explicada con detalle en el libro CSS Mastery: Advanced Web Standards Solutions, publicado en español por Anaya Multimedia como CSS. El capítulo dedicado a los distintos tipos de layouts se puede leer completo online en Web Reference.

La programación en Flash permite crear animaciones y efectos estéticamente muy vistosos, pero cuando el objetivo del sitio web es recibir tráfico o captar clientes, entonces está completamente desaconsejado. Veámoslo con este ejemplo, el sitio web de Rosa Clara.

Un web en Flash no es indexable por los buscadores, por lo que sus páginas interiores (en realidad este concepto no existe en los webs en Flash) nunca podrán aparecer en Google. Por otro lado, los buscadores no tienen acceso a los contenidos reales del Flash para calcular la relevancia semántica de las búsquedas, por lo tanto los resultados con ficheros Flash (SWF) siempre aparecerán mal posicionados con respecto a resultados de otros webs en HTML. Aquí podemos ver las páginas indexadas por Google del web de Rosa Clara.

Vemos que la única página HTML normal que aparece en los resultados es la home. Lo demás son ficheros SWF (Flash) y marcos donde se supone deberían cargar esos ficheros.

Un web en Flash tiene problemas graves de usabilidad, veamos algunos ejemplos. Imaginemos que queremos enviar por email un link correspondiente a un contenido al que hemos accedido desde la home después de varios clicks. Veremos que es imposible porque esa página no tiene una URL propia. Tendríamos que enviar la URL de la home y explicar por donde hay que clickar. Otra pega: imaginemos que logramos llegar al contenido que buscábamos y que queremos volver a la home: si le damos al botón de “Atrás” del navegador, en lugar de saltar a la home saltaremos al sitio web en el que estábamos antes de entrar al web en Flash, a menos que hayamos abierto el web en una pestaña nueva, caso en el que el botón de volver atrás aparecerá desactivado…

Después de 4 clicks desde la home, ni ha cambiado la URL, ni podemos volver atrás.

Los contenidos de los webs Flash son estáticos: No suelen incorporar gestores de contenidos, con lo que si queremos cambiar los contenidos tenemos que recurrir a alguien que tenga el código fuente del web, que lo añada, y que lo recompile todo. En la práctica, suele ser tan engorroso mantener un web en Flash, que además de resultar más caro, provoca que en poco tiempo los contenidos acaben quedando obsoletos.

Algunos dispositivos no soportan Flash. El iPhone por ejemplo, no permite ver Flash, por lo que al entrar en un web en Flash, simplemente se vería una página en blanco.

Un web en Flash no es accesible. Eso quiere decir por ejemplo que una persona con alguna deficiencia tendrá más dificultades, o directamente no podrá navegar por el web, y que no tenemos la garantía de que se puedan visualizar desde otros dispositivos que no sean navegadores clásicos en Mac o PC.

Con estos inconvenientes, en general, usar Flash para construir un web sólo tiene sentido si el objetivo del web no es captar, es decir si no buscamos que nos llegue tráfico de Google, o de otros sitios web que nos podrían enlazar a páginas interiores, si el contenidos del web va a ser básicamente estático, y si buscamos efectos visuales que no sean posibles con HTML, CSS o Javascript.

¿Entonces porqué hay tantos sitios web corporativos en Flash?

Posiblemente sea porque es lo que mejor le entra al cliente por los ojos (y por los oídos), y muy pocos se van a poner a pensar en los inconvenientes que plantea desde el punto de vista del marketing online, a menos que alguien se los explique. Ahora el Flash se usa menos para desarrollar sitios web corporativos, aunque todavía quedan agencias que lo recomiendan, y todavía quedan incautos que pican.

Dicho esto, el Flash puede resultar muy útil, pero para crear juegos, animaciones o banners.

Bienvenido a WordPress. Esta es tu primera entrada. Edítala o Bórrala, ¡y comienza a publicar!.