Accesibilidad

Acerca de la accesibilidad

¿Qué es la accesibilidad?

Decimos que una página es accesible cuando puede ser utilizada por cualquier usuario, independientemente de su condición, discapacidad, limitación de hardware o software, etc.

Para conseguir esta accesibilidad, esta página ha de ofrecer alternativas a las formas comunes de navegar que tienen los usuarios (por ejemplo, una alternativa al uso del ratón). Esta página deberá ser diseñada evitando utilizar propiedades que puedan suponer una dificultad para algunos usuarios (por ejemplo, el uso de colores con poco contraste entre ellos), o que excluyan a personas con ciertos problemas (por ejemplo, un vídeo sin transcripción no podrá ser utilizado por una persona con problemas auditivos o que, simplemente, no pueda utilizar altavoces / auriculares).

La accesibilidad afecta también al uso de diferentes dispositivos. Una página web diseñada exclusivamente para escritorio podría no ser fácil de usar en un smartphone.

Por ejemplo, este formulario puede ser utilizable para el usuario "común", pero tiene varios problemas e inconvenientes para muchos otros usuarios:

• El texto utiliza colores con poco contraste entre ellos, por lo que usuarios con mala visión podrían tener dificultades al leerlo.
• La distancia entre las etiquetas y los valores es muy amplia, por lo que cuesta saber cuál se refiere a cuál.
• La etiqueta "Remember details?" no está asociada al checkbox al que se refiere, así que no se puede pulsar en ella para cambiar su valor.

En contraste, este formulario contiene la misma información, pero presentada de una forma que no causa problemas ni inconvenientes a ningún usuario.

Pautas generales

A las pautas generales para que una página sea accesible se les llama "POUR", por sus siglas en inglés (Perceivable, Operable, Understandable and Robust):

• Perceptible (perceivable): Cualquier usuario debe ser capaz de percibir el contenido. El contenido debería poderse ver fácilmente por cualquiera que pueda ver, aunque su visión sea mala. El contenido debería poderse además oír por personas que no pueden ver.
• Operable (operable): Cualquier usuario debe ser capaz de ver todo el contenido y navegar por el mismo. Una etiqueta que solo se ve al pasar el ratón por encima, por ejemplo, no es accesible, ya que una persona utilizando un smartphone no podría verla.
• Entendible (understandable): Cualquier usuario debe poder entender la página. La interfaz debe ser intuitiva, y el contenido debe evitar utilizar lenguaje extraño o arcaico.
• Robusto (robust): Cualquier navegador común debe ser capaz de mostrar el contenido correctamente, y los programas especializados para discapacitados deben ser capaz de entender la página.

Diversidad de usuarios

Internet es utilizado por multitud de usuarios, con distintas capacidades y equipo técnico.

Por ejemplo, algunos usuarios tienen discapacidades visuales. Estos se dividen en varias categorías: desde personas invidentes, hasta personas que puede ver, aunque con dificultad. Las personas invidentes necesitan un lector de pantalla o un dispositivo braille para acceder al contenido, mientras que personas con la vista deteriorada puede que sean capaces de navegar sin problemas si la página ofrece el contenido de forma clara y con un buen contraste de colores. Una persona daltónica puede navegar una página sin problemas, pero le será difícil entender un gráfico o una tabla donde la información se transmite a través del uso de colores.

Incluso para personas sin discapacidades físicas, visualizar una página puede suponer un reto en algunos casos. Por ejemplo, acceder a internet desde un portátil en el exterior, en un día soleado, se convierte en una tarea difícil si la página no utiliza un buen estilo que contraste el fondo con el contenido.

Otras personas tienen discapacidades motoras. Estas personas pueden tener dificultades a la hora de utilizar las manos y los brazos para utilizar el ratón, o incluso estar paralizados. Para estas personas, hacer click sobre un diminuto cuadro para marcar una opción requiere un gran esfuerzo, o es directamente imposible. En su lugar, necesitan poder navegar la página con teclado, utilizando teclas como TAB o ENTER para navegar hasta dicho cuadro y marcarlo. En el caso de personas con parálisis, la navegación no es posible ni siquiera con teclado, por lo que dependen de dispositivos de rastreo ocular (eye tracking) para navegar por la página simplemente moviendo los ojos. Si una página no está adecuada correctamente, el software de estos dispositivos no podrá entenderla y será muy difícil navegar por ella.

Al igual que en el caso anterior, estos problemas pueden afectar a personas sin discapacidades. Por ejemplo, un usuario que se ha partido un brazo puede necesitar utilizar, temporalmente, el teclado para navegar por la página.

Algunas personas tienen problemas auditivos. Desde personas sordas, hasta personas con mal oído. Este problema es común además en personas mayores, por lo que una cantidad importante de los usuarios de una página necesitarán asistencia con este tipo de problemas.

Una solución sencilla es ofrecer alternativas visuales (texto) al contenido que debe ser oído. Así, subtitulos para un vídeo o una transcripción de una conversación pueden ayudar a estar personas. Estas alternativas tienen el beneficio añadido de ayudar a personas que no hablan muy bien el idioma utilizado en el contenido.

Una página debe, además, evitar utilizar sonidos como único medio para transmitir información. Por ejemplo, un botón que hace un sonido para comunicar que se ha activado no es accesible, ya que cualquier persona que no pueda oírlo no tiene forma de saber que ha sido activado.

Como siempre, estos problemas pueden afectar a personas sin discapacidad. Una persona en un ambiente ruidoso, o en un ambiente donde no debe hacer ruido, también tendrá problemas para acceder a contenido auditivo que no ofrece alternativas visuales.

Foco

¿Qué es el foco?

El foco determina qué elemento está "activo" para su uso en cada momento. Los eventos de teclado (como escribir) se aplicarán al elemento que esté activo (por ejemplo, se escribirá en el cuadro de texto que tenga el foco.

Para las personas que utilizan el teclado para navegar e interactuar con la página, el foco es esencial, ya que es necesario para que puedan realizar estas tareas corerctamente. Una página debería poder ser utilizada al completo tan solo con el teclado, exceptuando únicamente las interacciones que, por su naturaleza, requieran otros dispositivos (por ejemplo, un panel de dibujo).

Para cambiar el foco de la página, normalmente se utilizan las teclas TAB y SHIFT+TAB

¿A qué se puede enfocar?

Por norma general, a cualquier elemento HTML interactivo. Esto incluye campos ded texto, botones, listas, enlaces, etc. A otros elementos, como los párrafos o los títulos no se les puede enfocar.

Orden del DOM

Los elementos nativos adquieren su "tab order" (orden en el que se enfocan) directamente de su posición en el DOM. El problema es que, mediante CSS, los elementos se pueden posicionar en un orden diferente al que aparecen en el DOM, dando lugar, a veces, a una navegación por teclado poco intuitiva. También es un problema aquel contenido que están oculto de forma artificial (por ejemplo, situándolos fuera de la pantalla) por diversos motivos (por ejemplo, un menú que solo se muestra al abrirlo desde un botón), ya que estos elementos también serán candidatos a recibir el foco al navegar. Las etiquetas css display: none; y visibility: hidden ayudan con este problema, ya que semánticamente indican que el elemento está oculto.

Tabindex

tabindex es una etiqueta HTML que nos permite definir el índice de navegación de un elemento, sobreescribiendo el que por defecto le correspondería por el DOM. A tabindex hay que asignarle un valor numérico positivo. Si se le asigna "-1", el elemento será excluído del orden de navegación, aunque podrá adquirir el foco por otros medios (por ejemplo, programáticamente).

Trampas de teclado

Llamamos "trampa de teclado" a cualquier situación en la que, una vez accedes a un elemento mediante el teclado, ya no puedes continuar navegando la página completamente. Por ejemplo, un campo de texto obligatorio que retiene el foco cada vez que el usuario intenta enfocar otro elemento, hasta que el campo sea rellenado.

Este comportamiento suele ser malo, aunque a veces es deseable. Por ejemplo, cuando se muestra una notifiación encima de la pantalla que el usuario tiene que cerrar, no queremos que pueda recorrer los elementos "ocultos" detrás de esta notificación. Programáticamente podemos almacenar el elemento que tenía el foco antes de abrir la notificación, y devolverle el foco una vez se cierre.

Semántica

Tecnología de asistencia

Llamamos "tecnología de asistencia" a todos aquellos dispositivos, sean hardware o software, que ayudan a una persona con discapacidad a completar una tarea. Estos elementos engloban, desde una simple lupa o "gafas de cerca", hasta brazos robóticos o lectores de pantalla. Para que estos dispositivos funcionen correctamente, es preciso que la página en cuestión tenga elementos semánticos apropiados que ayuden a la exposición de los mismos.

Un ejemplo muy común de tecnología de asistencia son los lectores de pantalla. Su función principal es leer el texto resaltado por el usuario. Los lectores de pantalla leen, además, la función, el nombre, el valor o el estado de los elementos activos. Por ejemplo, antes de leer el cuerpo principal de una noticia, puede que indiquen que lo que se va a leer es el cuerpo (main) de la página Estos programas necesitan una página bien estructurada y la ayuda de atributos semánticos (como los atributos aria) para identificar correctamente el contenido de una página y su estructura.

El árbol de accesibilidad

El concepto de "árbol de accesibilidad" no difiere mucho del DOM que las páginas ya utilizan para declarar su contenido. La diferencia es que, en lugar de ser dibujado visualmente por un navegador, este árbol es utilizado por la tecnología de asistencia para ofrecer su servicio. El proceso mediante el que este árbol es utilizado es el siguiente:

1. Una aplicación expone una versión semántica de su UI a través de una API.
2. La aplicación de asistencia utiliza la API para crear una interfaz alternativa para el usuario (por ejemplo, una interfaz de voz).
3. La aplicación de asistencia entrelaza la interacción del usuario con la misma con la aplicación que muestra la página mediante su API.

En el caso de la web, la aplicacińo que expone la página es el navegador. El navegador "traduce" el contenido recibido en un árbol de accesibilidad, y lo expone, junto a sus interacciones, mediante una API. Este es el único trabajo que realiza el navegador, el resto debe ser implementado por el programador de la página.

Semántica en HTML

El motivo por el que un navegador puede generar un árbol de accesibilidad, en vez de necesitar uno previamente definido, es porque las etiquetas HTML tienen significado semántico. Etiquetas como <main> o <footer> no añaden funcionalidad sobre un simple <div>. Sin embargo, definen roles diferentes para los elementos que contienen, y un navegador podrá utilizar esta información para distinguir la función del elemento que contiene un artículo de aquél que contiene una barra de navegación o la información legal de una paǵina.

Este comportamiento, sin embargo, puede causar que el navegador no identifique de manera adecuada los elementos cuando utilizan etiquetas extrañas. Un botón implementado con <div> en lugar de <button> será interpretado como un bloque más en lugar de como un botón interactivo. En este caso, usar la etiqueta adecuada (<button>) será suficiente para hacer nuestro botón accesible.

Aunque el uso correcto de etiquetas HTML generan páginas bastante accesibles, algunos elementos requieren información adicional. Por ejemplo, para los elementos interactivos de un formulario, simplemente poner una descripción al lado no es suficiente para que el navegador identifique que esta descripción está referenciando al elemento. En su lugar, necesitarán estar relacionados con elementos <label> que los describan. Esto permite, por ejemplo, que un lector de pantalla lea la etiqueta de un cuadro de texto aunque el foco esté sobre el cuadro y no sobre la etiqueta.

Las imágenes son otros elementos difíciles de "traducir" a audio. El navegador, o un lector de pantalla, no puede identificar el contenido de una imagen. Para comunicar su contenido correctamente, necesitan que la página proporcione una descripción de dicho contenido, mediante el atributo <alt>. El contenido de estos atributos debe ser descriptivo, y no limitarse a una indicación general.

Por ejemplo, la casa que se muestra en la imagen podría describirse simplemente como "casa" o "casa moderna", pero esta descripción no ayuda en absoluto a un usuario invidente a entender qué se está mostrando. En su lugar, una descripción más adecuada sería "casa blanca moderna, con grandes paneles de cristal y una estructura redonda, frente a una gran piscina, y situada dentro de un bosque. La casa está integrada en el medio natural que le rodea."

Por el contrario, imágenes sin relevancia, como iconos que acompañan a ciertos elementos, logotipos, etc, normalmente no requieren ser leídos. Para ellos, una etiqueta <alt> vacía ayudará a ignorarlos.

ARIA

Hasta ahora hemos hablado de los elementos y atributos nativos de HTML. Sin embargo, hay algunos casos en los que estos elementos no son suficientes para describir el contenido (por ejemplo, no se puede describir un menú pop-up con ellos). Para estos casos, existen alternativas como ARIA.

ARIA es un conjunto de atributos personalizados que empiezan por los caracteres aria- y añaden atributos semánticos adicionales a los elementos. Algunos de ellos permiten utilizar elementos HTML con una función diferente a su función semántica (por ejemplo, un elemento <div> nos permite darle la funcionalidad de un checkbox, pero no podemos indicar el estado del mismo a la API del navegador. Para ello, los atributos aria-role="checkbox" y aria-checked="true / false" nos proporciona esta utilidad.

Es importante resaltar que ARIA no cambia ni aumenta el comportamiento de una página, ni su apariencia física. ARIA solo interactúa y modifica el árbol de accesibilidad. Hay que tener en cuenta además que ARIA está diseñado para expandir la funcionalidad semántica de HTML, no para reemplazarla. Los elementos HTML adecuados no suelen necesitar etiquetas ARIA. En el ejemplo anterior, un elemento <input type="checkbox"> no habría necesitado atributos ARIA.

¿Qué puede hacer ARIA?

Como se ha mencionado antes, ARIA no afecta al comportamiento normal de una página, solo a su interacción con la tecnología de asistencia. ARIA puede proporcionar etiquetas alternativas a elementos HTML (como, por ejemplo, un botón), sin que esta etiqueta se tenga que incorporar en el diseño "normal" de la página, o puede utilizarse para indicar la relación entre distintos elementos que visualmente es evidente, pero auditivamente no. Por ejemplo, puede indicar que los botones de controles debajo de una galería de imágenes se utilizarán para recorrer dicha galería. aria-label, por ejemplo, proporciona una etiqueta para describir un elemento HTML, mientras que aria-labelledby indica qué elemento se utilizará para describir un elemento.

Otro atributo importante es aria-hidden. Como vimos anteriormente, ciertas propiedades CSS indicarán de forma nativa que un elemento no debe ser expuesto al usuario, pero hay veces en las que utilizar esas propiedades no es posible. En este caso, aria-hidden cumple la misma función. Este atributo tiene la ventaja adicional de permitirnos ocultar elementos que sí se ven, pero que no son útiles para un usuario que no puede verlos. También nos permitirá ocultar etiquetas que cumplan funciones no semánticas como, por ejemplo, etiquetas <div> utilizadas para elaborar la estructura de un elemento.