Accesibilidad web
Webs más accesibles e inclusivas
¿Qué es la accesibilidad?
La accesibilidad es la posibilidad que tienen las personas para poder utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas.
Diversidad de usuarios
Según la OMS existen 1000 millones de personas con discapacidad.
Para una sociedad igualitaria, debemos tener en cuenta el acceso de estas personas a la tecnología.
Tipos de discapacidades: visuales, motrices, auditivas o cognitivas.
¿Qué es la accesibilidad?
The Accessible Icon Project
Comenzó siendo un movimiento de arte guerrilla hasta convertirse en un proyecto social.
Objetivo: Editar las ciudades que tenemos y señalar a la acción colectiva para un futuro más inclusivo.
The Accessible Icon Project
The Accessible Icon Project
Se ha convertido en el icono oficial de accesibilidad en NY.
The Accessible Icon Project
Es el actual emoji de accesibilidad en iPhone.
¿Qué es la accesibilidad web?
Permitir que personas con algún tipo de discapacidad puedan percibir, entender, navegar e interactuar con la web.
El objetivo es lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales.
Siempre asociamos accesibilidad con poco atractivo...
... pero, ¡también puede ser atractiva!
Diseño accesible vs. Diseño universal
Diseño accesible: se adapta a las personas con discapacidades.
Por ejemplo, añadir un botón que permita ver el texto en un tamaño más grande.
Diseño universal: crea productos para la audiencia más amplia posible, que incluye, pero no está limitada a, personas con discapacidad.
Por ejemplo, mostrar el texto más grande por defecto.
Ejemplo de formulario no accesible
- Difícil asociar etiquetas y campos.
- Las etiquetas tienen poco contraste.
Pautas de accesibilidad a seguir
- Perceptible: ¿Puede el usuario percibir el contenido?
- Manejable: ¿Puede el usuario navegar por el contenido?
- Comprensible: ¿Puede el usuario entender el contenido y la interfaz?
- Sólido: ¿Funciona con tecnología asistencial?
Guías de accesibilidad:
¿Qué es el foco?
Existen usuarios con discapacidades motoras que utilizan el teclado para navegar por la página.
El foco determina en que parte de la página tiene lugar los eventos del teclado.
Se debe permitir el acceso a todas las funcionalidades de la página por medio de un teclado.
Orden de tabulación del foco
Nos tenemos que asegurar de que tenga un orden de tabulación lógico.
Nos movemos por los elementos de la página mediantes las teclas:
- tab: hacia delante.
- shift + tab: hacia atrás.
¡No todos los elementos HTML deben enfocarse! Las imágenes y los textos no.
Orden de tabulación del foco
El orden de tabulación de los elementos nativos se basa en su posición en el DOM.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>Al agregar estilos en línea, cambia el orden visual pero el DOM es el mismo.
<button style="float:right;">I Should</button>
<button>Be Focused</button>
<button>Last!</button>El orden de lectura y de ordenación debe ser lógico e intuitivo.
Uso del tabindex
Utilizamos el atributo tabindex para especificar un orden explícito para los elementos de página que puedan tener el foco.
<div tabindex="0">Focus</div>- tabindex=0 agrega el elemento (div, p) en el orden natural de tabulación.
- tabindex=-1 fuera del orden de tabulación. Volve a enfocarlo llamando al método focus().
- tabindex=5 trae el elemento al frente. ¡Anti-pattern! Mejor subirlo en el DOM.
Skip links
Se utilizan para navegar directamente al contenido de la web, sin tener que atravesar todo el menú.
A través de un ancla saltamos al contenido principal:
<a class="skip-link" href="#maincontent">Skip to main content</a>
<main class="container" id="maincontent">
...
</main>Offscreen content
A veces existen elementos en el DOM que no se muestran en pantalla y hacen que perdamos el foco.
Para encontrar el foco perdido utilizamos document.activeElement en la consola.
Solución: display:none o visibility:hidden
Trampas de teclado
El foco nunca debe ser bloqueado en un elemento de la página.
Pero a veces es un comportamiento deseado. Por ejemplo, en las modales.
¿Qué es la tecnología de asistencia?
Software y herramientas que ayudan a cualquier persona con discapacidad a completar una tarea.
Por ejemplo: un lector de pantalla, pantalla braille, lupa de pantalla, control de voz, etc.
Lectores de pantalla
Programa que permite a las personas con discapacidad visual usar un ordenador leyendo el texto de la pantalla en voz alta con una voz generada.
Semántica básica
Información semántica sobre los widgets de entrada, estructuras y comportamiento, para permitir a tecnologías de asistencia transmitir información adecuada.
- Rol o tipo de elemento
- Nombre
- Estado
- Valor
Árbol de accesibilidad
El navegador toma el árbol del DOM y lo modifica para generar contenido útil para la tecnología asistencial.
Gran parte del DOM tiene significado semántico implícito.
Alternativas de texto
Hay que proporcionar alternativas de texto para cualquier contenido que no sea texto:
WebAIM - 1.1.1 Non-text Content
Mediante la etiqueta alt añadimos una alternativa de texto.
Si la imagen es decorativa añadimos un alt vacío. El lector de pantallas lo ignora.
<img src="image.jpg" alt="">ARIA - Accessible Rich Internet Applications
Conjunto de atributos que modifican la forma en el que un elemento se traduce en el árbol de accesibilidad.
ARIA añade información que falta, para que el lector de pantalla pueda interpretarla correctamente.
Modifica la semántica de un elemento existente o agrega en los elementos que no lo tengan.
ARIA no modifica el comportamiento del elemento.
ARIA - Accessible Rich Internet Applications
ARIA - Accessible Rich Internet Applications
Los elementos nativos tienen información semántica incorporada:
<label>
<input type="checkbox" checked>
Acepto las condiciones
</label>Tipo de elemento: Checkbox
Nombre: "Acepto las condiciones"
Estado: checked
ARIA - Accessible Rich Internet Applications
<div class="checbox checked">
Acepto las condiciones
</div>Texto
Value: "Acepto las condiciones"
No tenemos suficiente información. ¡ARIA nos permite darle información adicional!
Atributos ARIA: role
El atributo role ARIA permite indicar la función de un elemento de la interfaz.
<div class="checbox checked" role="checkbox" aria-checked="true">
Acepto las condiciones
</div>El rol de ARIA se prioriza al rol del elemento HTML.
No es necesario redefinir la semántica de los elementos nativos
<input type="checkbox" role="checkbox">Document landmarks
Roles que ayudan a las tecnologías de asistencia a comprender el papel de una sección y su relación con otros contenidos en esa página.
Document landmarks
No todos los navegadores soportan accesibilidad en los landmarks.
Atributos ARIA: aria-label
aria-label especifica un string para usar como etiqueta accesible.
Solo está expuesto a la tecnología asistida.
Anula cualquier etiquetado nativo como un label.
<button class="boton" aria-label="Filtro">
<div class="filter">
</div>
</button>Estados y propiedades ARIA
Dan más información sobre un widget a las tecnologías de asistencia.
Suelen ser dinámicos y cambian a lo largo del uso de la web, manipulado por Javascript. Por ejemplo:
aria-expanded: usado cuando un menú se expande o colapsa.
aria-describedby: dice a la tecnología de asistencia donde buscar la descripción.
Live regions
Anuncian los cambios sin perder el foco actual.
- aria-live: on: se utiliza para indicar de que está en estado vivo y se deben informar los cambios.
- aria-live: off: no se informan los cambios.
- aria-live: polite: informa los cambios en el momento adecuado (al dejar de teclear).
- aria-live: assertive: informa inmediatamente, errores o alertas.
Secciones ocultas a la vista
Cualquier elemento que no tenga visibilidad, es ocultado también por la tecnología asistida.
<div style="visibility: hidden;">
<button style="display:none;">
<span hidden>Un elemento que no se representa visualmente, se incluye en el árbol de accesibilidad.
.lectorpantalla {
position:absolute;
left: -100000px;
width: 1px;
height: 1px;
overflow: hidden;
}Secciones ocultas: aria-hidden
Oculta contenido a la tecnología de asistencia.
<div class="banner">
<div class="slide" aria-hidden="true">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide" aria-hidden="true">Slide 3</div>
</div>¿Cuando utilizar ARIA?
- No existen efectos negativos al utilizar ARIA.
- Nunca debe ser utilizado para reemplazar una mala estructura HTML.
- Una web inutilizable seguirá siendo inaccesible.
Estilos accesibles
Puntos a tener en cuenta:
- El estilo del foco.
- El estilo de estados con ARIA.
- Diseño adaptable multidispositivo.
- Color y contraste.
Estilo del foco
Sin el anillo de enfoque, el usuario no sabe que elemento tiene el foco.
Estilo del foco
Algunos programadores quitan el estilo del foco, al no adaptarse al diseño de la página.
¡Desactivar el estilo del foco es anti-patrón!
:focus {
outline: 0;
}Estilo de estados con ARIA
Es una práctica común reflejar estados de componentes mediante clases CSS.
<div class="toggle pressed" role="button" aria-pressed="true">
</div>En vez de utilizar el selector:
.toggle.pressed{
}Mejor reemplazarla por atributos ARIA, para verificar el estado de ARIA.
.toogle[aria-pressed="true"]Diseño adaptable multidispositivo
- El texto debe ser legíble y funcional cuando duplica su tamaño.
La etiqueta meta viewport da instrucciones al navegador para controlar las dimensiones y su escalado:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
Diseño adaptable multidispositivo
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> initial-scale=1 establece una relación 1:1.
user-scalable=no es anti-patrón.
- Utilizar unidades relativas em o rem en lugar de pixels.
Diseño adaptable multidispositivo
- Asegurarnos de que los elementos interactivos se muestran lo suficientemente grandes.
Color y contraste
Existen alrededor de 320 millones de usuarios con deficiencia de visión en color.
Algunas combinaciones de colores que a algunas personas les resultan fáciles de leer les resultan difíciles o imposibles a otras.
¡No transmitas información solo con color!
Color y contraste
Color y contraste
Color y contraste
Mínimo de relación de contraste de 4.5:1 para el texto e imágenes y 3:1 para textos grandes.
WebAIM - 1.4.3 Contrast (Minimum)
Extensión Chrome - NoCoffee
Simulador de discapacidades visuales.
Modo alto contraste
Permite al usuario invertir los colores del primer plano y el segundo plano, lo cual a menudo ayuda a que el texto se destaque mejor.
Utilizamos la extensión Chrome High Contrast y verificamos que la web sea visible y usable.
Si respetamos las relaciones de contraste, no deberías tener ningún problema a la hora de soportar el modo de contraste alto.
Testing de accesibilidad
Existen herramientas que comprueban la accesibilidad de las webs:
axe - Deque systems
Deque systems es una empresa que desarrolla software de accesibilidad digital.
axe es una extensión de código abierto que prueba la accesibilidad de las webs.
Lista de reglas de accesibilidad
List of axe Rules
26 reglas críticas de 85.
axe pro - Deque University
Google Lighthouse
Herramienta automatizada de código abierto diseñada para mejorar la calidad de tus apps web.
Integración Cypress.io - axe
Comprueba la accesibilidad en los tests E2E.
Conclusiones
- Importancia del enfoque y su estilo.
- La semántica es crítica para la tecnología de asistencia.
- Todo el texto debe cumplir una relación de contraste de color mínima.
- Buena accesibilidad = Buena experiencia de usuario.
Eskerrik asko
