wai-aria en 5 minutos
TRANSCRIPT
APLICANDOWAI-ARIA EN 5 MINUTOS
Manuel RazzariDesconferencia: “Accesibilidad en tiempos de crisis”Junio 15, 2012
SUMARIOLandmarks
Desduplicar links
Indicar desplegables (buena, fácil)
Ocultar info redundante (tab, aria)
Cuando no usar ARIA
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
LANDMARK ROLES
banner
main complementary
navigation search
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
DESDUPLICAR LINKS
http://goo.gl/owI01
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; }
DESDUPLICAR LINKSCon WAI-ARIA
http://oaa-accessibility.org/example/44/
<h2 id="head_1">Corrientes</h2>
<a href="mapas" aria-describedby="head_1">Mapas</a><a href="activ" aria-describedby="head_1">Actividades</a>
SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/
SALTEAR REDUNDANCIAS
(function($) {
$(".home-map img, #Map area, .entry .tags") .attr({ 'role': 'presentation', 'aria-hidden':'true' });
$("#Map area, .entry .tags a") .attr('tabindex','-1')
})(jQuery);
Del lector de pantalla
Del teclado
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/
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>
:'(
¿ALGUNA MÁS?@mrazzari