Skip to content

Accessibility

We believe that Do Cool Things the Right Way!® means building for everyone — not just the people who use the web the same way we do. If you navigate with a keyboard, rely on a screen reader, prefer reduced motion, or experience the web differently for any reason, we want Island Pitch to work for you. Not as an afterthought — as the default.

We believe transparency is more valuable than a perfect score on paper. So here’s an honest look at where we are, what works well, and where we’re still working.

Our Standard

We target the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA and reach for Level AAA where we can. This is a self-assessment — we have not been independently audited. We test with real assistive technology (VoiceOver on macOS/iOS, keyboard-only navigation) and automated tools (axe-core, Lighthouse), but we know testing is not the same as lived experience. Your feedback fills that gap.

What Works Well

  • Keyboard navigation — every interactive element is reachable and operable with Tab, Enter, Space, and Escape
  • Skip-to-content links on every page so you can bypass the header
  • Focus indicators — 3px orange outlines (dark mode) or deep-sea blue (light mode) on every focusable element. We never use outline: none
  • Color contrast — 4.5:1 minimum for all text, 3:1 for UI components and borders, verified in both dark and light mode
  • Reduced motion — every animation respects prefers-reduced-motion: reduce in both CSS and JavaScript. Animated character GIFs swap to static PNGs. Score lift-off, toast slides, and screen shake are all suppressed. Values still update.
  • Screen reader support — ARIA landmarks, live regions, descriptive labels, and proper heading hierarchy (one <h1> per page, no skipped levels)
  • Modal dialogs — role="dialog", aria-modal, focus trap (Tab wraps), Escape closes, focus returns to the triggering element
  • Dark & light mode with appropriate contrast in both — because “readable” means different things at different times of day
  • Responsive reflow — content reflows at 320px without horizontal scrolling, text resizable up to 200%
  • Multi-language — English, Spanish, Japanese, and Chinese with proper lang attributes on language boundaries

Color Contrast Details

We verify contrast in both dark and light themes. Here are our primary pairings:

Color On Dark (#030400) On Light (#F7F7FC) Usage
Island White (#F7F7FC) 19.5:1 ✓ — Body text (dark mode)
Island Orange (#FF8F05) 7.5:1 ✓ 2.6:1 ✗ Accents, focus rings (dark only — never text on light)
Deep Sea (#01579B) — 7.1:1 ✓ Primary text, links, focus rings (light mode)
Pride Blue (#4FC3F7) 9.4:1 ✓ 1.8:1 ✗ Highlights (dark only — replaced with Deep Sea on light)
Sunset Gold (#FFD54F) 12.8:1 ✓ — Decorative borders, graduation card

Colors marked ✗ are never used for text in that mode — we swap to a compliant alternative.

Learn AI — The Interactive Experience

Our Learn AI page is an interactive AI literacy training built as a retro game screen. Making a game accessible is genuinely hard, and we’ve put significant work into it. Here’s what a screen reader user experiences:

  • A dedicated announcer (#game-announce) describes every state change — connecting, listening, speaking, thinking, error, ended — so you always know what’s happening
  • Character appearances are announced (“IP Bot appears, waving hello”) and departures too
  • Level-up announcements followed by rich scene descriptions (“The sun breaks the horizon in brilliant orange and gold. Stars are nearly gone. Clouds catch the warm light.”) so blind players experience the same world sighted players see
  • Practice panel focus management — focus moves to the practice input when opened and returns to the main chat when closed
  • Text mode is always available as an alternative to voice — no microphone required
  • All primary touch targets are at least 44×44 CSS pixels

Known Limitations

We’d rather be honest about what isn’t perfect than pretend everything is:

  • HubSpot third-party widgets — the cookie consent banner, chat widget, and some form elements are managed by HubSpot. We can’t fully control their accessibility. We’ve flagged issues with HubSpot and will update as they improve.
  • Voice mode in Learn AI — requires microphone access and real-time audio via WebRTC. This may not work for all users or all browsers. Text mode provides the same complete experience without a microphone.
  • The 7-layer parallax scene — the animated sky, stars, clouds, and city are purely decorative (aria-hidden="true"). Screen reader users get the scene descriptions instead. We think that’s actually a richer experience in some ways.
  • ElevenLabs AI agent responses — we don’t control the content the AI generates in real-time. Responses are streamed into an aria-live region so they’re read chronologically, but we can’t guarantee the AI won’t occasionally produce confusing output.
  • CSP and inline scripts — HubSpot requires 'unsafe-inline' for scripts, which weakens our Content Security Policy. This is a platform limitation we’re working around.

Compatibility

We primarily test with:

  • Browsers: Chrome, Safari, Firefox, and Edge on desktop; Safari on iOS; Chrome on Android
  • Screen readers: VoiceOver (macOS and iOS)
  • Viewports: 375px (phone), 768px (tablet), 1280px+ (desktop)

We haven’t yet tested with NVDA, JAWS, or TalkBack. If you use one of these and hit issues, please tell us — we want to expand our testing coverage based on real user needs.

Technical Standards

  • HTML5 semantic elements with ARIA 1.2 patterns where needed
  • CSS custom properties (--ip-*) for consistent theming
  • HubSpot CMS with React islands (client-hydrated components)
  • ElevenLabs Conversational AI SDK for voice/text interaction
  • No jQuery, no Bootstrap — minimal dependencies for a lighter DOM

Testing

Our current testing practice includes:

  • VoiceOver on macOS — full game walkthrough verified
  • Keyboard-only navigation — complete flows without a mouse
  • Playwright screenshot tests across viewport sizes (mobile, tablet, desktop)
  • Manual contrast checks in both dark and light mode
  • prefers-reduced-motion verification in both CSS and JavaScript

This is a self-assessment. We have not been independently audited. We know automated tools catch about 30% of real-world accessibility issues, which is why your feedback matters so much.

Tell Us What’s Broken

If something doesn’t work for you, we want to know. Not because we’re required to — because we can’t fix what we don’t know about.

We aim to respond within 5 business days. If something is actively blocking you, say so — we’ll prioritize it.

Last Reviewed

. We update this page when we make significant changes.