Qué significa de verdad WCAG 2.1 AA para los tours de Matterport

WCAG 2.1 AA es el estándar al que remiten la Ley Europea de Accesibilidad, EN 301 549, la ADA, Section 508 y el estándar israelí 5568. Pero ¿qué exige en realidad cuando se aplica a un tour virtual de Matterport? Aquí tiene el desglose práctico, criterio por criterio, con lo que cada uno significa para su experiencia 3D.

WCAG en 30 segundos

Las Pautas de Accesibilidad para el Contenido Web (WCAG) se organizan en torno a cuatro principios. Todo el contenido web debe ser:

1. Perceptible Los usuarios deben poder percibir el contenido a través de al menos uno de sus sentidos.
2. Operable Los usuarios deben poder interactuar con la interfaz.
3. Comprensible Los usuarios deben poder entender el contenido y cómo funciona la interfaz.
4. Robusto El contenido debe funcionar de forma fiable en distintas tecnologías y herramientas de apoyo.

El nivel AA es el escalón intermedio: ni el mínimo imprescindible (nivel A) ni el más exigente (nivel AAA). Es el estándar que los reguladores de todo el mundo han fijado como referencia razonable de cumplimiento. Todos los criterios que siguen son requisitos de nivel A o AA.

Perceptible: ¿pueden los usuarios ver y oír su contenido?

1.1.1, Contenido no textual (nivel A)

Qué exige: todo elemento no textual necesita una alternativa textual que cumpla la misma función.

Qué significa para Matterport: el propio entorno 3D es enteramente visual. Un tour estándar de Matterport no ofrece ninguna descripción textual de lo que el visitante está viendo. Una capa de accesibilidad añade subtítulos por panorámica que describen cada espacio —«Se encuentra en la sala principal de locomotoras, frente a la máquina de vapor de los años veinte»—, de modo que los usuarios de lectores de pantalla y quienes dependen de los subtítulos sepan dónde están y qué los rodea.

1.3.1, Información y relaciones (nivel A)

Qué exige: la información y las relaciones estructurales que se transmiten visualmente también deben estar disponibles de forma programática.

Qué significa para Matterport: los botones de los puntos de interés, el panel de subtítulos, los selectores de idioma y los controles de accesibilidad necesitan todos un HTML semántico correcto y roles ARIA. Un usuario vidente ve un botón flotando en el espacio 3D; un usuario de lector de pantalla necesita oír «Botón de información: máquina de la locomotora» con el rol y la etiqueta correctos. Esto se implementa mediante role="button", aria-label y un HTML estructurado que refleja la jerarquía visual.

1.4.3, Contraste (mínimo) (nivel AA)

Qué exige: el texto debe tener una relación de contraste de al menos 4,5:1 respecto a su fondo. El texto grande (18 pt, o 14 pt en negrita) requiere al menos 3:1.

Qué significa para Matterport: los elementos de la capa —subtítulos, etiquetas de los puntos de interés, botones, controles— se sitúan sobre un fondo 3D dinámico que cambia constantemente a medida que el visitante se desplaza. No se puede controlar el color del fondo. La solución son fondos oscuros semitransparentes detrás de todos los elementos de texto, que garantizan que se cumpla la relación de contraste, sin importar lo que haya detrás. Un conmutador de alto contraste permite a los usuarios pasar a un modo de contraste máximo para una legibilidad aún mejor.

1.4.11, Contraste no textual (nivel AA)

Qué exige: los componentes de la interfaz y los objetos gráficos necesitan al menos un contraste de 3:1 respecto a los colores adyacentes.

Qué significa para Matterport: los botones de los puntos de interés, el selector de idioma, los conmutadores del panel de accesibilidad —cada elemento interactivo— deben distinguirse visualmente de la escena 3D que tienen detrás. Para ello hacen falta fondos de botón de color sólido, bordes visibles y estados de foco nítidos que no dependan de la escena 3D para lograr el contraste.

1.4.4, Redimensionar el texto (nivel AA)

Qué exige: el texto debe poder ampliarse hasta el 200 % sin pérdida de contenido ni de funcionalidad.

Qué significa para Matterport: la capa debe ofrecer controles de tamaño de letra. Cuando un visitante aumenta el tamaño del texto, los subtítulos, las descripciones de los puntos de interés y todas las etiquetas de la interfaz deben reajustarse correctamente, sin desbordar sus contenedores ni superponerse a otros elementos. Esto se implementa mediante un ajuste persistente de tamaño de letra que se aplica a toda la capa.

Operable: ¿pueden los usuarios navegar e interactuar?

2.1.1, Teclado (nivel A)

Qué exige: toda la funcionalidad debe poder manejarse mediante una interfaz de teclado.

Qué significa para Matterport: esta es la mayor carencia de un tour estándar de Matterport. El visor por defecto se maneja por completo con ratón y pantalla táctil. Una capa de accesibilidad añade navegación completa por teclado: Tabulador para recorrer los puntos de interés, Intro para abrirlos, Escape para cerrar los paneles, y teclas de flecha o atajos para moverse entre panorámicas. Cada elemento interactivo de la capa —selector de idioma, controles de letra, conmutador de alto contraste, reproductor de audio— debe poder manejarse con el teclado.

2.1.2, Sin trampas de teclado (nivel A)

Qué exige: si un usuario puede llegar a un componente con el teclado, también debe poder salir de él.

Qué significa para Matterport: cuando un visitante abre un panel de un punto de interés o los ajustes de accesibilidad, pulsar Escape o Tabulador debe devolver el foco de forma fiable a la interfaz principal. Ningún componente puede atrapar el foco del teclado en un bucle. Esto exige una gestión cuidadosa del foco: registrar dónde estaba el foco antes de abrir un panel y restaurarlo cuando el panel se cierra.

2.4.2, Página titulada (nivel A)

Qué exige: las páginas deben tener títulos descriptivos.

Qué significa para Matterport: el <title> de la página debe describir el tour: «Parque Wolfson, tour virtual accesible» en lugar de «Matterport Showcase» o un título genérico. Cuando el visitante navega a una nueva panorámica, el título debe actualizarse de forma dinámica para reflejar la ubicación actual.

2.4.3, Orden del foco (nivel A)

Qué exige: los componentes que reciben el foco deben hacerlo en un orden que preserve el significado y la operabilidad.

Qué significa para Matterport: el orden de tabulación debe seguir un orden espacial lógico: primero los controles de accesibilidad, después el selector de idioma, luego los botones de los puntos de interés en una secuencia con sentido y, por último, los controles de navegación. Cuando se abre el panel de un punto de interés, el foco entra en él. Cuando se cierra, el foco regresa al botón que lo abrió.

2.4.7, Foco visible (nivel AA)

Qué exige: el foco del teclado debe ser visible.

Qué significa para Matterport: cada elemento que recibe el foco necesita un indicador de foco claro y visible. Para los botones de los puntos de interés que flotan en el espacio 3D, esto significa un contorno de alto contraste que resulte visible sobre cualquier fondo. El contorno por defecto del navegador suele ser insuficiente en un contexto 3D: se requieren estilos de foco personalizados con suficiente contraste y tamaño.

Comprensible: ¿pueden los usuarios seguir lo que ocurre?

3.1.1, Idioma de la página (nivel A)

Qué exige: el idioma predeterminado de la página debe poder identificarse de forma programática.

Qué significa para Matterport: el atributo lang del HTML debe estar correctamente configurado: lang="es" para español, lang="he" para hebreo, etc. Cuando un visitante cambia de idioma en la capa, el atributo lang debe actualizarse en consecuencia y, para los idiomas RTL como el hebreo y el árabe, el atributo dir debe pasar a rtl.

3.1.2, Idioma de las partes (nivel AA)

Qué exige: cuando el contenido incluye texto en un idioma distinto del predeterminado de la página, ese texto debe identificarse de forma programática.

Qué significa para Matterport: si un tour en hebreo incluye el título de una exposición en inglés, ese título necesita un atributo lang="en". En un tour multilingüe, cada bloque de subtítulos y cada región de contenido de los puntos de interés debe llevar el identificador de idioma correcto, para que los lectores de pantalla cambien el motor de pronunciación adecuado.

3.2.1, Al recibir el foco (nivel A)

Qué exige: llevar el foco a un componente no debe desencadenar automáticamente un cambio de contexto.

Qué significa para Matterport: tabular hasta el botón de un punto de interés no debe abrir su panel por sí solo. Poner el foco en el selector de idioma no debe cambiar el idioma sin más. El usuario tiene que activar el control de forma explícita (Intro/Espacio) para que algo cambie. Parece de cajón, pero es un fallo habitual en las interfaces 3D interactivas.

Robusto: ¿funciona con la tecnología de apoyo?

4.1.2, Nombre, función, valor (nivel A)

Qué exige: en todos los componentes de la interfaz, el nombre, la función y el estado deben poder determinarse de forma programática.

Qué significa para Matterport: cada widget personalizado de la capa —los botones de los puntos de interés, el reproductor de audio, el control deslizante de tamaño de letra, el conmutador de contraste— necesita los atributos ARIA adecuados. Un botón de punto de interés necesita role="button" y aria-label="Información: máquina de la locomotora". El reproductor de audio necesita role="region" y aria-label="Narración de audio". El conmutador de contraste necesita aria-pressed="true/false". Sin ellos, la tecnología de apoyo no puede comunicar qué son los controles ni en qué estado se encuentran.

4.1.3, Mensajes de estado (nivel AA)

Qué exige: los mensajes de estado deben poder determinarse de forma programática mediante su función o sus propiedades, para que la tecnología de apoyo pueda presentarlos sin que reciban el foco.

Qué significa para Matterport: cuando el visitante pasa a una nueva panorámica y el subtítulo se actualiza, ese cambio debe anunciarse a los lectores de pantalla sin robar el foco. Esto se implementa con una región aria-live="polite" que envuelve el contenido del subtítulo. Cuando el texto del subtítulo cambia, el lector de pantalla anuncia automáticamente la descripción de la nueva panorámica. Lo mismo ocurre con mensajes de estado como «Idioma cambiado a árabe» o «Alto contraste activado».

Lo que suspende un tour estándar de Matterport

Para ponerlo en perspectiva, este es el boletín de notas de un tour de Matterport por defecto frente a los criterios anteriores:

Un tour estándar de Matterport suspende, del todo o en parte, 14 de los 14 criterios aplicables de WCAG 2.1 AA. Eso no es una laguna de cumplimiento: es un vacío total.

Los estándares que remiten a WCAG

WCAG 2.1 AA no es solo una directriz: es el estándar técnico al que apuntan las principales normativas:

• Ley Europea de Accesibilidad (UE) La Directiva (UE) 2019/882 exige que los servicios digitales de cara al consumidor sean accesibles; sus obligaciones se aplican en los Estados miembros desde el 28 de junio de 2025, y la referencia técnica común es WCAG a través de EN 301 549.
• EN 301 549 (Europa) El estándar europeo armonizado de accesibilidad de las TIC incorpora directamente los requisitos de WCAG 2.1 AA; en España se adopta como UNE-EN 301 549.
• ADA y Section 508 (Estados Unidos) Los tribunales estadounidenses usan WCAG 2.1 AA como referencia de accesibilidad digital bajo la ADA, y las normas revisadas de Section 508 incorporan WCAG 2.0 AA, con un uso creciente de 2.1 AA para el contenido nuevo.
• Estándar israelí 5568 Se alinea con WCAG 2.0 AA, con disposiciones adicionales para el soporte de los idiomas hebreo y árabe.

Cumplir WCAG 2.1 AA significa que cumple, o está muy cerca de cumplir, todos estos marcos normativos a la vez.

No tiene que construirlo usted mismo

Llevar todos estos requisitos a un tour de Matterport exige dominar a fondo el SDK de Matterport, el cumplimiento de WCAG, los patrones ARIA, la maquetación multilingüe (RTL incluido) y el diseño de interacción 3D. Es un cruce de competencias muy especializado que la mayoría de los equipos de desarrollo no tienen en casa.

Eso es lo que hace Geemaps Accessibility. Ya hemos resuelto cada uno de estos requisitos en producción —4 idiomas, cumplimiento pleno de WCAG 2.1 AA— para el despliegue de la Plaza Blanca del Ayuntamiento de Tel Aviv-Yafo en el Parque Wolfson. Aplicamos esa misma capa probada a su tour.