Patrones de diseño inclusivos

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

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

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

Fuente: @microsoftDesign

Accesibilidad • ¿Qué deﬁnimos 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

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

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

Sacar partido a los estándares  <div
class="button button--fav" data- action="fav"></div>  <div class="button button--fav" data-action="fav" aria-label=“Añadir a mis favoritos" tabindex="0"></div>

Sacar partido a los estándares  <button
data-action="fav" aria-label=“Añadir a mis favoritos"> <svg> <use xlink:href="#fav"></use> </svg> </button>  <button data-action="fav"> <span class=“visually-hidden">Añadir a mis favoritos</span> <svg> <use xlink:href="#fav"></use> </svg> </button>

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

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

Partiendo desde cero • <!DOCTYPE html> • Atributo lang •
Responsive design • <title> • <main> • Skip links

Partiendo desde cero <!DOCTYPE html>

Atributo lang <html lang="es"> • 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

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

Responsive design  <meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum- scale=1.0, user-scalable=no">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> Partiendo desde cero

<title> • 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

<main> • Identiﬁca el contenido principal del sitio • Sólo
un elemento por página Partiendo desde cero  <div role="main"> ... </div>  <main role="main"> ... </main>  <main> ... </main>

<main> • 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; } }

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

Skip links <body>  <a href="#main">Ir
al contenido principal</a> <main id="main">  </main> </body> Partiendo desde cero

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

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

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

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%; }

Longitud de línea • Líneas muy largas diﬁcultan 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; }

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

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

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

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

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

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; }

Páginas • Elemento <h1> • Secciones y subsecciones • Subtítulos

Elemento <h1> • 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 <main> también provee de un atajo a los usuarios de dispositivos de apoyo Páginas

Secciones y subsecciones • Los encabezados <h1> … <h6> deﬁnen
la jerarquía del documento • Elementos como <article> o <section> no aportan ningún valor en este sentido. Páginas

Secciones y subsecciones  <h1>Patrones de diseño inclusivos</h1> <h3>Secciones y subsecciones</h3>  <h1>Patrones de diseño inclusivos</h1> <h2>Páginas</h2> <h3>Secciones y subsecciones</h3> Páginas

Subtítulos  <h1>Patrones de diseño inclusivos</h1>
 <h2>Cómo abordar la accesibilidad en el desarrollo de temas personalizados en Drupal 8</h2>  <h1>Patrones de diseño inclusivos</h1> <p><span class="visually-hidden">Subtítulo:</span> Cómo abordar la accesibilidad en el desarrollo de temas personalizados en Drupal 8</p> Páginas

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

Navegación • <nav> • 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ú

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

<nav>  <div role="navigation"> ... </div>  <nav role="navigation"> ... </nav>  <nav> ... </nav> Navegación

<nav> 
<nav> <ul> <li><a href="/">Inicio</a></li> <li><a href="/quienes-somos">Quienes somos</a></li> <li><a href="/servicios">Servicios</a></li> <li><a href="/trabajos">Trabajos</a></li> <li><a href="/Contacto">Contacto</a></li> </ul> </nav> Navegación

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

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

Enlace activo <nav> <ul> <li><a href="/">Inicio</a></li> <li><a href="/quienes-somos" aria- describedby="current">Quienes
somos</a></li> <li><a href="/servicios">Servicios</a></li> <li><a href="/trabajos">Trabajos</a></li> <li><a href="/Contacto">Contacto</a></li> </ul> <div hidden id="current">Página actual</div> </nav> Navegación

De un enlace redundante a un skip link <nav> <ul>
<li><a href="/">Inicio</a></li> <li><a href="#main">Quienes somos</a></li> <li><a href="/servicios">Servicios</a></li> <li><a href="/trabajos">Trabajos</a></li> <li><a href="/Contacto">Contacto</a></li> </ul> </nav> Navegación

Eliminar duplicidades Navegación

Eliminar duplicidades <nav> <ul> <li> <a href="/"> <img src="images/logo.svg" alt="Página
de inicio" /> </a> </li> <li><a href="#main">Quienes somos</a></li> <li><a href="/servicios">Servicios</a></li> <li><a href="/trabajos">Trabajos</a></li> <li><a href="/Contacto">Contacto</a></li> </ul> </nav> Navegación

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

Asignar labels a los elementos de navegación <nav aria-labelledby="social-media"> <h2
id="social-media">Redes Sociales</h2> <ul> <li><a href=“https://twitter-profile- link.com">Twitter</a></li> <li><a href=“https://facebook-profile- link.com">Facebook</a></li> <li><a href=“https://instagram-profile- link.com">Instagram</a></li> <li><a href=“https://google-plus-profile- link.com">Google Plus</a></li> </ul> </nav> Navegación

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

Botón de menú <nav aria-label="Menú principal del sitio"> <button aria-expanded="false">
<svg> <use xlink:href=“#hamburguer-icon"></use> </svg> Menu </button> <ul hidden> <li><a href="/">Inicio</a></li> <li><a href="/quienes-somos">Quienes somos</a></li> <li><a href="/servicios">Servicios</a></li> <li><a href="/trabajos">Trabajos</a></li> <li><a href="/contacto">Contacto</a></li> </ul> </nav> Navegación

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

Recursos • Libros • Blogs

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

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

¡Gracias! @vlledo [email protected]

Patrones de diseño inclusivos

Patrones de diseño inclusivos

More Decks by Delirium Coder

Other Decks in Programming

Featured

Transcript