Successfully reported this slideshow.

WAI-ARIA en 5 minutos

2,418 views

Published on

Published in: Self Improvement
  • Be the first to comment

WAI-ARIA en 5 minutos

  1. 1. APLICANDOWAI-ARIAEN 5 MINUTOSManuel RazzariDesconferencia: “Accesibilidad en tiempos de crisis”Junio 15, 2012
  2. 2. SUMARIOLandmarksDesduplicar linksIndicar desplegables (buena, fácil)Ocultar info redundante (tab, aria)Cuando no usar ARIA
  3. 3. LANDMARK ROLES “Son muy fáciles de implementar y, junto con los encabezados de HTML, podrían ser revolucionarios en mejorar el acceso.”Terrill Thompson en http://terrillthompson.com/blog/262
  4. 4. LANDMARK ROLES banner navigation search main complementary contentinfohttp://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
  5. 5. DESDUPLICAR LINKS http://goo.gl/owI01
  6. 6. DESDUPLICAR LINKSA la antigua<h2>Corrientes</h2><a href="mapas">Mapas <span class="hidden">de Corrientes</span></a><a href="activ">Actividades <span class="hidden">de Corrientes</span></a>.hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
  7. 7. DESDUPLICAR LINKSCon WAI-ARIA<h2 id="head_1">Corrientes</h2><a href="mapas" aria-describedby="head_1">Mapas</a><a href="activ" aria-describedby="head_1">Actividades</a>http://oaa-accessibility.org/example/44/
  8. 8. SALTEAR REDUNDANCIAShttp://john.foliot.ca/aria-hidden/
  9. 9. SALTEAR REDUNDANCIAS(function($) { $(".home-map img, #Map area, .entry .tags") .attr({ role: presentation, aria-hidden:true }); Del lector de pantalla $("#Map area, .entry .tags a") .attr(tabindex,-1)})(jQuery); Del teclado
  10. 10. CUÁNDO USAR WAI-ARIA "WAI-ARIA sirve para mejorar, no sustituir, el marcado nativo. Deberíamos usar éste último cuando está disponible"http://www.marcozehe.de/2011/12/05/from-wai-aria-to-html5-and-back-or-maybe-not/
  11. 11. CUÁNDO USAR WAI-ARIA<nav role="navigation">...</nav><input type="range" role="slider" aria-valuemin="0"min="0" /><div style="text-decoration: underline" tabindex="0"role="link">ARIA link</div> :(
  12. 12. ¿ALGUNA MÁS? @mrazzari

×