Accessibility Conformance Report

All meaningful images have descriptive alt text. Decorative elements (floating backgrounds, confetti, weather effects) are hidden from assistive technology with aria-hidden="true".

The Songs page contains prerecorded audio-only content (SEL songs). Synchronized lyrics are displayed in the karaoke player during playback. However, a static downloadable transcript of the full lyrics is not yet available outside of playback.

The Help Center includes one embedded YouTube video with YouTube's auto-generated captions available. All song lyrics are displayed as synchronized text during karaoke playback.

The embedded Help Center video is a simple UI walkthrough. No complex visual-only content requires audio description.

Semantic HTML structure is used throughout. Headings, lists, and landmarks convey document structure. ARIA roles (status, dialog, alert) communicate relationships programmatically.

DOM order matches visual presentation. Content flows logically for screen readers.

Instructions do not rely solely on shape, color, size, or visual location. Text labels accompany all interactive elements.

Color is not the sole means of conveying information. Icons, text labels, and patterns supplement color indicators.

Audio (songs page) does not autoplay. Users have full control over playback.

All interactive elements (buttons, links, form controls) are operable via keyboard. Activities use standard HTML buttons for navigation.

Focus is never trapped. Modal dialogs (solve modal, match celebration) use aria-modal and can be dismissed.

The application does not use single-character keyboard shortcuts.

Activities are teacher-paced, not time-limited. Teachers control progression through all views.

All animated content (floating backgrounds, confetti, weather effects) is suppressed when the user enables prefers-reduced-motion at the OS level. Decorative animations are hidden from assistive technology.

No content flashes more than three times per second.

Skip-to-main-content links are provided. Navigation landmarks allow users to jump between regions.

Every page and projector activity has a unique, descriptive browser tab title via the usePageTitle hook (e.g. "Strengths | Be The Buffalo").

Focus order follows logical reading order. Interactive elements receive focus in a meaningful sequence.

Link text is descriptive. Navigation items clearly indicate their destination.

No multipoint or path-based gestures are required. All interactions use simple click/tap.

Actions are triggered on pointer up, allowing cancellation by moving the pointer away.

Accessible names of controls match their visible text labels.

The application does not use device motion for any functionality.

The HTML lang attribute is set appropriately. The platform supports English and Spanish via next-intl.

Receiving focus does not trigger unexpected context changes.

Changing form settings does not automatically cause context changes without user confirmation.

Form errors (login, signup) are clearly identified in text with descriptive messages.

All form inputs have associated labels. Activity instructions are provided as text before interaction.

HTML is well-formed (generated by React/Next.js). No duplicate IDs or nesting errors.

Interactive elements use native HTML semantics or appropriate ARIA attributes. Custom controls have role, state, and name exposed to assistive technology.

The platform does not include live audio or video streaming.

The embedded Help Center video is a simple UI walkthrough that does not contain visual-only information requiring audio description.

Content is not restricted to a single display orientation. The responsive layout adapts to portrait and landscape.

Form inputs (email, password) use appropriate autocomplete attributes and input types.

Text colors meet 4.5:1 contrast ratio against backgrounds. The brand palette (warm browns on cream/white) was designed for adequate contrast.

Text can be resized up to 200% without loss of content or functionality. Layouts use responsive units (rem, Tailwind spacing scale).

Text is rendered as real text, not as images. Illustrations are decorative or supplemental.

Content reflows to a single column at 320px CSS width. Responsive breakpoints (sm, md, lg) handle layout adaptation.

UI components and graphical objects (buttons, borders, icons) have at least 3:1 contrast ratio.

Content remains functional when users override line height, letter spacing, word spacing, and paragraph spacing.

Tooltips and hover content are dismissible, hoverable, and persistent until dismissed.

Users can navigate via the lesson planner, direct activity links, projector dashboard, and browser navigation.

Headings describe the topic or purpose of content. Form labels clearly describe input fields.

Focus indicators are visible on interactive elements via browser defaults and Tailwind's focus ring utilities.

The bilingual system (English/Spanish) sets language context via next-intl. Language switching is available in all views.

Navigation patterns are consistent across pages. The projector header and back button appear in every activity.

Components with the same functionality use consistent labels and icons throughout the application.

When input errors are detected (login, signup), specific suggestions for correction are provided.

Subscription billing is handled through Stripe's hosted portal, which provides its own confirmation steps. Profile changes (email, password) require confirmation before saving.

Dynamic status updates use aria-live="polite" (scenario text, breaking news) and role="status" (score counters, summary stats) so screen readers announce changes without moving focus.