Insights
Acta Europea de Accesibilidad: estrategia para implementarla en tus sitios web
Según el Acta Europea de Accesibilidad (European Accessibility Act), para junio de 2025 la mayoría de las webs deben facilitar la navegación a las personas con discapacidad. Este cambio legislativo ha servido para ponernos frente a una realidad que llevaba bastante tiempo llamando a nuestra puerta: la accesibilidad. Permitir que todas las personas puedan acceder en igualdad de condiciones a unos servicios digitales que cada vez son más esenciales es un paso necesario que debemos dar como sociedad. Y esto, a su vez también supone un reto. Por eso, en este artículo hemos querido recopilar todo lo que hemos aprendido en nuestro estudio digital sobre accesibilidad web durante estos últimos años.
Cada vez vivimos en entornos más digitalizados. Piensa si no en cuántos trámites importantes de tu día a día realizas actualmente a través de Internet: desde hacer una transferencia, a domiciliar un recibo de luz pasando por pedir cita en el médico, o reservar un billete de tren. Por no mencionar las compras online, que cada vez comen más terreno a las compras en comercios físicos. Pues ahora, ¿podrías imaginarte cómo sería tu vida sin poder hacer todo esto por Internet?
Aunque parezca extraño, esta es la situación en la que se encuentra mucha gente. Aunque fundamentalmente nos referimos a personas invidentes, sordas o con alguna discapacidad motora o intelectual, también podemos incluir a personas con dislexia, epilepsia, trastorno por déficit de atención, con alguna limitación visual común (como la presbicia, el astigmatismo o el daltonismo) o hasta incluso de personas mayores. Todas ellas, en mayor o menor medida, tienen dificultades para poder acceder a todos los servicios digitales, lo que les supone un problema serio en su día a día.
Y es que, aunque como diseñadores expertos en UI nuestro objetivo debería ser el contenido de cualquier web sea entendible y fácilmente utilizable por todo el público, lo cierto es que normalmente nos focalizamos en solo un determinado tipo de usuarios, obviando a quienes no cumplen con la norma. La tan veces mencionada accesibilidad web se entiende en la mayoría de los casos como algo poco importante o, en aquellos en los que sí se es conscientes de su importancia, como un asunto poco prioritario. Hasta ahora…
¿Qué es el Acta Europea de Accesibilidad (EAA)?
El Acta Europea de Accesibilidad (conocida como EAA, por sus siglas en inglés) es una directiva europea aprobada en 2019 cuyo contenido los veintisiete países miembros de la Unión Europea tienen que incorporar a su legislación nacional antes del 28 de junio de 2025. Su objetivo es armonizar los estándares de accesibilidad web en todos los estados y asegurar que, en un momento en el que gran parte de los servicios que ofrecen las empresas y organismos públicos se realizan a través de Internet, todos los ciudadanos europeos pueden acceder a ellos en igualdad de condiciones. Esta medida es vital, porque muchos de estos servicios son totalmente esenciales y, de no garantizarse, se pondría en peligro la inclusión y la independencia de aquellas personas con alguna discapacidad física o cognitiva.
Así que, para cumplir con la ley y no ser sancionadas, todas las empresas deben garantizar que a partir de junio de 2025 sus interfaces de usuario digitales reúnen características y funciones que permiten a las personas con discapacidad acceder y comprender el contenido en igualdad de condiciones.
¿A qué empresas afecta el Acta Europea de Accesibilidad?
El Acta Europea de Accesibilidad afecta a todas aquellas empresas (tanto a las europeas como a las que no lo sean pero que operen o quieran operar en el mercado común europeo) que ofrezcan a través de sus webs o aplicaciones servicios catalogados como esenciales. Y por servicios esenciales la EAA se refiere a prácticamente todo tipo de servicios, ya que menciona expresamente:
- Servicios bancarios.
- Servicios relacionados con el transporte aéreo, ferroviario, marítimo o por carretera de pasajeros.
- Servicios relacionados con el suministro (agua, gas, electricidad y comunicaciones).
- Medios de comunicación y entretenimiento.
- Sistemas operativos de cualquier tipo de dispositivo electrónico (como ordenadores, smartphones o televisiones).
- Cajeros automáticos, máquinas de autoventa, mostradores de check-in automático y demás quioscos digitales.
- e-Books.
- e-Commerce.
¿Cómo hacer un site accesible conforme al Acta Europea de Accesibilidad?
Normalmente nos solemos encontrar con la creencia de que desarrollar un sitio web accesible es algo costoso y, sobre todo, con un resultado poco atractivo. Pero en realidad, la mayoría de los requerimientos de accesibilidad son sutiles y no pasan por añadir nuevas y complejas funcionalidades.
El primer paso para lograr la accesibilidad web de un site y cumplir con la EAA es designar un responsable de accesibilidad. Su cometido será analizar los productos digitales de tu empresa, detectar sus puntos débiles, buscar soluciones y elaborar un plan de acción para implementarlas. Esta persona puede ser alguien de la empresa o una agencia externa.
Para realizar este análisis se puede recurrir a herramientas como Lighthouse de Google, que proporcionan una auditoría de accesibilidad instantánea para cualquier página web. Cuando se realiza un test de accesibilidad es normal encontrarse con decenas de errores solo en una página. Pero lo cierto es que la inmensa mayoría de esos problemas no son muy complicados de resolver si se sabe cómo hacerlo y se cuenta con el equipo apropiado. Así que en poco tiempo se puede conseguir mejorar el resultado considerablemente.
Sin embargo, este es solo un primer paso, ya que muchos puntos necesitan ser revisados manualmente. Lo ideal es realizar un análisis más amplio, con test de usuario y el uso de aplicaciones como Color Oracle o Sim Daltonism, que permiten simular cómo verían tu página las personas con diferentes tipos de daltonismo.
¿Qué aspectos son importantes para la accesibilidad web?
Para medir la accesibilidad web, el Acta Europea de Accesibilidad toma como referencia las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés) del World Wide Web Consortium (W3C), la principal organización de estándares de Internet. Las WCAG no son nada nuevo: se publicaron por primera vez en enero de 1995 y desde entonces han ido actualizándose. Su última versión, lanzada en junio de 2018 y revisada en septiembre de 2023, es la que las empresas deberían aplicar, aunque muchos de sus puntos clave no han cambiado desde las primeras versiones.
El World Wide Web Consortium establece tres niveles de accesibilidad web: básico (A), global (AA) y avanzado (AAA). Lo exigible por la European Accessibility Act es el nivel AA, y para llegar a él hay que cumplir un total de 60 requerimientos. En este artículo no vamos a verlos todos, sino que vamos a repasar los más importantes agrupándolos en seis grandes puntos que, prestándoles la debida atención, harán que cualquier web mejore considerablemente su accesibilidad. Estos puntos son: contraste, uso del color, tamaño de texto, alternativas de contenido, estructura semántica y navegación con teclado.
Asegúrate que los colores no impiden entender el contenido
El color es uno de los elementos de diseño más poderosos y, por lo tanto, uno de los que más sujeto está a las modas. Así que muchas veces los diseñadores web se nos olvida el hecho de que el color resulta también fundamental para hacer un contenido accesible.
Uno de los puntos donde mayor impacto tiene el color es el texto. Hay gente que no puede leer correctamente un texto si su color no ofrece suficiente contraste con el fondo sobre el que se representa. Esto no es una cuestión que se pueda resolver a simple vista: si un diseñador no tiene ningún problema visual, puede que diferencie fácilmente un texto sobre un fondo, pero hay que tener en cuenta que no todas las personas podrán hacerlo. Las WCAG establecen que, para obtener un nivel AA, el contraste entre el texto y el fondo sobre el que se muestra debería ser de al menos 3.0 para los textos grandes (superiores a 18px) y de 4.5 para los textos pequeños. No te preocupes: para comprobar si dos colores juntos alcanzan estos requisitos, encontrarás en Internet múltiples herramientas, como Colour Contrast o plugins para tus herramientas de prototipado, como Figma.
Sin embargo, el exceso de contraste puede ser también contraproducente. Muchos usuarios disléxicos son sensibles al alto contraste causado por ejemplo cuando se combina el negro puro (#000000) sobre un blanco también puro (#FFFFFF). Eso puede hacer que las palabras visualmente se les expandan y contraigan, dificultando enormemente la lectura. Por ejemplo, es mejor usar un negro #222222.
No uses el color como la única forma de transmitir una idea
Por los mismos motivos, el color no debería ser nunca la única forma en la que se transmita una idea que pueda resultar clave para entender un mensaje. ¿Sabías que cerca del 9% de la población (la mayoría de ellos hombres) padecen daltonismo? Esto es una alteración de origen genético en la visión que, según su variedad (deuteranopía, acromatopsia, protanopia, tritanopia…), les impide distinguir bien algunos colores de otros.
Por ejemplo, si se va a resaltar en rojo los campos mal cumplimentados de un formulario, es muy importante hacerlo siempre acompañados de un icono de apoyo. Algo similar sucede con los enlaces: si se diferencian del resto de textos solo a través de su color, muchas personas no los identificarán bien, así que hay que tratar de conservar siempre el subrayado como elemento diferenciador, una característica que los usuarios tienen bastante asociada a los enlaces y que sin embargo muchas veces los diseñadores tendemos a eliminar por cuestiones puramente estéticas.
Una mención especial tienen los gráficos, que pueden ser especialmente difíciles de interpretar ya que habitualmente se hace uso del color para diferenciar unos datos de otros. En estos casos, se deberían usar trazos, formas o patrones. Por ejemplo, el diseñador portugués Miguel Neiva creó hace algunos años ColorADD, una solución que consiste en aplicar símbolos fáciles de recordar a cada color y que ya se ha aplicado por ejemplo en el plano del metro de Oporto.
Muestra los textos lo suficientemente grandes
En la mayoría de las webs, el texto es la forma principal en la que se transmite el contenido. Así que una de las primeras formas de mejorar la accesibilidad web es empezar a trabajar la forma en la que se presentan los textos, especialmente su tamaño.
Ningún texto web debería estar a menos de 10 píxeles si se quiere cumplir con los estándares de accesibilidad AA. Es más, para la mayoría de los textos principales, nuestra recomendación es no bajar de los 16 o incluso de los 18 píxeles. Así conseguimos que los puedan leer bien personas con algún tipo de limitación visual común como la presbicia, que afecta aproximadamente a cuatro de cada diez personas en España (seis de cada diez entre los mayores de 40 años).
Independientemente del tamaño de texto que se utilice, hay que tener en cuenta que algunos usuarios (aquellos con problemas de visión algo más serios) acostumbran a agrandar el tamaño de los textos a través de la funcionalidad que ofrecen la mayoría de los navegadores web. Por eso es necesario trabajar siempre con medidas relativas para los textos, nunca absolutas.
Por su parte, el interlineado (el espacio vertical que hay entre la base de una línea y la base de la línea inmediatamente posterior en un mismo párrafo) debe ser de al menos 1,5 veces el tamaño de la fuente, mientras que la separación entre párrafos tendría que alcanzar como mínimo en el doble del tamaño de la fuente. Estos puntos son especialmente relevantes para ayudar a entender el contenido a personas con discapacidad cognitiva o dislexia.
Finalmente, aunque los requisitos de accesibilidad de las WCAG se centran en el tamaño, el interlineado y la separación entre párrafos, existen otras recomendaciones que puedes seguir para conseguir aumentar la legibilidad (y accesibilidad) de los textos de tu web y de las que ya hemos hablado con anterioridad en este blog, como por ejemplo tipo de letra, su alineación o el número de caracteres por línea.
No compartas un contenido accesible solo en un formato
La mejor manera de garantizar que un contenido llegue al mayor número de personas es ofrecerlo siempre en varios formatos.
El texto es un contenido que las personas ciegas o con alguna limitación visual severa pueden ‘leer’ gracias a los lectores de pantalla, unos software de apoyo a la navegación que interpretan el texto de una página y se lo hacen llegar al usuario bien mediante un sintetizador de voz o bien mediante una salida braille.
Las imágenes, en cambio, son más complicadas. En estos casos, los lectores de pantalla recurren a leer el contenido del atributo alt del elemento imagen. Por eso, es muy importante que este atributo cuente siempre con un pequeño texto que describa el contenido de la imagen, algo que muchas webs o no incluyen o no lo hacen correctamente. Mientras hay quien defiende que el texto de un atributo alt debe ser una descripción literal de la imagen, en OKB Interactive Studio creemos que esto resulta poco útil y preferimos una descripción que incida en el significado que tiene la imagen dentro del contexto.
También es importante que todo el material audiovisual pregrabado que contenga una web (ya sea un vídeo o un audio) cuente con subtítulos para que su contenido sea accesible también, en este caso para las personas sordas.
Usa siempre HTML semántico
Aunque el texto es razonablemente fácil de hacer llegar al público invidente gracias a los lectores de pantalla, lo cierto es que estos usuarios (como todos) a menudo también necesitan hacer una lectura rápida de una página en busca de un contenido concreto. Para esto es imprescindible hacer un correcto marcaje de los elementos con HTML semántico, especialmente de los títulos (h1, h2, h3, h4…), ya que es a lo que los lectores de pantalla recurren para crear un mapa de contenido de la web, de forma que los personas invidentes que los usan puedan escuchar un listado con todos los puntos del contenido y decidir a cuál quieren ir directamente sin tener que escucharlos todos.
En términos generales (y no solo en lo referido a la accesibilidad) nunca se deben usar etiquetas HTML solo con fines estéticos. Hace ya mucho tiempo que las recomendaciones del W3C desaconsejan esta práctica, ya que cada tipo de etiqueta lleva implícita una información sobre su funcionalidad y su importancia. Así que lo que convierte a un título en título no es el tamaño o el grosor de la letra con la que se representa, sino su etiqueta (en este caso h1).
Un ejemplo de HTML semántico lo encontramos también en los formularios. Es habitual usar el placeholder de un campo como si fuera su etiqueta, ya que resulta muy útil sobre todo cuando el espacio es reducido. Pero no es nada recomendable. Según el World Wide Web Consortium, el atributo placeholder se debería usar a modo de ejemplo del valor que se espera que un usuario introduzca en el campo de un formulario, pero no para indicar el nombre del campo, para lo que ya existe la etiqueta label. Por eso, los lectores de pantalla que emplean los usuarios invidentes para navegar por Internet, ‘leen’ en voz alta el contenido del label cuando el campo recibe el foco, nunca en el placeholder. Así que, si se prescinde del label, algunos usuarios directamente no sabrán qué deben introducir en un formulario.
Finalmente, para aquellos elementos que no tengan un significado semántico (básicamente para los div y span) se debe usar el atributo role con una valor ARIA. Existen varios tipos de ARIA, aunque los más comunes son form (para formularios), main (para el contenido principal de la página) o navigation (para el menú principal del site). También existe el atributo aria-label, que sirve para añadir información adicional a los lectores de pantalla, aunque no todos los lectores de pantalla son capaces de leerlos.
Facilita la navegación con el teclado
Las limitaciones visuales o auditivas no son las únicas que presentan los usuarios. Muchos otros tienen dificultades para realizar determinados movimientos complejos con el ratón (o con la mano, si se trata de interfaces para dispositivos móviles). Por eso, a la hora de diseñar una web hay que evitar situaciones que requieran de mucha precisión, como por ejemplo los intrincados menús desplegables que a su vez despliegan nuevos menús desplegables, o los mapas que necesitan de dos dedos para poder desplazarse por ellos.
Debido a estas limitaciones de movilidad, muchos usuarios recurren a la navegación con el teclado, algo que toda web debe facilitar para mejorar la accesibilidad. En este sentido, hay dos cosas a tener en cuenta: el orden de los elementos interactivos (que debería seguir el flujo visual de la página: de izquierda a derecha y de arriba a abajo) y los estados de foco, unas pseudoclases que aplican los navegadores por defecto para indicar que determinados elementos (sobre los que normalmente se realiza alguna acción) están seleccionados. Generalmente estos estados de foco se representan con unos bordes azulados que muchos diseñadores no encuentran demasiado estéticos y que, en muchas ocasiones, se anulan para no arruinar el aspecto del site. Pero esos indicadores son muy útiles en términos de accesibilidad, así que si se quitan se estará entorpeciendo la navegación de muchas personas.
Finalmente, cualquier elemento en pantalla con el que un usuario pueda interactuar debería ser lo suficientemente grande (unos 48x48 píxeles) y estar lo suficientemente separado del resto de elementos como para permitir accionarlo de manera fiable incluso a aquellas personas con problemas de precisión. Además se pueden definir atajos de teclado que sean fáciles de usar con una sola mano para las operaciones más comunes dentro de la aplicación.
Otras recomendaciones
Ofrecer soluciones a las limitaciones cognitivas de algunos de tus usuarios es tan importante para mejorar la accesibilidad de un site como las soluciones a las limitaciones físicas. Acciones sencillas como permitir el pausado del contenido que se muestre en movimiento (por ejemplo un carrusel) puede ser muy útil para estas personas, tanto como evitar los textos muy genéricos en los botones y enlaces (como por ejemplo ‘haz clic aquí’), ya que así se dificulta que se pueda entender bien el propósito final de estos elementos. También es importante que ningún contenido de una página parpadee más de tres veces por segundo, ya que podría afectar a personas con epilepsia.
¿Por qué hacer que una web sea accesible?
Como ves, con la nueva Acta Europea de Accesibilidad, para muchas empresas la accesibilidad web pasa de ser algo opcional a obligatorio. Pero que una web o aplicación sea accesible no debería verse solo como una cuestión legal. Es ante todo una responsabilidad social y también una gran oportunidad, incluso para aquellas empresas que no estén directamente afectadas por esta ley.
En primer lugar, es una oportunidad de alcanzar a un número mayor de usuarios potenciales, algo que es sin duda siempre positivo. Porque cuando hablamos de hacer un site accesible a más personas, no nos estamos refiriendo a unas pocas más: según la Unión Europea, el 20% de los europeos tiene alguna limitación para acceder a Internet.
Otro beneficio derivado de la accesibilidad es que muchos de los esfuerzos que implica tienen un impacto muy positivo en el SEO de un site. Las páginas con buena accesibilidad suelen posicionar mejor en los motores de búsqueda, ya que los algoritmos que se usan para establecer estos ránquines de busca suelen prestar mucha atención a aspectos como el HTML semántico, mientras que las ‘arañas’ de indexado de los buscadores funcionan bastante parecido a como lo hacen los lectores de pantalla a la hora de interpretar el contenido de una página web.
El diseño digital accesible busca que un producto digital sea fácilmente navegable para el mayor número de personas. En esencia, esa definición no es muy diferente de la que podríamos darle a cualquier diseño en general. Así que un diseño accesible es sinónimo de un buen diseño.
En el fondo, todas las personas necesitamos en algún momento la accesibilidad. Todos podemos sufrir alguna incapacitación temporal (como tener un brazo escayolado) o incluso puntual, como cuando tenemos que realizar cualquier gestión a través de nuestro teléfono móvil mientras nos sujetamos a la barra del metro para no caernos o en entornos en los que nuestra capacidad de atención se ve muy limitada. Así que la accesibilidad es algo siempre positivo y que, como hemos visto, no supone tanto esfuerzo como se le supone.
