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.
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
• 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
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
Mejorar la legibilidad • Elegir una tipografía adecuada • Tamaño de fuente • Longitud de línea • Justificació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
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 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; }
Justificación /* No uses esto nunca */ main { text-align: justify; } /* Este es el valor por defecto */ main { text-align: left; } Mejorar la legibilidad
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; }
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
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ú
• 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
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
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
dlcoder
mitchan
microcms
codehex
os1ma
hhamon
paper2
makomakok
fendo181
minodriven
yuya4
dosukoi_android
mikobaaaaa0920
jakevdp
addyosmani
myddelton
deanohume
colly
lauravandoore
caitiem20
mraible
paulrobertlloyd
aarron
reverentgeek
orderedlist