wai-aria en 5 minutos

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