1. APLICANDO
WAI-ARIA
EN 5 MINUTOS
Manuel Razzari
Desconferencia: “Accesibilidad en tiempos de crisis”
Junio 15, 2012

2. SUMARIO
Landmarks
Desduplicar links
Indicar desplegables (buena, fácil)
Ocultar info redundante (tab, aria)
Cuando no usar ARIA

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. LANDMARK ROLES
banner
navigation search
main complementary
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

5. DESDUPLICAR LINKS
http://goo.gl/owI01

6. DESDUPLICAR LINKS
A 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. DESDUPLICAR LINKS
Con 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. SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/

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. 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. 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. ¿ALGUNA MÁS?
@mrazzari