DÍA 10 / 2019

Quiero hacer mi web accesible, pero no sé por dónde empezar

¿Qué es la accesibilidad? ¿Qué es la semántica web? ¿Cómo puedo aplicar la accesibilidad en mis desarrollos? ¿Tengo alguna forma de comprobar si estoy haciéndolo bien? Todas estas incógnitas serán respondidas a continuación.


Antes de comenzar con el artículo, quería hacer una aclaración muy importante. La accesibilidad no es un funcionalidad extra que agregas a tu proyecto, es un derecho. Sí, todo el mundo debe ser capaz de entrar a tu página web y poder interactuar con ella.

Por tanto, crear una web accesible es crear una web para todo el mundo sin hacer distinciones de ningún tipo y como desarrolladores es nuestra responsabilidad aplicarlo en nuestro día a día. De hecho, es algo tan sencillo como seguir las directrices que nos marcan desde la W3C en esta página.

Como verás, apenas son 60 reglas a seguir, divididas por los principios de la accesibilidad y que además vienen con ejemplos muy prácticos por si con alguna de ellas te surge la duda de cómo implementarla.

Vamos a ir viendo de uno en uno cuáles son estos principios y qué formas tienes de seguirlos para aplicarlos en tus desarrollos.

PERCEPTIBLE

Este principio hace referencia a que el contenido de tu página sea accesible para todos los sentidos. Es decir, si hay un sentido en el que no puede ser accesible cierto contenido de tu página, proveer de alternativas para que sí que lo sea.

1.1.1 Texto alternativo  - (Nivel A)

Proveer un texto alternativo para todo el contenido de la página que no sea textual. Para seguir esta regla tienes que distinguir entre:

  • Imágenes que aportan significado al contenido deben llevar un atributo alt=”” con un texto descriptivo de lo que son.
  • Imágenes que son decorativas, que no aportan significado a tu página deben llevar el mismo atributo alt=”” pero en este caso vacío.
  • Todo el contenido audiovisual, tanto video como audio, debe incluir una transcripción con la información que contiene en texto.

1.3.1 Información y relaciones - (Nivel A)

La información, la estructura y las relaciones transmitidas a través de la presentación están disponibles en texto. Esto no es otra cosa que ser coherente con lo que se presenta visualmente en tu página. Donde la semántica entra en juego:

  • Los encabezados deben de ir por orden de importancia desde h1 hasta h6. Por tanto si solo tienes un gran titular y dos subtítulos, lo lógico es que el primero vaya con un <h1> y los siguientes con <h2>.
  • Utilización de los landmarks para definir distintas zonas de tu página: <header> para el encabezado, <footer> para el pie de página, <main> para el contenido principal… Encontrarás más información al respecto en esta sección.
  • Para la enumeración de elementos usar listas <ul>, <ol> en función de si son listas numeradas o no y sus correspondientes <li> por cada elemento de la lista.
  • Para enfatizar parte del texto utilizar las etiquetas correspondientes: <strong> texto en negrita, <em> texto en cursiva, <code> para representar código…

1.3.2 Secuencia significativa - (Nivel A)

Cuando la secuencia en la que se presenta el contenido afecta a su significado, es importante determinar adecuadamente el orden del DOM.

Aquí es muy importante tener cuidado con los estilos que modifican el orden de los bloques que forman parte del contenido. Un ejemplo muy sencillo para entender este punto es pensar en una receta: lo lógico es que los pasos vayan en orden, así que si modificas en algún punto la posición de alguno de ellos, tendrás que revisar el orden del DOM para que aparezcan correctamente, puesto que los screenreaders o asistentes virtuales van a leerlo en función del orden que sigan a nivel de estructura y no a nivel de CSS.

1.4.1 Uso del color - (Nivel A)

El color no se debe usar como el único método para transmitir significado o distinguir elementos visuales. Somos conscientes de que el color es importante para transmitir ciertos estados dentro de nuestras aplicaciones, pero si nos limitamos a usar el color para transmitir esta información estamos cayendo en otro gran error, y que además forma parte del nivel básico de accesibilidad que todas nuestras páginas deben seguir.

Por ello, deberemos apoyar esta información con texto informativo, texturas o iconos que nos aporten ese mismo significado de otra forma. Por ejemplo, cuando hay un error en un formulario igual que mostramos los campos con errores en rojo, mostrar un texto indicando qué es lo que ha producido ese error.

OPERABLE

Este principio hace referencia a que todo el contenido de tu página que puede ejecutar una acción sea operable de cualquier forma. Por ejemplo, formularios, controles y navegación deben ser accesibles y ejecutables.

2.1.1 Teclado - (Nivel A)

Toda la funcionalidad de la página está disponible mediante el teclado, a menos que la funcionalidad no pueda realizarse de ninguna manera conocida con un teclado.

La semántica vuelve a entrar en juego aquí. Hay una serie de elementos que sí es necesario que sean accesibles por teclado porque precisan de una acción por parte del usuario y que tienen una semántica adecuada para ello: <a> para enlaces, <button> para ejecutar acciones, <input> <select> <textarea> como diferentes tipos de campo dentro de un <form>.

Estos elementos van a recibir el foco del teclado, van a ser leídos por los screenreades como tal y permiten ejecutar acciones con las teclas: ENTER / SPACE.

2.4.1 Ir al contenido - (Nivel A)

Se ofrece al usuario la posibilidad de ir al contenido directamente, sin pasar por los puntos intermedios. ¿Y si te dijera que este punto es tan sencillo como te muestro a continuación?

<a class="main-link" href="#content">Ir al contenido</a>
<main id="content">Contenido</main>
<style>
    .main-link { opacity: 0 }
         .main-link:focus { opacity: 1 }
</style>

2.4.7 Foco Visible - (Nivel AA)

Visualmente podemos ver el elemento que tiene el foco. Nada de aplicar un outline: none a todos los elementos que tienen foco y no dar una alternativa. Esa alternativa, es lo que tienes que pensar. Una forma muy sencilla podría ser:

<style>
    :focus { border: 1px solid #000000; }
</style>

COMPRENSIBLE

Este principio hace referencia a que todo el contenido de tu página debe ser entendible.

3.1.1 Lenguaje de la página  - (Nivel A)

El idioma marcará al asistente de voz como pronunciar el contenido de nuestra página. Así que, si estás ante una página que puede cambiar dinámicamente su lenguaje es importante que marques en la etiqueta <html lang="en"> el lenguaje en el que está la página para que el screenreader hable en ese lenguaje.

3.3.1 Identificación de errores  - (Nivel A)

Si un error de entrada se detecta automáticamente, el elemento que tiene el error se identifica y se describe al usuario en texto. Resulta muy importante no sólo mostrar al usuario dónde está el error, si no también cuál es el error. Así que, la información que mostremos sobre el error debe ser lo más específica posible.

ROBUSTO

El contenido debe poder ser interpretado por una amplia variedad de tecnologías incluidos los asistentes virtuales tales como Alexa, Google Home, Screenreaders, etc.

4.1.1 Parseo correcto - (Nivel A)

Los elementos tienen etiquetas de inicio y cierre, no tienes atributos duplicados y con IDs únicos. Para ello, podrás validar tu estructura HTML desde este validador: https://validator.w3.org/ que te ayudará a prevenir este tipo de errores.

4.1.2 Nombre, rol, valor  - (Nivel A)

Todos los elementos de tu página con posibilidad de interacción deben ir identificados con un nombre y un rol en caso de que no les venga por defecto inherentes a nivel de semántica. Así mismo, si su valor cambia debe representarse este cambio en la estructura HTML.

UTILIDADES

Tras este repaso a aquellos puntos determinantes para tener una accesibilidad mínima en tus desarrollos, ha llegado el momento de analizar las herramientas que pueden ayudarte a comprobar si lo estás haciendo bien.

Lo primero a lo que debes acostumbrarte es a utilizar los screenreaders y tienes infinidad de opciones gratuitas para testear tus desarrollos:

  • VoiceOver: iOS / Mac
  • Talkback: Android
  • NVDA: Windows
  • ChromeVox: Extensión para Chrome

Utilizando cualquiera de ellos te ayudará a entender cómo la web es interpretada y verás las diferentes secciones en las que divide la información y cómo de importante es usar la semántica de la que dispones, de la que en este artículo te he dado un pequeño repaso pero hay mucha más información.

Por otro lado, tienes también infinidad de herramientas que te permitirán validar en vivo los errores que estás cometiendo a nivel accesibilidad en tus desarrollos:

  • AXE: es una librería que puedes configurar en tu proyecto para ejecutar tests de accesibilidad conforme vas desarrollando y además tiene una extensión para Chrome.
  • WAVE: es una herramienta que tiene un validador online y que también pone a tu disposición una extensión para Chrome.
  • Lighthouse: es una extensión para Chrome que además de permitirte lanzar auditorías de performance, te permite hacer auditorías de accesibilidad, entre otras cosas.

Espero sinceramente que con este artículo haya despejado tus dudas sobre qué es la accesibilidad, qué es la semántica web y cómo puedes aplicarlo en tu día a día. Así como, haber descubierto herramientas que te ayudarán a comprobar si estás haciendo tus desarrollos lo suficientemente accesibles.

Enlaces de interés: