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

Accesibilidad web y drupal 8

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 39 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Accesibilidad web y drupal 8 (20)

Anuncio

Más de Medio y forma (20)

Más reciente (20)

Anuncio

Accesibilidad web y drupal 8

  1. 1. Accesibilidad web y Drupal Iván Mejía
  2. 2. Accesibilidad Al hablar de accesibilidad Web se está haciendo referencia a un diseño Web, que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web aportando contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo adultos mayores que han visto mermadas sus capacidades a consecuencia de la edad. Un sitio Web accesible es aquel que puede ser utilizado correctamente por el mayor número posible de usuarios, incluyendo a personas con diferentes tipos de discapacidad e independientemente de los medios técnicos. conapred.org.mx
  3. 3. Accesibilidad La "accesibilidad web" se centra principalmente en hacer que la web sea accesible para personas con discapacidades. La accesibilidad también hace que la web sea más utilizable para: • Usuarios mayores con necesidades de accesibilidad debido al envejecimiento. • Personas con conexiones de bajo ancho de banda. • Personas que usan hardware y software antiguos • Personas que son nuevos usuarios de internet. • Personas que utilizan dispositivos móviles para acceder a la web. • Personas que no dominan el idioma del sitio web. https://www.w3.org/WAI/presentations/2008/2008-06June-MalaysiaUPS
  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.
  5. 5. Accesibilidad Web Código Contenido Diseño
  6. 6. ¿Quién define la Accesibilidad? https://www.w3.org/TR/WCAG21/ http://www.sidar.org/traducciones/wcag20/es/ https://www.w3.org/TR/?status=cr
  7. 7. Web Content Accessibility Guidelines WCAG WAI Web Accessibility Initiative https://www.w3.org/WAI/ https://www.w3.org/WAI/standards-guidelines/ https://www.w3.org/WAI/tutorials/page-structure/ Tutoriales
  8. 8. Los cuatro principios
  9. 9. 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.
  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.
  11. 11. Nivel de conformidad • Páginas completas: La conformidad (y los niveles de conformidad) se aplican a las páginas web completas, y no pueden ser alcanzadas si se excluye una parte de la página. • Procesos completos: Cuando una página web es parte de una serie de páginas web que presentan un proceso (es decir, una secuencia de pasos que es necesario completar para realizar una actividad), todas las páginas en ese proceso deben ser conformes con el nivel especificado o uno superior. (No es posible lograr conformidad con un nivel en particular si una de las páginas del proceso no cumple con ese nivel o uno superior). • Uso exclusivo de tecnologías de modo compatible con la accesibilidad: Sólo se puede depender de las tecnologías usadas de forma compatible con la accesibilidad para satisfacer los criterios de conformidad. Toda información o funcionalidad que se proporcione de una forma que no sea compatible con la accesibilidad debe estar disponible de una forma que sí sea compatible con la accesibilidad. • Además, los siguientes criterios de conformidad se aplican a todo el contenido de la página, incluyendo el contenido del que, de todos modos, no se depende para alcanzar la conformidad, ya que su incumplimiento puede interferir con el uso de la página: •1.4.2 - Control del audio, •2.1.2 - Sin trampas para el foco del teclado, •2.3.1 - Umbral de tres destellos o menos, y •2.2.2 - Poner en pausa, detener, ocultar.
  12. 12. Accesibilidad Código Contenido Diseño
  13. 13. 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. • 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/
  14. 14. Puntos a cubrir 1 Perceptible 1.1 Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple. 1.2 Medios tempodependientes: proporcionar alternativas para los medios tempodependientes. 1.3 Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura. 1.4 Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo. https://www.w3.org/TR/WCAG21/
  15. 15. Ejemplos nivel A Las imágenes con contenidos deberán tener un texto alternativo.
 
 Código de ejemplo: <img src="teatrodegollado.jpg" alt=“Teatro Degollado en Guadalajara.” /> 1.1.1 Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto en las situaciones enumeradas a continuación. (Nivel A)
  16. 16. Ejemplos nivel A 1.1.1 Contenido no textual: Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto en las situaciones enumeradas a continuación. (Nivel A) https://webdesign.tutsplus.com/es/articles/accessibility-basics-designing-for-visual-impairment--cms-27634
  17. 17. Ejemplos nivel A y NivelAA Video y audio Requiere transcripción En nivel doble AA Se requiere subtítulos (caption) https://www.w3.org/WAI/perspective-videos/keyboard/ Pauta 1.2 Medios tempodependientes: Proporcionar alternativas para los medios tempodependientes.
  18. 18. 1.4.1 Uso del color: El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Nivel A) Ejemplo ligas https://www.accessibilityoz.com/2014/02/links-and-accessibility/
  19. 19. 1.4.1 Uso del color: El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Nivel A) Ejemplo ligas <a href="http://www.google.com/" target="_blank">Google <span class="sr-only">Opens in new window</span> <i aria-hidden="true" class="fa fa-edit fa- external-link"></i> </a> .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } HTML CSS
  20. 20. https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html https://webaim.org/resources/contrastchecker/ 1.4.3 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.

  21. 21. Puntos a cubrir https://www.w3.org/TR/WCAG21/ 2 Operable 2.1 Proporcionar acceso a toda la funcionalidad mediante el teclado. 2.2 Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido. 2.3 No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones. 2.4 Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.
  22. 22. Pauta 2.1.1. 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
  23. 23. Headings El anidado de encabezado debe ser por su rango (o nivel). El encabezado más importante tiene el rango 1 (<h1>), el encabezado menos importante rango 6 (<h6>). Los encabezados con un rango igual o superior inician una nueva sección, los encabezados con un rango inferior inician nuevas subsecciones que forman parte de la sección de mayor clasificación. https://www.w3.org/WAI/tutorials/page-structure/headings/ http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms Pauta 2.4 Navegable: Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran. 2.4.6 Encabezados y etiquetas: Los encabezados y etiquetas describen el tema o propósito. (Nivel AA)
  24. 24. Headings https://www.w3.org/WAI/tutorials/page-structure/headings/ http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms
  25. 25. 2.4.7 Foco visible: Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la cuál el indicador del foco del teclado resulta visible. (Nivel AA)
  26. 26. Principio y pautas http://www.sidar.org/traducciones/wcag20/es/ 3 Comprensible 3.1 Hacer que los contenidos textuales resulten legibles y comprensibles. 3.2 Hacer que las páginas web aparezcan y operen de manera predecible. 3.3 Ayudar a los usuarios a evitar y corregir los errores.
  27. 27. http://www.sidar.org/traducciones/wcag20/es/ 3.1.5 Nivel de lectura: 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)
  28. 28. http://www.sidar.org/traducciones/wcag20/es/ 3.2.3 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)
  29. 29. Puntos a cubrir http://www.sidar.org/traducciones/wcag20/es/ 4 Robusto 4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.
  30. 30. Puntos a cubrir 4.1.1 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/
  31. 31. Accessible Rich Internet Applications  ARIA https://developer.mozilla.org/es/docs/Web/ Accessibility/ARIA 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
  32. 32. Ejemplo Aria Landmarks Aria 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/
  33. 33. Accesibilidad en Drupal 1- Semántico (HTML 5 y Aria) 2- Alt text por default 3- Hidden elements “hidden“: ocultar un elemento visualmente y de lectores de pantalla; “hidden“visually-“: ocultar un elemento solo visualmente pero disponible para lectores de pantalla; “invisible“: Ocultar un elemento visualmente y de los lectores de pantalla sin afectar el diseño. 4- Temas como boostrap con etiquetas Aria. 5- Facilidad para trabajar con twig y preprocess para agregar etiquetado. https://www.drupal.org/docs/8/accessibility
  34. 34. Limitantes Accesibilidad en Drupal 1- No todos los módulos contribuidos contemplan la accesibilidad. 2- Formas requieren ajustes 3- Contenido creado con el editor requieren ser revisado. 4- Cuidado con funcionalidad/módulos como carrusel
  35. 35. Herramientas 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
  36. 36. Lectores https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn https://www.nvaccess.org/download/ Chromevox, extension de voz en chrome NVDA, Lector windows https://www.nvaccess.org/download/ ORCA, Linux https://www.apple.com/accessibility/mac/vision/ Voiceover, MACOS
  37. 37. Ejemplos de sitio web accesibles www.canada.ca Gobierno de Canada www.ssa.gov Social security. USA www.nsw.gov.au New South Wales Gobierno de New
  38. 38. ¿Dudas?
  39. 39. Accesibilidad en Drupal 2019

×