Cómo auditar las fotos del menú y el contenido visual de un restaurante según WCAG 2.2

Respuesta directa: auditar las fotos del menú y el contenido visual de un restaurante frente a WCAG 2.2 significa revisar cuatro cosas de forma sistemática: si cada imagen tiene un texto alternativo que cumple su función informativa (1.1.1), si el texto sobre imágenes o banners cumple los ratios de contraste mínimo (1.4.3), si se usa una imagen de texto cuando podría usarse texto real (1.4.5), y si los elementos gráficos no textuales —como iconos de alérgenos o botones sobre banners— tienen suficiente contraste con su fondo (1.4.11). Esta auditoría no cubre formularios de reserva ni interfaces de pedido, que se rigen por otros criterios de WCAG 2.2 relacionados con etiquetas y operación por teclado.

Qué cubre esta auditoría y qué queda fuera

El contenido visual de un sitio de restaurante suele incluir fotografías de platos, banners de promociones estacionales, imágenes de portada y menús publicados en PDF. Todos estos elementos son "contenido no textual" según la definición de WCAG 2.2, y por lo tanto están sujetos a criterios de éxito específicos sobre percepción visual y alternativas textuales.

Esta auditoría no evalúa formularios de reserva, pasarelas de pago, chatbots ni widgets de pedido en línea. Esos componentes son interactivos y se rigen por criterios distintos —como 3.3.2 Etiquetas o instrucciones y 2.1.1 Teclado— que requieren un método de revisión diferente, centrado en el comportamiento funcional más que en la percepción de imágenes estáticas.

Marco práctico: las Cuatro Capas de Percepción Visual

Para ordenar la revisión, resulta útil trabajar con un marco de cuatro capas, cada una alineada con un criterio de éxito concreto de WCAG 2.2. Este orden no es jerárquico en importancia, pero sí conviene para no repetir trabajo entre elementos similares del sitio.

Capa 1 — Texto alternativo (1.1.1 Contenido no textual)

• ¿Cada foto de plato tiene un atributo alt que describe qué se ve, no solo que "hay una foto"?
• ¿Las imágenes puramente decorativas (fondos, texturas) están marcadas como tales, para que la tecnología de asistencia las ignore?
• ¿El texto alternativo evita repetir información redundante ya presente como texto visible junto a la imagen?

Capa 2 — Contraste de texto sobre imágenes (1.4.3 Contraste mínimo)

• ¿El texto superpuesto en banners cumple una relación de contraste de al menos 4.5:1 frente a su fondo, o 3:1 si es texto grande?
• ¿Se ha comprobado el contraste en distintas zonas del banner, no solo en el punto más favorable de la imagen?

Capa 3 — Imágenes de texto (1.4.5 Imágenes de texto)

• ¿Existen menús o listas de precios publicados únicamente como imagen, cuando podrían presentarse como texto real en HTML?
• Si se usa una imagen de texto por razones de diseño (por ejemplo, un logotipo con tipografía específica), ¿es ese el único caso justificable, según lo permite el propio criterio?

Capa 4 — Contraste no textual (1.4.11 Contraste no textual)

• ¿Los iconos de alérgenos, botones de navegación sobre imágenes, o indicadores gráficos tienen al menos 3:1 de contraste frente a los colores adyacentes?
• ¿Los controles interactivos superpuestos a fotografías (por ejemplo, flechas de un carrusel de platos) mantienen ese contraste en todos sus estados visuales?

Cómo medir el contraste y verificar el texto alternativo

La medición de contraste se basa en la relación entre los valores de luminancia del color de primer plano y el color de fondo, tal como se define en WCAG 2.2. Para texto normal, la relación mínima exigida por 1.4.3 es 4.5:1; para texto grande (generalmente 18pt o 14pt en negrita), es 3:1. Para elementos gráficos no textuales bajo 1.4.11, la relación mínima es 3:1.

1. Extraer los valores hexadecimales del color de texto y del color de fondo en el punto exacto donde se superponen sobre la imagen.
2. Calcular o verificar la relación de contraste con una herramienta de medición de color confiable, repitiendo la comprobación en al menos tres zonas distintas del banner si el fondo no es uniforme.
3. Revisar manualmente cada texto alternativo leyéndolo en voz alta o con un lector de pantalla, preguntando: ¿esta descripción tiene sentido fuera de contexto visual?
4. Para menús en PDF, comprobar si el documento tiene una estructura de etiquetas (encabezados, tablas, texto seleccionable) o si es una imagen escaneada sin texto subyacente.
5. Registrar cada hallazgo con la URL o nombre de archivo, el criterio de éxito afectado y una descripción del problema, para poder priorizar correcciones.

Limitaciones de este método

Ninguna herramienta automática puede confirmar por sí sola el cumplimiento con WCAG 2.2. Los verificadores de contraste calculan ratios de color con precisión, pero no pueden juzgar si un texto alternativo es informativo, si una imagen de texto tiene una alternativa razonable, o si un PDF está correctamente etiquetado en su estructura interna. Esta auditoría tampoco sustituye una revisión con usuarios reales de tecnología de asistencia, que puede revelar problemas de percepción que un análisis criterio por criterio no captura. Además, el cumplimiento de estos criterios de percepción visual no implica automáticamente el cumplimiento de otros bloques de WCAG 2.2, como los relacionados con navegación, temporización o compatibilidad con distintos lectores de pantalla.

Dónde puede encajar ChefNet

ChefNet está desarrollando productos de descubrimiento y operación para restaurantes, y algunos de estos productos pueden tocar aspectos relacionados con la presentación de menús y contenido visual en línea. Sin embargo, este artículo no describe funciones específicas de auditoría de accesibilidad como capacidades actualmente disponibles en ChefNet. Los operadores que quieran saber qué funciones de accesibilidad, si alguna, están activas en un momento dado deben verificar directamente con la documentación o el equipo de producto de ChefNet, en lugar de asumir que las prácticas descritas aquí están automatizadas por la plataforma.

Flujo de implementación paso a paso

Aplicar el marco de las Cuatro Capas requiere un orden operativo, no solo criterios. El siguiente flujo describe cómo llevar la auditoría desde el inventario hasta el seguimiento de correcciones, sin depender de qué partes de un sitio ya estén implementadas.

1. Inventario de activos visuales: listar todas las páginas con fotografías de platos, banners, imágenes de portada y enlaces a menús en PDF, incluyendo versiones para móvil si difieren de la versión de escritorio.
2. Clasificación por función: marcar cada imagen como informativa, decorativa o funcional (por ejemplo, un botón gráfico), porque esa clasificación determina si aplica 1.1.1, 1.4.5 o 1.4.11.
3. Revisión por capa: recorrer cada activo aplicando las cuatro capas en el orden documentado, registrando el resultado incluso cuando no hay hallazgos, para tener evidencia de cobertura completa.
4. Priorización de hallazgos: ordenar los problemas encontrados según el criterio afectado y la frecuencia con que aparece el mismo patrón (por ejemplo, un mismo banner reutilizado en varias páginas).
5. Reauditoría tras corrección: verificar cada cambio con la misma herramienta de contraste y el mismo método de lectura de texto alternativo usado en la auditoría original, para evitar introducir inconsistencias de medición.

Casos borde que el marco básico no resuelve directamente

Algunas situaciones comunes en sitios de restaurantes no encajan de forma limpia en una sola capa y requieren una decisión explícita antes de aplicar el criterio correspondiente.

Imágenes con texto incrustado mediante CSS de fondo

Cuando un banner usa una imagen como fondo CSS y superpone texto real mediante HTML, el texto en sí no está sujeto a 1.4.5 (porque no es una imagen de texto), pero el contraste entre ese texto y la imagen de fondo sigue sujeto a 1.4.3. Es necesario comprobar el contraste en el punto exacto de superposición, no en un promedio de color de la imagen.

Menús en PDF con texto parcialmente escaneado

Un PDF puede tener una capa de texto seleccionable en la portada pero páginas interiores escaneadas como imagen. En ese caso, cada página debe evaluarse por separado bajo 1.1.1 y 1.4.5, en lugar de asumir que el estado de una página representa al documento completo.

Carruseles de platos con transición automática

Cuando el texto alternativo o el contraste dependen del estado visual (por ejemplo, una imagen que cambia de opacidad al pasar el cursor), la auditoría debe repetirse en cada estado visual relevante, no solo en el estado de reposo.

Contenido visual en varios idiomas

Si el sitio ofrece el menú en más de un idioma, el texto alternativo debe revisarse por separado en cada versión lingüística, ya que una traducción incompleta del alt no se detecta revisando solo la versión original.

Medición: muestreo y periodicidad

Auditar cada imagen de un sitio grande puede ser poco práctico en una sola pasada. Un enfoque de muestreo razonable consiste en cubrir el cien por cien de banners promocionales activos (por su alta visibilidad) y una muestra representativa de fotografías de platos por categoría de menú, ampliando la muestra si se detectan patrones de error repetidos.

Cada hallazgo debe documentarse con fecha de revisión, para poder distinguir entre un problema nuevo y uno ya corregido en una auditoría anterior.

Limitaciones adicionales del proceso de medición

Las herramientas de medición de contraste pueden calcular ratios distintos entre sí cuando el color de fondo no es uniforme, ya que cada herramienta puede tomar una muestra de píxel diferente. Por eso conviene documentar el punto exacto de medición, no solo el resultado numérico. Además, esta metodología evalúa la conformidad con criterios específicos de percepción visual definidos en WCAG 2.2, pero no constituye una determinación legal de cumplimiento normativo, la cual depende de marcos regulatorios y jurisdicciones que quedan fuera del alcance de este documento.

Fuentes primarias

• W3C: Web Content Accessibility Guidelines 2.2

FAQ

Divulgación editorial: ChefNet publica esta guía y desarrolla productos para el descubrimiento y las operaciones de restaurantes. Las recomendaciones operativas generales se separan de las afirmaciones sobre el producto. Las funciones pueden cambiar durante los programas piloto. Publicado 2026-08-12.