Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Consejos de accesibilidad web

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Accesibilidad web y drupal 8
Accesibilidad web y drupal 8
Cargando en…3
×

Eche un vistazo a continuación

1 de 40 Anuncio

Más Contenido Relacionado

Presentaciones para usted (19)

Similares a Consejos de accesibilidad web (20)

Anuncio

Más de Medio y forma (20)

Más reciente (20)

Anuncio

Consejos de accesibilidad web

  1. 1. Consejos mínimos de accesibilidad 1
  2. 2. 2 Iván Mejía Drupalero, diseñador web, organizador de contenido. correo:koffer@gmail.com Sitios: drupalmexico.com
 www.medioyforma.info
  3. 3. Accesibilidad Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos. https://es.wikipedia.org/wiki/Accesibilidad_web 3
  4. 4. Discapacidad ▪ Discapacidades sensoriales ▪ Pérdida de visión parcial o total. ▪ Incapacidad parcial o total de captar sonidos. ▪ Discapacidades motrices ▪ Falta de coordinación. ▪ Problemas nerviosos. ▪ Carencia de algún miembro. ▪ Discapacidad cognitiva ▪ Dificultad en la compresión. ▪ Problemas para la asimilación de información. ▪ Edad avanzada. ▪ Discapacidad tecnológica ▪ Desconocimiento de la tecnología (nuevos analfabetos). ▪ Falta de medios tecnológicos adecuados. 4
  5. 5. ¿Quién define la Accesibilidad? https://www.w3.org/TR/WCAG21/ 5 http://www.sidar.org/traducciones/wcag20/es/ https://www.w3.org/TR/?status=cr
  6. 6. Accesibilidad Web Diseño 6 Código Contenido
  7. 7. ¿Qué propone la W3C? 7
  8. 8. Los cuatro principios 1.Perceptibilidad - La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de la manera en que puedan percibirlos: 
 4 pautas y 29 criterios de cumplimiento. 2.Operabilidad - Los componentes de la interfaz de usuario y la navegación deben ser operables: 
 5 pautas y 29 criterios de cumplimiento. 3.Comprensibilidad - La información y el manejo de la interfaz de usuario deben ser comprensibles: 
 3 pautas y 17 criterios de cumplimiento. 4.Robustez - El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad de agentes de usuario, incluidas las tecnologías asistivas: 
 1 pauta y 3 criterios de cumplimiento. 8
  9. 9. Puntos a cubrir Perceptibilidad - 4 pautas y 29 criterios de cumplimiento. Operabilidad - 5 pautas y 29 criterios de cumplimiento. Comprensibilidad - 3 pautas y 17 criterios de cumplimiento. Robustez - 1 pauta y 3 criterios de cumplimiento. 9 • 12 pautas que funcionan como objetivos para ser cumplidos. • Cada pauta tiene criterios que permiten cumplirla. • No todos los sitios requieren cumplir todas las pautas, pero muchos sitios requieren cumplir con la mayoría. http://www.sidar.org/traducciones/wcag20/es/
  10. 10. Nivel de conformidad •Nivel A: Para lograr conformidad con el Nivel A (el mínimo), la página web satisface todos los Criterios de Conformidad del Nivel A, o proporciona una versión alternativa conforme. •Nivel AA: Para lograr conformidad con el Nivel AA, la página web satisface todos los Criterios de Conformidad de los Niveles A y AA, o proporciona una versión alternativa conforme al Nivel AA. •Nivel AAA: Para lograr conformidad con el Nivel AAA, la página web satisface todos los Criterios de Conformidad de los Niveles A, AA y AAA, o proporciona una versión alternativa conforme al Nivel AAA. 10
  11. 11. Consejos sencillos 11
  12. 12. Estructura semántica 12
  13. 13. 13 HTML 5 <header> <nav> <footer> <aside> <main>
  14. 14. Los encabezados comunican la organización del contenido en la página. Los navegadores web, los complementos y las tecnologías de asistencia pueden usarlos para proporcionar navegación en la página. 14 https://www.w3.org/WAI/tutorials/page-structure/headings/ http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms Heading
  15. 15. 15 https://www.w3.org/WAI/tutorials/page-structure/headings/ http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms
  16. 16. Aria 16 https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA
  17. 17. 17 Define cómo realizar contenido Web y aplicaciones Web (especialmente las desarrolladas con Ajax y JavaScript) más accesibles a personas con discapacidades. Por ejemplo, ARIA posibilita puntos de navegación accesibles, widgets JavaScript, sugerencias en formularios y mensajes de error, actualizaciones en directo, y más. https://www.youtube.com/watch?v=o4xHfi4t9S0&list=PLWjCJDeWfDdcEtSnqq_iGLKGA_H_3o3y7 https://www.w3.org/TR/wai-aria-practices-1.1/#intro Aria
  18. 18. Landmarks Aria 18 https://w3c.github.io/aria-practices/examples/landmarks/index.html Proporcionan una forma eficaz de identificar la organización y la estructura de una página web • Banner • Complementary • Contentinfo • Form • Main • Navigation • Search • Region http://www.d.umn.edu/itss/training/online/structure/landmarks/
  19. 19. Imágenes 19
  20. 20. 20 Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito. Imágenes
  21. 21. Las imágenes con contenidos deberán tener un texto alternativo.
 
 Código de ejemplo: <img src="teatrodegollado.jpg" alt=“Los lagos. atracción turística en Xalapa.” /> 21 Imágenes
  22. 22. Teclado 22
  23. 23. Teclado 23 Todas las opciones del contenido serán controlables mediante teclado y serán independientes del tiempo, excepto cuando las tareas requieran una interacción secuencia temporal
  24. 24. Teclado https://www.w3.org/WAI/perspective-videos/contrast/ 24
  25. 25. Contraste 25
  26. 26. 26 https://webaim.org/articles/contrast Contraste Texto Texto
  27. 27. 27 https://webaim.org/articles/contrast Asegurar de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. Contraste
  28. 28. 28 https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html https://webaim.org/resources/contrastchecker/ Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos: (Nivel AA) • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.
 • Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
 • Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

  29. 29. Hipervínculos 29
  30. 30. 30 Nombres descriptivos en las ligas. Evitar: “ haga clic aquí ", " más " , “ haga clic para obtener detalles " https://webaim.org/techniques/hypertext/hypertext_links Hipervínculos
  31. 31. Contenido 31
  32. 32. 32 http://www.sidar.org/traducciones/wcag20/es/ Cuando un texto requiere un nivel de lectura más avanzado que el nivel mínimo de educación secundaria una vez que se han eliminado nombres propios y títulos, se proporciona un contenido suplementario o una versión que no requiere un nivel de lectura mayor a ese nivel educativo. (Nivel AAA) Contenido
  33. 33. 33 http://www.sidar.org/traducciones/wcag20/es/ Navegación coherente: Los mecanismos de navegación que se repiten en múltiples páginas web dentro de un conjunto de páginas web aparecen siempre en el mismo orden relativo cada vez que se repiten, a menos que el cambio sea provocado por el propio usuario. (Nivel AA) Contenido
  34. 34. Herramientas 34
  35. 35. Herramientas 35 http://wave.webaim.org https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd Wave, sitio web accesibilidad. AXE, extensión de chrome Herramientas de desarrollo En Chrome. https://validator.w3.org/ Validador HTML Herramientas
  36. 36. Lectores 36 https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn https://www.nvaccess.org/download/ Chromevox, extensión de voz en chrome NVDA, Lector windows https://www.nvaccess.org/download/ ORCA, Linux https://www.apple.com/accessibility/mac/vision/ Voiceover, MACOS Herramientas
  37. 37. 37 Procesamiento: En los contenidos implementados mediante el uso de lenguajes de marcas, los elementos tienen las etiquetas de apertura y cierre completas; los elementos están anidados de acuerdo a sus especificaciones; los elementos no contienen atributos duplicados y los ID son únicos, excepto cuando las especificaciones permitan estas características. (Nivel A). Nota: Las etiquetas de apertura y cierre a las que les falte un carácter crítico para su formación, como un signo de "mayor qué", o en las que falten las comillas de apertura o cierre en el valor de un atributo, no se consideran completas. https://validator.w3.org/
  38. 38. Ejemplos de sitio web accesibles 38 www.canada.ca Gobierno de Canadá www.ssa.gov Social security. USA www.nsw.gov.au New South Wales Gobierno de New
  39. 39. ¿Dudas? 39
  40. 40. Muchas Gracias 40

×