4 consejos para crear un sitio web más accesible

18/02/2021

Internet fue diseñada para ser accedida por todas las personas. Si tienes un sitio o estás pensando en crear uno, es tu responsabilidad asegurarte que sea diseñado y desarrollado para no crear barreras o excluir a gente que quiere acceder a el. Para eso es importante seguir estándares y buenas prácticas que permitan crear sitios accesibles.

Estándares de accesibilidad

Las pautas de accesibilidad para el contenido web, en inglés: Web Content Accessibility Guidelines (WCAG) , son un conjunto de estándares para hacer que el contenido en la web sea más accesible para personas con distintas discapacidades.

Si bien recomendamos leer tanto los textos normativos como informativos que WCAG tiene disponible, pueden resultar difícil de digerir y comprender si no tienes algún conocimiento en el área. Es mucha información y es fácil desanimarse o no saber por dónde comenzar. Tenemos un artículo explicando en mayor profundidad qué son las pautas de accesibilidad, pero si estás buscando algo más sencillo para comenzar, a continuación ofrecemos 4 sugerencias.

Esta no es una guía definitiva, no existen soluciones rápidas para solucionar problemas de accesibilidad. Sin embargo, estos consejos te pueden ayudar a dar un primer paso hacia un sitio más inclusivo.

Cuidado con el copy-paste

Los frameworks de css como Bootstrap son muy populares por su fácil uso. Sus componentes están listos para ser usados y ya han sido probados en una gran variedad de navegadores. Esta no es una crítica al estado de accesibilidad del framework, y la intención tampoco es criticar su uso, sino más bien su mal uso. Hemos visto incontables situaciones en que un desarrollador copió el código de un saliendo del sitio: componente de navegación de Bootstrap y lo usó tal cual como es presentado en el ejemplo del sitio.

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> </ul> </div> </div> </nav>

Veamos 2 ejemplos de este código que pueden causar problemas de accesibilidad.

Nombre accesible en inglés

Captura de pantalla de componente de navegación de Bootstrap

El componente tiene un botón con un ícono de tres líneas que abre y cierra la navegación al ser activado. Como el botón no tiene un nombre visible, el atributo aria-label es utilizado para darle un nombre accesible y por tanto una persona usando un lector de pantalla podrá entender cuál es su propósito. En nuestra opinión debe además existir una etiqueta visual, y el ícono no debiese ser definido usando una imagen de fondo ya que no será visible al activar el modo de alto contraste de Windows, pero el objetivo en este momento no es criticar los patrones de diseño o código utilizado en Bootstrap. Volviendo al problema, este es el código (hemos quitado algunos atributos):

<button class="navbar-toggler" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

aria-label="Toggle navigation" comunica el propósito del botón, que es abrir y cerrar la navegación, pero está en inglés. Si lo copias y lo usas en un sitio donde el lenguaje primario es español, una persona usando un lector de pantalla que no sabe inglés no sabrá qué significa. Si el idioma primario es español, el valor del atributo debe estar en el mismo idioma.

Atributos ID duplicados

El hecho de tener atributos id duplicados no necesariamente resulta en un problema de accesibilidad. No es HTML válido, pero eso no significa que siempre vaya a crear algún tipo de barrera para acceder al contenido. Sin embargo, un caso en el cual sí crea un conflicto es al asociar un elemento con otro a través del atributo aria-labelledby. El atributo es utilizado para darle un nombre a un elemento, y se usa de la siguiente forma:

// El control está siendo nombrado por el botón <input type="search" aria-labelledby="foo" /> <button id="foo">Buscar</button>

Es importante que el valor de aria-labelledby sea igual al valor del atributo id, y que sea único en la página, de lo contrario el elemento podría quedar incorrectamente asociado.

Si copias código de algún lado, por ejemplo de Bootstrap, y ves un atributo aria-labelledby, recuerda que no puede tener valores duplicados en la página. Veamos el siguiente código:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul>

Ignoremos por un momento que si bien el enlace tiene un rol de botón ( role="button" ), simplemente debería ser un botón y no un enlace pretendiendo ser un botón, o que no es posible activarlo con la tecla Espacio como lo es un botón nativo. Pasemos por alto que el atributo aria-labelledby es innecesario dado que es un saliendo del sitio: patrón de divulgación donde sólo es necesario aria-expanded y opcionalmente aria-controls. Intentemos no prestar atención a aquello, porque nuestro objetivo realmente no es criticar a Bootstrap.

Sin embargo, si estás decidido en confiar en Bootstrap y copiar su código, asegúrate de que el valor de los id son únicos y no hagas lo siguiente:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown 1 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown 2 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul>

El valor navbarDropdown de los atributos está repetido y como consecuencia una persona usando un lector de pantalla se confundirá al escuchar el mismo nombre sin importar qué submenú abra. Lamentablemente estos problemas son más comunes de lo que uno desearía. Un ejemplo es el sitio de la saliendo del sitio: Municipalidad de Providencia .

Usa HTML semántico

Una de las cosas más simples que puedes hacer para crear un sitio accesible es utilizar un elemento por su propósito, y no su presentación visual.

Interactuar con el elemento lleva al usuario a otra página del sitio? usa un enlace (<a>). Activarlo gatilla una acción, por ejemplo abrir un menú? usa un botón (<button>). Estás describiendo una sección de la página? usa un encabezado (<h1>-<h6>).

Por qué es importante?

Porque permite a tecnologías de asistencia identificar correctamente a un elemento. Un botón nativo tiene un rol implícito de botón. Esto queda expuesto al API de accesibilidad del navegador y es lo que permite por ejemplo a un lector de pantalla identificarlo como tal.

Un div con la presentación visual de un botón podría tener un borde o un color de fondo que permite a una persona vidente inferir que es un botón. Una persona ciega no puede hacer esa asociación, porque un div no tiene un significado semántico, y por ende un lector de pantalla no lo puede identificar como tal.

Siguiendo con el ejemplo del div con la presentación de un botón, este no puede ser activado usando un teclado, y tampoco recibe foco. Existen formas de lograrlo, pero usando un <button> te ahorras trabajo y garantiza ser accesible.

Encabezados

Usa los encabezados para describir secciones de la página, y ten cuidado con no saltar niveles. Seguir una jerarquía lógica permite a los usuarios entender mejor cómo está organizada la página, además de ayudar a personas ciegas a comprender mejor la importancia relativa de las distintas secciones.

  • Usa solo un encabezado de nivel 1 (<h1>), un <h2> para cada nueva sección y si existen sub secciones las debes anidar secuencialmente.
  • Utiliza un elemento semántico de encabezado <h1>-<h6> para que un lector de pantalla lo reconozca y anuncie como tal.
  • Escribe encabezados que sean descriptivos para que los usuarios puedan encontrar la información que buscan más fácilmente.

Tablas

Las tablas son para representar información tabulada. Atrás quedaron los años en que se usaban para crear layouts. Es además importante que esté implementada usando un etiquetado correcto para que una persona usando un lector de pantalla pueda navegar las filas y columnas, y entienda la relación entre ellas.

  • Usa <caption> para darle un nombre a una tabla
  • Usa <th> para designar los encabezados
  • Usa <tr> para definir una fila

Ejemplo de una tabla sencilla

<table> <caption>Series de televisión</caption> <thead> <tr> <th>Nombre</th> <th>Temporadas</th> </tr> </thead> <tbody> <tr> <td>Community</td> <td>6</td> </tr> <tr> <td>Parks and Recreation</td> <td>7</td> </tr> </tbody> </table>

Puntos de referencia

Los puntos de referencia, o en inglés: landmarks ayudan a dar estructura a la página y sirven como áreas reconocibles dentro de ella. Su uso correcto es especialmente útil para personas que usan un lector de pantalla, dado que les permite utilizarlos como atajos para acceder de manera más fácil a distintas partes de la página.

Los puntos de referencia más útiles para ser usados como atajos son:

  • <header>
  • <nav>
  • <aside>
  • <main>
  • <footer>

Es considerado una buena práctica que todo el contenido de una página esté envuelto dentro de un punto de referencia. Este es un ejemplo de un layout sencillo utilizándolos:

<header> // logo ... <nav> // navegación ... </nav> </header> <main> // contenido principal </main> <footer> // Pié de página </footer>

Múltiples instancias de un mismo punto de referencia

Es considerado una buena práctica utilizar un solo punto de referencia <header>, <main> y <footer> dentro de una página. Si usas más de un <nav> o <aside> debes darle un nombre accesible que los distinga:

<nav aria-label="primaria"> ... </nav> <nav aria-label="secundaria"> ... </nav>

No suprimas el foco

Acabas de comprar una plantilla en Themeforest. Tiene 85 páginas distintas con múltiples opciones, 10 carruseles de imágenes brillantes con animaciones y movimientos para poner contenido que ninguno de tus usuarios se molestará en ver. Su creador pensó que el foco de los elementos no era atractivo, y decidió hacer lo siguiente en el código css:

*:focus { outline: 0; }

Lo que este código hace es suprimir el foco en todo el sitio. Es importante que todos los elementos interactivos y enfocables tengan un foco visible, de lo contrario personas que necesitan el teclado para navegar la página no tendrán una indicación de qué elemento se encuentra enfocado.

Es recomendable crear estilos de focos personalizados, para que sean claramente visibles de manera consistente y tengan un buen contraste. Para lograr eso, se puede quitar el foco por defecto del navegador con la propiedad outline, pero siempre y cuando se reemplaze por otro utilizando otra propiedad. Por ejemplo:

*:focus { outline: 0; border: solid 2px #000; }

Hemos quitado el foco que viene por defecto en el navegador, pero lo reemplazamos por un borde.

Nota: si utilizas outline: 0 y usas sombras, colores o colores de fondo para reemplazarlo, podría crear un foco invisible en modo de alto contraste de Windows. Puedes revisar nuestra introducción a Windows con alto contraste para más información al respecto.

Enlaces y botones deben tener un nombre accesible

Lo vemos una y otra vez en distintos sitios. Enlaces de redes sociales con un ícono o botones con un ícono pero sin un nombre accesible. El nombre accesible es la información usada por tecnologías de asistencia para identificar un elemento, y es importante para que personas que dependen de ella puedan identificar su propósito. Veamos el siguiente ejemplo de el saliendo del sitio: sitio de Fonasa para ilustrar mejor el problema:

Captura de pantalla de 3 íconos de opciones de accesibilidad del sitio de Fonasa

Cada enlace tiene un ícono, en este caso es una imagen, que representa su propósito: cambiar el contraste de la página, reducir y aumentar el tamaño de la tipografía. Es discutible si el ícono es suficiente para comprender su función. En nuestra opinión sería mejor si estuviesen acompañados de texto visible para quitar toda ambigüedad, y para que alguien usando software de reconocimiento de voz pueda activarlos más fácilmente, pero podemos asumir que algunas personas podrán inferir su significado. El mayor problema es para alguien usando un lector de pantalla, ya que al no tener un nombre accesible, es solo un enlace vacío sin ningún otro tipo de información.

En la siguiente imágen podemos ver el árbol de accesibilidad usando la herramienta de desarrolladores de Chrome y confirmar que no existe un nombre accesible.

Captura de pantalla uno de los enlaces vacíos seleccionado y mostrando un nombre accesible vacío

Cómo agregar un nombre accesible?

Vamos a ignorar los múltiples problemas de accesibilidad del componente. Desde el uso de un enlace en vez de un botón, la falta de una propiedad que indique el estado, el constraste de color insuficiente, etc.

En este caso en particular, una solución sería agregar un atributo aria-label al enlace con un valor que indique su propósito:

<a aria-label="aumentar tamaño de tipografía" href="#"> <img src="/assets/fonasa2020/img/ico-Aazul.svg" alt=""> </a>

Otra alternativa es usar texto visualmente escondido con css:

.visualmente-escondido { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } <a href="#"> <span class="visualmente-escondido">aumentar tamaño de tipografía</span> <img src="/assets/fonasa2020/img/ico-Aazul.svg" alt=""> </a>

Y una tercera opción es describir el propósito en el atributo alt de la imagen:

<a href="#"> <img src="/assets/fonasa2020/img/ico-Aazul.svg" alt="aumentar tamaño de tipografía"> </a>

Si revisamos el árbol de accesibilidad nuevamente en el navegador usando la herramienta de desarrolladores, podemos ver que ahora tiene un nombre accesible.

Captura de pantalla uno de los enlaces seleccionado y con un nombre accesible asignado correctamente