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.

1. Accesibilidad práctica
con HTML5 + CSS3 + WAI-ARIA
Camilo Kawerin y Manuel Razzari
@camilokawerin @mrazzari

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”

4. HTML5

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”

7. SINTAXIS EN HTML5
Etiquetas mal anidadas
<strong><em>Mal ejemplo</strong></em>
Atributos repetidos
<img alt="" src="" alt="">
IDs repetidos
<input id="field" name="name"
placeholder="Ej: Camilo">
<input id="field" name="location"
placeholder="Ej: Corrientes">

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>

13. FORMULARIOS
Atributo PLACEHOLDER
Validación en el cliente
Tipo de campo de acuerdo al tipo de dato
Compatibilidad hacia atrás y “polyfills”

14. ATRIBUTO PLACEHOLDER
Usando el atributo VALUE
<label for="field">Nombre</label>
<input id="field" name="name" value="Ej:
Fulano">
Dificulta la validación
Agrega suciedad al autocomplete
Usando el atributo PLACEHOLDER
<label for="field">Nombre</label>
<input id="field" name="name" value=""
placeholder="Ej: Fulano">
http://gist.github.com/330318

15. VALIDACIÓN EN EL CLIENTE
Usando Javascript
Usando el atributo REQUIRED
<label for="field">Nombre</label>
<input required id="field" name="name"
placeholder="Ej: Fulano">
O mejor, usando WAI-ARIA
<label for="field">Nombre</label>
<input required aria-required="true" id="field"
name="name" placeholder="Ej: Fulano">

16. VALIDACIÓN EN EL CLIENTE

17. TIPOS DE CAMPO
search
tel
url
email
datetime
date
month
week
time
datetime-local
number
range
color HTML5Pattern.com

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>

20. SVG Y CANVAS

21. EL DOM ACCESIBLE
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html

22. EL DOM ACCESIBLE
|

23. Firefox DOM Inspector Accessible
Tree

24. AVIEWER
http://goo.gl/Oj6Du

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

30. CSS3

31. border-radius
box-shadow
gradients
text-shadow
rgba()
@fontface
column-count transform
transitions

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”

37. http://css3.mikeplate.com/

38. http://css3.mikeplate.com/

39. http://css3.mikeplate.com/

40. http://css3.mikeplate.com/

41. http://layerstyles.org/builder.html

42. http://www.colorzilla.com/gradient-editor/

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 );

45. WAI-ARIA EN 5 MINUTOS

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/

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

49. 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;
}

50. 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/

51. SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/

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

53. INDICAR DESPLEGABLES
La forma “correcta”
http://www.w3.org/WAI/PF/aria-practices/#menu

54. INDICAR DESPLEGABLES
La forma fácil
http://yuilibrary.com/yui/docs/node-menunav/

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/

57. 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>
:'(

58. NO EMPEZAR
DE CERO

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

60. HERRAMIENTAS
Firefox Accessibility Extension
Examinator
Firefox + NVDA
DOM Inspector Accessible Tree
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html

61. NO TE CONFÍES
<strong class="price" itemprop="price">
$700⁰⁰
</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.

63. ¿PREGUNTAS?
@mrazzari
@camilokawerin

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

66. <a onClick="seguir()">Click me!</a>
<script>
function seguir() {
window.location = "pagina.html";
}
</script>
<form id="register" action="#">
<button onClick="ejecutar()">Submit!</button>
</form>
<script>
function ejecutar() {
document.getElementById('register').submit();
}
</script>