Your SlideShare is downloading. ×
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

10,740

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.

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
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,740
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Accesibilidad prácticacon HTML5 + CSS3 + WAI-ARIACamilo Kawerin y Manuel Razzari@camilokawerin @mrazzari
  • 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. ACCESIBILIDAD COTIDIANAOlvidarse de A, AA, AAABajar al validador del pedestal Es una herramienta más Valida errores de códigoNo inventar soluciones “creativas”
  • 4. HTML5
  • 5. CAMBIOS EN HTML5Nuevas reglas Sintaxis flexible Enlaces “block-level”Nuevas etiquetas Marcado más semánticoNuevos atributos Formularios Dataset API
  • 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. 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. 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="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. 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. 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 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. FORMULARIOSAtributo PLACEHOLDERValidación en el clienteTipo de campo de acuerdo al tipo de datoCompatibilidad hacia atrás y “polyfills”
  • 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. 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. VALIDACIÓN EN EL CLIENTE
  • 17. TIPOS DE CAMPOsearchtelurlemaildatetimedatemonthweektimedatetime-localnumberrangecolor HTML5Pattern.com
  • 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. JAVASCRIPT NO INTRUSIVOUsando 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 ACCESIBLEhttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  • 22. EL DOM ACCESIBLE|
  • 23. Firefox DOM Inspector AccessibleTree
  • 24. AVIEWERhttp://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/chartsTutorial: 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() @fontfacecolumn-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 erroresDifícil de hacer escalableRiesgos si no cargan las imágenesMás consultas HTTP
  • 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. 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. http://css3.mikeplate.com/
  • 37. http://css3.mikeplate.com/
  • 38. http://css3.mikeplate.com/
  • 39. http://css3.mikeplate.com/
  • 40. http://layerstyles.org/builder.html
  • 41. http://www.colorzilla.com/gradient-editor/
  • 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. 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. WAI-ARIA EN 5 MINUTOS
  • 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. LANDMARK ROLES banner navigation search main complementary contentinfohttp://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
  • 47. DESDUPLICAR LINKS http://goo.gl/owI01
  • 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. 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. SALTEAR REDUNDANCIAShttp://john.foliot.ca/aria-hidden/
  • 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. INDICAR DESPLEGABLESLa forma “correcta” http://www.w3.org/WAI/PF/aria-practices/#menu
  • 53. INDICAR DESPLEGABLES La forma fácilhttp://yuilibrary.com/yui/docs/node-menunav/
  • 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. 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. 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. NO EMPEZAR DE CERO
  • 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. HERRAMIENTASFirefox Accessibility ExtensionExaminatorFirefox + NVDADOM Inspector Accessible Treehttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  • 60. NO TE CONFÍES <strong class="price" itemprop="price"> $700<sup>00</sup></strong>https://github.com/mercadolibre/chico/issues/632
  • 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. ¿PREGUNTAS? @mrazzari @camilokawerin
  • 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. <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>

×