12/02/2014

Mejora progresiva: sitios web más accesibles

Mejora progresiva: sitios web más accesibles

A veces, cuando se construye un sitio web para un tercero, se intenta reducir al mínimo el tiempo de desarrollo, priorizando alcanzar sus expectativas pero sin superarlas. El sitio final podrá parecerle atractivo y funcional a la mayoría de los usuarios, pero no podrá cumplir con ninguna prueba de calidad rigurosa. Uno de los requisitos para superarla es el hecho de que pueda verse bien desde cualquier dispositivo y navegador. Esto puede ser garantizado por un enfoque conocido como «mejora progresiva»: un paradigma de desarrollo basado en empezar por brindarles una buena experiencia a los usuarios de navegadores antiguos, para luego ir agregando características enriquecedoras para quienes usen navegadores modernos. En otras palabras, el sitio es suficientemente usable en un entorno anticuado, pero mejora a medida que el entorno se moderniza.

Por ejemplo, menos del 10% de los usuarios utiliza alguna versión de Internet Explorer previa a la 9. Esto les impide disfrutar de muchas características implementadas a través de HTML5 y CSS3. El enfoque «mejora progresiva» considera que, aunque esa porción de usuarios sea mínima y tienda a desaparecer, no podemos pedirle que actualice su browser como condición indispensable para usar nuestro sitio web. Por el contrario, debemos brindarles un sitio plenamente funcional, aunque probablemente sin características puramente estéticas como bordes redondeados o texto con sombra.

El mayor principio de esta filosofía es la accesibilidad total: todos pueden interactuar plenamente con la interfaz, sin importar su lugar geográfico, su dispositivo, su navegador, su nivel de destreza o sus posibles discapacidades. Para ello podemos seguir estos consejos:

  • Utilizar código semántico.
  • Pensar primero en la estructura y luego en la presentación. La jerarquización de texto e imágenes debería notarse incluso deshabilitando las hojas de estilo.
  • Definir el espacio y la ubicación de cada bloque de contenido realizando wireframes.
  • Respaldar las características en JavaScript con otras que puedan ver quienes tengan los scripts deshabilitados. Si se utiliza Ajax, respaldarlo con soluciones server-side. Lo ideal es construir un sitio plenamente funcional y agregar JavaScript al final, sólo para enriquecer la experiencia de quienes lo tengan habilitado.

La mejora progresiva se opone a la degradación elegante, un concepto inverso: desarrollar una experiencia completa para un entorno moderno e ir degradándola a medida que el entorno se vuelve más antiguo. Este enfoque no siempre es peor, pero se encuentra en abandono.

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