21/01/2015

WAI-ARIA: buenas prácticas para desarrollar sitios web accesibles

WAI-ARIA: buenas prácticas para desarrollar sitios web accesibles

El objetivo del World Wide Web Consortium (W3C) es lograr que todos, sin importar su condición, puedan disfrutar de la Web en igual medida. Con ese propósito inauguró, en 1997, la Web Accessibility Initiative (WAI), destinada a desarrollar estrategias, directrices y recursos para ayudar a hacer la Web accesible a personas con discapacidad.

Una de las normativas que impulsa WAI es WAI-ARIA (por sus siglas en inglés, aplicaciones enriquecidas accesibles de Internet), que define una forma de hacer el contenido y las aplicaciones de la Web más accesibles para gente con discapacidad, especialmente en lo referido a contenido dinámico y controles de interfaz de usuario avanzados. El desafío es conseguir que aplicaciones Web con funcionalidades complejas (generalmente desarrolladas con Ajax y DHTML) puedan ser utilizadas por personas con dificultades. Algunos ejemplos:

  • Gracias a Ajax una página puede actualizar su contenido sin necesidad de volver a cargarse. Los lectores de pantalla utilizados por discapacitados visuales pueden no advertir este cambio, o bien lo hacen de una manera en que el usuario, por su discapacidad, no puede asimilarlo.
  • Ciertos componentes de interfaz sufren cambios de estado imposibles de percibir para un no vidente. Por ejemplo, un checkbox (casillero de verificación habitual en formularios) puede estar chequeado, parcialmente chequeado o no chequeado. Esos estados se representan con señales puramente visuales (respectivamente, un tilde, un tilde gris y un casillero vacío) y, por lo tanto, incomprensibles para un no vidente.
  • Por defecto, la gran mayoría de los elementos HTML no son «enfocables» y activables por teclado, resultando inaccesibles para quienes navegan de esa forma al no poder manipular un mouse.

WAI-ARIA busca que incluso usuarios con discapacidad puedan disfrutar de estas y otras útiles características de las interfaces web. Y lo logra añadiendo a los elementos HTML atributos semánticos que aportan datos sobre su naturaleza. Por ejemplo, le permiten saber a un lector de pantalla que un div colocado en cierto sector de la página cumple el rol de una barra de herramientas, o que un campo de un formulario es obligatorio, o que un radio button está activado. Así, cualquier usuario, más allá de dificultades visuales, cognitivas o motoras, puede comprender la estructura de la página y navegarla con facilidad. Un gran beneficio que todos los desarrolladores web pueden y deben brindar.

Enlaces externos

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