¿Cómo el desarrollo front-end puede mejorar la accesibilidad de tu sitio?
Actualmente no podemos concebir la vida sin los beneficios que nos brinda internet en nuestro día a día, por lo que cada vez se hace más grande el desafío de crear productos web que faciliten a todas las personas percibir e interactuar con esta red de información.
La accesibilidad web es el conjunto de prácticas que tiene por objetivo garantizar el acceso a un sitio o servicio en internet, independiente de las limitaciones que puedan existir para el usuario.
Lamentablemente, son diversos los mitos que han entorpecido la ejecución de estas prácticas, por ejemplo, se piensa que aplicarlas es poco beneficioso para la economía de un proyecto, cuando la verdad es que puedes tener mucha mejor visibilidad debido a la inherente mejora en el posicionamiento en motores de búsqueda. O por otro lado, se piensa que la accesibilidad web sólo sirve para facilitar el uso a personas con alguna discapacidad visual, cuando el beneficio se puede extender mucho más allá, llegando a personas con dificultades en el habla, auditivas, cognitivas, motrices o incluso a personas que tienen una incapacidad temporal, como una persona diestra que tiene su mano derecha lesionada, o un simple cambio de escenario, cómo la persona que al salir a la calle ya no puede ver bien la pantalla por las nuevas condiciones de iluminación.
Lo cierto, es que más allá de enumerar cuantos beneficios pueda traer todo esto a tu proyecto, sólo debemos pensar en la responsabilidad social de la que debemos hacernos cargo como profesionales del área digital, ya que la accesibilidad web nos permite generar inclusión entre los diversos tipos de usuarios a través de la tecnología.
El World Wide Web Consortium (W3C), a través de la Web Accessibility Initiative (WAI), se ha hecho cargo de definir las guías internacionales para asegurar que un contenido web sea perceptible, operable, comprensible y robusto, estableciendo estas características como pilares de accesibilidad, estos documentos son llamados Pautas de accesibilidad al contenido web (WCAG).
Hoy en día, esta documentación debería ser asumida como base para la implementación de plataformas web, pero para la mayoría de los desarrolladores sigue siendo una gran deuda al momento de escribir código, en general, ignoramos estas prácticas a tal punto que no las incluimos ni siquiera en la planificación de nuestros flujos de trabajo.
Durante el 2020, en Ilógica se nos presentó un gran desafío, un proyecto que, por el público al que iba dirigido, tenía grandes retos de accesibilidad. Como equipo esto nos permitió meter manos en el asunto desde los diferentes frentes (contenido, diseño y desarrollo) y personalmente pude hacerme cargo de algo que sabía que debía integrar en mi manera de implementar interfaces, fue así como descubrí que desde el desarrollo front-end podemos generar el mayor impacto en qué tan accesible puede ser un sitio web.
A continuación te dejaré algunos consejos que para mi fueron claves en el desarrollo de este proyecto y que de seguro te ayudaran a generar código más accesible:
1.- Pon atención a la semántica.
En HTML, la semántica se refiere al significado de los elementos, por lo que cada elemento representa un tipo de contenido determinado. Una correcta estructuración HTML es el punto de partida para mejorar la accesibilidad de tu sitio. Usa etiquetas que describan con la mayor precisión los componentes que estás usando, así cualquier tecnología asistencial (como los lectores de pantalla, lectores braille, etc.) podrá transmitir correctamente su intención.
Esto aplica para, por ejemplo:
- Definir los encabezados. Usa sólo un <h1> por página para el título principal, y define el resto de encabezados para jerarquizar el contenido. En este punto debes tener cuidado al usar componentes que se reutilicen dentro de tu aplicación web, ya que podrías perjudicar otra página.
- No utilices etiquetas sólo para dar el aspecto que necesitas. Si por diseño un llamado a la acción debe verse como un botón, pero en realidad debería ser un link, no utilices <button> en lugar de <a>, define el aspecto con CSS, utilizando un selector apropiado para establecer las propiedades de estilo.
- Si existen elementos que están relacionados entre sí, considera agruparlos de alguna forma. Las imágenes de un carrusel o la cadena de links en un breadcrumb deberían contenerse en un <ul>, los enlaces de un paginador debería pertenecer a un <ol>, el grupo de inputs de la sección de un formulario deberían estar contenidos por un <fieldset>, el listado de links de un menú debería ser un <nav>, etc…
Más allá de utilizar selectores de tipo clase o ID con nombres claros y comprensibles, debes asegurarte de usar los elementos establecidos en la especificación de HTML. No es complicado, es cosa de usar un poco de lógica para ir descubriendo que etiquetas usar en cada caso. Siempre puedes recurrir a alguna documentación de HTML en donde aparezca la descripción de cada etiqueta y su contexto de uso, la de Mozilla me parece muy completa.
2.- Para todo lo demás, existe ARIA.
Que quede claro, siempre que sea posible se debe utilizar HTML nativo para exponer la intención del contenido, pero es cierto que hay situaciones en que esto no es suficiente para que un lector de pantalla interprete con precisión la semántica del DOM, es ahí cuando debes considerar los atributos de ARIA (Accessible Rich Internet Applications), una forma de especificación técnica que busca mejorar la interoperabilidad entre los agentes de usuario y la tecnología asistencial.
ARIA se divide básicamente en 2 tipos de atributos: los roles (que definen los elementos) y los estados y propiedades admitidos por los roles. Con esto podemos crear componentes accesibles que no serían posibles con HTML básico, por ejemplo:
- Agregar texto descriptivo que sólo debe ser interpretado por lectores de pantalla, como el texto del botón que debe cerrar un modal y que visualmente está definido con el ícono “x” en el diseño de interfaz.
<button aria-label=”Cerrar modal”>x</button>- Relacionar elementos, como el botón de hamburguesa que debe controlar un menú de navegación emergente.
<button aria-label=”Menú” aria-controls=”main”>…</button><nav role=”menu” id=”main”>...</nav>
- Hacer que ciertas partes de una página estén “vivas”, informando a la tecnología asistencial cuando cambien de estado, como la apertura o cierre de un acordeón. Para esto necesitarás incluir algunas funciones de JS y así ir cambiado los valores de cada atributo según la interacción.
<div class=”accordion”><div class=”accordion__item” aria-hidden=”true”>Item de acordeón 1</div><div class=”accordion__item”>Item de acordeón 2</div><div class=”accordion__item” aria-hidden=”true”>Item de acordeón 3</div></div>
Te recomiendo buscar más sobre ARIA y descubrir todo su potencial, revisa el listado completo de atributos disponibles para comenzar.
3.- Permite que el usuario pueda acceder al contenido usando la tecla “Tab”.
La tecla Tab es la herramienta que permite navegar desde el teclado, saltando entre un elemento interactivo y otro. Para facilitar una correcta navegación, usa el atributo tabindex=”0" cuando quieras mantener un elemento en su orden natural y tabindex=”-1" para quitarlo de este orden.
Utilízalo sólo en elementos interactivos: como botones, links, pestañas, menús o campos de formulario.
4.- La culpa no la tiene :focus.
Con el pseudoelemento :focus un lector de pantalla puede exponer cuál es el elemento con el que está interactuando. Si por diseño no está definido o si simplemente no te gusta la aureola azul que le da el navegador a este elemento por defecto, considera cambiar su diseño, ya sea una sombra, un borde u otro color, pero nunca lo elimines.
5.- No olvides aplicar texto alternativo a las imágenes.
El atributo ALT es un atributo HTML que sirve para definir un texto que describa una imagen (ya sea una fotografía, un diagrama, un mapa, un logo, etc.). De esta forma, si la imagen no se puede mostrar por alguna razón, el atributo ALT proporciona el texto alternativo para mostrar en su lugar,
<img alt=”este es el texto alternativo”>Si debes usar la etiqueta <img> para imágenes que sean solamente decorativas, deja ALT en blanco, pero siempre decláralo, es obligación.
6.- Indica el idioma de la página.
Indicando el atributo LANG que defina el idioma del DOM en la etiqueta <html>, los agentes que reciban el texto sabrán en qué idioma deben interpretarlo.
<html lang=”es”>También puedes especificar el idioma de fragmentos cuando hagas un cambio del idioma principal:
<p>Este artículo habla de accesibilidad y la <span lang=”en”>Web Accessibility Initiative</span></p>7.- No inviertas tu tiempo en lo que ya está resuelto.
Olvida componentes que puedan perjudicar la interpretación de tu sitio o incluso que no aporten valor real, como el botón para aumentar el tamaño tipográfico o para cambiar el contraste de color, no es necesario que te hagas cargo de estas funcionalidades ya que para eso existe la asistencia tecnológica que proporcionará las soluciones necesarias en cada caso. Invierte esas energías en los otros puntos y verás que tu sitio será igual o más accesible aún.
8.- No olvides testear.
Finalmente, una vez que hayas aplicado todo lo anterior, asegúrate de hacer las pruebas necesarias con distintas técnicas y herramientas para comprobar si efectivamente tu sitio es realmente accesible.
- Revisa tu página sin cargar la hoja de estilos, así comprobaras el orden de tu HTML y en el que se interpretará el contenido.
- Utiliza la tecnología asistencial disponible en tu sistema operativo como Voice Over en Mac OS, o la extensión de Chrome Vox Lite para ir revisando como mejorar algunos puntos.
- Busca servicios de validación de accesibilidad, el mismo validador de las W3C o herramientas gratuitas como TAW, te pueden ayudar a identificar y priorizar las mejoras que puedas hacer.
Debes asegurarte de construir sitios que sean fácilmente transformables para así adaptarse a las diferentes necesidades que puedan tener todos tus usuarios, no sólo generando código ordenado y escalable, sino que también inclusivo.
