Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Buenas prácticas para publicación de contenidos Web

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.

Manrique Lopez

March 08, 2014
Tweet

More Decks by Manrique Lopez

Other Decks in Technology

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

    3 / 25 Foto: http://kcy.me/105wf | cc-by-sa-2.0 La audiencia
  3. 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)
  4. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique

    8 / 25 Seleccionar plug-in adecuado https://wordpress.org/plugins/wp-accessibility/
  5. José Manrique López de la Fuente | about.me/jsmanrique | @jsmanrique

    10 / 25 Foto: http://kcy.me/1068j | cc-by-2.0
  6. 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
  7. 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.
  8. 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>
  9. 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/
  10. 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/
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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/
  16. 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/
  17. 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
  18. 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