Usable y accesible

Accesibilidad y usabilidad móvil: web móvil y app nativa

2012-05-13T02:45:00.000+02:00

Artículos relacionados:

Índice

Iniciativa Web Móvil (MWI) del W3C
Mobile Web Best Practices 1.0 (MWBP)
Mobile Web Application Best Practices
Guías específicas de accesibilidad para el desarrollo de apps nativas en diferentes dispositivos
¿Cómo usan las personas con discapacidad un dispositivo móvil?
Otras referencias sobre UX en dispositivos móviles
Conclusiones

Iniciativa Web Móvil (MWI) del W3C

En Mayo de 2005 el W3C lanzó la Iniciativa Web Móvil (MWI) con el objetivo de ayudar a los desarrolladores a mejorar la accesibilidad y usabilidad de los contenidos para dispositivos móviles y resolver los problemas de interoperabilidad.

Los principales grupos de trabajo involucrados han sido:

Mobile Web Best Practices Working Group, cuyo objetivo fue elaborar un conjunto de buenas prácticas que mejoraran la experiencia de los usuarios al acceder al contenido Web desde dispositivos móviles. Trabajó desde mayo de 2005 hasta diciembre de 2010, dejando publicadas dos recomendaciones:
- Mobile Web Best Practices (recomendación desde julio de 2008)
- Mobile Web Application Best Practices (recomendación desde diciembre de 2010)
Ambos documentos se tratan en profundidad en los siguientes apartados de este artículo.
Device Description Working Group, creado para guiar el desarrollo de un repositorio de descripción de dispositivos (DDR) que pudiera ser utilizado para adaptar los contenidos a un dispositivo en particular. Trabajó desde mayo de 2005 hasta diciembre de 2008, dejando publicados diversos documentos entre los que destacan:
- Device Description Repository Simple API, que describe la API para el acceso al DDR con el fin de facilitar y promover el desarrollo de contenido Web que se adapte al dispositivo desde el que se accede.
- Device Description Repository Core Vocabulary, define el vocabulario, identificando las propiedades que se consideran esenciales para la adaptación de los contenidos a la web móvil (las dimensiones de la pantalla, los mecanismos de entrada, los colores admitidos, las limitaciones conocidas, etc.)
Mobile Web for Social Development Interest Group, es un grupo de interés que explora cómo utilizar el potencial de las Tecnologías de la Información y la Comunicación (TIC) en los teléfonos móviles como una solución para salvar la brecha digital y proporcionar los servicios mínimos (salud, educación, gobierno, negocios, etc.) a las comunidades rurales y a la población de los países en desarrollo. Su documento más relevante es de diciembre de 2009 Mobile Web for Social Development Roadmap.

Mobile Web Best Practices 1.0 (MWBP)

El objetivo de las Mobile Web Best Practices 1.0 (recomendación desde julio de 2008) es servir de pautas para mejorar la experiencia de usuario en la navegación web a través de dispositivos móviles.

El W3C mobileOK Basic Test es el esquema para evaluar la conformidad de un sitio web de acuerdo con las Mobile Web Best Practices. Es utilizado por el validador automático online del W3C W3C mobileOK Checker. Como en todo validador automático, sólo se evalúan aquellos puntos que pueden verificarse de forma automática, los demás deberán ser verificados de forma manual.

Imagen de The W3C mobileOK™ Checker, W3C

La nota de agosto de 2009 W3C mobileOK Scheme 1.0 señala que los proveedores pueden identificar sus páginas como mobileOK, es decir, que pasan el validador automático y por tanto las pruebas básicas en él implementadas. En ese caso pueden añadir el icono:

Consultar "W3C mobileOK Logo and Policy"

Las Mobile Web Best Practices 1.0 (MWBP) están resumidas en una tarjeta traducida al español. Son 60 pautas organizadas en 10 principios clave que si se cumplen permiten incrementar el público que puede acceder a los contenidos, crear sitios Web y aplicaciones eficaces y hacer la navegación en la Web accesible desde más dispositivos.

Estos 10 principios generales son:

Diseña para una Web única.
Si diseñas el contenido teniendo en cuenta los diferentes dispositivos, reducirás costes, tu página será más flexible y satisfarás las necesidades de más personas.
Confía en los estándares Web.
En un mercado tan fragmentado como el de dispositivos y navegadores, los estándares son la mejor garantía de Interoperabilidad.
Evita los riesgos conocidos.
Un diseño bien planificación ayuda a reducir los problemas de usabilidad causados por pantallas y teclados pequeños, u otras funciones de los dispositivos móviles.
Sé prudente con las limitaciones de los dispositivos.
Cuando elijas una tecnología Web concreta, ten en cuenta que los dispositivos móviles tienen funciones muy diversas.
Optimiza la navegación.
La simplificación de la navegación y del uso del teclado son factores esenciales cuando se utilizan pantallas y teclados pequeños, y se tiene un ancho de banda limitado.
Comprueba gráficos y colores.
Las imágenes, los colores y el estilo destacan el contenido, pero hay dispositivos con pantallas de bajo contraste o problemas de compatibilidad con algunos formatos.
Hazlo pequeño.
Un sitio Web de tamaño reducido supondrá un ahorro de tiempo y dinero para los usuarios.
Economiza el uso de la red.
Las funciones de los protocolos Web pueden mejorar la experiencia del usuario al reducir los retrasos y los tiempos de espera en la red.
Facilita la entrada de datos.
En los dispositivos móviles, los teclados y demás métodos de introducción de datos pueden ser tediosos para el usuario. Un diseño eficaz minimiza su uso.
Piensa en los usuarios de la Web móvil.
Los usuarios de la Web móvil necesitan información sintetizada al disponer de poco tiempo y existir distracciones externas.

MWBP y las WCAG

Las MWBP 1.0 no describen cómo hacer contenido Web accesible en dispositivos móviles, para ello están las WCAG. Las MWBP 1.0 explican cómo mejorar la experiencia de usuario en el acceso al contenido web desde los dispositivos móviles.

Ambas se solapan en muchos puntos, porque los usuarios de dispositivos móviles y las personas con discapacidad se enfrentan a barreras similares al interactuar con el contenido web.

WCAG y MWBP tienen como objetivo mejorar la interacción de los usuarios de Internet que experimentan barreras, ya sea debido a la discapacidad o el dispositivo utilizado para acceder a la Web.

Sin embargo, las WCAG y MWBP tienen enfoques ligeramente diferentes. Por ejemplo, una característica clave de los criterios de éxito de las WCAG 2.0 es que están diseñados específicamente para ser declaraciones comprobables. Aunque algunas de las MWBP se pueden comprobar, no tienen el propósito de ser comprobables.

[A lo cual añado yo que las MWBP no tienen niveles de prioridad como sí los tienen las WCAG]

Mientras que los dos documentos muestran un solapamiento significativo en muchas áreas, hay diferentes grados de superposición entre los distintos requisitos técnicos, de modo que no siempre hay una correspondencia uno-a-uno entre ellos.

Por ejemplo, las WCAG tienen algunos requisitos que son específicos para las necesidades de accesibilidad de las personas con discapacidad, y que no son relevantes para dispositivos móviles (por ejemplo, los requisitos que se refieren específicamente a la tecnología de asistencia).

A la inversa, las MWBP tienen otros requisitos que son específicos para los dispositivos móviles solamente (por ejemplo, los requisitos para minimizar el consumo de la batería y potencia de la CPU).

Sin embargo, en general muchos requisitos son aplicables para ambos grupos de usuarios (por ejemplo, los requisitos para el contraste de colores, los tamaños de fuente flexibles, etc.)

Traducción de un fragmento del documento Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG)

Si tu sitio ya cumple con las WCAG será sencillo cumplir con las MWBP y viceversa.

Algunas de las pautas de las MWBP que os resultarán familiares son:

Crea documentos gramaticalmente válidos.
Asigna teclas de acceso rápido a los menús y a las funciones más utilizadas.
Facilita un equivalente en forma de texto para cada elemento no textual.
No utilices medidas absolutas.
Etiqueta cada control de formulario y asocia la etiqueta con los controles.
Crea mecanismos de navegación consistentes.
No hagas refrescos automáticos de las páginas sin informar al usuario y permitirle pararlos.
No abras pop-ups y no cambies la ventana actual sin informar al usuario.
Usa un lenguaje simple y claro.
Identifica claramente el destino de cada enlace.
Asegúrate de que la información transmitida a través de los colores también esté disponible sin color.
Asegúrate de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste.
Proporciona un título corto y descriptivo a las páginas.
etc.

Otras pautas de las MWBP más específicas para los dispositivos móviles (aunque beneficiarán a todos los usuarios) son:

Intenta que la URI de entrada al sitio sea tan corta como pueda.
Incluye sólo la navegación básica en la parte superior de la página para que el contenido de la página se vea sin escrolar.
Intenta reducir al máximo el número de enlaces externos.
Sirve sólo el contenido que el usuario ha pedido: no descargues contenido sin su permiso pues los usuarios de móviles pagan a menudo el ancho de banda, por lo que el contenido ajeno a sus necesidades, especialmente la publicidad, les cuesta tiempo y dinero y contribuye a una experiencia insatisfactoria.
Asegúrate de que el tamaño global de la página es adecuada a las limitaciones de memoria del dispositivo.
Limita el scroll a una sola dirección a no ser que el desplazamiento secundario no pueda ser evitado.
Evita las imágenes grandes o de alta resolución, a no ser que sea información crítica.
Si las imágenes tienen una tamaño intrínseco, específica el tamaño de las imágenes en el marcado de la página y redimensiónalas en el servidor.
Reduce el tamaño de las CSS.
No confíes en que las cookies estén disponibles.
Proporciona información de caché en las respuestas HTTP.
Evita la introducción de texto libre por parte del usuario siempre que sea posible.
Proporciona valores por defecto preseleccionados siempre que sea posible.
etc.

Además desaconsejan explícitamente los frames, los mapas de imagen, los pop-ups y las tablas para maquetar. En el caso de los scripts sólo si no hay otra forma de lograr sus objetivos, pues se indica que no son soportados por todos los dispositivos, aumentan el consumo de energía y por tanto disminuyen la duración de la batería.

Para comprender la relación entre ambos estándares, sus similitudes y diferencias, hay cuatro documentos que se introducen en la nota Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG):

From MWBP to WCAG 1.0: si tu sitio ya cumple con las MWBP cómo cumplir también con las WCAG 1.0
From MWBP to WCAG 2.0: si tu sitio ya cumple con las MWBP cómo cumplir también con las WCAG 2.0
From WCAG 1.0 to MWBP: si tu sitio ya cumple con las WCAG 1.0 cómo cumplir también con las MWBP
From WCAG 2.0 to MWBP: si tu sitio ya cumple con las WCAG 2.0 cómo cumplir también con las MWBP

Además, es de gran utilidad el documento Table of Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities, donde se esquematiza en forma de tabla el paralelismo entre la experiencia de los usuarios con discapacidad y la de los usuarios de dispositivos móviles, indicando la correspondencia entre los puntos de verificación de las WCAG 1.0, los criterios de éxito de las WCAG 2.0 y las pautas de las MWBP.

Otros enlaces recomendados:

Guía de Accesibilidad en los contenidos para dispositivos móviles, Inteco
Guidelines for the development of accessible mobile interfaces, PDF (270 kb), Swedish Internet Fund
Global Authoring Practices for the Mobile Web, Luca Passani, buenas prácticas para la creación de servicios móviles usables basados en XHTML-Mobile Profile 1.0
Sobre el soporte de diferentes etiquetas por lectores de pantalla en dispositivos móviles es interesante conocer dos artículos de Henny Swan:
- Screen reader support for abbr and span on mobile
- Use consistent text alternatives across desktop and mobile

Por último recordar que actualmente no hay ninguna legislación que incluya la obligación de cumplir con las MWBP, como por el contrario sí ocurre con las WCAG.

Mobile Web Application Best Practices

Las Mobile Web Application Best Practices son recomendación desde diciembre de 2010. Amplían las MWBP, que como hemos visto ponen el foco en ofrecer una buena experiencia de navegación por Internet desde una amplia gama de dispositivos móviles.

Por su parte, las Mobile Web Application Best Practices recogen las mejores prácticas para las aplicaciones Web que se ejecutan en el navegador y/o que usan las capacidades de los dispositivos avanzados (por ejemplo la geolocalización), así como advierten de las prácticas perjudiciales para asegurar la mejor experiencia de los usuarios de dispositivos móviles.

Definen "aplicación web" en este contexto como la página web (XHTML o variante de la misma +CSS) o selección de páginas web entregadas a través de HTTP. Sin embargo, tal y como indican, en muchos casos son también aplicables a los Web Widget (ver "Introducción a los W3C Widgets", de Andrés Nieto) o iniciativas propias de cada proveedor.

Son 32 pautas más 3 consideraciones adicionales. Se advierte que no es necesario aplicar todas las pautas, si no que su aplicación o no ha de considerarse en cada caso. Algunas sólo son aplicables si el dispositivo tiene ciertas capacidades (por ejemplo, el acceso a la información del dispositivo, como la ubicación) pero presuponen que al menos tienen soporte para XHTML, CSS y JavaScript.

El W3C resume las Mobile Web Application Best Practices en una tarjeta (PDF) que agrupa las pautas en los siguientes principios:

Optimiza el tiempo de respuesta. Cada detalle importa en las aplicaciones Web móviles y algunos aspectos técnicos puede aumentar significativamente la experiencia del usuario.
Libertad del usuario. Los dispositivos móviles se utilizan en diferentes contextos, desde pasar el rato en su casa hasta las peticiones urgentes imprevistas. Permite a los usuarios conocer y controlar lo que sucede para ganar su confianza.
Diseña para la flexibilidad. Las aplicaciones Web se ejecutan en entornos heterogéneos y cambiantes. La flexibilidad le permite hacer frente a más dispositivos y usuarios a un costo reducido
Recuerda los principios Web. Los dispositivos móviles son sólo una manera de acceder a la web. Los principios genéricos de la web son también aplicables al desarrollo de aplicaciones Web móviles robustas.
Spare the network. Usa adecuadamente las características del protocolo Web para reducir los cuellos de botella y la latencia de la red.
Explota las características específicas de los dispositivos móviles. Algunas tecnologías Web son especialmente relevantes para los dispositivos móviles. Aprende a usarlas.

Algunos ejemplos de pautas son:

Usa las cookies con moderación.
Replica los datos en local.
Informa al usuario acerca del acceso y uso a la información personal o del dispositivo.
Usa el elemento meta viewport para el identificar el tamaño de pantalla deseado.
Haz los números de teléfono Click-to-call (<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>)
Conserva el foco en las páginas que se actualizan dinámicamente.
etc.

Enlace recomendado: WAI ARIA support on iOS, sobre el soporte de los atributos WAI ARIA en iPhone 4 e iPad 1.

Guías específicas de accesibilidad para el desarrollo de apps nativas en diferentes tipos de dispositivos

Muchos de los principios de usabilidad y accesibilidad de los documentos comentados anteriormente pueden aplicarse a las apps nativas. Además, tanto Android, Apple, Blackberry o Windows tienen sus propias guías.

Android

En la guía para desarrolladores de Android encontramos dos apartados de interés:

Accessibility.

Muchos usuarios de Android tienen alguna discapacidad que les obliga a interactuar con dispositivos Android de diferentes maneras. Esto incluye a los usuarios que tienen discapacidades visuales, físicas o relacionadas con la edad que les impide ver o usar una pantalla táctil.

Android proporciona características y servicios de accesibilidad para ayudar a estos usuarios a utilizar sus dispositivos más fácilmente, incluyendo text-to-speech, haptic feedback, trackball y D-pad navigation, que mejoran su experiencia. Los desarrolladores de aplicaciones para Android pueden aprovechar estos servicios para hacer sus aplicaciones más accesibles y también para crear sus propios servicios de accesibilidad.

Ofrece dos recursos:
- Making Applications Accessible. Development practices and API features to ensure your application is accessible to users with disabilities.
- Building Accessibility Services. How to use API features to build services that make other applications more accessible for users.
Best Practices, que tiene los siguientes subapartados:
- Compatibility
- Supporting Multiple Screens
- Supporting Tablets and Handsets
- UI Guidelines
- Designing for Performance
- Designing for Responsiveness
- Designing for Seamlessness Designing for Security

Apple

En la web de desarrolladores de Apple tenemos la serie de documentos Accessibility Programming Guide for iOS que se centra en cómo hacer las aplicaciones accesible mediante VoiceOver. Para ello cuenta con tres documentos:

Accessibility on iPhone: se describe brevemente cómo funciona VoiceOver en el dispositivo e introduce la interfaz de programación y las herramientas que se pueden utilizar para hacer que una aplicación sea accesible.
Making Your iPhone Application Accessible: proporciona una guía detallada para hacer que una aplicación sea accesible a los usuarios de VoiceOver.
Testing the Accessibility of Your iPhone Application: que puede realizarse mediante el Accessibility Inspector del simulador o directamente con VoiceOver en el dispositivo. Explican como testear la aplicación con VoiceOver.

Enlace recomendado: Accessibility for iPhone and iPad apps, Matt Gemmell

Blackberry

En la Accessibility Development Guide 6.0 de Blackberry podemos encontrar cuatro documentos:

"Understanding accessibility"
"Best practice: Designing accessible applications", en la que se ofrecen 17 pautas organizadas en cuatro temas:
- Guidelines for UI design
- Guidelines for navigation
- Guidelines for text
- Guidelines for color and images
"Developing accessible BlackBerry device applications by using the Accessibility API"
"Related resources", con un enlace destacado para la descarga de BlackBerry Screen Reader.

Windows

En el MSDN de Microsoft encontramos para Windows Phone un apartado User Experience Design Guidelines for Windows Phone, pero no hay ningún apartado específico sobre accesibilidad (por lo visto no es muy accesible)

Sin embargo para Windows Mobile 6.5 sí tenemos una guía que contiene dos secciones:

Accessibility Application Development. Describe los diferentes métodos disponibles en Windows Embedded CE para establecer las opciones de accesibilidad.
Accessibility Reference. Proporciona una descripción de los elementos de accesibilidad de programación.

También en el apartado Design Guidelines hay un apartado "Accessibility and Ergonomic Guidelines"

Enlace recomendado: Are your mobile apps accessible? , RNIB

¿Cómo usan las personas con discapacidad un dispositivo móvil?

Sin embargo, todo lo dicho anteriormente no tiene mucho sentido sin conocer cómo usan los dispositivos móviles las personas con discapacidad.

En este caso lo más práctico no es contarlo, sino verlo, para ello podéis consultar mi lista de reproducción de Youtube "Accesibilidad móvil"

Otras referencias sobre UX en dispositivos móviles

Usability of Mobile Websites & Applications: 237 Design Guidelines for Improving the User Experience of Mobile Sites and Apps, de Jakob Nielsen. Es la segunda edición, en la primera sólo había 85 directrices.
Mobile Web Developers's Guide(PDF), en general la web mobiForge tiene contenidos de interés.
Usability of iPad Apps and Websites, de Jakob Nielsen.
User experience checklist for touch (PDF). UX Checklist de Nokia para dispositivos táctiles
User experience checklist for keypad (PDF). UX Checklist de Nokia para dispositivos con teclado
Usabilidad en dispositivos táctiles, de Xperience Consulting
Mobile Web Site Guidelines, de la Universidad de Texas
Mobile UI Patterns
20+ Mobile Apps Inspiration and Design Pattern Galleries

Conclusiones

Para que los contenidos web sean accesibles, independientemente del dispositivo con el que vayan a ser accedidos, deben cumplir con las WCAG.

De forma complementaria, para mejorar la experiencia de usuario en la navegación web desde dispositivos móviles, debemos aplicar las Mobile Web Best Practices (WMBP). Como hemos visto, el W3C dispone de un validador automático W3C mobileOK Checker que permite verificar aquellas pautas que admiten validación automática.

Cuando tenemos una aplicación RIA, para asegurar una mejor experiencia de usuario debemos aplicar también las Mobile Web Application Best Practices, que son una ampliación de las WMBP, pero orientadas a las aplicaciones RIA y el uso de las capacidades de los dispositivos avanzados.

En el caso de las aplicaciones nativas es necesario conocer estos documentos y aplicar aquellas pautas que sean aplicables. Pero es necesario conocer también las guías específicas de accesibilidad de Android, Blackberry, Apple o Windows.

Pero sobre todo, para comprender el sentido de todo esto, es necesario conocer las barreras que habitualmente encuentran los usuarios al acceder al contenido web desde un dispositivo móvil, así como conocer las barreras que encuentran las personas con discapacidad y cómo estas utilizan los dispositivos móviles.

Artículos relacionados:

iPad, recomendaciones de usabilidad para tu web

2011-11-22T22:35:00.003+01:00

Artículos relacionados:

En este artículo doy 10 recomendaciones extraídas de mi experiencia para que tu web sea más usable cuando es accedida desde un iPad.

Si os interesa el tema os recomiendo: "Usability of iPad Apps and Websitse", de Jakob Nielsen. PDF gratuito de 134 pp. (14.8 MB)

1. Incluye un “favicon” específico para el iPad

Cuando visualizas una página web con el iPad tienes la opción de “Añadir a la página de inicio”. Esta opción crea un acceso directo en el escritorio cuyo icono es una zona de la web y resulta poco reconocible.

Para personalizar el icono es necesario incluir la siguiente línea en las páginas:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

La imagen debe ser de 72x72 (también coge 57X57, propio del iPhone, pero la resolución evidentemente es menor)

También puedes indicar varios tamaños (el primero es para 57x57):

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
[Ejemplo de Configuring Web Applications de iOS Developer Library]

En el siguiente ejemplo muestro el escritorio con dos enlaces directos a mi blog antes de ponerle una imagen específica y el tercero cuando ya se la he incluido:

2. No utilices Flash

Desde el iPad, de forma estándar, no se puede visualizar Flash ni se puede descargar el plugin para visualizarlo. De hecho, Adobe anunció este mes que abandona Flash para dispositivos móviles.

Es cierto que hay algunas maneras de visualizar Flash, por ejemplo con la aplicación gratuita iSwifter. Pero si quieres que sea accesible para todos debes abandonar el uso de Flash y pasarte a HTML5 (que iPad soporta) o en su defecto ofrecer alternativas.

Recordemos que dar una alternativa a Flash es un requerimiento de las WCAG 1.0, por tanto, si tu web fuera accesible también lo sería en un iPad.

Puede ser tan simple, cuando se trata solo de un banner, como:

<object type="application/x-shockwave-flash" data="flash.swf" width="230" height="100"> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> <img src="flash.gif" width="230" height="100" alt="Texto aternativo de la imagen" /> </object>

Pongo a continuación algunos ejemplos de cómo se visualizan en el iPad páginas con contenido en Flash:

Web de Disney: no muestra ninguna alternativa al contenido central que es un Flash, solo un texto y un enlace para descargar el plugin (que no podrá descargarse con el iPad)

Web de Caprabo: muestra texto alternativo a las animaciones Flash

Web Chocapic: es una web en Flash a la que no se podrá acceder. Solo muestra una imagen con un mensaje pero no hay una alternativa en HTML.

Web de Vodafone: muestra una imagen alternativa a la animación en Flash y un enlace a la descarga del plugin (que no podrá descargarse en el iPad)

El banner superior de elpais.com no muestra ni un mensaje ni una imagen alternativa. Por el contrario, la publicidad interior, que también es en Flash, sí se visualiza como una animación en el iPad:

3. Comprueba que los campos del formulario cogen el foco y lo hacen en un orden lógico

Cuando “tocas” un campo de texto se muestra el teclado de pantalla del iPad. Sobre este teclado aparecen dos enlaces “Anterior” y “Siguiente”

Mediante estos enlaces el usuario se mueve a los campos siguientes y anteriores. Por tanto, asegúrate de que todos los campos cogen el foco y lo hacen en el orden correcto. No hay nada más molesto que tener que volver a la pantalla para seleccionar un campo que no coge el foco.

Este es también un requerimiento de las WCAG, por tanto, volvemos a ver que si tu web es accesible también será más fácil de usar en el iPad.

4. Ayuda al usuario a rellenar los campos del formulario: indica el tipo de campo

Cuando relleno formularios con el iPad me molesta que no reconozca el tipo de dato que se pide y, en función del mismo, me muestre la versión del teclado adecuada.

Y sin embargo hay una manera de hacerlo:

Campo texto: <input type="text" /> Campo url: <input type="url" /> Campo numérico: <input type="number" /> Campo email: <input type="email" />

Los navegadores que no soportan HTML5 lo obviarán y los tratarán como campos de tipo texto (type="text").

Esto lo ví en Tip Precoz 5: teclados de iPhone/iPad. Pongo ejemplos de los diferentes tipos de teclado que se muestran en función del tipo de campo:

Campo type="text"

Campo type="url"

Campo type="number"

Campo type="email"

5. Recuerda que no tienes ratón

Comprueba que tus eventos de ratón funcionan en la pantalla táctil. En el iPad funciona por ejemplo el mouseover, pero te puedes encontrar con problemas asociados al drag&drop, por lo que puede ser necesario traducir los eventos de ratón a eventos táctiles:

Por ejemplo, el siguiente menú no se puede arrastrar con el iPad.

Por ejemplo, el siguiente menú ordenable no se puede ordenar con el iPad.

Por ejemplo, las columnas ordenables de esta tabla no se pueden ordenar con el iPad.

De nuevo nos encontramos con un requerimiento de las WCAG, así que una vez más, una web accesible es una web también accesible para el iPad.

Enlaces interesantes:

Touch Events version 1 del W3C
Developing for Multi-Touch Web Browsers de HTML5Rocks.

6. Recuerda que se navega con el dedo

¿Te has medido la yema del dedo? La zona de la yema con la que pulso mide más o menos 1cm x 1cm.

Ten cuidado con el tamaño y la separación entre los enlaces, los botones y los radiobuttons y checkbox para que sea fácil seleccionarlos sin tener que hacer zoom.

Para ello puede ser muy útil cargar una CSS específica para el iPad, donde el tamaño y los márgenes sean mayores.

Un ejemplo rápido (y un poco burdo). Tengo el siguiente formulario (visualizado con Explorer):

Para que sea más fácil de utilizar con el iPad, le he aplicado una CSS específica:

<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="ipad.css"/>

Efectivamente se aplica solo en iPad y, como se ve, presenta los elementos más grandes y separados:

Solo le falta el toque estético :)

Por ejemplo, en la web de Zara vemos que los iconos son muy pequeños y tanto estos como los menús están muy juntos y resulta muy difícil pulsarlos con el dedo, le vendría bien una CSS específica:

Jakob Nielsen recomienda que los iconos sean al menos de un 1cm x 1cm para que sean fáciles de pulsar con el dedo... supongo que también se ha medido la yema del dedo.

7. Revisa la visualización en vertical y en horizontal

Recuerda que si giras el iPad, tu web también rota y se adapta al ancho vertical u horizontal.

Quizás te puede interesar una CSS diferente para cada caso:

Es interesante el artículo iPad CSS Layout with landscape / portrait orientation modes:

Pero si lo haces, o juegas con el viewport, ten cuidado de que lo estés haciendo bien …

Mira este ejemplo de sativapedia.com, en horizontal la web se ve bien, pero en vertical no se adapta y el contenido queda cortado.

Enlaces de interés:

8. Cuidado con los plugins para escuchar música y ver vídeo

No uses plugins basados en Flash. Por ejemplo en http://www.masvoces.org/ con el iPad no se visualiza el reproductor de audio porque está basado en Flash.

Una buena idea es pasarse a las etiquetas HTML5 <audio> y <video>. Puedes consultar reproductores de video y audio basados en HTML 5 en 10 Beautiful HTML5 Video & Audio Players.

9. Ojo con position:fixed

Cuidado si utilizas en la CSS “position:fixed” porque puede que la capa no aparezca en el iPad donde deseas (cuando defines además un right y bottom para la capa)

La capa que muestro recuadrada en el siguiente pantallazo del iPad, en otros navegadores se ve en la esquina superior izquierda:

Para el uso correcto de “position:fixed” lo mejor es leer el artículo de quiksmode.org The fifth position value

10. ¿Por qué cargar la versión móvil?

En algunos sitios se carga por defecto, cuando navegas con el iPad, la versión para dispositivos móviles, para pantallas pequeñas, muchas veces porque no se está detectando correctamente el User Agent.

Lo he visto en algún blog, pero no digo en cuál para que nadie se dé por aludido. Os recomiendo que lo probéis.

Conclusión

La primera es que soy una pésima fotógrafa. La segunda que si hacemos web accesibles serán más fáciles de usar en diferentes dispositivos, actuales y venideros.

Pero como conclusión última cito un pasaje de Jakob Nielsen en "Usability of iPad Apps and Websitse", cuando indica que lo más importante es:

First and most importantly, you should test your site. See what the pain points are and then address them. Often fixes will improve the overall usability of your website on the desktop, as well. Some of the more obvious fixes include:
Getting rid of Flash content
Creating bigger targets and pad targets so that they tolerate touch better
Spacing links wherever possible
Detecting location
Minimizing the need for typing
Grouping controls or pieces of information that are related (to avoid having content ignored because it’s below the fold)

Otros enlaces importantes

Recursos de interés:

Otros artículos de este blog:

Imprescindibles (18)

2009-12-12T17:49:00.000+01:00

Estos son los artículos que llamaron últimamente mi atención (no tienen porque ser recientes):

Serie "Imprescindibles" (recopilación de artículos de interés)

Documentos que recomiendo conocer(6)

2009-07-07T20:52:00.005+02:00

Serie "Documentos que recomiendo conocer"

Guías e informes

"Guía de Accesibilidad en los contenidos para dispositivos móviles" de Inteco.

Es especialmente recomendable leerse el apartado "5. Directrices para el desarrollo de contenidos para dispositivos móviles".

Artículo relacionado: Web móvil y W3C en el que se explica qué es la MWI (Mobile Web Initiative), las MWBP (Mobile Web Best Practices) y su relación con las WCAG (Web Content Accessibility Guidelines)

"Informe sobre la normativa aplicable y evolución legislativa en el sector de las Tecnologías de Accesibilidad en España 2008" y el "Informe sobre la homologación y normalización en el sector de las Tecnologías de Accesibilidad en España 2008" del Centro Nacional de Tecnologías de la Accesibilidad. Ambos en formato PDF.

Artículo relacionado: "Referencia sobre legislación española relacionada con la accesibilidad web".

"Informe APEI sobre usabilidad" 2009, por Yusef Hassan Montero y Sergio Ortega Santamaría".

Una gran introducción a la Usabilidad y el Diseño Centrado en el Usuario. [Vía Human-Computer.net]

Cursos, revistas y libros online

Journal of Information Architecture

"Search User Interfaces" de Marti Hearst, Cambridge University Press (2009). El libro está en inglés y es gratuito. [Vía Human-Computer.net]

"Estándares y accesibilidad: mínimo indispensable (o Cómo convertirse en un estandarista en 15 horas)", un curso online gratuito de codexexempla.org

"Curso Introducción a la Interacción Persona-Ordenador ", un clásico de AIPO. También disponible en PDF.

Otros

Proyecto MUPA-UOC. Metodología de usabilidad para aplicaciones de la Universitat Oberta de Catalunya

"Research Paper - Real or Imaginary: The effectiveness of using personas in product design" de Frank Long [Vía Human-Computer.net]

El objetivo del estudio era averiguar si el uso de personajes aseguraba efectivamente un producto más centrado en el usuario. El estudio demuestra con pruebas objetivas la eficacia de la utilización de personajes especialmente en las primeras etapas del proyecto:
- El uso de personajes fortalece el enfoque en las necesidades de los usuarios finales y, por tanto, la toma de decisiones se centra más en esas necesidades.
- El uso de personajes puede mejorar la comunicación entre los equipos y facilitar una discusión más constructiva basada en el diseño centrado en el usuario.
- El uso de ilustraciones en lugar de fotografías disminuye su eficacia: puede conducir a un examen selectivo de las características de la persona, un menor nivel de empatía hacia la persona ilustrada y una menor capacidad para recordar los detalles de la persona después de un tiempo.
- El escenario en forma de storyboard fue más eficaz que la versión más detallada.
- Su eficacia disminuye cuando no se invierte el suficiente tiempo o recursos en esta técnica y entonces puede causar más daño que bien. Si la investigación y el análisis no son exhaustivos, la confianza en los personajes se verá menoscabada. Si el personaje y sus objetivos no son correctos entonces la dirección del diseño será inapropiada.
Artículo relacionado: "La usabilidad como metodología para el desarrollo de una aplicación"

Imprescindibles (15)

2009-04-28T13:49:00.001+02:00

Estos son los artículos que han llamado mi atención últimamente (no tienen porque ser recientes):

Usabilidad

"Cómo ha de ser el diseño: una visión del análisis heurístico" de Torres Burriel.

"¿Cómo diseñar para móviles?" de Daniel Ulczyk.

"Para Nielsen las webs móviles deben ser simples y minimalistas", de Úsalo.

"Breadcrumb Navigation Increasingly Useful" de Jakob Nielsen.

"CRAP Design (traducción)" de MinaLab

"3 Pasos para crear una web profesional: Paso 1 Fijar objetivos" de Galería CSS.

"OPTGROUP y la usabilidad en SELECT" de Javier Fernández Rivera.

SEO

"Cómo asegurarnos de que Google visite a fondo nuestras páginas web en 10 pasos" de acceso.com

"Un buen plan SEO" de Daniel Ulczyk.

SEO CheatSheet

Navegadores

"Safari 4.0 es el navegador mas rápido" de Geekets.

"Rendimiento de los navegadores dependiendo del código HTML" de anieto2k.

Imprescindibles anteriores (recopilación de artículos de interés)

Noticias... (16)

2009-03-04T16:23:00.016+01:00

Estas son las noticias que han llamado mi atención últimamente:

WCAG 2.0

Esta semana me sorprendía conocer la web Codexexempla, que dispone de uno de los recursos más codiciados en la actualidad, la traducción (no oficial) de las WCAG 2.0.

Otras traducciones interesantes que ofrece son:
- "Comparativa entre los puntos de comprobación de las Pautas de Accesibilidad de Contenido Web 1.0 y las Pautas 2.0, agrupados por prioridades" de la versión en inglés del 15 de diciembre de 2008.
- "Fe de erratas de las Pautas de Accesibilidad de Contenido Web del WCAG Samurai", [traducción] V1.0 de 26 de febrero de 2008

"¿Qué pasa con las WCAG 2?", se pregunta Olga Revilla, y en consecuencia ha puesto en marcha la web One Guideline a Day en la que pretende ir analizando una por una las pautas, criterios de éxito, técnicas y errores comunes que vienen publicados en la WCAG 2, comparándolo con las anteriores y aportando un poquito de mi experiencia en este campo.

Relacionado: WCAG 2.0 en este blog.

Novedades W3C

Se han actualizado los siguientes borradores:

Authoring Tool Accessibility Guidelines 2.0 W3C Working Draft 17 February 2009.

HTML 5. W3C Working Draft 12 February 2009 y HTML 5 differences from HTML 4 W3C Working Draft 12 February 2009

Accessible Rich Internet Applications (WAI-ARIA) 1.0 W3C Working Draft 24 February 2009

Relacionados:

HTML 5 en este blog.

Ajax accesible II: WAI-ARIA en este blog.

Dominios .tel

"Llegan los dominios .tel" eWeek Europe

"Llega el dominio .tel" TIC Pymes

Móvil

"Banco Popular integra Iphone 3G en su banca móvil" (leído en Computing.es) como ya lo hizo antes Caixa Penedès (Iphone y accesibilidad en este blog)

"Instant Mobilizer de dot.mobi" el Libro de Apuntes: un servicio que moviliza tu página web, es decir, la transforma automáticamente para que se vea correctamente desde los teléfonos móviles.

Sectores

"Pensando la banca del futuro", Usolab: se ha creado el Center for Future Banking, un centro donde se "investigará cómo las nuevas tecnologías y los conocimientos sobre el comportamiento humano pueden transformar la experiencia de los clientes y elevar el papel del banco en su vida financiera", es decir, simplificar la vida de la gente y hacer la experiencia con la banca más satisfactoria.

"Las empresas aseguradoras impulsarán la accesibilidad de sus páginas web" en Acceso.com

Noticias (13)

2008-10-07T09:00:00.000+02:00

Estas son las noticias que han llamado mi atención durante el mes de septiembre:

Premios TAW (Test de Accesibilidad Web) 2008

Los Premios TAW a la Accesibilidad Web se internacionalizan al abrirse a América Latina
La Fundación CTIC, con la colaboración del Gobierno del Principado de Asturias, convoca la cuarta edición de los Premios TAW a la Accesibilidad Web, dirigidos a todas aquellas personas y entidades, públicas o privadas, que promueven la accesibilidad de los sitios web. El plazo para concursar se extiende hasta el 9 de octubre de 2008 inclusive y, como novedad, este año la convocatoria adquiere carácter internacional al abrirse, en todas sus categorías, a América Latina.

Se pueden proponer candidaturas hasta el 9 de octubre mediante un formulario online.

World Wide Web Foundation

Tim Berners-Lee anuncia la creación de la nueva Fundación para acercar la Web a todo el mundo

Puedes ampliar más información en la web de la fundación.

XHTML(eXtensible Hypertext Markup Language) Basic 1.1 y Mobile Web Best Practices 1.0, recomendaciones del W3C (Consorcio World Wide Web)

Webposible nos informa del cambio de estado de los hasta ahora borradores.

Resultados de la consulta pública para mejorar la accesibilidad de Internet de la Comisión Europea

La Comisión Europea realizó una consulta pública para mejorar la eAccesibilidad como puedes consultar en La Comisión quiere una Internet mejor adaptada a las personas discapacitadas.

El 15% de los europeos sufre alguna forma de discapacidad y muchos sufren dificultades para leer los textos en letra pequeña de los sitios de Internet o hasta para saber cómo acceder a los sitios de Internet y los servicios en línea.

A pesar de los repetidos llamamientos de los jefes de Estado y de Gobierno de la UE para atajar esta situación, los progresos son limitados: con gran diferencia, la mayoría de los sitios de Internet no recurre a soluciones de fácil uso aceptadas universalmente.

La Comisión Europea ha puesto en marcha hoy una consulta pública sobre otras medidas para hacer accesibles los sitios de Internet en Europa, empezando por los de las administraciones públicas, e invita a los interesados a dar su opinión. También aborda otras tecnologías como la televisión digital.

La consulta se cerró el 7 de septiembre. En Public consultation on Web accessibility se pueden leer las propuestas recibidas.

Evolución de la demanda por inaccesibilidad a la web de los almacenes Target

La cadena de almacenes estadounidense Target hará accesible su página web para internautas ciegos, noticia publicada en Discapnet.

La cadena de almacenes estadounidense Target hará accesible su página web para internautas ciegos, en virtud de una sentencia que resuelve la demanda presentada por un grupo de personas con esta discapacidad por la incompatibilidad del portal con los programas lectores de pantalla que utilizan para convertir el texto en audio, según informa la prensa estadounidense.

Target tendrá que introducir explicaciones en audio de las imágenes que utilice en su sitio web, así como garantizar que pueden manejarse todas sus funciones valiéndose sólo del teclado, sin utilizar el ratón.

Más información en:

Welcome to the NFB Target lawsuit site

Target Will Ensure That Web Site Remains Accessible to Guests Who Use Assistive Technologies

El iPhone acusado de inaccesibilidad

Apple y Telefónica (de nuevo) acusadas de publicidad engañosa

El organismo regulador ha entendido que la expresión utilizada en el anuncio del nuevo dispositivo móvil de Apple, el Iphone 3G, referente a las capacidades de acceso a Internet conducía a engaño en tanto que en el anuncio se mencionaba expresamente "Todos los rincones de Internet están en el iPhone" sin indicarse ninguna limitación cuando en realidad hay determinadas partes de las páginas web (programadas en java y flash) que no son accesibles a través de los dispositivos comercializados por O2.

También se puede leer la noticia en expansion.com

Google Phone

Es el turno de 'Google Phone'

HTC ha presentado en Nueva York el primer móvil basado en Android, el sistema operativo de código abierto diseñado por Google. El nuevo terminal, llamado HTC Dream se empezará a comercializar junto con el operador T-Mobile el 22 de octubre en Estados Unidos por 179 dólares (123 euros). A principios de noviembre, saldrá al mercado británico, y se irá introduciendo por el resto de Europa a lo largo del próximo año, según ha explicado la compañía.

Web 3.0

El ordenador ya puede comprenderte: reconoce el significado de las palabras

También se puede seguir la noticia en Web 3.0, computadoras ya entienden el significado de las palabras

Web móvil: el 30% de los españoles con teléfono 3G navega en la Red

Localización y servicios contextuales, pilares de la Web móvil/

El móvil, por fin, comienza a desbancar lentamente al ordenador y a la Internet fija para convertirse en la herramienta de socialización del futuro. Lo que toda una industria esperaba, audiencia, masa crítica, se va acercando. En España, el 37% del total de suscriptores móviles mayores de 13 años poseen un terminal 3G, según M:Metrics. Y el 30% lo utiliza para navegar por la Red, descargar juegos y vídeos o chatear con los amigos. La oportunidad aguarda a la vuelta de la esquina y una nube de start-ups en todo el mundo no quiere perdérsela.

Sabías que ... (9)

2008-07-28T14:21:00.000+02:00

... Webelo es un conjunto de herramientas para testear la accesibilidad de nuestros sitios desde el mismo entorno de desarrollo, Eclipse o derivados. Vía Estándares y Accesibilidad

... con W3Counter puedes conocer estadísticas globales de acceso a Internet.

This report was generated 06/30/2008 based on the last 24,768,449 unique visits to all tracked websites at that time. W3Counter's sample currently includes 12,890 websites. The last 25,000 page views to each website are analyzed to identify unique visits. Some visits may occur before the month of the report.

... que desde Opera puedes activar "Small Screen Mode" para simular su visualización desde Opera Mini. Vía dosmilmastres

... PDF Search Engine es un buscador que se encarga de rastrear la web para encontrar archivos en formato PDF. Vía webtodoweb

... puedes consultar una lista de sitios de gran calidad artística y a la vez conformes a los estándares W3C en W3C Sites

... SitePal te permite crear un avatar personalizado y animado que hablará en tu web como se ve en Demostración de PA Conciliación

... existe una alternativa a Google Docs. Se llama Zoho

iPhone y accesibilidad

2008-07-14T09:00:00.001+02:00

Artículos relacionados
[06-02-08] Web móvil y W3C

Gracias a mis compañeros de SevenClick, especializados en desarrollos para este y otros dispositivos móviles, hace ya unos cuantos meses que tuve en mi mano un iPhone. Lo cierto es que genera ese deseo irrefrenable de conseguir uno que vimos la semana pasada en el telediario, cientos de personas haciendo cola durante horas ante una tienda. Y es que estos días se impone hablar del iPhone.

Me consta que hay empresas que llevan meses anticipándose a este momento, muchas en el sector bancario, como comentaba Usolab en "iPhone y la banca móvil" o SevenClick, en "Caixa Penedes 100% Iphone", pero en el conjunto de la Red esta previsión ha sido minoritaria.

No es objeto de este post debatir sobre la conveniencia de las versiones web específicas para el iPhone (que no hay que confundir con las aplicaciones nativas, desarrolladas con el iPhone SDK, que son otra cosa), o para cualquier otro tipo de público o dispositivo específico, como son por ejemplo las poco recomendables versiones "sólo texto". Pero no está mal recordar que el W3C defiende una Web única, accesible y multidispositivo como podemos leer en "Mobile Web Best Practices (MWBP): Diseña para una Web única".

Lo que sí que me pregunto es qué sentirán todas esas personas cuando comprueben la gran cantidad de portales y aplicaciones web que les son inaccesibles desde su iPhone. Seguramente lo mismo que sienten cientos de personas que diariamente intentan acceder al mismo contenido desde su móvil o su PDA.

La fiebre del iPhone se extiende y contagia a nuestros clientes que, de repente, están preocupados por la visualización de sus portales en el dispositivo de moda. Lo cierto es que la mayoría no sabe que por lo que están preocupados realmente es por la accesibilidad web.

Hartos de explicar que la accesibilidad no es "acceso para ciegos" quizás ahora nos escuchen cuando decimos que la accesibilidad es "acceso para todos los usuarios, desde cualquier dispositivo y en cualquier contexto".

Si nuestra aplicación fuera accesible, si cumpliera con las Pautas de Accesibilidad de la WAI, nuestra aplicación funcionaría en el iPhone y en cualquier otro dispositivo que esté por venir.

Aprovechemos pues esta fiebre para promover la accesibilidad web.

Posiblemente muchos hayan empezado a leer este artículo esperando las normas para hacer accesible un desarrollo para el iPhone, pero es que en realidad son las mismas que para cualquier otro desarrollo. En primer lugar aplicar las Pautas de Accesibilidad de la WAI y en segundo lugar tener en cuenta las Mobile Web Best Practices (MWBP) del W3C como expliqué en "Web móvil y W3C".

Siguiendo una metodología adecuada de validación (como expliqué en el seminario "Introducción a la eAccesibilidad") será también necesario revisar el portal en un iPhone, y en su defecto en alguno de los simuladores que existen:

iPhoney
Aplicación local sólo disponible para MAC. Contrario a lo que pueda parecer, no es un emulador, sino un entorno de navegación web que simula la ejecución o renderización de utilidades y páginas de 320 por 480 (o 480 por 320) en un iPhone.
iPhone Test Simulation
Simulador online
iPhone Widget 3.2
iPhone Simulator, incluido en el iPhone SDK