22/04/2015

Navegación por teclado: una característica esencial en cualquier sitio web

Navegación por teclado: una característica esencial en cualquier sitio web

Si bien los dispositivos táctiles crecen rápidamente como medio de acceso principal a la Web, las laptops y computadoras de escritorio siguen teniendo una gran relevancia, siendo irreemplazables en algunos casos. Y, aunque tengamos incorporada la idea de que los usuarios desktop recorren nuestro sitio utilizando el mouse como principal dispositivo de entrada, existen ocasiones donde ese rol lo desempeña el teclado. Esto puede suceder por varias razones:

  • El usuario no tiene mouse.
  • El usuario tiene mouse, pero, por algún motivo, el equipo no lo reconoce (algo que puede suceder en una computadora nueva o recién formateada).
  • El usuario está más acostumbrado a utilizar su computadora mayormente con el teclado (esto es especialmente común entre usuarios expertos, familiarizados con interfaces por línea de comandos).
  • El mouse es inalámbrico y se quedó sin pilas durante la navegación.
  • El usuario tiene alguna discapacidad permanente (p.ej.: una parálisis parcial) o temporal (p.ej.: un brazo enyesado) y no puede utilizar el mouse, pero sí el teclado.

En estos casos, la única manera de navegar por un sitio web es a través del teclado. La mayoría de los browsers permiten «saltar» de link en link usando la tecla Tab, y activar el enlace seleccionado presionando Enter. El link seleccionado es distinguido a través de un aspecto determinado, que varía según el browser (por ejemplo, Chrome encierra el anchor text con un rectángulo con línea azul sombreada, mientras que Firefox dibuja un rectángulo gris con línea punteada). Con Tab y las teclas direccionales pueden seleccionarse diferentes campos de texto, radio buttons y otros componentes de formularios. Pero debemos enriquecer este mecanismo «por defecto» para aportar la mejor experiencia posible.

En ese sentido, la normativa oficial WAI-ARIA recomienda una serie de prácticas para mejorar la navegación por teclado como medio para una mayor accesibilidad web. Además, el experto Jakob Nielsen aporta otras sugerencias:

  • No modificar el indicador visual de elemento seleccionado que trae el browser por defecto (por ejemplo, el rectángulo azul de Chrome). Reemplazarlo con otro estilo puede confundir al usuario que ya está acostumbrado a las señales de su browser preferido.
  • Todos los elementos interactivos, y no solo los links, deben ser «enfocables» por teclado. Esto incluye elementos de formularios, menús desplegables, botones, cuadros de diálogo y otros widgets. El atributo tabindex nos permite lograrlo.
  • Usar un enlace para «saltear» la navegación. De esta manera, el usuario no tiene que presionar Tab a través de todos los links del menú superior (que pueden ser muchos) para llegar a la zona del contenido principal.

Aplicando estas reglas crearemos una experiencia inclusiva para el amplio grupo de usuarios que navega por nuestro sitio web a través del teclado.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce