Successfully reported this slideshow.

Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA

12

Share

Loading in …3
×
1 of 66
1 of 66

Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA

12

Share

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA

  1. 1. Accesibilidad práctica con HTML5 + CSS3 + WAI-ARIA Camilo Kawerin y Manuel Razzari @camilokawerin @mrazzari
  2. 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. 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. 4. HTML5
  5. 5. CAMBIOS EN HTML5 Nuevas reglas Sintaxis flexible Enlaces “block-level” Nuevas etiquetas Marcado más semántico Nuevos atributos Formularios Dataset API
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. VALIDACIÓN EN EL CLIENTE
  17. 17. TIPOS DE CAMPO search tel url email datetime date month week time datetime-local number range color HTML5Pattern.com
  18. 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. 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. 20. SVG Y CANVAS
  21. 21. EL DOM ACCESIBLE http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  22. 22. EL DOM ACCESIBLE |
  23. 23. Firefox DOM Inspector Accessible Tree
  24. 24. AVIEWER http://goo.gl/Oj6Du
  25. 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. 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. 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. 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. 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. 30. CSS3
  31. 31. border-radius box-shadow gradients text-shadow rgba() @fontface column-count transform transitions
  32. 32. LA REVOLUCIÓN DE CSS3 Maquetado sin tablas Maquetado sin imágenes
  33. 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. 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. 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”
  36. 36. http://css3.mikeplate.com/
  37. 37. http://css3.mikeplate.com/
  38. 38. http://css3.mikeplate.com/
  39. 39. http://css3.mikeplate.com/
  40. 40. http://layerstyles.org/builder.html
  41. 41. http://www.colorzilla.com/gradient-editor/
  42. 42. 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!
  43. 43. 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 );
  44. 44. WAI-ARIA EN 5 MINUTOS
  45. 45. 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
  46. 46. LANDMARK ROLES banner navigation search main complementary contentinfo http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
  47. 47. DESDUPLICAR LINKS http://goo.gl/owI01
  48. 48. 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; }
  49. 49. 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/
  50. 50. SALTEAR REDUNDANCIAS http://john.foliot.ca/aria-hidden/
  51. 51. 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
  52. 52. INDICAR DESPLEGABLES La forma “correcta” http://www.w3.org/WAI/PF/aria-practices/#menu
  53. 53. INDICAR DESPLEGABLES La forma fácil http://yuilibrary.com/yui/docs/node-menunav/
  54. 54. 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>
  55. 55. 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/
  56. 56. 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> :'(
  57. 57. NO EMPEZAR DE CERO
  58. 58. 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
  59. 59. HERRAMIENTAS Firefox Accessibility Extension Examinator Firefox + NVDA DOM Inspector Accessible Tree http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  60. 60. NO TE CONFÍES <strong class="price" itemprop="price"> $700<sup>00</sup> </strong> https://github.com/mercadolibre/chico/issues/632
  61. 61. 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.
  62. 62. ¿PREGUNTAS? @mrazzari @camilokawerin
  63. 63. 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
  64. 64. <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>

×