Presentado por Camilo Kawerín y Manuel Razzari el 28/11/2012 en http://ux2012.com.ar La Jornada Anual de Experiencia de Usuario en Argentina, organizado por IxDA Buenos Aires.
2. SUMARIO
1.Introducción: accesibilidad todos los días
2.HTML5: etiquetas, reglas, atributos
3. SVG y canvas: estado actual
4. CSS3: maquetado sin imágenes
5. WAI-ARIA: arreglos sencillos
6. Herramientas
3. ACCESIBILIDAD COTIDIANA
Olvidarse de A, AA, AAA
Bajar al validador del pedestal
Es una herramienta más
Valida errores de código
No inventar soluciones “creativas”
5. CAMBIOS EN HTML5
Nuevas reglas
Sintaxis flexible
Enlaces “block-level”
Nuevas etiquetas
Marcado más semántico
Nuevos atributos
Formularios
Dataset API
6. SINTAXIS EN HTML5
No se consideran errores:
– Etiquetas en MAYÚSCULAS
– Atributos sin comillas
– Falta de etiqueta HTML, HEAD o BODY
– Falta de cierre de etiquetas P, LI, HEAD
– Falta de cierre de elementos “standalone”
8. ENLACES “INLINE-LEVEL”
<div class="story">
<h3><a href="ux2012.html">
UX2012 es el evento del año
</a></h3>
<p><a href="ux2012.html">
<img src="ux2012.jpg" alt="artículo
completo" />Diseñadores y
programadores de todo el mundo
colmaron las salas del CCGSM.</a></p>
<p><a href="ux2012.html">Read more</a></p>
</div>
Enlaces redundantes
Texto del enlace no es único
9. ENLACES “BLOCK-LEVEL”
<article>
<a href="ux2012.html">
<h3>UX2012 es el evento del año</h3>
<p><img src="ux2012.jpg" alt="multitud
sedienta de saber">Diseñadores y
programadores de todo el mundo colmaron las
salas del CCGSM.</p>
<p>Read more</p>
</a>
</article>
Texto del enlace único
Agregamos información en el ALT
10. ENLACES “BLOCK-LEVEL”
<header>
<a href="/">
<img src="logo.png" alt="mi bonito
logo">
<h1>Mi sitio</h1>
<p>Toda la información que buscás</p>
</a>
</header>
11. SEMÁNTICA EN HTML5
<div class="picture">
<img src="ux2010.jpg" alt="Una multitud
llenó las salas del CCGSM">
<p>Una multitud llenó las salas
del CCGSM</p>
</div>
Descripción redundante
12. SEMÁNTICA EN HTML5
Cómo lo resolvemos
<figure>
<img src="ux2010.jpg">
<figcaption>Una multitud llenó
las salas del CCGSM</figcaption>
</figure>
O mejor aún
<figure role="img" aria-labelledby="lidl">
<img src="ux2010.jpg">
<figcaption id="lidl">Una multitud llenó
las salas del CCGSM</figcaption>
</figure>
18. JAVASCRIPT NO INTRUSIVO
Javascript no intrusivo con JQuery
<script>
$('.graph').plot();
</script>
Si cambian los datos para cada instancia
<div class="graph"></graph>
<script>
$('.graph').plot({
series: [...]
});
</script>
19. JAVASCRIPT NO INTRUSIVO
Usando el atributo DATA
<div class="graph" data-series="[...]">
</graph>
<script>
$('.graph').each(function() {
$(this).plot({
series: $(this).data('series')
});
});
</script>
25. ACCESIBILIDAD DE SVG
<svg Elemento SVG dentro de un HTML.
Marcar como imagen usando
width="534" el rol de ARIA y atributo title.
height="344" (Sino lee 'iframe' y URL del svg)
role="img"
title="Un SVG accesible"
xmlns="http://www.w3.org/2000/svg"
tabindex="1">
<g> DOM interno del SVG, con ARIA.
No soportado como uno espera.
<path
fill="#2C748C"
d="M80,41.5A12.5,12.5,0,1,1,79.9,41.5 z"/>
role="listitem"
aria-label="41% en Corrientes" />
</g>
</svg> http://goo.gl/RvoSa
26. SVG COMO IMAGEN
Se muestran los valores en texto
Reforzado con ARIA slider
<svg
role="range"
aria-valuemax="19"
aria-valuemin="1"
aria-valuenow="4"
arial-valuetext="4 right now"
aria-labelledby="title_id"
aria-live="polite">...</svg>
http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html
27. TABLAS COMO ORIGEN
role="image" aria-describedby="id_tabla"
<caption>
<sup>
<td>
<sub>
<th>
<thead><th>
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV
28. ACCESIBILIDAD DE CANVAS
<canvas
id="example"
width="260"
Sub-DOM o “shadow DOM” de HTML y ARIA
height="200"> como fallback. Replica lo que sucede en el canvas .
<h2>Formas</h2>
<p>Un rectángulo con borde negro.</p>
</canvas>
http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/
29. EL ESTADO ACTUAL
“La accesibilidad de SVG no es mucho
mejor que la de canvas.”
Steve Faulkner, http://lists.w3.org/Archives/Public/w3c-wai-ig/2012JulSep/0178.html
32. LA REVOLUCIÓN DE CSS3
Maquetado sin tablas
Maquetado sin imágenes
33. RECORTE DE IMÁGENES
“Image slicing”
Trabajoso, repetitivo, propenso a errores
Difícil de hacer escalable
Riesgos si no cargan las imágenes
Más consultas HTTP
34. REEMPLAZO DE IMÁGENES
“Image replacement”
Display:none oculto a lectores de pantalla
No se puede leer si no cargan las imágenes
No se puede seleccionar
No aplican estilos del usuario
El diseño es poco flexible
Difícil de entender para principiantes
35. PENSAR EL DISEÑO Y EL
MAQUETADO DE OTRA MANERA
Entender cómo funciona el diseño
Desarrollo transparente, sin trucos
Aceptar las diferencias
Usar con precaución / usar “polyfills”
43. VENTAJAS
Menos archivos para descargar
El diseño no se pierde con imágenes desactivadas
Permite usar estilos de usuario
Diseño más flexible
– Se adapta al contenido
– Responsive
– Mobile friendly!
44. NOS LO HACEN DIFÍCIL
Falta de soporte o problemas de renderizado
Sintaxis compleja
Prefijos de navegador
/* Old browsers */
background: #1e5799;
/* FF3.6+ */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* W3C */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
46. 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
47. LANDMARK ROLES
banner
navigation search
main complementary
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
52. SALTEAR REDUNDANCIAS
(function($) {
$(".home-map img, #Map area")
.attr({
'role': 'presentation',
'aria-hidden':'true'
Del lector de pantalla
});
$("#Map area")
.attr('tabindex','-1')
})(jQuery);
Del teclado
Role:presentation no funciona en elementos enfocables, y otras reflexiones:
http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
55. INDICAR DESPLEGABLES
No tan correcto... ¡pero realista!
<a id="button-1"
aria-expanded="false"
aria-controls="menu-1">Menú</a>
<ul id="menu-1">
<li>...</li>
<li>...</li>
</ul>
56. 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/
59. COMPONENTES ACCESIBLES
Testearlo en nuestros browsers objetivo
Puedo usarlo con el teclado
Escalable (text zoom)
Si hay links, que apunten a una URL
¿Dice ser accesible?
Librerías
61. NO TE CONFÍES
<strong class="price" itemprop="price">
$700<sup>00</sup>
</strong>
https://github.com/mercadolibre/chico/issues/632
62. MAQUETADOR (FRONT-END)
Probar con un agente de usuario, en lugar de
contar errores de validación.
+
Incluir el lector de pantalla en la matriz de
navegadores soportados.
64. No deje de completar su evaluación online
ux2012.com.ar/encuesta
¡Muchas gracias!
Accesibilidad práctica con HTML5 + CSS3 + WAI-ARIA
Camilo Kawerín y Manuel Razzari