Introducción
En los últimos años hemos reflexionado como equipo, y en espacios en los que colaboramos sobre inclusión y accesibilidad digital y en específico sobre accesibilidad web.
Aquí puedes consultar reflexiones previas sobre comunicación digital inclusiva en redes sociales.
Derivado de estas conversaciones e intercambio de experiencias, hemos comenzado a planear e implementar prácticas de accesibilidad dentro de los procesos de nuestra organización y en los sitios web que administramos. Así fue como en el 2024 comenzamos a mejorar la accesibilidad del sitio web protege.la, el espacio que dedicamos a compartir recursos sobre seguridad y privacidad digital.
En este post comparto más sobre este proceso y aprendizajes que hemos tenido como equipo y en mi rol como responsable de la infraestructura. Si tienes interés en conocer más, escríbenos y compartamos experiencias.
¿Qué es accesibilidad web?
Podemos comprender a la accesibilidad web como un conjunto de estrategias, estándares y prácticas de diseño y desarrollo, que busca garantizar que todas las personas puedan utilizar y beneficiarse de los recursos disponibles en línea, independientemente de sus capacidades o limitaciones físicas, sensoriales, cognitivas o tecnológicas.1
La experiencia de implementar medidas de accesibilidad en el sitio web de protege.la ha sido un proceso de aprendizajes, desafíos y sobre todo, una transformación en nuestra manera de entender la tecnología y la inclusión. Hemos reflexionado que la accesibilidad web es más que un requerimiento técnico. Pensamos que es un compromiso para garantizar que todas las personas puedan acceder y beneficiarse de la información que encontramos en línea.
La motivación
Para SocialTIC, el uso estratégico y seguro de la tecnología digital y de la información impulsan acciones de cambio social. Sabemos que parte del impacto social, radica en que sean accesibles para todas las personas.
Nuestra principal motivación para mejorar la accesibilidad web nace del deseo de garantizar que ninguna barrera tecnológica excluya a las personas del ecosistema digital. Garantizar un acceso equitativo a las herramientas y la información es parte de nuestra labor como organización. Porque detrás de cada clic, cada sitio web y cada visita a un post, hay personas y son ellas quienes nos inspiran a construir un internet más justo e inclusivo.
Cómo comenzó: evaluando nuestros sitios web
Entre febrero y abril de 2024 nos aliamos con A11y Lab para apoyarnos en un diagnóstico de Accesibilidad Web para los sitios web de SocialTIC.
Accessibility Lab ofrece capacitación y diagnósticos de accesibilidad web y móvil, su compromiso es desarrollar sitios web y aplicaciones que sean accesibles para todas las personas, incluidas aquellas con discapacidades.
Para este diagnóstico, utilizaron el estándar internacional Web Content Accessibility Guidelines 2.2 (WCAG 2.2), a partir de los cuatro principios: “Perceptible, Operable, Comprensible y Robusto” (más abajo, profundizamos sobre esto) y evaluaron los criterios de accesibilidad y los niveles de conformidad A, AA y AAA. Siendo:
- A – el nivel mínimo de cumplimiento, que es crítico para todos los sitios web.
- AA – el nivel intermedio, es esencial y un requisito para los gobiernos y los operadores de telecomunicaciones.
- AAA – el nivel más alto de cumplimiento.
Puedes conocer más de los servicios y apoyo de Accessibility Lab en: https://www.a11ylab.com/servicios
Características de un sitio web accesible: los principios de Accesibilidad en el nivel de conformidad A
Como mencioné previamente, los cuatro principios de Accesibilidad son: Perceptible, Operable, Comprensible, Robusto.
Perceptible: Diseñar para ser visto, oído y sentido
Este principio busca que la información y los componentes puedan ser percibidos por todas las personas, incluso aquellas con discapacidades visuales, auditivas o sensoriales. En el nivel más básico (A), se requiere que elementos como imágenes incluyan texto alternativo descriptivo y que los videos ofrezcan subtítulos, evitando que un solo canal sensorial límite la experiencia.
Operable: Interacción sin límites
Para que un sitio sea operable, se debe garantizar que las personas usuarias puedan interactuar con él mediante diversos métodos, ya sea un teclado, un lector de pantalla o dispositivos de asistencia. En el nivel A, el enfoque está en lo esencial: permitir que todas las funciones sean accesibles desde un teclado y evitar elementos que puedan causar convulsiones, como los destellos intermitentes.
Comprensible: Entender el contenido y las acciones
Un sitio web comprensible es aquel que presenta contenido claro y operaciones predecibles. En el nivel A, se asegura que los textos sean legibles y que los formularios incluyan etiquetas que guíen a la persona usuaria. Este enfoque se puede abordar incluso desde la manera en la que se redacta la información presentada en el sitio web.
Robusto: Preparado para el presente y el futuro
Un sitio robusto es aquel que se mantiene funcional y accesible independientemente de las tecnologías utilizadas para acceder a él. En el nivel básico (A), se requiere que el código sea limpio y compatible con tecnologías de asistencia. Este principio no solo responde a las necesidades actuales, sino que también prepara al sitio para adaptarse a las evoluciones tecnológicas que tendrá en el futuro.
Diagnóstico de Accesibilidad: el inicio del camino
Después de analizar los reportes facilitados por A11yLab, reflexionamos en equipo cómo abordar la implementación de estos criterios y dedicamos esfuerzos a identificar las tareas a cumplir en cada uno de los niveles de conformidad. Así, encontramos un área de oportunidad en el nivel de conformidad A.
Como responsable de la infraestructura, puse manos a la obra y realicé los cambios necesarios y las adaptaciones para cumplir con los criterios, pensé que sería sencillo, que un plugin o estilos extra solucionarían el problema, pero conforme más ahondé en el tema descubrí que: adaptar un sitio que desde un principio no fue pensado o diseñado con una perspectiva de accesibilidad conlleva mucho trabajo y representa retos técnicos, ya que muchas herramientas no están pensadas en cubrir estos criterios, o encuentres licencias extra para instalar un plugin que haga “accesible” el sitio.
Al decidir el nivel de conformidad A como primer paso para la implementación, noté que este proceso iría acompañado de investigación, cambios y pruebas. La estrategia clave para cumplir con una primera prueba de concepto fue iniciar con el sitio de protege.la como el primero en el proceso. El plan a futuro es replicar los cambios y medidas en los demás sitios web de SocialTIC, contando con la experiencia previa de protege.la; de esta manera el tiempo invertido en aprendizaje y documentación sería menor y el proyecto mucho más corto.
Implementación: estos fueron los cambios significativos en accesibilidad web
Al evaluar las mejoras implementadas en el sitio, destacamos elementos y cambios que representan avances significativos y visibles hacia una experiencia más accesible e inclusiva para todas las personas usuarias.
-
El propósito de incluir textos en los enlaces
El propósito del enlace o links en una página web debe ser claro para todos las personas usuarias, incluidas aquellas que utilizan lectores de pantalla. Cuando una persona navega por una página web, los lectores de pantalla les permiten escuchar o ver una lista de enlaces sin el contexto visual de la página. Por esto, el texto de un enlace debe describir claramente su función o destino, para que las personas usuarias puedan entender hacia dónde les llevará el enlace o qué acción realizarán si lo seleccionan.
En protege.la teníamos muchos enlaces que eran muy similares y sin apoyo visual no podíamos identificar cuál era el propósito real del enlace, un ejemplo es la sección de Rutas de Aprendizaje de Seguridad Digital para Puntos de Contacto. Todas las guías tenían el mismo botón “¡Llevame a esta guía!”, pero si navegamos con el teclado el lector de pantalla va a leer el mismo botón 13 veces, entonces comenzamos a reflexionar acerca del propósito que tenían los enlaces en el sitio web y lo terrible que debía ser la experiencia de uso para las personas que nos visitan con un lector de pantallas. Es por eso que corregimos todos los enlaces de las páginas y cambiamos los “lee más aquí”, “clic aquí”, por enlaces más accesibles.
-
Perceptibilidad de los elementos interactivos
Uno de los cambios más significativos fue asegurar que cada botón o ícono proporcione información clara sobre su propósito, tanto para las personas que interactúan visualmente como para aquellas que dependen de tecnologías de asistencia, como lectores de pantalla.
En la sección de enlaces a redes sociales, los íconos previamente carecían de etiquetas accesibles y no contaban con el atributo aria-label, que se utiliza para definir un texto que etiqueta el elemento y se debe usar en los casos en que no haya una etiqueta de texto visible en pantalla. Esto puede generar que los lectores de pantalla identificaran los íconos simplemente como “Unlabeled” o “Sin etiqueta”, creando confusión y falta de claridad para las personas usuarias.
En la imagen se ve que la herramienta de lectura de pantalla identifica a los iconos de redes sociales como “Unlabeled” o “Sin etiqueta”.
Para mejorar la accesibilidad decidimos implementar una nueva sección en el footer con elementos que permiten la navegación con el teclado y que el lector de pantalla identifique correctamente las etiquetas de cada ícono y que tiene un texto descriptivo.
Otra característica importante de perceptibilidad a tomar en cuenta es cuando la imagen tiene un significado relevante dentro de su contexto, se debe ofrecer el atributo “texto alternativo” con su texto descriptivo. Si la imagen es decorativa, se pone el “texto alternativo” vacío. Este texto por defecto solo se muestra si la imagen no se ha podido cargar o si se navega con lectores de pantalla. De esta forma las personas que por el motivo que sea no puedan ver las imágenes pueden entender por qué esa imagen está ahí y su intención comunicativa.Para las imágenes se consideran los atributos: Texto alternativo, Título y Leyenda.
El texto alternativo describe el contenido de la imagen, el título es una nomenclatura para organizar las imágenes del post, por último la leyenda nos da información de donde obtuvimos la imagen.
En el siguiente ejemplo, la imagen de una guía, podemos ver como no se debe repetir información y cada atributo cumple con un propósito.
-
Navegabilidad en sitios web
La navegabilidad en una página web es esencial para que todas las personas usuarias, incluidas aquellas que utilizan tecnologías de asistencia como lectores de pantalla o dispositivos de entrada especializados, puedan desplazarse y encontrar contenido de manera eficiente.
Esto implica que los menús, encabezados, y otros elementos de navegación estén diseñados de manera lógica y sean accesibles mediante teclado o cualquier método de interacción compatible. También es fundamental que las etiquetas, descripciones y estructuras sean claras y coherentes, de modo que las personas usuarias puedan anticipar cómo interactuar con el sitio y encontrar la información que buscan sin confusión ni barreras.
Entre estas mejoras, se implementó un botón de “Saltar al contenido” que es navegable con el teclado, que permite a las personas usuarias omitir todos los elementos del encabezado y dirigirse directamente al contenido principal de la página. Esto es especialmente útil para quienes navegan con teclado o utilizan lectores de pantalla, ya que reduce el tiempo y esfuerzo necesario para llegar a la información relevante.
En la imagen de ejemplo, se observa cómo este botón está claramente visible. Esta mejora asegura una navegación más intuitiva e inclusiva para todos las personas usuarias.
Adicionalmente incluimos una tabla de contenido que muestra los encabezados principales de cada blog y guía. Esta tabla permite a las personas usuarias identificar rápidamente las secciones disponibles y navegar directamente hacia ellas con un solo clic. Esto no solo facilita la exploración del contenido, sino que también mejora la accesibilidad para personas que prefieren o necesitan un acceso estructurado a la información.
En la imagen de ejemplo se observa la tabla de contenido, brindando a las personas usuarias opciones intuitivas para moverse por el sitio.
-
Elementos distinguibles
Como parte de las actualizaciones, nos aseguramos que el uso del color en el sitio web, no sea el único medio visual para transmitir información, destacar acciones, o distinguir elementos interactivos.
Consideramos que algunas personas, como aquellas con deficiencias en la percepción del color, pueden enfrentar barreras al interpretar información basada en el color.
En el sitio actual, el efecto hover (cuando pasamos el mouse por encima del elemento) lo mejoramos con un diseño que combina varias de estas alternativas. Además de cambiar de color, incluye un estilo en negritas, un subrayado, y un tenue destello verde que mejora la visibilidad del elemento seleccionado.
El efecto focus (cuando seleccionamos un elemento con el teclado) muestra un borde alrededor del elemento seleccionado.
Para las secciones o páginas previamente visitadas, el efecto visited nos muestra el característico color morado, asegurando que el estado del enlace sea fácilmente reconocible y familiar.
A continuación en el ejemplo se muestran los tres efectos sobre los elementos “Recursos sobre medidas de prevención digital”.
Logros y aprendizajes
¿Qué pasa cuando un sitio web cumple con las pautas A de WCAG (Pautas de Accesibilidad para el Contenido Web)?
El sitio de protege.la mejoró en accesibilidad y usabilidad; aprendimos que los cambios que implementamos sin duda mejoran la experiencia de la persona usuaria.
Algo importante que aprendimos como equipo es que lograr la accesibilidad digital es un proceso continuo y dinámico. Los criterios cambian en respuesta a las necesidades de las personas usuarias y los criterios de WCAG evolucionan a medida que evoluciona la tecnología, lo que exige que los sitios web estén en constante actualización. No existe una solución única para la accesibilidad del contenido web, un plugin o un botón no va a garantizar que los niveles de cumplimiento de criterios de accesibilidad.
Por ello, garantizar accesibilidad implica estar en un aprendizaje constante, revisando y ajustando nuestras prácticas para mantenernos al día con los nuevos desafíos.
Otro de los aprendizajes más significativos fue reconocer que la accesibilidad comienza con el contenido. Junto al trabajo realizado también desarrollamos medidas editoriales que sean accesibles para garantizar que la información llegue a todas las personas. Esto incluye el uso de lenguaje claro y directo, descripciones alternativas para imágenes, estructuras jerárquicas que guíen a las personas que leen el contenido, y un formato que sea fácilmente navegable. Con estas prácticas no solo cumplimos con principios de accesibilidad, sino que hacemos que el contenido sea más comprensible y valioso para un público más amplio.
Desde esta perspectiva, podemos reconocer que la accesibilidad no solo beneficia a personas con discapacidades, sino que mejora la experiencia de todas las personas usuarias. Al hacer un sitio web más claro, navegable y funcional, también mejoramos la experiencia de quienes navegan desde dispositivos móviles, quienes pueden tener limitaciones visuales, auditivas o motoras e incluso a las personas usuarias que acceden al contenido en un segundo idioma o en situaciones de estrés.
La accesibilidad, lejos de ser una mejora aislada, es un cambio que transforma la experiencia digital en algo más universal y equitativo.
Una invitación al compromiso
Al final de este proceso, es evidente que la accesibilidad web debe comprenderse como un pilar fundamental en la creación de entornos digitales. Más que una característica adicional, es una oportunidad para transformar la forma en que concebimos y desarrollamos la tecnología, poniéndola al servicio de todas las personas.
Este compromiso no sólo derriba barreras para quienes enfrentan dificultades de acceso, sino que también promueve espacios digitales más dinámicos, diversos y funcionales.
Te invitamos a sumarte a este esfuerzo, a cuestionar cómo podemos mejorar la tecnología y a reconocer que cada cambio es un paso hacia un mundo digital más justo. Porque en la accesibilidad no solo se eliminan barreras, se crean posibilidades. Nos encantaría seguir la conversación sobre esto, escríbenos y compartimos experiencias.