Buffalo knight representing accessibility protection

Informe de conformidad de accesibilidad

VPAT® 2.5 — WCAG 2.1 Level AA

Información del producto

Nombre del producto

Be The Buffalo Classroom

Fecha del informe

Octubre 2026

Descripción del producto

Plataforma de aprendizaje socioemocional para K-5

Estándar de evaluación

WCAG 2.1 Level AA

Resumen de conformidad

WCAG 2.1 Nivel AA — Cumple parcialmente

Be The Buffalo Classroom cumple parcialmente con la conformidad WCAG 2.1 Nivel AA. De los 50 criterios de éxito, 44 son totalmente compatibles, 1 parcialmente compatibles y 5 no son aplicables al producto.

Compatible

Parcialmente compatible

No compatible

No aplicable

Características clave de accesibilidad

Soporte para lectores de pantalla

Las más de 40 actividades de proyector utilizan atributos ARIA (aria-hidden, aria-live, role) para proporcionar anuncios significativos a lectores de pantalla y ocultar contenido decorativo.

Movimiento reducido

Una consulta de medios global prefers-reduced-motion desactiva las animaciones y transiciones CSS. Framer Motion también respeta esta configuración automáticamente.

Navegación por teclado

Todos los elementos interactivos son accesibles mediante teclado. Los enlaces de saltar al contenido principal y el orden lógico de enfoque permiten una navegación eficiente.

Títulos de página únicos

Cada página y actividad establece un título único en la pestaña del navegador (por ejemplo, 'Fortalezas | Be The Buffalo') mediante el hook usePageTitle.

Soporte bilingüe

Traducciones completas en inglés y español para todo el contenido, con cambio de idioma disponible en cada vista a través de next-intl.

Diseño responsivo

El contenido se adapta a todos los tamaños de pantalla desde 320px hasta pantallas de proyector grandes. Sin desplazamiento horizontal en ningún punto de quiebre.

Texto alternativo descriptivo

Todas las imágenes significativas tienen texto alternativo con contexto (por ejemplo, 'Búfalo celebrando fortalezas' en lugar del genérico 'Celebración').

Anuncios de estado

Los cambios dinámicos de contenido (puntuaciones, escenarios, noticias) utilizan regiones aria-live y role='status' para anunciar actualizaciones sin mover el enfoque.

Criterios de éxito WCAG 2.1 Nivel A

Criterios de éxito WCAG 2.1 Nivel AA

Métodos de evaluación

Este informe se basa en la evaluación de la plataforma Be The Buffalo Classroom utilizando los siguientes métodos:

✓Revisión manual del código de las más de 40 actividades interactivas de proyector
✓Verificación de atributos ARIA, HTML semántico y regiones de referencia
✓Pruebas de navegación solo con teclado en todas las vistas de actividades
✓Verificación automatizada con reglas de accesibilidad de Tailwind CSS y ESLint
✓Pruebas de diseño responsivo en todos los puntos de quiebre (320px – 1920px)
✓Verificación del comportamiento de prefers-reduced-motion

Comentarios y contacto

Estamos comprometidos a hacer que Be The Buffalo sea accesible para todos los educadores y estudiantes. Si encuentras una barrera de accesibilidad o tienes sugerencias de mejora, por favor contáctanos:

📧 accessibility@bethebuffaloclassroom.com

VPAT® es una marca registrada del Consejo de la Industria de Tecnología de la Información (ITI). Este informe sigue el formato ITI VPAT® 2.5. Este Informe de Conformidad de Accesibilidad cubre la aplicación web Be The Buffalo Classroom en classroom.bethebuffaloclassroom.com.

Política de privacidad Términos de servicio

Criterio	Conformidad	Observaciones
1.1.1Contenido no textual Todas las imágenes significativas tienen texto alternativo descriptivo. Los elementos decorativos (fondos flotantes, confeti, efectos climáticos) se ocultan de la tecnología de asistencia con aria-hidden='true'.	Compatible	Todas las imágenes significativas tienen texto alternativo descriptivo. Los elementos decorativos (fondos flotantes, confeti, efectos climáticos) se ocultan de la tecnología de asistencia con aria-hidden='true'.
1.2.1Solo audio y solo video (pregrabado) La página de canciones contiene contenido pregrabado de solo audio (canciones SEL). Las letras sincronizadas se muestran en el reproductor de karaoke durante la reproducción. Sin embargo, una transcripción descargable estática de las letras completas aún no está disponible fuera de la reproducción.	Parcialmente compatible	La página de canciones contiene contenido pregrabado de solo audio (canciones SEL). Las letras sincronizadas se muestran en el reproductor de karaoke durante la reproducción. Sin embargo, una transcripción descargable estática de las letras completas aún no está disponible fuera de la reproducción.
1.2.2Subtítulos (pregrabado) El Centro de ayuda incluye un video de YouTube integrado con subtítulos autogenerados disponibles. Todas las letras de las canciones se muestran como texto sincronizado durante la reproducción de karaoke.	Compatible	El Centro de ayuda incluye un video de YouTube integrado con subtítulos autogenerados disponibles. Todas las letras de las canciones se muestran como texto sincronizado durante la reproducción de karaoke.
1.2.3Audiodescripción o alternativa multimedia (pregrabado) El video integrado del Centro de ayuda es un recorrido simple de la interfaz. Ningún contenido exclusivamente visual requiere audiodescripción.	No aplicable	El video integrado del Centro de ayuda es un recorrido simple de la interfaz. Ningún contenido exclusivamente visual requiere audiodescripción.
1.3.1Información y relaciones Se utiliza estructura HTML semántica en todo el sitio. Encabezados, listas y puntos de referencia transmiten la estructura del documento. Los roles ARIA (status, dialog, alert) comunican relaciones programáticamente.	Compatible	Se utiliza estructura HTML semántica en todo el sitio. Encabezados, listas y puntos de referencia transmiten la estructura del documento. Los roles ARIA (status, dialog, alert) comunican relaciones programáticamente.
1.3.2Secuencia significativa El orden del DOM coincide con la presentación visual. El contenido fluye lógicamente para los lectores de pantalla.	Compatible	El orden del DOM coincide con la presentación visual. El contenido fluye lógicamente para los lectores de pantalla.
1.3.3Características sensoriales Las instrucciones no dependen únicamente de la forma, el color, el tamaño o la ubicación visual. Las etiquetas de texto acompañan a todos los elementos interactivos.	Compatible	Las instrucciones no dependen únicamente de la forma, el color, el tamaño o la ubicación visual. Las etiquetas de texto acompañan a todos los elementos interactivos.
1.4.1Uso del color El color no es el único medio para transmitir información. Íconos, etiquetas de texto y patrones complementan los indicadores de color.	Compatible	El color no es el único medio para transmitir información. Íconos, etiquetas de texto y patrones complementan los indicadores de color.
1.4.2Control de audio El audio (página de canciones) no se reproduce automáticamente. Los usuarios tienen control total sobre la reproducción.	Compatible	El audio (página de canciones) no se reproduce automáticamente. Los usuarios tienen control total sobre la reproducción.
2.1.1Teclado Todos los elementos interactivos (botones, enlaces, controles de formulario) son operables mediante teclado. Las actividades usan botones HTML estándar para la navegación.	Compatible	Todos los elementos interactivos (botones, enlaces, controles de formulario) son operables mediante teclado. Las actividades usan botones HTML estándar para la navegación.
2.1.2Sin trampa de teclado El foco nunca queda atrapado. Los diálogos modales (modal de resolución, celebración de coincidencia) usan aria-modal y pueden ser descartados.	Compatible	El foco nunca queda atrapado. Los diálogos modales (modal de resolución, celebración de coincidencia) usan aria-modal y pueden ser descartados.
2.1.4Atajos de tecla de carácter La aplicación no utiliza atajos de teclado de un solo carácter.	No aplicable	La aplicación no utiliza atajos de teclado de un solo carácter.
2.2.1Tiempo ajustable Las actividades son dirigidas por el maestro, sin límite de tiempo. Los maestros controlan la progresión a través de todas las vistas.	Compatible	Las actividades son dirigidas por el maestro, sin límite de tiempo. Los maestros controlan la progresión a través de todas las vistas.
2.2.2Pausar, detener, ocultar Todo el contenido animado (fondos flotantes, confeti, efectos climáticos) se suprime cuando el usuario activa prefers-reduced-motion a nivel del sistema operativo. Las animaciones decorativas se ocultan de la tecnología de asistencia.	Compatible	Todo el contenido animado (fondos flotantes, confeti, efectos climáticos) se suprime cuando el usuario activa prefers-reduced-motion a nivel del sistema operativo. Las animaciones decorativas se ocultan de la tecnología de asistencia.
2.3.1Tres destellos o por debajo del umbral Ningún contenido destella más de tres veces por segundo.	Compatible	Ningún contenido destella más de tres veces por segundo.
2.4.1Evitar bloques Se proporcionan enlaces de saltar al contenido principal. Los puntos de referencia de navegación permiten a los usuarios saltar entre regiones.	Compatible	Se proporcionan enlaces de saltar al contenido principal. Los puntos de referencia de navegación permiten a los usuarios saltar entre regiones.
2.4.2Página titulada Cada página y actividad de proyector tiene un título único y descriptivo en la pestaña del navegador mediante el hook usePageTitle (por ejemplo, 'Fortalezas \| Be The Buffalo').	Compatible	Cada página y actividad de proyector tiene un título único y descriptivo en la pestaña del navegador mediante el hook usePageTitle (por ejemplo, 'Fortalezas \| Be The Buffalo').
2.4.3Orden del foco El orden del foco sigue el orden lógico de lectura. Los elementos interactivos reciben el foco en una secuencia significativa.	Compatible	El orden del foco sigue el orden lógico de lectura. Los elementos interactivos reciben el foco en una secuencia significativa.
2.4.4Propósito del enlace (en contexto) El texto del enlace es descriptivo. Los elementos de navegación indican claramente su destino.	Compatible	El texto del enlace es descriptivo. Los elementos de navegación indican claramente su destino.
2.5.1Gestos del puntero No se requieren gestos multipunto ni basados en trayectoria. Todas las interacciones usan clic/toque simple.	Compatible	No se requieren gestos multipunto ni basados en trayectoria. Todas las interacciones usan clic/toque simple.
2.5.2Cancelación del puntero Las acciones se activan al soltar el puntero, permitiendo la cancelación al mover el puntero fuera del elemento.	Compatible	Las acciones se activan al soltar el puntero, permitiendo la cancelación al mover el puntero fuera del elemento.
2.5.3Etiqueta en el nombre Los nombres accesibles de los controles coinciden con sus etiquetas de texto visibles.	Compatible	Los nombres accesibles de los controles coinciden con sus etiquetas de texto visibles.
2.5.4Activación por movimiento La aplicación no utiliza el movimiento del dispositivo para ninguna funcionalidad.	No aplicable	La aplicación no utiliza el movimiento del dispositivo para ninguna funcionalidad.
3.1.1Idioma de la página El atributo lang del HTML se establece apropiadamente. La plataforma soporta inglés y español mediante next-intl.	Compatible	El atributo lang del HTML se establece apropiadamente. La plataforma soporta inglés y español mediante next-intl.
3.2.1Al recibir el foco Recibir el foco no desencadena cambios inesperados de contexto.	Compatible	Recibir el foco no desencadena cambios inesperados de contexto.
3.2.2Al recibir entrada Cambiar la configuración de formularios no causa automáticamente cambios de contexto sin confirmación del usuario.	Compatible	Cambiar la configuración de formularios no causa automáticamente cambios de contexto sin confirmación del usuario.
3.3.1Identificación de errores Los errores de formulario (inicio de sesión, registro) se identifican claramente en texto con mensajes descriptivos.	Compatible	Los errores de formulario (inicio de sesión, registro) se identifican claramente en texto con mensajes descriptivos.
3.3.2Etiquetas o instrucciones Todos los campos de formulario tienen etiquetas asociadas. Las instrucciones de las actividades se proporcionan como texto antes de la interacción.	Compatible	Todos los campos de formulario tienen etiquetas asociadas. Las instrucciones de las actividades se proporcionan como texto antes de la interacción.
4.1.1Análisis sintáctico El HTML es bien formado (generado por React/Next.js). Sin IDs duplicados ni errores de anidamiento.	Compatible	El HTML es bien formado (generado por React/Next.js). Sin IDs duplicados ni errores de anidamiento.
4.1.2Nombre, rol, valor Los elementos interactivos usan semántica HTML nativa o atributos ARIA apropiados. Los controles personalizados tienen rol, estado y nombre expuestos a la tecnología de asistencia.	Compatible	Los elementos interactivos usan semántica HTML nativa o atributos ARIA apropiados. Los controles personalizados tienen rol, estado y nombre expuestos a la tecnología de asistencia.

Criterio	Conformidad	Observaciones
1.2.4Subtítulos (en vivo) La plataforma no incluye transmisión de audio o video en vivo.	No aplicable	La plataforma no incluye transmisión de audio o video en vivo.
1.2.5Audiodescripción (pregrabado) El video integrado del Centro de ayuda es un recorrido simple de la interfaz que no contiene información exclusivamente visual que requiera audiodescripción.	No aplicable	El video integrado del Centro de ayuda es un recorrido simple de la interfaz que no contiene información exclusivamente visual que requiera audiodescripción.
1.3.4Orientación El contenido no está restringido a una sola orientación de pantalla. El diseño responsivo se adapta a vertical y horizontal.	Compatible	El contenido no está restringido a una sola orientación de pantalla. El diseño responsivo se adapta a vertical y horizontal.
1.3.5Identificar el propósito de la entrada Los campos de formulario (correo electrónico, contraseña) usan atributos autocomplete y tipos de entrada apropiados.	Compatible	Los campos de formulario (correo electrónico, contraseña) usan atributos autocomplete y tipos de entrada apropiados.
1.4.3Contraste (mínimo) Los colores de texto cumplen con la relación de contraste 4.5:1 contra los fondos. La paleta de marca (marrones cálidos sobre crema/blanco) fue diseñada para un contraste adecuado.	Compatible	Los colores de texto cumplen con la relación de contraste 4.5:1 contra los fondos. La paleta de marca (marrones cálidos sobre crema/blanco) fue diseñada para un contraste adecuado.
1.4.4Redimensionar texto El texto puede redimensionarse hasta un 200% sin pérdida de contenido o funcionalidad. Los diseños usan unidades responsivas (rem, escala de espaciado de Tailwind).	Compatible	El texto puede redimensionarse hasta un 200% sin pérdida de contenido o funcionalidad. Los diseños usan unidades responsivas (rem, escala de espaciado de Tailwind).
1.4.5Imágenes de texto El texto se renderiza como texto real, no como imágenes. Las ilustraciones son decorativas o complementarias.	Compatible	El texto se renderiza como texto real, no como imágenes. Las ilustraciones son decorativas o complementarias.
1.4.10Reajuste El contenido se reajusta a una sola columna a 320px de ancho CSS. Los puntos de quiebre responsivos (sm, md, lg) manejan la adaptación del diseño.	Compatible	El contenido se reajusta a una sola columna a 320px de ancho CSS. Los puntos de quiebre responsivos (sm, md, lg) manejan la adaptación del diseño.
1.4.11Contraste de elementos no textuales Los componentes de la interfaz y objetos gráficos (botones, bordes, íconos) tienen al menos una relación de contraste 3:1.	Compatible	Los componentes de la interfaz y objetos gráficos (botones, bordes, íconos) tienen al menos una relación de contraste 3:1.
1.4.12Espaciado del texto El contenido sigue siendo funcional cuando los usuarios modifican la altura de línea, el espaciado entre letras, el espaciado entre palabras y el espaciado entre párrafos.	Compatible	El contenido sigue siendo funcional cuando los usuarios modifican la altura de línea, el espaciado entre letras, el espaciado entre palabras y el espaciado entre párrafos.
1.4.13Contenido en hover o foco Los tooltips y el contenido en hover son descartables, se pueden recorrer y persisten hasta ser descartados.	Compatible	Los tooltips y el contenido en hover son descartables, se pueden recorrer y persisten hasta ser descartados.
2.4.5Múltiples vías Los usuarios pueden navegar a través del planificador de lecciones, enlaces directos a actividades, panel del proyector y navegación del navegador.	Compatible	Los usuarios pueden navegar a través del planificador de lecciones, enlaces directos a actividades, panel del proyector y navegación del navegador.
2.4.6Encabezados y etiquetas Los encabezados describen el tema o propósito del contenido. Las etiquetas de formulario describen claramente los campos de entrada.	Compatible	Los encabezados describen el tema o propósito del contenido. Las etiquetas de formulario describen claramente los campos de entrada.
2.4.7Foco visible Los indicadores de foco son visibles en los elementos interactivos mediante los valores predeterminados del navegador y las utilidades de anillo de foco de Tailwind.	Compatible	Los indicadores de foco son visibles en los elementos interactivos mediante los valores predeterminados del navegador y las utilidades de anillo de foco de Tailwind.
3.1.2Idioma de las partes El sistema bilingüe (inglés/español) establece el contexto de idioma mediante next-intl. El cambio de idioma está disponible en todas las vistas.	Compatible	El sistema bilingüe (inglés/español) establece el contexto de idioma mediante next-intl. El cambio de idioma está disponible en todas las vistas.
3.2.3Navegación consistente Los patrones de navegación son consistentes en todas las páginas. El encabezado del proyector y el botón de retroceso aparecen en cada actividad.	Compatible	Los patrones de navegación son consistentes en todas las páginas. El encabezado del proyector y el botón de retroceso aparecen en cada actividad.
3.2.4Identificación consistente Los componentes con la misma funcionalidad usan etiquetas e íconos consistentes en toda la aplicación.	Compatible	Los componentes con la misma funcionalidad usan etiquetas e íconos consistentes en toda la aplicación.
3.3.3Sugerencia de error Cuando se detectan errores de entrada (inicio de sesión, registro), se proporcionan sugerencias específicas para la corrección.	Compatible	Cuando se detectan errores de entrada (inicio de sesión, registro), se proporcionan sugerencias específicas para la corrección.
3.3.4Prevención de errores (legal, financiero, datos) La facturación de suscripciones se maneja a través del portal alojado de Stripe, que proporciona sus propios pasos de confirmación. Los cambios de perfil (correo electrónico, contraseña) requieren confirmación antes de guardar.	Compatible	La facturación de suscripciones se maneja a través del portal alojado de Stripe, que proporciona sus propios pasos de confirmación. Los cambios de perfil (correo electrónico, contraseña) requieren confirmación antes de guardar.
4.1.3Mensajes de estado Las actualizaciones dinámicas de estado usan aria-live='polite' (texto de escenarios, noticias de última hora) y role='status' (contadores de puntuación, estadísticas resumidas) para que los lectores de pantalla anuncien los cambios sin mover el foco.	Compatible	Las actualizaciones dinámicas de estado usan aria-live='polite' (texto de escenarios, noticias de última hora) y role='status' (contadores de puntuación, estadísticas resumidas) para que los lectores de pantalla anuncien los cambios sin mover el foco.