VALIDADOR HERA. UNA MANERA FÁCIL Y RÁPIDA DE ANALIZAR LA ACCESIBILIDAD WEB

 Validador Hera

HERA es una utilidad para revisar la accesibilidad de las páginas web de acuerdo con las recomendaciones de las Directrices de Accesibilidad para el Contenido Web 1.0 (WCAG 1.0). HERA realiza un análisis automático previo de la página e informa si se encuentran errores (detectables en forma automática) y qué puntos de verificación de las pautas deben ser revisados manualmente.

La revisión manual es imprescindible para comprobar realmente si la página es accesible. Para poder llevar a cabo esta verificación manual es necesario conocer las directrices de accesibilidad, saber cómo utilizan los usuarios las ayudas técnicas y tener alguna experiencia en diseño y desarrollo de páginas web.

HERA facilita la revisión manual proporcionando información acerca de los elementos a verificar, instrucciones sobre cómo realizar ese control y dos vistas modificadas de la página (una en modo gráfico, otra del código HTML) con los elementos más importantes destacados con iconos y colores distintivos.

Un formulario permite modificar los resultados automáticos, agregar comentarios a cada punto de verificación e indicar el nombre del revisor. También es posible generar un informe final sobre la revisión, para imprimir o descargar, en diversos formatos (XHTML,RDF y PDF).

Importante: Los datos se conservarán en la base de datos de Sidar por el término de 7 (siete) días a partir del inicio de la revisión. Durante ese lapso es posible retomar un trabajo utilizando la URL de la página resumen, que contiene el identificador de la revisión.

¿ Cómo usar Hera en tres pasos?

Paso 1:

 Acceder desde un navegador al validador HERA e ingresar la URL que desea analizar, elegir una página web por ejemplo: www.atedis.gov.ar, y presionar el botón Revisar.

Paso 2:

Una vez presionado el botón Revisar deberás esperar unos segundos mientras el validador analiza el código de la página y así generar un informe, con el resultado de su análisis, como el siguiente:

Paso 3:

En el cuadro se indica:

• Qué es necesario verificar manualmente los puntos que aparecen indicados con una lupa, si presionas allí, HERA explica cada punto a analizar y cómo se debe hacer correctamente;
• Qué puntos están bien; Qué puntos están mal, si se accede a ese enlace explica, detalladamente la pauta violada y si se tiene acceso al código de la página, se puede corregir al momento y
• Qué puntos de esa prioridad no se aplicaron en esa página (N/A) por lo tanto no son considerados en el análisis de accesibilidad

FUENTE: http://www.atedis.gov.ar/accesib_p_general6_3.php?hoja=#razones

¿Conviene o no que las páginas web tengan menús desplegables?

      Antes de comenzar con la respuesta, es mejor conceptualizar "menú desplegable". Un menú desplegable es el que se muestra al pasar el ratón por encima de un elemento. Suelen usarse en sitios con muchas páginas distribuidas en secciones y subsecciones, ya que esta es una manera rápida de acceder desde una página a cualquier otra del sitio, sin que el menú ocupe mucho espacio.
      Normalmente se ponen en un menú visible las secciones principales del sitio. Al pasar el ratón por encima de cada sección aparecen los submenús que contienen las subsecciones. Los submenús se ocultan al salir el ratón de encima de ellos.

      Los menús desplegables son muy agradables a la vista, pero los menús no tienen en sí mismos una función decorativa, sino que se trata de elementos que colaboran en la usabilidad de la página y por consiguiente, mejoran la experiencia de los usuarios en nuestra página web. Para determinar si una página web requiere de un menú desplegable o es mejor utilizar menús sencillos, debemos preguntarnos cuál es la utilidad que se agregará y evaluar beneficios e inconvenientes.

      No cabe la menor duda que cuando tenemos una página web con contenidos que se encuentran divididos en muchas categorías y secciones, es necesario que los mismos sean presentados a los usuarios en forma ordenada, de modo que pueda acceder en forma rápida a cualquier parte de la página. Para estos casos, la utilización de los menús desplegables, más que una opción se trata de una necesidad, ya que presentar los títulos de secciones y categorías de otra forma podría ocupar gran cantidad de espacio y quedar parcialmente fuera de la vista del usuario haciéndose necesario desplazarse por la página para ver todo, lo que es un grave inconveniente. Que el usuario tenga todos los elementos necesarios a la vista sin necesidad de realizar desplazamientos, es una de las reglas de oro de la usabilidad de las páginas web.

Pero teniendo en cuenta esta último, debemos saber que los menús desplegables es información oculta, y que obliga al usuario a realizar algunos movimientos para que se produzca el despliegue del menú. Esto hace que la utilización de los menús desplegables deba ser racionalizada y llevada al mínimo posible, dado que es preferible que la información de navegación se encuentre visible.

      Para los sitios pequeños o con contenidos que se encuentran poco subdivididos, lo más aconsejable es que la información de navegación sea colocada en menús simples (horizontales o verticales), tanto en la parte superior de la página como en las columnas laterales.

MALAS PRACTICAS EN EL USO DE MENÚS DESPLEGABLES

      Si la página web requiere de la utilización de estos recursos, tengamos en cuenta que no debe realizarse de cualquier forma, y que en todos los casos, lo que debe primar es la usabilidad. Cuando no se tiene en cuenta esto, se producen los fracasos que son frecuentes en la web, donde los menús son una molestia para el usuario o son prácticamente inútiles.

      Uno de los errores más frecuentes es la utilización de scripts pesados para conseguir efectos diversos, sin tener en cuenta que los mismos afectan la carga de la página, como los menús hechos en flash con carga gráfica importante. El menú debe siempre ser una mejora en la usabilidad de la página, por lo que aumentar el tiempo de carga resulta contraproducente.

      Otro de los errores comunes es la utilización de menús con tiempos de retardo para su despliegue. Cuando un usuario pasa el puntero por encima de un ítem de menú, el retardo, en caso de que se utilice, debe ser lo suficientemente corto como para que el usuario no advierta la presencia de los ítems desplegables. Otro inconveniente de los retardos excesivos es que el usuario puede impacientarse al pasar de un ítem a otro y tener que esperar que se desplieguen de a uno.

      Los menús desplegables que se abren cuando se hace clic sobre ellos, son una buena solución para muchos casos, pero el usuario debe advertir de esta condición para que pueda realizar la acción requerida, ya que de otra forma no advertirá que se encuentra ante un menú desplegable. Todo ítem que se despliega cuando se hace clic, debe estar señalizado de forma que el usuario pueda advertir rápidamente de qué se trata.

      Además de las condiciones propias de los menús desplegables, los mismos deben seguir las reglas básicas que tienen todos los menús. La falta de espacio entre ítems puede hacer dificultosa la lectura, el exceso de espacios puede requerir desplazamientos innecesarios del puntero por la página, un contraste bajo puede dificultar la lectura, la falta de efecto “hover” puede hacer que el usuario se pierda en un menú con muchos ítems y no sepa donde hacer clic, la falta de distinción de los ítems de páginas ya vistas puede hacer que el usuario reitere la visita a un artículo o sección ya vistos.

      Se debe prestar especial atención a la utilización de transparencias en los menús desplegables, ya que puede verse en algunas páginas, que el texto de fondo interfiere con la lectura de los ítems de menú, o que la imagen de fondo de la página hace que se pierda la visibilidad de los ítems. Las transparencias en los menús desplegables son un efecto muy agradable, pero no en todos los casos es posible utilizarlas.

CONSEJOS PARA LA INSTALACIÓN DE MENÚS DESPLEGABLES

      Al igual que muchos otros elementos, los menús desplegables deben seguir una serie de reglas que hace que la página gane en usabilidad. Tal como se dijo anteriormente, la utilización del efecto “hover” siempre es aconsejable. También es bueno para el usuario que las páginas ya visitadas aparezcan diferenciadas de las no vistas. Los ítems de menú deben tener buen contraste respecto del fondo, de forma tal que se facilite la lectura. La utilización de bordes para separar ítems es una práctica aconsejable.

      Siempre se debe tratar de que haya continuidad visual entre el menú que se despliega y el ítem desde el que parte, de forma tal que el usuario siempre tenga visible el punto de partida y le resulte sencillo desplazarse a otro ítem. También es importante tener en cuenta que no deben haber alteraciones durante el desplazamiento del puntero por el menú, para que cuando el usuario realice este movimiento el menú no se cierre y se deba repetir la acción; este error, que parece elemental, es bastante frecuente.

      Cuando se utilicen menús en flash, se debe tratar de que el peso del mismo no sea tan grande que dificulte o haga muy lenta la carga de la página. Todos los desplazamientos requeridos, tanto en los menús en flash como los que utilizan lenguajes como javascript, deben ser lo suficientemente rápidos como para que el efecto no retarde el acceso del usuario a lo que desea.

      Los efectos visuales muchas veces traen graves inconvenientes, como algunos que simulan movimientos elásticos, con lo que el usuario tiene dificultades para fijar el puntero y hacer clic sobre el ítem. En los menús acordeón, también se puede notar esta dificultad para fijar el puntero sobre un ítem. Esto puede ser evitado colocando un pequeño retraso en el efecto, de forma que no se produzca en forma automática y haciendo que el usuario tenga tiempo suficiente para desplazar el puntero sin que se cierre o abra el menú contra su voluntad.

      Cuando se realice o instale un menú en el que se debe hacer clic para que se despliegue, es conveniente señalizar esto mediante la instalación de una flecha, de forma tal que el usuario tenga presente que algo va a suceder mediante una acción suya.

      Hay menús desplegables que tienen un tiempo de retardo para cerrarse. Siempre debe tenerse en cuenta que esto se hace principalmente para que el menú no se cierre por una acción involuntaria del usuario, pero el tiempo de retardo no debe ser tal que cuando el usuario quiera salir del mismo, deba esperar en forma innecesaria para que el efecto termine.

      Y al igual que en otros elementos de la página web, siempre es preferible la sencillez a los efectos suntuosos. Si tenemos en cuenta que el contenido es el rey de la web, todo elemento de la página debe apuntar a que el usuario acceda en forma sencilla y rápida a los mismos. El hecho de que se utilicen algunos elementos para embellecer la página no debe dificultar el acceso a los contenidos en modo alguno, regla a la que no escapan los menús. Y no debe perderse de vista que los menús, sean desplegables o no, no son simples elementos decorativos, sino que son ayudas que se ofrecen a los usuarios para que la navegación sea más sencilla.

      Ante la duda, siempre es preferible optar por la opción más simple. Basta con hacer una recorrida por las páginas web más visitadas, para ver que los efectos no son un elemento principal, y en muchas, ni siquiera existen.

Fuente: http://javascript.atwebpages.com/practica/desplegable/desplegable1.html
http://www.lawebera.es/accesibilidad-y-usabilidad
http://inclusion.es/2008/02/10/quiero-un-menu-desplegable

3 CONSEJOS CLAVES PARA DISEÑAR UN SITIO WEB

Existen diseñadores que elaboran y estructuran sus sitios de manera ególatra, para evitar que caiga en es errores a continuación se explicaran tres de los signos mas relevantes para identificar un diseño de interfaz de este tipo.

En el diseño de interfaces en la actualidad es un trabajo complejo que requiere de estudios, análisis y toma de decisiones adecuada. Atrás quedaron los días en donde un fondo bonito y algunos efectos bastaban para sorprender al usuario y lograr su aprobación, lo que la llevaba al incremento de la popularidad del sitio.

La gran relevancia que han tomado las investigaciones realizadas en torno a la experiencia del usuario y la usabilidad de los sitios, ha hecho que los diseñadores tomen un rumbo distinto al momento de tomar decisiones relevantes a la estructura y comportamiento de una pagina. La interacción se ha convertido en el principal factor a pensar durante el proceso de la planeación.

Resolver los problemas que surgen con la interacción es uno de los objetivos principales del diseño orientado a mejorar la experiencia del usuario, dichos problemas a la larga hacen que las personas reaccionen de manera poco receptiva ante lo que tratamos de transmitir en el sitio, por lo que resulta primordial atenderlos y tratar de evitarlos desde las bases.

En principio esto puede parecer complicado, pero la realidad es que puede ser tan sencillo como evitar caer en los excesos y mantenerlos en lo esencial, para de esa manera eludir terminar con un diseño totalmente ególatra, el cual constantemente interrumpa al usuario, lo obligue a realizar actividades o probar aplicaciones que no necesita y lo haga pensar demasiado antes de poder tomar decisiones.

¿Como saber si nuestro diseño de interfaz es ególatra? Aquí se exponen 3 signos claros que darán esta respuesta.

ES ESTRIDENTE

Si su sitio causa una sensación de molestia en los usuarios por su exageración, su diseño tiene un claro problema de egocentrismo. Cuando un producto, servicio o dependiente resulta demasiado ruidoso termina siendo bastante molesto, para esto damos el siguiente ejemplo: Piense por un momento que contrata a un guardia para que cuide su casa mientras esta de vacaciones, en el momento que usted trata de relajarse el guardia constantemente lo esta llamando solo para decirle que todo esta bien y que no ha pasado nada. Imagine lo molesto que esto seria para usted, la frustración y el enojo que puede llagar a causarle, Si usted tuviera dudas podría llamarlo o si algo malo hubiera pasado la llamada estaría justificada, pero fuera de estos dos casos, no espera estar recibiendo llamadas de el, por lo que su comportamiento causaría desprecio en usted.

Lo mismo ocurre con las paginas web, no es justificable que un sitio este insistiendo en algo que no le interesa al cliente, sin embargo por alguna extraña razón algunos pueden llegar a pensar que esto es normal en la web y que no tiene nada de malo en hacerlo. Existen muchos diseñadores y desarrolladores que razonan de esta forma, elaboran sus aplicaciones pensando en mostrar al cliente lo importante que es su pagina o función para el, incluso resaltando en gran medida cuando el proceso que la aplicación lleva, da un resultado positivo.

Ningún cliente quiere oír esta clase de mensajes de manera automática, y si lo quisiera estaría dispuesto a acceder a algún panel extra, en cambio si algo saliera mal el cliente estaría agradecido con el sitio si este le avisara, para así ponerle atención inmediata al problema.

TRATAR DE AYUDAR DEMASIADO

Por mas que lo deseemos, es imposible poner cada una de las secciones, paginas o aplicaciones de un sitio en un solo lugar sin que resulte en un congestionamiento visual. Sin embargo, muchos sitios aun optan por utilizar esta clase de presentación con el objetivo de ayudar al cliente a encontrar mas fácilmente lo que busca, pero obteniendo como resultado todo lo contrario, búsquedas largas y perdida de tiempo para el usuario.

Muchos diseñadores tratan de satisfacer todas las necesidades del cliente mediante el menor numero de acciones posible, esto causa que se termine por truncar lo importante y ninguna de las necesidades quede completamente satisfecha, el ofrecer soluciones parciales solo llevara a la frustración del usuario. Es importante evitar el dar sugerencias de manera constante, al menos de que el cliente así lo requiera, este es un principio básico del servicio al cliente. No debemos atormentar al usuario con información que no necesita en ese momento, cuando llegue la necesidad esta se planteara y es en ese caso que el sitio debe responder correctamente.

ES DEMASIADO DIFERENTE

No hay nada de malo con tratar de ser innovador, sin embargo el ser excesivo en los cambios aplicados a la manera tradicional de realizar las cosas, puede llevar a crear bastantes dificultades para el usuario.

Un diseño ególatra regularmente asumirá que los usuarios son felices con utilizar un sitio cuyo diseño hace caso omiso de la convenciones de diseño de interfaz de usuario y las directrices de interacción. Este es un caso que se presenta comúnmente en los sitios que dictan de ser reformistas o "chic", con la intención de hacer que el sitio destaque, pero en realidad termina haciendo que el sitio sea inutilizable.

Los diseñadores deben tener humildad para respetar las normas de interfaz de usuario y los principios UX no dejan de experimentar, pero solo utilizar diseños excéntricos cuando estos realmente den un valor significativo.

Fuente: http://www.lawebera.es

TIPOGRAFÍAS PARA LA DISLEXIA

¿Qué es la dislexia?    

    Es un trastorno que dificulta la generación e interpretación del lenguaje, principalmente escrito, afectando el aprendizaje de la escritura y lectura.

¿Cómo interpreta las palabras un disléxico?  

    Los principales problemas radican en:

• Visión: La imagen que captan no es clara, equivale a intentar leer un párrafo borroso.
• Abstracción: Ven las letras como imágenes en 3D. Tienen dificultad para distinguir aquellas que son similares en morfología, pues tienden a rotar o voltear los caracteres, lo que les genera una confusión. Ejemplo de letras conflictivas:  a/e,  u/n,  b/d,  p/q,  d/p,  b/g,  g/p,  m/w

Recomendaciones para facilitar la lectura

• Títulos: Evitar mayúsculas. Utilizar negrita en vez de subrayado o cursiva.
• Diseño: - Se recomienda utilizar alineación a la izquierda.
             - Evitar columnas estrechas.
             - El interlineado facilita la lectura.
  
• Redacción: Utilizar frases cortas, claras y directas. Ser conciso.
• Tipografía: La fuente debe cumplir con los siguientes requisitos:
             - Diferenciación de caracteres espejados (ej: a/e, n/u).                     
             - Alargue de ascendentes y descendientes (ej: q, b)
             - Remarcar apertura en caracteres abiertos (ej: c, a, e, u).         
             - Diferenciar mayúsculas que puedan llegar a confundirse (ej: M/W)
             - Fuentes recomendadas: Trebuchet MS, Arial, Géneva, Comic Sans
             - Considerar demás caracteres: números, signos.

Tipografías para la dislexia

    Existen fuentes que han sido diseñadas especialmente para la dislexia. Su objetivo es que las letras resulten más evidentes para quienes tienen el trastorno, facilitando la lectura.

    Los caracteres son diseñados con detalles que buscan evitar la rotación, cambio o efecto espejo que hace el cerebro de los disléxicos, principalmente con las letras conflictivas.

    Algunos ejemplos de tipografías disponibles son:

• Dyslexie: Diseñada por Christian Boer.
  
  Apela a la lógica de la gravedad utilizando efecto negrita en la parte inferior de los caracteres, de modo que el cerebro los estabiliza por su peso.  Además remarca la apertura en las letras abiertas y pone énfasis en los alargues ascendientes y descendientes.
  

• Sarakanda: Diseñada por Alejandro Valdez.
  
  Recurre a colores y marcadores para individualizar y diferenciar las letras conflictivas.
  

• Open Dyslexic: Diseñada por Abelardo González. 
  
  Su principal característica se basa en añadir peso en la parte inferior de los caracteres, darles gravedad y evitar que el cerebro los rote.Es una fuente gratuita, que se actualiza continuamente y no hay restricciones para su uso, más allá de la atribución. Se puede descargar en http://opendyslexic.org/

Complementos Open Dyslexic para navegadores

    Algunos navegadores ofrecen la posibilidad de añadir complementos para adaptar la navegación a nuestros requerimientos.

    Existen complementos que reemplazan la tipografía de los sitios visitados por Open Dyslexic: 

• Complemento para Opera  
• Complemento para Mozilla Firefox
• Complemento para Chrome

Fuente:

-          “Tipografía adecuada para la dislexia”. Ainaragm. http://www.ainaragm.es/tipografia-adecuada-dislexia/#sthash.gZkDg2kL.Vd4s80hd.dpuf

-          “Dos tipos de letra para disléxicos”. http://www.actualpsico.com/dyslexie-el-tipo-de-letra-para-dislexicos/

-          “Open-dysleic. Fuente de código abierto pensada para disléxicos”. Morton. http://www.elwebmaster.com/general/open-dyslexic-fuente-codigo-abierto-dislexicos

-          “Dyslexop”. Fedemp. https://addons.opera.com/es-419/extensions/details/dyslexop/?display=es

-          "OpenDyslexic  ". Abbiecod.es . https://chrome.google.com/webstore/detail/opendyslexic/cdnapgfjopgaggbmfgbiinmmbdcglnam

-          “Open Dyslexic”. Valentín Cotta. https://addons.mozilla.org/pt-BR/firefox/addon/opendyslexic/?src=cb-dl-created

Usabilidad en la web móvil

Estamos haciendo un estudio en profundidad para explicar a los interesados acerca de la creación de sitios web optimizados para móviles. En el presente artículo vamos a hablar de la usabilidad en la web móvil, es decir, todas esas buenas costumbres que debemos seguir para poder diseñar sitios web que sean fáciles de usar en dispositivos en movilidad.

En el artículo anterior explicamos que los hábitos de consumo de Internet en móvil son diferentes que en ordenadores personales y ofrecimos una lista de características del uso de Internet móvil. Así que a continuación vamos a mostrar ya cómo debería ser un sitio web optimizado para móviles en la práctica.


La regla fundamental: Menos es más

Debemos comenzar comentando la regla fundamental para el diseño web móvil y aunque pueda parecer un tópico, el dicho que "Menos es más" se ajusta perfectamente a la realidad. Cuando diseñamos para móviles nos sobra cualquier tipo de floritura, contenido superfluo o cualquier accesorio prescindible.

Como venimos diciendo, el usuario que se conecta a nuestro sitio web desde un móvil no lo suele hacer por entretenimiento, sino porque quiere obtener alguna información o servicio. Lo quiere rápido, y ligero, así que debemos satisfacerle en la medida de lo posible. Cuanto menos distracciones, mejor para el usuario y por añadidura, mejor para nosotros.

Consejos del W3C

Antes que nada quiero nombrar una fuente totalmente reconocida y recomendaros su consulta. Se trata, nada más y nada menos que el propio Consorcio de las Tres Uves Dobles, W3C para los amigos. Una organización que a día de hoy no necesita más presentación y que nos ofrece una lista bastante interesante de consejos que nos ayudarán a crear webs más usables cuando se acceden desde dispositivos.

El informe está en inglés y se llama Mobile Best Practices. Cabe señalar que, por contra de lo que muchas veces nos tienen acostumbrados desde la W3C, en este caso el texto es bastante sencillo de leer y de entender.

Decálogo de consejos de usabilidad para la web móvil

A continuación voy a listar hasta 10 consejos que nos pueden ayudar a construir sitios web más usables en dispositivos móviles. Algunos son más prácticos que otros, algunos también más obvios que otros.

1.- Ten en cuenta la diversidad de pantallas
Como primer punto, lo más fundamental en torno de los dispositivos móviles, las sensibles diferencias de tamaños de pantallas y de resolución. Ten en cuenta que estás diseñando para pantallas por lo general pequeñas, pero además que existen distintos tipos de definiciones. Si en ordenadores de escritorio ya debíamos tener en cuenta este detalle, al desarrollar para móviles todavía cobra mayor importancia.

2.- El foco no es tu sitio
Lo dicho anteriormente, quizás los usuarios están accediendo a tu sitio mientras llevan a cabo otras tareas, así que no vas a pretender que el visitante tenga los 5 sentidos dedicados a tu web. Analiza qué es lo que quieres mostrar, sintetiza, llama la atención sobre los puntos que consideres más importantes y descarta aquellos que no merezcan la pena. En la medida de lo posible, reduce la cantidad de contenido que estás distribuyendo en tu página para móviles.

3.- El layout debe estar pensado para móviles
En la web de escritorio utilizamos rejillas que tienen 12 o 16 columnas, sin embargo, en la web para móviles quizás con una columna tienes más que suficiente. En cualquier caso, ten en cuenta que funcionan mejor los layouts fluidos, que se adaptan a la anchura de cada tipo de pantalla. Si vas a utilizar varias columnas, considera 2 o 3 a lo sumo. Sin embargo, también es cierto que algunos dispositivos como los tablets pueden soportar perfectamente layouts más complejos, por lo que no existe una regla fija. Lo mejor sería tener varios layouts y utilizar uno u otro dependiendo de las dimensiones de la pantalla. Más adelante veremos cómo hacer eso.

4.- La navegación en la parte de arriba no suele funcionar
En la web para escritorio es habitual tener un navegador en la parte de arriba de la página, con un listado de las secciones principales de un sitio web. Pero debemos tener en cuenta que en dispositivos de movilidad, con pantallas pequeñas, ese listado de links puede ocupar todo el espacio disponible, lo que obligaría al usuario a hacer scroll para ver el contenido de la página. Algo que no es deseable. En la portada del sitio web puede ser una buena idea mantener la navegación en la parte de arriba del documento, pero en el resto de páginas queda mejor si la situamos abajo.

5.- Uso responsable de las imágenes
Esa imagen que en las pantallas de los ordenadores queda tan bien, posiblemente tenga un tamaño excesivo para visualizarse en una pantalla pequeña de un teléfono. Posiblemente la definición de la foto sea superior a la de la pantalla de tu dispositivo, con lo que estás desperdiciando espacio y ancho de banda para su transferencia. Usa imágenes con tamaños adaptados a móviles y elimina determinados usos de imágenes que aportan poco o nada a la utilidad de tu documento, como imágenes de fondo, que pueden molestar la lectura más que otra cosa.

6.- Se trabaja con los dedos y no con el ratón
Este punto es de vital importancia, puesto que la pantalla táctil utiliza el dedo como señalador y tiene muchas diferencias con respecto al puntero del ratón de nuestro ordenador personal. Ten en cuenta detalles como que el espacio para hacer un tap (tap es como se llama al clic realizado con el dedo sobre una pantalla táctil) es mayor que el que señalaríamos con el puntero del ratón (se supone que un dedo en la pantalla ocupa entre 40 y 80 píxeles de ancho). Dicho de otro modo, no se puede comparar la precisión de un clic con el ratón y con el dedo, que puede cambiar mucho de una persona a otra y también la forma de posicionarlo en la pantalla. En general tu sitio web funcionará mejor cuando pongas botones o enlaces con tamaño mayor. Así mismo, sería recomendable dejar un mayor espacio en blanco entre los botones o enlaces de tu sitio web.

7.- Entrada de texto en teclados virtuales
En el ordenador personal utilizamos un teclado para introducir texto, sin embargo, en dispositivos móviles se suele usar un teclado virtual que a menudo resulta mucho más incómodo. Este detalle y varios otros que tienen que ver con la entrada de datos en general lo veremos en el siguiente artículo sobre usabilidad en formularios optimizados para móviles.

8.- No se dispone de plugins
Flash es el ejemplo más claro de plugin que no disponemos en todos los dispositivos y que por tanto no deberíamos usar en páginas que queremos que se vean bien en móviles. Pero hay otros, como los Applets de Java, Shockwave, etc. Sin olvidar que no todos tienen compatibilidad con ciertas capacidades de scripting. Sugerir la actualización del navegador, o la instalación de otro cliente web, no es la solución en muchos de los casos, pues no siempre el usuario tiene oportunidad de actualizar su sistema operativo o instalar otro software para la navegación web.

9.- Los tipos de eventos cambian
El clic en pantallas táctiles se llama Tap. Realmente es un nuevo modo de llamar a la misma cosa, pero existen otros eventos que sí tienen cambios importantes, o que no están disponibles en las pantallas táctiles. Por ejemplo, el hover no existe al trabajar con los dedos. Además, hay otra serie de eventos que sólo existen en móviles como deslizamiento de los dedos, zoom, girar la pantalla etc.

10.- Existen diversas utilidades específicas que se pueden aprovechar Los dispositivos móviles a menudo integran algunas habilidades que no se disponen en los ordenadores de escritorio, como localización geográfica, cámaras, grabación, orientación, etc. En la mayorá de los casos estos mecanismos sólo se disponen en aplicaciones nativas, pero gracias a HTML 5, algunos ya están disponibles en sitios web. En el futuro la tendencia es integrar aun más estas capacidades en la web.
ConclusiónEste resumen de consejos de usabilidad deben mejorar en general la experiencia del usuario que visita el sitio web. Muchos de ellos requieren técnicas específicas para ponerlos en marcha en una web, que veremos en el transcurso de este manual en DesarrolloWeb.com.

Fuente: http://www.desarrolloweb.com/articulos/usabilidad-web-movil.html

INTRODUCCIÓN A LA ACCESIBILIDAD WEB EN FLASH

Adobe Flash es una tecnología basada en gráficos vectorizados cuyo principal enfoque es 

el tratamiento de animaciones e implementación de entornos multimedia. Actualmente tiene 

soporte sobre diferentes aplicaciones y plataformas pero su mayor campo de acción es el de 

la Web. A través de este documento, se proporciona información acerca de cómo 

proporcionar un nivel de Accesibilidad adecuado para cualquier objeto Web basado en esta 

tecnología. 

Antes de profundizar en los pasos necesarios, resulta imprescindible analizar el propósito 

para el que Flash fue diseñado, su funcionalidad y sus orígenes. 

USOS DE FLASH 

El objetivo de este apartado es el de ubicar el concepto de “utilizar cada tecnología para lo 

que fue diseñada” o lo que es lo mismo: despejar las dudas acerca de cuando utilizar Flash 

y cuando optar por otras tecnologías W3C1 al diseñar y desarrollar un sitio Web. 

Funcionalidad y Beneficios de Flash 

Los sitios Web y objetos programados en Flash, proporcionan entornos multimedia capaces 

de ofrecer interacción y movimiento. El propósito para el que está diseñada esta herramienta 

de desarrollo, es la presentación y la interacción visual en el ámbito multimedia y resulta 

realmente potente en dichos objetivos, pero no es la herramienta ideal para generar 

documentos Web completos o maquetar un portal. Es en este aspecto donde el 

desarrollador debe tomar decisiones: no es lo mismo construir el sitio Web para el catálogo 

de una biblioteca que hacerlo para la promoción de una película. En el primer caso, deben 

primar los contenidos estructurados y una funcionalidad útil e intuitiva mientras que, en el 

segundo, el grafismo y el apartado multimedia pueden llegar a tener más protagonismo. En 

cualquier caso, tendrá difícil justificación una Web desarrollada íntegramente en Flash.

La capacidad que ofrece Flash es siempre a un nivel de interacción muy específico: aquel 

donde prime el apartado visual y el movimiento o en el que la información no pueda ser 

presentada por otras tecnologías Web. 

Si bien es cierto que en cada nueva versión del software de desarrollo de Flash se ofrecen 

potentes prestaciones para construir sitios Web y ofrecer una funcionalidad similar a la de 

los documentos estructurados (HTML2, XHTML3, etc), su aun limitado soporte para la 

accesibilidad y su funcionalidad exclusiva sobre determinados sistemas operativos y 

agentes de usuario hacen que, de momento, el desarrollador deba plantearse en cada 

momento una serie de cuestiones: ¿Necesito utilizar un objeto Flash para esta sección en 

concreto? ¿Hay alguna tecnología estándar que me permita presentar la información de 

manera similar? ¿Puedo garantizar la accesibilidad de los objetos programados?... En 

función de esas respuestas y con lo expuesto anteriormente, es relativamente fácil decidir si 

un elemento en Flash es beneficioso o puede llegar a suponer un obstáculo. 

En ningún caso se trata de evitar el uso de esta tecnología, si no de todo lo contrario: usarla 

con todas sus prestaciones y capacidades para los casos en los que suponga una mejora 

evidente de los contenidos del sitio. Es decir, cuestionarse si es la mejor opción de entre 

todas las tecnologías Web disponibles: sin llegar a discutir sus beneficios y su potencial, 

Flash fue diseñado como herramienta de diseño y animación de gráficos vectorizados y su 

uso en una Web en la que se desee alcanzar un nivel de accesibilidad adecuado, debe estar 

siempre justificado. 

Usos Inapropiados 

En función de lo expuesto anteriormente, un objeto programado en Flash puede estar siendo 

utilizado de manera poco apropiada en un Sitio Web. No se trata de generalizar ni de aplicar 

fórmulas matemáticas a los malos usos de la tecnología pero sí hay una serie de aspectos a 

tener en cuenta: 

• Sitio Web 100% en Flash: Es habitual encontrarse sitios Web en los que prima el 

apartado visual que implementan toda su funcionalidad y contenidos sobre esta 

plataforma. Aunque en el mejor de los casos se aporte una alternativa equivalente en 

formato HTML o XHTML, nunca es aconsejable este tipo de abusos de la

tecnología ya que se limita un acceso 

globalizado a los contenidos. Es necesario recordar siempre la importancia de los 

estándares frente a otras tecnologías por lo que, un sitio enteramente en Flash, no 

es la mejor de las opciones. 

• Contenido Web Estático: como norma general, no es buena práctica utilizar Flash 

para contenido Web estático ya que para ese tipo de funcionalidad y presentación la 

solución óptima es el uso de documentos estructurados (HTML, XHTML) y hojas de 

estilo en cascada (CSS4, XSL5). El uso de estas tecnologías, potencia la 

accesibilidad de los contenidos y proporciona soporte para cualquier entorno y 

agente de usuario. 

• Navegación e Interacción: Fundamentar la navegación e interacción de un sitio 

Web en tecnología Flash, puede llegar a suponer un problema. Pese a que el objeto 

Flash destinado a tal efecto contenga las alternativas textuales a cada enlace y 

elemento del menú, esta tecnología no aporta el sentido lógico que puede llegar a 

ofrecer actualmente un documento estructurado (a través de una lista de 

enumeración, por ejemplo). 

SVG: la alternativa estándar 

Siempre que sea posible, lo óptimo para fomentar la accesibilidad de los contenidos es 

ofrecer tecnologías estándar. 

En el campo de los gráficos vectorizados, el W3C recomienda la tecnología SVG6, que 

muestra de algunas de las siguientes ventajas: 

• Fácilmente editable (el código fuente es XML y CSS). 

• Pueden hacerse búsquedas en el código del gráfico. 

• Los textos del gráfico pueden presentarse en el idioma preferido del usuario, de 

manera sencilla. 

• Puede reutilizarse una hoja de estilos CSS para varios gráficos. 

• Es un estándar abierto con implementaciones distintas y extensibles. 

• Se le pueden aplicar efectos típicos de las imágenes bitmap a imágenes vectoriales 

(rellenos degradados, efectos, etc). 

• Pueden generarse gráficos automáticamente, transformando el código XML. 

Las limitaciones actuales de la tecnología SVG son su aún reducido soporte en algunos 

agentes de usuario (sigue siendo necesario el uso de plug-ins) y su incapacidad para incluir 

directamente elementos multimedia como vídeos o sonidos (característica con la que sí 

cuentan los entornos Flash). 

SOBRE LA ACCESIBILIDAD DE FLASH 

Precedentes 

La primera versión de Flash se remonta a 1996, cuando Macromedia comercializa la 

conversión y adaptación del programa Future Splash Animator7

 en colaboración con sus 

creadores: la compañía FutureWaves. 

Durante los últimos años de la década pasada, Macromedia sigue comercializando 

sucesivas versiones de Flash que van introduciendo mejoras y funcionalidad a la 

herramienta pero no será hasta la versión 6.0 cuando se implemente el soporte para 

Accesibilidad. A partir de esa versión, y ya de manos de la compañía Adobe8, se siguen 

implementando mejoras del motor de Flash en cuanto a Accesibilidad Web. 

Requerimientos 

Para que un desarrollador pueda generar contenido accesible a través de Flash, o un 

usuario pueda beneficiarse de la Accesibilidad de dichos contenidos, existen una serie de 

requerimientos: 

• Flash Player 6 o superior 

• Windows 98, 2000, XP o Vista 

• Microsoft Internet Explorer 5 o superior 

• Un lector de pantalla: 

o GW Micro Window Eyes 4.2 o superior 

o Freedom Scientific JAWS 4.5, 6.1 o superior 

o IBM Home Page Reader 3.04 o superior 

o Dolphin HAL 6.50 

o KDS PC Talker (Japonés) 

Limitaciones Actuales 

A partir de los Requerimientos y lo visto hasta el momento, se puede establecer, de manera 

específica, las limitaciones actuales para generar contenido accesible en objetos Flash: 

Limitaciones del entorno de usuario 

• Sistema Operativo. El usuario que desee tener acceso a la información de un 

objeto Flash a través de software de soporte de Accesibilidad (un lector de 

pantalla, por ejemplo) deberá contar con un sistema operativo Microsoft 

Windows. Limitar el acceso a la información en función de una única 

plataforma o entorno de usuario supone una barrera significativa para muchos 

individuos. 

• Navegador. La accesibilidad en los objetos Flash sólo está disponible a través 

del navegador Microsoft Internet Explorer. En otros navegadores, como es el 

caso de Mozilla Firefox, no hay soporte para la Accesibilidad de estos objetos. 

Esta dependencia del agente de usuario creado por Microsoft, viene dada por 

la tecnología Microsoft Active Accesibility (MSAA10) y su incompatibilidad 

con el motor actual de la mayoría de los navegadores. MSAA es la única vía 

que tiene Flash, por el momento, para ofrecer compatibilidad con lectores de 

pantalla y otras ayudas técnicas. 

PAUTA PARA EVALUACIÓN HEURISTICA DE SITIOS

La heurística es una forma de revisión de sitios web basada en la experiencia de quien 

realiza la evaluación. Consiste en comprobar diferentes aspectos, desde diseño y 

navegación hasta operación y utilidad. Este documento explica cómo desarrollarla. 

 

El resultado de una prueba de este tipo, es un informe emitido por el evaluador en el que 

describe el problema analizado, las reglas específicas que son afectadas por su 

comportamiento y cómo podría mejorar el cumplimiento de ellas con un cambio en la 

interfaz. Añade que si bien esto último no es posible, sí será importante que los problemas 

conocidos sean reportados con el fin de intentar hacer las modificaciones posibles para 

aportar a su solución. 

 

La evaluación a través de este sistema permite la generación de un informe que al menos 

debería incluir los siguientes aspectos: 

 

• Descripción de la forma de trabajo: En esta parte de la evaluación se debe dejar 

constancia de las características del proceso realizado. Entre los elementos 

concretos a citar se incluyen los siguientes: 

o Fecha y hora de la evaluación; 

o Tipo de conexión a Internet, para descartar problemas debido a la velocidad; 

o Datos generales sobre la forma en que se realiza la evaluación. 

o Información acerca de la forma en que se asignan los puntajes de la 

evaluación. 

o Información acerca de los principales ítems evaluados. 

 

• Principales Hallazgos: en esta parte del reporte se hace un resumen de las 

principales características evaluadas, indicando los aspectos positivos y negativos 

encontrados. 

 

• Conclusión Final: en esta parte se entrega la recomendación final respecto de los 

problemas encontrados y se detallan los elementos positivos encontrados en la 

evaluación. 

 Pauta de Evaluación Heurística de Sitios 

Guía Web Versión 2.0 www.guiaweb.gob.cl 2 

Cómo hacer la evaluación 

 

Al desarrollar una Evaluación Heurística, es importante que los expertos que la lleven a 

cabo tengan algún sistema común de evaluación, con el objetivo de homologar y reunir sus 

comentarios de manera similar. 

 

Una fórmula para hacerlo es definir una serie de preguntas respecto del sitio web que se 

evalúa y para cada una de ellas, poner una nota que luego pueda ser tabulada. En este 

sentido, una escala habitual puede ser la siguiente: 

 

Esta escala de evaluación va a de 1 a 5 con los siguientes valores: 

 

1 - Muy malo o no funciona: lo evaluado no realiza la actividad o no muestra el 

contenido que ofrece. 

2 - Funciona pero no sirve: lo evaluado desarrolla la actividad o muestra un contenido, 

pero en general, lo recibido por el evaluador no aporta a la experiencia general del 

sitio. 

3 - Funciona pero debe mejorar: lo evaluado desarrolla la actividad o muestra un 

contenido relativamente útil, pero podría ser mejor. Al respecto el evaluador debe 

aportar información para hacer mejoras al sitio. 

4 - Cumple: lo evaluado desarrolla la actividad o muestra un contenido útil. El evaluador 

debe aportar información para hacer mejoras al sitio. 

5 - Es lo que el usuario busca: lo evaluado desarrolla la actividad o muestra un 

contenido útil que cumple o excede la expectativa del usuario. 

 

Dichas notas deben ser puestas a una serie de preguntas que se van generando en torno a las 

áreas más importantes del sitio web; en todo caso, lo interesante de este tipo de evaluación 

es que las preguntas se relacionan directamente con lo que se desea evaluar. 

 

A modo de ejemplo, a continuación se muestran algunas preguntas para las áreas más 

relevantes a evaluar de un sitio web: 

 

Concepto Nota 

 

Identidad 

• El sitio web entrega información corporativa de la organización x 

• Informa datos relevante para quien “no navega (Ej.: Horas de atención) x 

• Entrega información para hacer consultas web o no-web (Ej.: Nos. de teléfono) x 

 

Diseño 

• El diseño es consistente en todas las pantallas del sitio? x 

• Se adapta adecuadamente a las resoluciones más comunes? x 

• Las páginas tienen scroll adecuado? x 

 Pauta de Evaluación Heurística de Sitios 

Guía Web Versión 2.0 www.guiaweb.gob.cl 3 

Tiempo de Acceso 

• Tiempo de acceso de la portada bajo 15” en conexión de baja velocidad? x 

• Permite ver lo más importante al principio del despliegue de las páginas? x 

• Ofrece acceso sólo texto cuando se trata de interfaces gráficas? 

 

Accesibilidad 

• Existe texto alternativo (Alt) en las imágenes? x 

• Cuenta con Flash o Plug-ins y los informa? x 

• Tamaño de letras es adecuado? Se pueden agrandar? x 

 

Navegación 

• Los enlaces son claramente visibles? x 

• Se notan los enlaces visitados? x 

• El menú del sitio es consistente en todo el sitio? X 

• Todos los vínculos funcionan? x 

 

Operación 

• Presenta fallas de sistema? x 

• Se administra el error 404? x 

• Existe seguridad adecuada para el tipo de sitio? x 

• Si es relevante para el sitio, se explica la seguridad ofrecida? x 

 

Utilidad 

• Tiene Buscador? Funciona OK? x 

• Permite hacer lo mismo o más que lo que se puede hacer la institución física? x 

• Permite resolver las dudas básicas que el usuario tenga sobre sus contenidos? x 

• El sitio genera una experiencia que a uno llevaría a recomendarlo a otros? x 

 

Desarrollo del Informe 

 

Una vez que se ponen las notas a cada una de las preguntas, es espera que el evaluador haga 

un comentario que fundamente su punto de vista. Gracias a esto, será posible tener su 

visión acerca del sitio de manera concreta y además, se podrán extraer conclusiones. 

 

Claramente se buscará reunir en el documento tanto los aspectos positivos como los 

negativos del sitio evaluado, para cada una de las áreas (es decir, Identidad, Diseño, 

Tiempo de Acceso, Accesibilidad Navegación, Operación y Utilidad). Con estos 

comentarios será posible encauzar el trabajo posterior para buscar mejoras en el sitio web.