Mi experiencia al refactorizar HTML para ser más accesible

Como desarrolladora web, siempre he buscado maneras de mejorar la accesibilidad de mis proyectos. La accesibilidad es un principio fundamental del diseño web, que busca garantizar que las personas con capacidades diferentes puedan acceder a la información y utilizar los servicios online de manera equitativa. Una parte importante de la accesibilidad web es asegurarse de que el código HTML esté bien estructurado y sea fácil de entender para los lectores de pantalla y otros dispositivos de asistencia. En este post, compartiré mi experiencia al refactorizar HTML para hacerlo más accesible, y proporcionaré algunos consejos y mejores prácticas que he aprendido en el camino.

Disclaimer: No soy experta en accesibilidad pero si estoy aprendiendo. Intento que mis proyectos sean los más accesibles posibles e intento colaborar con personas que tengan esto presente siempre.

Es curioso cuando voy a hablar de temas como accesibilidad o sostenibilidad, ya que son temas que no controlo tanto y me da mogollón de apuro publicar este post. Así que por favor, sed buenos y buenas.

Por qué la accesibilidad es importante en el desarrollo web

Como punto de partida, es esencial comprender por qué la accesibilidad es importante en el desarrollo web. La accesibilidad web trata de hacer que los sitios web sean utilizables para todas las personas, independientemente de sus habilidades o capacidades. Esto incluye a personas con capacidades diferentes de todo tipo: visuales, auditivas, motoras o cognitivas. Algunos de los beneficios clave de la accesibilidad web incluyen:

• Inclusión: Al hacer que los sitios web sean accesibles, se garantiza que todas las personas, incluyendo aquellas con capacidades diferentes, puedan acceder a la información y servicios online de manera equitativa. Esto promueve la inclusión y evita la discriminación. También es cuestión de derechos y de intentar promover el derecho a la información de cualquier tipo de personas.
• Cumplimiento legal: En muchos países, existen leyes y regulaciones que exigen que los sitios web sean accesibles. Cumplir con estas regulaciones es esencial para evitar posibles litigios y sanciones. Este es un punto que a mi me cabrea bastante, porque parece que hasta que es ilegal no movemos un dedo.
• Mejora de la usabilidad: Las prácticas de accesibilidad web también mejoran la usabilidad general de un sitio web para todos los usuarios, no solo para aquellos con capacidades especiales. Por ejemplo, un diseño web accesible con una estructura clara y contenido bien organizado puede mejorar la navegación y la búsqueda en el sitio web.

Los principios de la accesibilidad web

Antes de ponerme a explicarte cómo refactorizar HTML para hacerlo más accesible, es importante comprender los principios clave de la accesibilidad web. Estos principios, establecidos por el World Wide Web Consortium (W3C), son:

• Perceptible: El contenido web debe ser presentado de una manera que pueda ser percibido por todos los usuarios, incluyendo aquellos con diferentes capacidades visuales o auditivas. Esto implica, entre otras cosas, proporcionar alternativas de texto para imágenes, utilizar colores y contrastes adecuados, y asegurarse de que los elementos multimedia sean accesibles.
• Operable: El contenido web debe ser operable por todos los usuarios, incluyendo aquellos con diferentes capacidades motoras. Esto implica, entre otras cosas, proporcionar una navegación clara y coherente, asegurarse de que los formularios sean accesibles, y permitir a los usuarios suficiente tiempo para interactuar con el contenido.
• Comprensible: El contenido web debe ser comprensible para todos los usuarios, incluyendo aquellos con diferentes capacidades cognitivas. Esto implica, entre otras cosas, utilizar un lenguaje claro y sencillo, proporcionar instrucciones claras, y asegurarse de que el contenido esté bien organizado y estructurado.
• Robusto: El contenido web debe ser robusto y compatible con diferentes tecnologías y dispositivos, incluyendo aquellos utilizados por personas con capacidades especiales. Esto implica, entre otras cosas, asegurarse de que el código HTML sea válido y cumpla con los estándares web, y garantizar que el sitio web sea compatible con diferentes navegadores y dispositivos, como lectores de pantalla y dispositivos de asistencia.

Cómo refactorizar HTML para mejorar la accesibilidad

Ahora que comprendemos la importancia de la accesibilidad web y los principios clave, vamos a ver cómo podemos refactorizar el código HTML para hacerlo más accesible. Aquí hay algunos consejos y mejores prácticas que he aprendido en mi experiencia:

Utilizar etiquetas semánticas

El uso adecuado de etiquetas semánticas en HTML es fundamental para hacer que el contenido sea perceptible y comprensible para los lectores de pantalla y otros dispositivos de asistencia. En lugar de utilizar etiquetas genéricas como div o span para todo, es importante utilizar etiquetas semánticas como header, nav, article, section, aside, footer, etc., según corresponda para marcar la estructura y el propósito del contenido.

Proporcionar alternativas de texto para imágenes

Las imágenes son una parte importante del contenido web, pero las personas con discapacidades visuales no pueden verlas. Por lo tanto, es importante proporcionar alternativas de texto descriptivas para todas las imágenes utilizando el atributo alt en las etiquetas de imagen. Esto permite a los lectores de pantalla leer una descripción del contenido de la imagen, lo que hace que el sitio web sea accesible para las personas con discapacidades visuales.

Utilizar colores y contrastes adecuados

Los colores y contrastes adecuados son importantes para garantizar que el contenido sea perceptible para todos los usuarios, incluyendo aquellos con discapacidades visuales o con problemas de visión. Es importante asegurarse de que el color del texto tenga suficiente contraste con el fondo, para que sea legible. Además, no se debe depender únicamente del color para transmitir información, sino que también se deben proporcionar indicadores visuales adicionales, como subrayados o negritas, para destacar la información importante.

Asegurarse de que los formularios sean accesibles

Los formularios son una parte común de los sitios web, pero pueden ser complicados para las personas con discapacidades motoras o cognitivas. Es importante asegurarse de que los formularios sean accesibles, lo cual incluye utilizar etiquetas de formulario adecuadas, proporcionar etiquetas de texto claras para los campos de entrada, y utilizar mensajes de error claros y descriptivos. Además, se deben proporcionar opciones de navegación y entrada alternativas, como la posibilidad de navegar y completar formularios mediante el uso de la tecla «Tab» en el teclado.

Crear una navegación clara y coherente

La navegación es una parte importante de la usabilidad de un sitio web, y también es crucial para la accesibilidad. Es importante crear una navegación clara y coherente, que permita a los usuarios moverse por el sitio web de manera fácil y comprensible. Esto implica utilizar una estructura de navegación clara y consistente, utilizar etiquetas de enlace descriptivas y proporcionar opciones de navegación alternativas, como la posibilidad de navegar mediante el teclado. Además, es importante asegurarse de que la navegación sea lógica y coherente, con un orden y una jerarquía clara, para que los usuarios puedan entender la estructura del sitio web y encontrar la información que buscan de manera eficiente.

Utilizar etiquetas de encabezado de forma apropiada

Las etiquetas de encabezado (h1, h2, h3, etc.) son una herramienta importante para estructurar el contenido y mejorar la accesibilidad. Es importante utilizarlas de forma apropiada y jerárquica para indicar la estructura del contenido. Por ejemplo, el h1 debe utilizarse para el título principal de la página, y luego los encabezados h2, h3, etc., deben utilizarse para los títulos secundarios y subsecciones del contenido. Esto permite a los lectores de pantalla entender la jerarquía del contenido y navegar por él de manera eficiente.

Evitar el uso de tablas para maquetación

El uso de tablas para la maquetación del diseño de un sitio web puede dificultar la accesibilidad, ya que las tablas son difíciles de leer para los lectores de pantalla y pueden causar problemas de navegación para las personas con discapacidades motoras. Es importante utilizar técnicas de maquetación modernas, como CSS, para crear diseños flexibles y responsivos, en lugar de depender de tablas. Además, si se utilizan tablas para mostrar datos tabulares, es importante utilizar las etiquetas adecuadas (como th y td) y proporcionar descripciones de las tablas mediante el atributo summary, para que los lectores de pantalla puedan entender la estructura y el contenido de la tabla.

Probar con herramientas de accesibilidad

Existen muchas herramientas de accesibilidad disponibles online que pueden ayudar a identificar problemas de accesibilidad en un sitio web. Es importante utilizar estas herramientas para realizar pruebas de accesibilidad y corregir cualquier problema que se encuentre. Algunas herramientas populares incluyen el WAVE Web Accessibility Evaluation Tool, el HTML_CodeSniffer, y el AChecker, entre otros.

Ser consciente del lenguaje y la lectura fácil

El lenguaje utilizado en el contenido web también es importante para la accesibilidad. Es importante utilizar un lenguaje claro y sencillo, evitando jerga técnica o compleja que pueda ser difícil de entender para personas con discapacidades cognitivas o de lectura. Además, se pueden utilizar técnicas de lectura fácil, como la simplificación de oraciones y párrafos, el uso de listas con viñetas y la utilización de un tamaño de fuente legible, para hacer que el contenido sea más accesible para todos los usuarios.

Conclusión

La accesibilidad web es un aspecto fundamental del diseño y desarrollo de sitios web, que busca garantizar que todas las personas, incluyendo aquellas con discapacidades, puedan acceder y utilizar el contenido de manera efectiva. Refactorizar el código HTML de un sitio web para hacerlo más accesible implica seguir principios y mejores prácticas, como el uso de etiquetas semánticas, proporcionar alternativas de texto para imágenes, garantizar colores y contrastes adecuados, asegurarse de que los formularios sean accesibles, crear una navegación clara y coherente, utilizar etiquetas de encabezado de forma apropiada, evitar el uso de tablas para maquetación, probar con herramientas de accesibilidad y ser consciente del lenguaje y la lectura fácil.

Al seguir estas mejores prácticas de accesibilidad web y refactorizar el código HTML de un sitio web, se pueden lograr importantes beneficios. Entre ellos se encuentran:

• Mayor alcance: Al hacer que un sitio web sea accesible, se garantiza que todas las personas, independientemente de sus capacidades o discapacidades, puedan acceder y utilizar el contenido. Esto amplía el alcance del sitio web y permite llegar a una audiencia más amplia, incluyendo a personas con discapacidades visuales, auditivas, motoras o cognitivas.
• Cumplimiento con normativas y regulaciones: Existen normativas y regulaciones en muchos países que exigen que los sitios web sean accesibles para las personas con discapacidades. Refactorizar el código HTML de un sitio web para hacerlo más accesible ayuda a cumplir con estas regulaciones y evitar posibles demandas o sanciones.
• Mejora de la experiencia del usuario: Una buena accesibilidad web mejora la experiencia del usuario para todos los visitantes del sitio web, no solo para aquellos con discapacidades. Por ejemplo, un diseño con buen contraste y una navegación clara beneficia a todos los usuarios, ya que facilita la lectura y la navegación en general.
• Mejora del SEO: Muchos de los principios de accesibilidad web también están relacionados con las mejores prácticas de SEO (Search Engine Optimization). Por ejemplo, el uso de etiquetas de encabezado adecuadas y descripciones alternativas para imágenes mejora la indexación del contenido por parte de los motores de búsqueda, lo que puede resultar en un mejor posicionamiento en los resultados de búsqueda.
• Responsabilidad social y ética: Hacer que un sitio web sea accesible es una cuestión de responsabilidad social y ética. Garantizar que todas las personas tengan igualdad de acceso a la información y los servicios online es una obligación moral y ética, y contribuye a crear un entorno más inclusivo y equitativo en la web.

En resumen, refactorizar el código HTML de un sitio web para hacerlo más accesible es una práctica fundamental en el diseño y desarrollo web actual. Esto implica seguir principios y mejores prácticas de accesibilidad, como el uso de etiquetas semánticas, alternativas de texto para imágenes, colores y contrastes adecuados, formularios accesibles, navegación clara, etiquetas de encabezado apropiadas, evitar el uso de tablas para maquetación, probar con herramientas de accesibilidad y utilizar un lenguaje claro y sencillo. Los beneficios de hacer que un sitio web sea accesible van desde un mayor alcance y cumplimiento de regulaciones, hasta una mejora de la experiencia del usuario, SEO, responsabilidad social y ética. Es importante priorizar la accesibilidad en el diseño y desarrollo de sitios web para garantizar un acceso equitativo y una experiencia positiva para todos los usuarios.

Como último apunte también hay que destacar que a su vez, el contenido debe ser accesible, es decir, los copys y cualquier tipo de contenido que se introduzca en la web, no solo hay que hacer responsable a la desarrolladora web ni a la diseñadora, si en el proyecto hay profesionales de copy, también debería ser accesibles.

Si tienes cualquier apunte que quieras comentarme, puedes escribir a través de mi formulario de contacto o por redes sociales.

Enlaces de interés

Componentes accesibles: https://inclusive-components.design/

 Sara Soueidan: https://practical-accessibility.today/

Introducción a la accesibilidad digital: https://www.edx.org/course/web-accessibility-introduction

Fundamentos de accesibilidad web: https://www.udemy.com/course/aprende-accesibilidad-web-paso-a-paso/

Atribuciones

• Imagen destacada: Canva
• Imagen innaccesible: https://www.shutterstock.com/es/image-photo/accessible-inaccessible-symbol-businessman-turns-wooden-2153908555
• Imagen de bola mundo sonriente: https://www.shutterstock.com/es/image-photo/hands-holding-earth-smile-face-save-2231112613