Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
12 recomendaciones25,408 vistas
El documento aborda la accesibilidad web utilizando HTML5, CSS3 y WAI-ARIA, proporcionando pautas y mejores prácticas para mejorar la experiencia de los usuarios. Se discuten nuevos elementos y atributos en HTML5, técnicas de maquetación con CSS3, y la implementación de WAI-ARIA para facilitar la navegación. Además, se ofrecen ejemplos prácticos y herramientas útiles para evaluar y optimizar la accesibilidad de los sitios web.
![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>](https://image.slidesharecdn.com/accesibilidadpracticaconhtml5css3aria-121204113006-phpapp01/85/Accesibilidad-practica-con-HTML5-CSS3-y-WAI-ARIA-18-320.jpg)
![JAVASCRIPT NO INTRUSIVO
Usando el atributo DATA
<div class="graph" data-series="[...]">
</graph>
<script>
$('.graph').each(function() {
$(this).plot({
series: $(this).data('series')
});
});
</script>](https://image.slidesharecdn.com/accesibilidadpracticaconhtml5css3aria-121204113006-phpapp01/85/Accesibilidad-practica-con-HTML5-CSS3-y-WAI-ARIA-19-320.jpg)
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
- 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
- 23. Firefox DOM Inspector Accessible Tree
- 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”
- 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/
- 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<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.
- 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>