Buenas prácticas para publicación de contenidos Web

Charla introductoria sobre accesibilidad y buenas prácticas para publicar contenidos Web, en particular en WordPress.

Transcript

1. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 1 / 25 Buenas prácticas para publicación de contenidos Web
2. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 2 / 25 ¿Para qué montamos un ?
3. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 3 / 25 Foto: http://kcy.me/105wf | cc-by-sa-2.0 La audiencia
4. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 4 / 25 Datos, datos, datos... Más de 1.000 millones de personas viven con algún tipo de discapacidad. Esta cifra representa alrededor del 15% de la población mundial. Fuente: OMS Distribución (%) según tipo de discapacidad de población española entre 16 y 64 años (Año 2012) (Fuente: http://kcy.me/10651 PDF/506 Kb)
5. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 5 / 25 Un par de usuarios más...
6. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 6 / 25 ¿Qué puedo hacer yo?
7. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 7 / 25 Seleccionar tema adecuado..
8. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 8 / 25 Seleccionar plug-in adecuado https://wordpress.org/plugins/wp-accessibility/
9. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 9 / 25 ¡Y ya está!
10. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 10 / 25 Foto: http://kcy.me/1068j | cc-by-2.0
11. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 11 / 25 Entender el problema ... Foto: http://kcy.me/106af | cc-by-2.0
12. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 12 / 25 Pautas para el día a día Fuente: http://www.w3.org/TR/WCAG20/ Perceptible La información y los componentes de la interfaz para la persona usuaria deben ser presentados a las personas de modo que puedan percibirlos. Operable Los componentes de la interfaz de usuario y la navegación deben ser operables. Comprensible La información y el manejo de la interfaz de usuario deben ser comprensibles. Robusto El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de personas usuarias, incluyendo las ayudas técnicas.
13. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 13 / 25 Pautas para el día a día
14. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 14 / 25 Atributos alt y title <img alt=”...” src=”img/foto.jpg”> Asegurar que las imágenes no decorativas tienen un atributo alt descriptivo. Las imágenes decorativas deben tener un atributo alt vacío, o deben ser incorporadas usando CSS. Para gráficas o imágenes complejas, usad el atributo longdesc Restringir el uso del atributo title a donde realmente aporta valor, como los elementos abbr y acronym. <abbr title=”World Wide Web Consortium”>W3C</abbr>
15. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 15 / 25 Tablas, ¿y por qué no? <table> <caption>…</caption> <thead> <tr> <th>…</th> … </tr> </thead> <tbody> <tr> <td>…</td> … </tr> … </tbody> </table> Las tablas son para presentar datos tabulados Usar el marcado adecuado o algún plug-in adecuado http://wordpress.org/plugins/tablepress/
16. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 16 / 25 Vigilar los encabezados Usar encabezados (h1 – h6) de forma lógica, y nunca por decoración. Revisar el mapa de encabezados. http://www.niquelao.net/
17. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 17 / 25 Enlaces, enlaces, enlaces... Usar enlaces descriptivos. Evitar enlaces del tipo “pincha aquí”. Los enlaces deben parecer enlaces (azules, subrayados,… ). Enlaces con el mismo texto, deben llevar al mismo sitio. WP Accessibility Plug-in
18. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 18 / 25 ¿Información con color?
19. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 19 / 25 No sólo colores El País de las maravillas Fin de la histora El País de las maravillas Fin de la histora
20. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 20 / 25 Y tantas y tantas cosas... Etiquetar cada campo de un formulario con un id único y asociar etiqueta (label) y campo (input). Para formularios complejos, dividirlos en grupo de campos (fieldset) y usar la etiqueta legend para describirlos. Indicar el idioma del documento con el atributo lang. Indicar los cambios de idioma con el atributo lang. Indicar los cambios de idioma de los enlaces con el atributo hreflang. Evitar acciones que sólo se activan con onMouseOver u onMouseOut. Usar el atributo role definido por WAI ARIA <fieldset><legend>Datos personales</legend> <label for=”nombre”>Nombre (requerido)</label> <input id=”nombre” type=”text” value=””> <label for=”apellidos”>Apellidos</label> <input id=”apellidos” type=”text” value=””> </fieldset> Mantener diseño consistente a lo largo de todo el sitio web
21. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 21 / 25 Testing, testing, testing... http://tawdis.net http://wave.webaim.org/ http://www.sidar.org/hera/ http://www.atutor.ca/achecker/ En cualquier caso: NO HAY HERRAMIENTA AUTOMÁTICA DE ANÁLISIS COMPLETO
22. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 22 / 25 Estándares Web Accessibility Initative http://www.w3.org/WAI/ Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ How to Meet WCAG 2.0 http://www.w3.org/WAI/WCAG20/quickref/
23. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 23 / 25 Referencias Accessiblity at Wordpress.org https://codex.wordpress.org/Accessibility https://make.wordpress.org/accessibility/ WP Accessible http://wp-accessible.org/
24. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 24 / 25 Poner rampas en la Web Foto: http://kcy.me/107b4 | cc-by-sa-3.0
25. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique 25 / 25 Buenas prácticas para publicación de contenidos Web Foto: http://kcy.me/10od5 | PD-Art