Tips de Accesibilidad para Desarrolladores Web
¿Por qué un sitio web debe ser accesible?
Debe ser accesible porque debemos garantizar que un sitio web pueda ser usada por todo tipo de personas, independientemente de si tiene o no las capacidades personales o sensoriales, o los conocimientos técnicos adecuados.
Lo que se pretende creando sitios web accesibles es eliminar las barreras que puedan frenar a estos usuarios al interactuar con la web.
Para ello, debemos tener en cuenta muchos factores al momento de empezar a desarrollar y plantear de qué forma queremos desarrollar nuestro sitio web.
Debemos validar nuestro HTML.
Debemos tener un HTML válido que ayude a proporcionar una experiencia coherente y esperada en todos los navegadores y tecnologías de asistencia.
Puntos a tener en cuenta:
- Utilice identificadores únicos (id).
- Añada elementos según su especificación.
- Evite los atributos duplicados.
- Asegúrese de que el HTML tenga etiquetas de inicio y fin.
¿Cómo podemos verificar nuestro sitio ?
Podemos verificar nuestro sitio mediante el uso de validadores, como el W3C
Estas herramientas nos ayudan a encontrar etiquetas mal anidadas, ID duplicados u otras marcas con formato incorrecto.
El nivel aceptable de accesibilidad que deberíamos tener en nuestro sitio es AA.
Alineación del texto
Debemos alinear el texto a la izquierda para idiomas de izquierda a derecha (LTR) y a la derecha para idiomas de derecha a izquierda (RTL).
Debemos evitar el texto alineado centrado o justificado porque los espacios en blanco que quedan entre las palabras dificultan la percepción y la velocidad de la lectura e impiden conectar palabra con palabra o incluso a veces saber cuando termina un renglón y empieza otro.
Utilice el atributo lang en el elemento html.
Esto ayuda a la tecnologías asistivas, como los lectores de pantalla, a pronunciar el contenido correctamente.
Se pueden utilizar varios idiomas dentro de un mismo sitio web.
Lo podemos definir en la raíz en el html o en diferentes etiquetas
Listado de los códigos de idiomas disponibles que podés utilizar para tu sitio web.
Proporcionar un título único para cada página o vista.
Es muy importante que cada página tenga su etiqueta <title>es lo primero que se reproduce con el uso de tecnologías asistivas. Esto ayuda a indicar a las personas qué pagina o vista van a comenzar a navegar.
Títulos dentro del contenido de una página
El elemento <h1> debe ser único por página. Debe usarse para comunicar el propósito de alto nivel de la página o vista que tengamos.
Establecer un orden
Por ejemplo, no debemos saltar de un h2 a h4, omitiendo un elemento h3. Si se omiten los niveles de encabezado para un tratamiento visual específico, debemos utilizar clases CSS en su lugar.
Los títulos pueden conservar su jerarquía en columnas sin verse afectada, no así cuando salteamos el orden.
No desactivar el zoom en mobile
Como desarrolladora, más de una vez nos han pedido desactivar el zoom en mobile, es un grave error ya que no permitimos que los usuarios puedan incrementar el tamaño del contenido del sitio web.
Debemos indicar en el content=”initial-scale=1"
Este es un ejemplo de un sitio que no cumple con esta regla.
Podemos observar que contiene un maximum-scale=1 y no es posible utilizar el zoom.
Lo podemos verificar utilizando las teclas ctrl y + sobre el mismo.
Nota: Al utilizar el zoom debemos tener en cuenta los márgenes y paddings que tenemos definidos en relación al contenedor. A medida que lo aumentamos deberíamos poder reacomodar todo nuestro contenido.
Tenemos que tener en cuenta que el incremento de la pantalla sea en un 200% sin perder la funcionalidad.
El tamaño de la fuentes siempre deben ser relativas porque nos permiten hacer zoom al sitio web.
rem
Una unidad rem en un navegador es relativa al tamaño de fuente de nuestro root o base del documento.
Por defecto, el font-size tiene un tamaño de 16px;
Si queremos que nuestro sitio tenga una base de 10px
Tenemos que dividir 10/16 = 0.625
Definimos en nuestro root el tamaño que va a utilizar, en este caso 62.5%, con una base de 10px
html {
font-size: 62.5%;
}Si queremos utilizar otros tamaños, para asegurarnos los px que vamos a tener de base los multiplicamos por el tamaño que deseamos, y luego los convertimos a rem:
- .625 * 16 = 10 -> 1rem
- .625 * 18 = 12.5 -> 1.125rem
- .625 * 24 = 15 -> 1.5rem
h1 {
font-size: 1.5rem; //.625*24 = 15 -> 1.5
}h5 {
font-size: 1.125rem; //.625*18 = 12.5 -> 1.125
}.container {
margin: 2rem; //16*2
}
En este caso, todos los tamaños definidos, van a depender del contenedor, si en algún momento modificamos el valor de nuestro contenedor, todo lo que tengamos definido por rem, se va a ver afectado.
em
A diferencia del rem, el em depende del último font-size definido dentro del árbol del elementos en el que se encuentra.
Por ejemplo:
En este caso tenemos definido el font-size del root al 100%.
Tenemos un contenedor con 2 clases definidas y con diferentes tamaños de fuentes.
1 )En este caso el título va a tener un tamaño de 20px.
Toma el valor definido en el html por el de la clase container.
16*1.25= 20px
2) El Texto dentro del contenedor, va a tener un tamaño de 18px.
En este caso se toma el último em (valor) definido dentro del contenedor(20) y se multiplica por el valor que le asignamos a la clase (en este caso .small-font) con el valor de 0.9.
Luego se multiplica 20 * 0.9 = 18px.
3) El texto se encuentra fuera del contenedor, va a tener un tamaño de 14.4px. Como no se encuentra dentro del container se toma como referencia el valor del html y el valor de la clase (en este caso .small-font) que es de 0.9.
16* 0.9 = 14.4px
px
Se recomienda utilizarlo solo para bordes, box-shadow, letter-spacing. También si queremos que nuestro padding y márgenes tengan un espaciado fijo y se mantengan en el tiempo. Se puede utilizar de ambas maneras, relativo y absoluto, queda a criterio de uno.
Evitemos abrir un enlace interno en una pestaña nueva
Si utilizamos el atributo target en su valor “_blank” para un enlace interno, estamos evitando que el usuario pueda usar el historial del navegador usando el botón “atrás”, que es la forma habitual que los usuarios con tecnología asistiva regresan a la pantalla previa.
En lo posible evitemos su uso sino demos aviso mediante texto oculto de que el contenido se abrirá en una nueva pantalla
Imágenes
Las imágenes son una parte muy común de la mayoría de los sitios web.
El error más común que cometemos los desarrolladores es no incluir texto alternativo en las imágenes.
Debemos colocar un texto descriptivo, en todas las imágenes y que hagan referencia a la misma.
Imágenes con texto embebido
Debemos evitar este tipo de imágenes, en el caso de utilizarlo, debemos colocar la descripción del contenido.
Este es un ejemplo que utiliza imágenes con texto embebido sin texto alternativo. Un usuario que utiliza tecnologías asistivas nunca se va a enterar que dice la imagen.
Imágenes decorativas
Son las imágenes que poseen un icono o imagen que acompaña (o no) una palabra y no es necesario que un lector de pantalla las interprete. Para ocultar un icono o imagen vamos a utilizar el atributo aria-hidden=”true” .
<span class="fa fa-check" aria-hidden="true"></span>Este atributo permite que no sea reconocido e interpretada por tecnologías asistivas para personas con discapacidad visual.
Controles
Son elementos interactivos, como enlaces y botones, que permiten a una persona navegar a un destino o realizar una acción.
Utilizar la etiqueta <a> y el atributo href=”” para los enlaces.
Los enlaces siempre deben tener un atributo href, incluso cuando se utilizan en aplicaciones de página única (SPA). Sin un atributo href, el enlace no estará adecuadamente expuesto a la tecnología de asistencia. Un ejemplo de esto sería un enlace que usa un evento onclick, en lugar de un atributo href.
Aria- labelledby
Podemos utilizar el atributo “aria- labelledby” que es similar a “aria-label”, pero en vez de incluir directamente el texto descriptivo del enlace, indicamos el id del elemento de la página que funcionan como descripción del enlace.
En este caso tenemos definido el id=”report-title”.
Para cada uno de los links definimos el texto que queremos reproducir utilizando el atributo aria-labelledby=”report-title pdf” con el nombre del id mas lo que queremos agregar.
En este caso se va a reproducir
Link Download 2020 Sales Report pdf, lo mismo para doc y ppt.
En este caso estamos evitando colocar un texto que es común para cada link 3 veces. Si queremos modificarlo, solo cambiamos el contenido del id.
Identifique los enlaces que se abren en una nueva pestaña o ventana.
El objetivo es proporcionar una advertencia antes de abrir automáticamente una nueva ventana o pestaña. Abrir nuevas ventanas automáticamente cuando se activa un enlace puede desorientar a las personas que tienen dificultades para percibir el contenido visual y a algunas personas con discapacidades cognitivas, si no se les advierte con antelación.
Proporcionar una advertencia permite al usuario decidir si quiere salir de la ventana actual, y la advertencia le ayudará a encontrar el camino de regreso, si decide que le gustaría ir a la nueva ventana.
Les ayudará a entender que el botón “atrás” no funcionará y que tienen que volver a la última ventana que tenían abierta para encontrar su ubicación anterior.
Debemos evitar sobrescribir o eliminar el estado focus con none
El estado :focus ayuda a las personas a determinar qué elemento interactivo tiene el enfoque del teclado.
Es importante que su interfaz y contenido se puedan operar y navegar mediante el uso de un teclado. Algunas personas no pueden usar un mouse o pueden estar usando otras tecnologías de asistencia que pueden no permitir el desplazamiento o hacer click con precisión.
Utilizando repetidamente la tecla Tab vas a ver que el navegador selecciona secuencialmente los enlaces de la página y nos indica el elemento que está seleccionado en cada momento.
El objetivo es indicar de forma clara el elemento (botón, enlace, otros controles de formulario) que está seleccionado en cada momento. Es fundamental tener este estado para las personas que poseen baja visión.
Proporcione un enlace de “salto” o “skip” y asegúrese de que esté visible cuando esté enfocado.
Se puede utilizar un enlace de salto para proporcionar acceso rápido al contenido principal de una página. Esto permite a una persona omitir fácilmente el contenido repetido globalmente como por ejemplo el menú de navegación del sitio u otras secciones, como un slider.
Se detecta utilizando la tecla tab y es fundamental realizarlo para personas que utilizan tecnología asistiva, además de generar una mejor experiencia al usuario y un ahorro de tiempo.
Otro ejemplo en donde se puede aplicar es en sitios e-commerce.
En este ejemplo tenemos un componente slider que contiene 20 artículos, por lo tanto estamos obligando al usuario a recorrer todo el sitio para poder desplazarse luego a la siguiente sección.
Para mejorar la experiencia, se podría aplicar lo que se está utilizando en los ejemplos anteriores, un botón de saltar sección o colocar una menor de artículos navegables.
Verifique que el orden de enfoque del teclado coincida con el diseño visual.
Tenemos como ejemplo a Google, la secuencia que posee de enfoque es similar a lo que se muestra visualmente.
Debemos evitar el uso del atributo tabindex para crear un orden de tabulación que no preserve el significado y la operatividad de la página.
Podemos utilizar el valor tabindex="-1" para eliminar el elemento del flujo de navegación lógica. También es útil cuando se necesita mover el foco a algo que se ha actualizado a través de un script o fuera de la acción del usuario.
tabindex="0" permite que los elementos reciban el foco del teclado, no cambia el orden de las pestañas, coloca el elemento en el flujo de navegación lógica.
tabindex="2" si utilizamos un número mayor a 1, estamos modificando el orden del elemento en el flujo normal de navegación.
Esto debe evitarse
Debemos recordar que un sitio se visualiza de izquierda a derecha y de arriba hacia abajo
Eliminar el atributo title en los tooltips
El atributo title tiene numerosos problemas que afecta la navegación a:
- Personas que utilizan dispositivos táctiles.
- Personas que navegan con tecnología de asistencia, como lectores de pantalla o lupas.
- Debemos evitar el uso de tooltips para mostrar información importante.
Como hacer tooltips accesibles
Colores y Contrastes
Debemos chequear el contraste de nuestro sitio web. Es importante que todos podamos percibir la información de la misma forma.
Ratio mínimo
Hay tres posibles valores: 3, 4.5 y 7.
- Nivel de accesibilidad deseado: AA o AAA. Dependen del tamaño del texto y si el texto está en negrita.
En este ejemplo falla, tiene un ratio de 1.07.
Debemos evitar el uso del color amarillo con fondo blanco, es muy difícil de percibir.
Nivel AA
Existen 4 combinaciones utilizando tamaño y negrita:
- Texto sin negrita + tamaño de texto <
24px: ratio = 4.5 - Texto sin negrita + tamaño de texto >
24px: ratio = 3 - Texto con negrita + tamaño de texto <
19px: ratio = 4.5 - Texto con negrita + tamaño de texto >
19px: ratio = 3
En este ejemplo el ratio supera los niveles AAA, posee 11.2.
Nivel AAA
Para el nivel AAA la lógica es la misma, pero el ratio se incrementa. Por ejemplo:
- Si tenemos un ratio 4.5 se convierte en 7
- Si tenemos un ratio 3 se convierte en 4.5
También debemos tener en cuenta si una persona tiene Daltonismo y otras patología que también nos permiten saber si la paleta que estamos utilizando es accesible.
Extensiones de Chrome para verificar los diferentes niveles de daltonismo, deuteranopia, protanopia y tritanopia.
Este es un ejemplo de como se puede visualizar el color verde con la patología más común de daltonismo. Deuteranopia, que no logra visualizar correctamente colores verdes.
Por esto, debemos evitar utilizar solamente el color como medio para indicar algún tipo de información.
Fuentes
Debemos utilizar fuentes accesibles, y debemos evitar las que no podemos diferenciar entre:
- La letra a “L” de ‘1’ y de la “i”.
- la letra “0” y “o“
Este es mi primer post, cualquier sugerencia es más que bienvenida. Seguramente sufra modificaciones.
Agradecimiento especial a Daniela Belvedere que me ayudó muchísimo con el copy, con sugerencias y modificaciones. También a Pipi Marquez, gran mentora que tuve en Acámica y gracias a ella pude darme cuenta de lo importante que es la accesibilidad en los productos digitales que generamos.
Muchas Gracias por leerlo!
Estefania
