Page Structure
Each page uses semantic HTML landmarks: <header>, <nav>, <main>, and <footer>. Use your screen reader's landmark navigation to jump between them.
Site Accessibility
This website is for everyone.
We built this site with the same philosophy we bring to our school: access isn't an afterthought. Every feature, every page, and every interaction is designed so that all visitors can navigate, understand, and participate — regardless of ability, device, or preference.
Meet Capybara
Capybara is our AI voice assistant — available on every page of the site. It can answer questions about Common Grounds, read content aloud, and help you navigate. Just click the microphone button in the bottom-right corner or press Ctrl+M to start a conversation.
Accessibility Features
This site includes a comprehensive set of accessibility features — built in from day one, not bolted on after the fact. Use the accessibility toolbar (top-right corner) to customize your experience, or rely on the defaults we've carefully chosen.
Adjustable Font Size
Increase or decrease text size across the entire site using the toolbar. Four sizes available, from default to 150%.
Dyslexia-Friendly Font
Toggle OpenDyslexic, a typeface designed to increase readability for readers with dyslexia. One click in the toolbar.
High Contrast Modes
Choose between light and dark high-contrast themes that exceed WCAG AAA contrast ratios for maximum readability.
Reduced Motion
Disable animations, transitions, and auto-scrolling content. Also automatically honored via your OS-level prefers-reduced-motion setting.
Voice Interaction
Capybara, our AI voice assistant, lets you navigate, ask questions, and interact with the site entirely by voice.
Full Keyboard Navigation
Every interactive element is reachable and operable by keyboard. Visible focus indicators on all focusable elements.
Screen Reader Support
Semantic HTML, ARIA landmarks, descriptive labels, and live region announcements ensure a coherent screen reader experience.
Dark Mode
Automatic dark mode via prefers-color-scheme, plus manual toggle in the contrast settings. Easier on the eyes in low-light environments.
Responsive Design
Fully responsive layout that adapts to any screen size — phone, tablet, laptop, or ultrawide. Touch-friendly targets throughout.
Saved Preferences
Your accessibility settings are saved in your browser, so they persist across visits. No account required.
Skip Navigation
A "Skip to main content" link appears on keyboard focus, letting you bypass repetitive navigation and jump straight to the page content.
Descriptive Alt Text
All images include meaningful alternative text so screen reader users and users with images disabled get the full context.
Keyboard Shortcuts
Power users and keyboard-only users can use these shortcuts to navigate the site more efficiently.
| Shortcut | Action | Context |
|---|---|---|
| Tab | Move focus to the next interactive element | Global |
| Shift + Tab | Move focus to the previous interactive element | Global |
| Enter / Space | Activate the focused button or link | Global |
| Escape | Close open panel, menu, or modal | Menus & Panels |
| Ctrl + M | Toggle Capybara voice assistant | Global |
| Tab from page top | Reveal "Skip to main content" link | Navigation |
Screen reader users can also use heading-level navigation (H key in most screen readers) to jump between sections on any page.
Screen Reader Guide
We've structured every page to work well with assistive technology. Here are some tips for getting the most out of this site with a screen reader.
Heading Hierarchy
Headings follow a logical order (h1 → h2 → h3) on every page. Use heading navigation to scan page content quickly.
ARIA Labels
Navigation menus, sections, and interactive controls have descriptive ARIA labels so you always know where you are and what something does.
Live Announcements
Dynamic content changes — like Capybara responses or toolbar toggles — are announced via ARIA live regions so you don't miss updates.
Form Labels
All form inputs have visible, associated labels. Required fields are clearly marked. Error messages are programmatically linked to their fields.
Focus Management
When modals or panels open, focus moves into them. When they close, focus returns to the trigger. Focus is never lost or trapped unexpectedly.
Our Standards
We hold ourselves to the highest accessibility standards — not because we have to, but because everyone deserves equal access to information.
WCAG 2.1 Level AA
This site is designed to meet or exceed the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA. This means all text has sufficient contrast, all functionality is keyboard-operable, all content is navigable and understandable, and the site is robust enough to work with assistive technologies.
Section 508 Compliance
As a school committed to accessibility, we voluntarily align with Section 508 of the Rehabilitation Act, ensuring our digital content meets federal accessibility standards used by government agencies.
Continuous Improvement
Accessibility is not a checkbox — it's an ongoing commitment. We regularly audit our site with automated tools (axe, Lighthouse) and manual testing (keyboard navigation, screen readers) to identify and fix issues.