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

19,853 views

Published on

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.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,853
On SlideShare
0
From Embeds
0
Number of Embeds
3,567
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

  1. 1. Accesibilidad prácticacon HTML5 + CSS3 + WAI-ARIACamilo Kawerin y Manuel Razzari@camilokawerin @mrazzari
  2. 2. SUMARIO1.Introducción: accesibilidad todos los días2.HTML5: etiquetas, reglas, atributos3. SVG y canvas: estado actual4. CSS3: maquetado sin imágenes5. WAI-ARIA: arreglos sencillos6. Herramientas
  3. 3. ACCESIBILIDAD COTIDIANAOlvidarse de A, AA, AAABajar al validador del pedestal Es una herramienta más Valida errores de códigoNo inventar soluciones “creativas”
  4. 4. HTML5
  5. 5. CAMBIOS EN HTML5Nuevas reglas Sintaxis flexible Enlaces “block-level”Nuevas etiquetas Marcado más semánticoNuevos atributos Formularios Dataset API
  6. 6. SINTAXIS EN HTML5No 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 HTML5Etiquetas 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="multitudsedienta de saber">Diseñadores yprogramadores de todo el mundo colmaron lassalas 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 bonitologo"> <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 HTML5Có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. FORMULARIOSAtributo PLACEHOLDERValidación en el clienteTipo de campo de acuerdo al tipo de datoCompatibilidad hacia atrás y “polyfills”
  14. 14. ATRIBUTO PLACEHOLDERUsando el atributo VALUE<label for="field">Nombre</label><input id="field" name="name" value="Ej: Fulano"> Dificulta la validación Agrega suciedad al autocompleteUsando 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 CLIENTEUsando JavascriptUsando 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 CAMPOsearchtelurlemaildatetimedatemonthweektimedatetime-localnumberrangecolor HTML5Pattern.com
  18. 18. JAVASCRIPT NO INTRUSIVOJavascript 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 INTRUSIVOUsando 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 ACCESIBLEhttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  22. 22. EL DOM ACCESIBLE|
  23. 23. Firefox DOM Inspector AccessibleTree
  24. 24. AVIEWERhttp://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/chartsTutorial: 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() @fontfacecolumn-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 erroresDifícil de hacer escalableRiesgos si no cargan las imágenesMás consultas HTTP
  34. 34. REEMPLAZO DE IMÁGENES“Image replacement”Display:none oculto a lectores de pantallaNo se puede leer si no cargan las imágenesNo se puede seleccionarNo aplican estilos del usuarioEl diseño es poco flexibleDifícil de entender para principiantes
  35. 35. PENSAR EL DISEÑO Y ELMAQUETADO DE OTRA MANERAEntender cómo funciona el diseñoDesarrollo transparente, sin trucosAceptar las diferenciasUsar 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. VENTAJASMenos archivos para descargarEl diseño no se pierde con imágenes desactivadasPermite usar estilos de usuarioDiseño más flexible – Se adapta al contenido – Responsive – Mobile friendly!
  43. 43. NOS LO HACEN DIFÍCILFalta de soporte o problemas de renderizadoSintaxis complejaPrefijos 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 contentinfohttp://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
  47. 47. DESDUPLICAR LINKS http://goo.gl/owI01
  48. 48. 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;}
  49. 49. DESDUPLICAR LINKSCon 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 REDUNDANCIAShttp://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 tecladoRole:presentation no funciona en elementos enfocables, y otras reflexiones:http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
  52. 52. INDICAR DESPLEGABLESLa forma “correcta” http://www.w3.org/WAI/PF/aria-practices/#menu
  53. 53. INDICAR DESPLEGABLES La forma fácilhttp://yuilibrary.com/yui/docs/node-menunav/
  54. 54. INDICAR DESPLEGABLESNo 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 ACCESIBLESTestearlo en nuestros browsers objetivoPuedo usarlo con el tecladoEscalable (text zoom)Si hay links, que apunten a una URL¿Dice ser accesible?Librerías
  59. 59. HERRAMIENTASFirefox Accessibility ExtensionExaminatorFirefox + NVDADOM Inspector Accessible Treehttp://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 denavegadores 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>

×