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

Patrones de diseño inclusivos

Patrones de diseño inclusivos

Charla impartida en la DrupalCamp 2017 sobre cómo abordar la accesibilidad desde el inicio de un proyecto, a través del uso de patrones de diseño inclusivos.

Delirium Coder

May 06, 2017
Tweet

More Decks by Delirium Coder

Other Decks in Programming

Transcript

  1. Patrones de
    diseño inclusivos
    Víctor Rodríguez Lledó
    www.deliriumcoder.com #drupalCampEs

    View full-size slide

  2. Guión
    • Accesibilidad
    • Sacar partido a los estándares
    • Progressive enhancement
    • Partiendo desde cero
    • Mejorar la legibilidad
    • Páginas

    View full-size slide

  3. Guión
    • Navegación
    • Otros patrones
    • Recursos

    View full-size slide

  4. Fuente: @microsoftDesign

    View full-size slide

  5. Accesibilidad
    • ¿Qué definimos como normal?
    • Todos somos dependientes en algún momento
    de nuestra vida
    • No podemos abordar la accesibilidad como un
    parche
    • Patrones de diseño inclusivos

    View full-size slide

  6. El diseño inclusivo se basa en la forma en la que
    las personas usan las interfaces, no únicamente
    en solucionar errores técnicos

    View full-size slide

  7. Sacar partido a los
    estándares
    • HTML5: semántica y más semántica
    • WAI-ARIA: para ayudarnos donde no llega la
    semántica

    View full-size slide

  8. Sacar partido a los
    estándares

    action="fav">

    aria-label=“Añadir a mis favoritos"
    tabindex="0">

    View full-size slide

  9. Sacar partido a los
    estándares

    favoritos">






    Añadir a mis
    favoritos




    View full-size slide

  10. Deshabilita tu CSS
    ¿Tu página sigue siendo legible?

    View full-size slide

  11. Progressive enhancement
    Everything but content is an enhancement
    HTML
    HTML +
    CSS
    HTML +
    CSS +
    Javascript

    View full-size slide

  12. Partiendo desde cero

    • Atributo lang
    • Responsive design


    • Skip links

    View full-size slide

  13. Partiendo desde cero

    View full-size slide

  14. Atributo lang

    • Establece el idioma de la página
    • Ayuda a los navegadores a elegir fuentes con el
    conjunto apropiado de caracteres
    • En lectores de pantalla determina el sintetizador
    de voz adecuado.
    Partiendo desde cero

    View full-size slide

  15. Responsive design
    • Layout fluido
    • Norma general: ningún elemento con ancho o
    alto en píxeles
    • Permitir zoom
    Partiendo desde cero

    View full-size slide

  16. Responsive design




    Partiendo desde cero

    View full-size slide


  17. • Nombre accesible del documento
    • Patrón: descripción_de_la_página |
    nombre_del_sitio
    • Ejemplo: “Patrones de diseño inclusivos |
    DrupalCamp 2017”
    Partiendo desde cero

    View full-size slide


  18. • Identifica el contenido principal del sitio
    • Sólo un elemento por página
    Partiendo desde cero

    ...

    ...

    ...

    View full-size slide


  19. • Podemos hacer la vida más fácil a aquellos que
    imprimen las páginas
    Partiendo desde cero
    @media print {
    body > *:not(main) {
    display: none;
    }
    }

    View full-size slide

  20. Skip links
    • Enlaces situados por encima de todo el contenido
    de la página que apuntan a la región principal de
    contenido
    • Normalmente ocultos, sí son visibles cuando
    reciben el foco
    Partiendo desde cero

    View full-size slide

  21. Skip links


    Ir al contenido principal




    Partiendo desde cero

    View full-size slide

  22. Mejorar la legibilidad
    • Elegir una tipografía adecuada
    • Tamaño de fuente
    • Longitud de línea
    • Justificación del texto
    • Line-height
    • Contraste
    • Enlaces

    View full-size slide

  23. Elegir una tipografía adecuada
    • ¿La tipografía soporta todos los caracteres y
    estilos que necesitamos?
    • ¿Se diferencian bien sus caracteres o hay algunos
    que pueden confundirse?
    • ¿Su forma facilita la lectura?
    • ¿Sus métricas son consistentes en todos los
    caracteres que la componen?
    Mejorar la legibilidad

    View full-size slide

  24. Elegir una tipografía adecuada
    1 l I
    d b
    Mejorar la legibilidad

    View full-size slide

  25. Tamaño de fuente
    • Un tamaño de fuente generoso no ofende a nadie
    • Siempre en unidades relativas
    Mejorar la legibilidad
    /* No uses esto */
    html {
    font-size: 16px;
    }
    /* Usa esto */
    html {
    font-size: 100%;
    }

    View full-size slide

  26. Longitud de línea
    • Líneas muy largas dificultan la lectura
    • Entre 45 y 75 caracteres por línea se considera
    una buena medida
    Mejorar la legibilidad
    html {
    font-size: 100%;
    }
    main {
    max-width: 60rem;
    }

    View full-size slide

  27. Justificación
    /* No uses esto nunca */
    main {
    text-align: justify;
    }
    /* Este es el valor por defecto */
    main {
    text-align: left;
    }
    Mejorar la legibilidad

    View full-size slide

  28. Line-height
    • El interlineado debe ser generoso (space-and-a-
    half).
    Mejorar la legibilidad
    /* space and a half */
    p {
    line-height: 1.5;
    }

    View full-size slide

  29. Contraste
    • Se deben evitar combinaciones de bajo contraste
    entre el color del texto y el color de fondo
    • Combinaciones de muy alto contraste también
    pueden resultar problemáticas
    • Existen multitud de validadores: extensión de
    Chrome, extensión de Firefox
    Mejorar la legibilidad

    View full-size slide

  30. Enlaces
    • En los enlaces en línea, respetar la convención
    del subrayado
    • Crafting link underlines
    • Indicar visualmente cuando el enlace tiene el
    foco
    Mejorar la legibilidad

    View full-size slide

  31. Enlaces
    /* No uses esto */
    p a:focus {
    outline: none;
    }
    /* Si no te gusta el estilo por defecto puedes
    usar el tuyo propio. Este es de GOV.UK */
    p a:focus {
    outline: 3px solid #ffbf47;
    background-color: #ffbf47;
    }
    Mejorar la legibilidad

    View full-size slide

  32. Enlaces
    • Por cortesía, avisaremos al usuario cuando se
    trate de un enlace externo
    Mejorar la legibilidad
    [href^="http"]:not([href*="drupalcamp.es"])::after {
    background-image: url('images/external-link.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75% auto;
    display: inline-block;
    height: 1em;
    width: 1em;
    /* Añadimos un texto alternativo como pseudo contenido */
    content: '(enlace externo)';
    overflow: hidden;
    text-indent: 1em; /* Mismo ancho del icono */
    white-space: nowrap;
    }

    View full-size slide

  33. Páginas
    • Elemento
    • Secciones y subsecciones
    • Subtítulos

    View full-size slide

  34. Elemento
    • Encabezado de mayor nivel del documento
    • Lo lógico es que sea único y que describa
    adecuadamente el título de la página
    • Al igual que el elemento también provee
    de un atajo a los usuarios de dispositivos de
    apoyo
    Páginas

    View full-size slide

  35. Secciones y subsecciones
    • Los encabezados … definen la
    jerarquía del documento
    • Elementos como o no
    aportan ningún valor en este sentido.
    Páginas

    View full-size slide

  36. Secciones y subsecciones

    Patrones de diseño inclusivos
    Secciones y subsecciones

    Patrones de diseño inclusivos
    Páginas
    Secciones y subsecciones
    Páginas

    View full-size slide

  37. Subtítulos

    Patrones de diseño inclusivos

    Cómo abordar la accesibilidad en el desarrollo
    de temas personalizados en Drupal 8

    Patrones de diseño inclusivos
    Subtítulo:
    Cómo abordar la accesibilidad en el desarrollo de
    temas personalizados en Drupal 8
    Páginas

    View full-size slide

  38. .visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    }

    View full-size slide

  39. Navegación

    • Posicionamiento
    • Enlace activo
    • De un enlace redundante a un skip link
    • Eliminar duplicidades
    • Asignar labels a los elementos de navegación
    • Botón de menú

    View full-size slide


  40. • Al igual que con el elemento , las
    regiones de navegación también son reconocidas
    por los dispositivos de apoyo (consultar WAI-ARIA
    Landmark roles).
    • Pueden existir múltiples elementos en una
    página.
    Navegación

    View full-size slide



  41. ...

    ...

    ...
    Navegación

    View full-size slide





  42. Inicio
    Quienes somos
    Servicios
    Trabajos
    Contacto


    Navegación

    View full-size slide

  43. Posicionamiento
    • Al comienzo de la página
    • Facilita la interacción a usuarios de teclado
    Navegación

    View full-size slide

  44. Enlace activo
    • Sitúa a los usuarios “Estás aquí”
    • Evitar diferenciar sólo visualmente
    Navegación

    View full-size slide

  45. Enlace activo


    Inicio
    describedby="current">Quienes somos
    Servicios
    Trabajos
    Contacto

    Página actual

    Navegación

    View full-size slide

  46. De un enlace redundante a un
    skip link


    Inicio
    Quienes somos
    Servicios
    Trabajos
    Contacto


    Navegación

    View full-size slide

  47. Eliminar duplicidades
    Navegación

    View full-size slide

  48. Eliminar duplicidades







    Quienes somos
    Servicios
    Trabajos
    Contacto


    Navegación

    View full-size slide

  49. Asignar labels a los elementos
    de navegación
    • Pueden existir múltiples regiones de navegación
    • Necesitamos que los usuarios de dispositivos de
    apoyo puedan distinguirlas
    Navegación

    View full-size slide

  50. Asignar labels a los elementos
    de navegación

    Redes Sociales

    link.com">Twitter
    link.com">Facebook
    link.com">Instagram
    link.com">Google Plus


    Navegación

    View full-size slide

  51. Botón de menú
    • Regla general: si el menú tiene menos de 5 elementos,
    es mejor dejarlo siempre visible.
    • Si vas a utilizar el típico hamburguer acompáñalo
    siempre del texto “Menú”.
    • Para la imagen usa el formato svg
    • Debe tener un tamaño adecuado para la interacción en
    dispositivos móviles.
    • El código javascript que da soporte a la interacción
    debe considerarse como crítico.
    Navegación

    View full-size slide

  52. Botón de menú





    Menu


    Inicio
    Quienes somos
    Servicios
    Trabajos
    Contacto


    Navegación

    View full-size slide

  53. Otros patrones
    • A11Y Project - Patterns
    • A11Y style guide
    • Inclusive components

    View full-size slide

  54. Recursos
    • Libros
    • Blogs

    View full-size slide

  55. Libros
    • Inclusive design patterns
    • A web for everyone
    • Adaptive web design
    • WCAG 2.0 de forma sencilla
    Recursos

    View full-size slide

  56. Blogs
    • Paciello Group’s blog
    • tink.uk
    • GOV.UK accesibility blog
    • Accesibility wins
    • Marco’s accesibility blog
    • Usable y accesible
    Recursos

    View full-size slide