Auditoría de accesibilidad WCAG y mejoras de la experiencia de usuario

Durante la auditoría detecté combinaciones de color que no cumplían los requisitos mínimos de contraste establecidos por las WCAG 2.1, afectando directamente la legibilidad del contenido para personas con baja visión o en condiciones de uso adversas. A continuación se detallan las principales:

APCA y redefinición en OKLCH

Para complementar el análisis, incorporé APCA (Advanced Perceptual Contrast Algorithm), un modelo perceptual que evalúa el contraste en función de la legibilidad percibida y no únicamente mediante ratios estáticos. A diferencia de WCAG 2.1, APCA tiene en cuenta el tamaño y el peso tipográfico, y penaliza con más precisión los casos de bajo contraste en texto pequeño.

A partir de esta investigación, mi propuesta recoge tres líneas de actuación:

1. 1

   Sustituir el negro puro #000000 por un tono cercano como #101010, para suavizar el contraste extremo y mejorar el confort visual.

2. 2

   Ampliar la paleta mediante variantes adaptadas a fondos claros y oscuros, asignando a cada color un uso concreto según el contexto de interfaz.

3. 3

   Reajustar luminosidad y contraste utilizando OKLCH, un espacio de color perceptualmente uniforme, para garantizar coherencia visual entre variantes sin alterar el matiz ni la identidad de marca. El naranja de Roig Arena se mantiene reconocible, lo que cambia es su luminosidad.

Paleta de colores original vs. paleta propuesta

Navegación con teclado

Se detectaron diversos problemas relacionados con la navegación mediante teclado, incluyendo un orden de tabulación incoherente, focos no visibles y elementos no operables sin ratón. Durante la navegación secuencial, el foco en el menú de navegación pasaba del menú hamburguesa directamente al logotipo principal del sitio web, generando una secuencia ilógica y potencialmente desorientadora para las personas usuarias que dependen exclusivamente del teclado.

Asimismo, en los carruseles de restaurantes y eventos, la navegación obligaba a recorrer mediante TAB todos los elementos contenidos en cada carrusel, incluidos elementos no visibles en ese momento, dificultando significativamente una navegación eficiente y accesible.

Documentación del orden de foco en la página de inicio del Roig Arena

Al utilizar el lector de pantalla VoiceOver, algunos enlaces mostraban textos genéricos como “+ info” o “Reservar” sin indicar claramente su destino. Además, otros enlaces no disponían de un nombre accesible, por lo que las personas usuarias de lector de pantalla no podían identificar su función o propósito. Esto dificultaba comprender y navegar correctamente por el contenido.

Menú "Enlaces" de la página de Restauración del Roig Arena en VoiceOver

En el primer caso, la solución consiste en proporcionar contexto suficiente al botón para que su propósito sea comprensible sin depender del texto circundante, o bien en asociar programáticamente su texto con dicho contexto mediante técnicas adecuadas de marcado accesible.

  <a
  href="/es/reservas-ultramarinos/"

  class="m-banner__action">


  <div
  class="a-button m-banner__button"
  role="button"

  aria-disabled="false"
  tabindex="0">


  <div
  class="a-button__container">
  Reservar
  </div>


  </div></a>
  
  

  <h2
  id="titulo-ultramarinos">Ultramarinos</h2>

  <a
  href="/es/reservas-ultramarinos/"
  
aria-labelledby="reservar-ultramarinos 
 titulo-ultramarinos">

  <span
  id="reservar-ultramarinos">Reservar</span></a>
  
  

También ocurre que algunos enlaces representados mediante iconos no disponen de un nombre accesible, lo que impide que los lectores de pantalla puedan identificar su propósito. En estos casos, la solución consiste en proporcionar dicho nombre accesible mediante el uso de aria-label o técnicas equivalentes de etiquetado accesible.

  <a
  href="https://www.instagram.com/roig.arena/"
  rel="noopener noreferrer"
  target="_blank"
  class="a-link o-footer__social__item-link">


  <div
  class="o-footer__social__item">


  <i
  class="o-footer__social__item-icon pi pi-instagram"></i>

  </div>

  </a>

  

  <a
  href="https://www.instagram.com/roig.arena/"
  rel="noopener noreferrer"
  target="_blank"
  class="a-link o-footer__social__item-link"
  aria-label="Visitar perfil de Instagram del Roig Arena (se abre en una nueva pestaña)">


  <div
  class="o-footer__social__item">


  <i
  class="o-footer__social__item-icon pi pi-instagram"></i>
  </div>
  </a>

  
  

En varios elementos interactivos la etiqueta visible no coincide con el nombre accesible anunciado por las tecnologías de asistencia. Esto genera confusión especialmente en usuarios de navegación por voz, que deben pronunciar exactamente el texto visible para activar el elemento.

Se identificaron fragmentos en idioma distinto al principal, por ejemplo, en una de las cartas de los restaurantes aparecían comidas en francés: Mini croissant, Mini pain au chocolat, sin el atributo lang correspondiente. Además, la versión de la página en valenciano tiene el idioma mal configurado en el head. Utiliza lang="val" en lugar del correcto lang="ca", según ISO 639-1.

Ejemplos de codificación incorrecta del idioma en la web del Roig Arena