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

Cero excusas: tu web accesible.

Cero excusas: tu web accesible.

Charla impartida en la Codemotion 2020

Azahara Fernández Guizán

November 04, 2020
Tweet

More Decks by Azahara Fernández Guizán

Other Decks in Programming

Transcript

  1. Cero excusas: Tu web accesible con
    una galería de imágenes dinámica
    Azahara Fernández Guizán
    Juan Manuel Rodríguez Pérez
    Noviembre 3-4-5, 2020

    View full-size slide

  2. http://afaya.es/#/
    http://afaya.es/#/
    @afaya_tech
    @juan_manuel_rp
    @azahara_fergui
    Técnologues del montón - Afaya
    Azi Science and Tech
    ¿Quiénes somos?

    View full-size slide

  3. ¿Por qué mi web debería ser accesible?
    7 de cada 10 personas con discapacidad no
    usan internet porque les resulta muy
    complejo

    View full-size slide

  4. ¿Por qué mi web debería ser accesible?
    Pérdida de visión
    Conjuntivitis
    Manos libres del coche
    Pérdida de audición
    Poca movilidad
    Otitis Entorno ruidoso
    Brazo escayolado Mano agarrada a barra de
    sujeción

    View full-size slide

  5. ¿Cómo sé que hacer?
    • 4 principios (perceptible, operable,
    robusto y comprensible)
    • 13 pautas
    • 78 criterios
    • 580 técnicas y errores

    View full-size slide

  6. Pero esto es muy complicado… ¡para nada!
    ❖ Utilizar h1-h6 para organizar el texto
    ❖ Utilizar ol, ul y dl para listas
    ❖ Añadirle caption, aria-describedby, scope e id a las tablas
    ❖ Poner un orden lógico a los formularios y utilizar el atributo title
    ❖ Agrupar las opciones de un select con optgroup
    ❖ Agrupar campos con fieldset y legends
    ❖ Los enlaces que sean enlaces
    ❖ Los botones que sean botones
    ❖ Probar que se pueda navegar mediante tabs
    ❖ Tratar de dar alternativas a movimientos complejos de tipo drag and drop
    ❖ Señalar donde está el foco
    ❖ Crear campos de interacción de gran tamaño
    ❖ Si ponemos atajos de teclado, que se puedan desactivar o cambiar.
    ❖ Letra grande y sans-serif
    ❖ Añadir la descripción a las imágenes con el atributo alt
    ❖ Usar colores que ofrezcan buen contraste
    ❖ Alinear a la izquierda
    ❖ Maquetar con css
    ❖ Evitar destellos
    ❖ Que nuestras páginas sean predecibles
    20 tips

    View full-size slide

  7. ¿Cómomidola acessibilidadde mi web?

    View full-size slide

  8. ¿Cómose que el contrastede color estábien?

    View full-size slide

  9. ¿Pero y mientrasdesarrollo?

    View full-size slide

  10. ¿Pero y los destellos?

    View full-size slide

  11. ¿Y cómome
    pongo enel
    lugarde otra
    persona?

    View full-size slide

  12. Quierosaber
    más
    https://www.w3.org/WAI/stan
    dards-guidelines/wcag/

    View full-size slide

  13. Creando la galería
    dinámica y
    accesible

    View full-size slide

  14. • Tener instalado `Node.js
    • Tener instalado `npm´
    • Tener instalado `Angular-Cli´
    • Tener cuenta en `Azure´ con un servicio de
    `Computer Vision´ de `Cognitive Services´
    Pasos previos

    View full-size slide

  15. • Crear proyecto Angular (ng new appName)
    • Crear componente (ng g componentName)
    • Crear servicio (ng g serviceName)
    • Necesitamos el paquete @types/node
    • Necesitamos la librería piexifjs
    • Necesitamos la librería file-saver
    Pasos generales

    View full-size slide

  16. Metamos las manos en la masa

    View full-size slide

  17. ¿Dóndeencuentro el código?
    Repositorio ReadImageDescription
    url: https://github.com/jmrp81/ReadImageDescription

    View full-size slide

  18. Una ayuda para obtener
    descripciones
    url: https://github.com/jmrp81/ReadImageDescription/tree/master/WPFApp

    View full-size slide

  19. Agradecimientos

    View full-size slide

  20. Q&A
    Azahara Fernández Guizán /
    Juan Manuel Rodríguez Pérez

    View full-size slide