Accessibility Hub

A free, publicly available web platform serving as the definitive North American hub for accessibility and inclusivity resources. Built to demonstrate that accessibility expertise and accessible design are inseparable — this platform is itself an exemplar of WCAG 2.2 AA compliance.

Mission

To make accessibility knowledge, planning tools, and resource directories universally available — removing cost, jargon, and complexity as barriers to a more inclusive world.

Overview

Accessibility Hub addresses a critical gap in the ecosystem: small-to-medium businesses seeking to improve accessibility compliance have no single, trustworthy, action-oriented destination to start from. Individuals with disabilities struggle to find consolidated information on funding, assistive technologies, legal rights, and support services.

The platform launches three core modules:

• Accessibility Planner — Interactive tool for SMBs to create printable accessibility action plans
• Resource Directory — Curated, searchable collection of accessibility tools, programs, and services
• Glossary — Living reference for accessibility terminology

Technical Architecture

Tech Stack

• Framework: Next.js 16 with App Router (React 19)
• Language: TypeScript with strict type checking
• Styling: Tailwind CSS 4 with dark mode support
• Backend/CMS: Wix Headless SDK for content management
• PDF Generation: @react-pdf/renderer for client-side PDF export
• Testing: Vitest + React Testing Library
• Deployment: Cloudflare Pages
• Code Quality: ESLint, Prettier, TypeDoc

Key Features

• WCAG 2.2 AA Compliant — Accessibility is a hard launch requirement, not an afterthought

  • Keyboard-only navigation throughout
  • Screen reader support with proper ARIA patterns
  • 24×24px minimum touch targets
  • High contrast dark mode
  • Skip-to-content links
  • Semantic HTML structure

• Real-Time Hand Evaluation — Interactive filtering and search with instant results

• PDF Export — Generate printable accessibility plans entirely client-side

• CMS-Driven Content — Content updates via Wix without code changes

• Responsive Design — Mobile-first, works across all device sizes

• Comprehensive Testing — 1300+ lines of component tests ensuring reliability

My Contributions

DevOps & Infrastructure

I owned the complete DevOps pipeline and infrastructure setup:

CI/CD Pipeline

• Architected GitHub Actions workflow for automated testing
• Configured linting (ESLint) checks on every commit
• Integrated Vitest test suite into pipeline — all tests run automatically
• Set up Cloudflare Pages to watch the repository and auto-deploy on every push to main
• Note: Prettier was added to the repo for local development but not integrated into CI/CD — a lesson for future projects on automating code formatting early

Documentation Automation

• Implemented TypeDoc auto-generation to create API documentation on every merge
• Configured orphan branch strategy (docs-static) to keep auto-generated docs separate from main branch
• Documentation stays in sync with code without cluttering Git history

Code Quality & Review

• Managed all pull request reviews and merges
• Enforced code quality standards across React components, TypeScript types, and test coverage
• Proactively identified and fixed issues across the codebase

Environment & Configuration

• Configured .env management for secure environment variable handling
• Set up ESLint and Prettier configuration for team-wide code consistency
• Coordinated development environment setup across team

Code Contributions

Beyond DevOps, I contributed to the codebase as needed:

• Fixed TypeScript type issues to maintain strict type safety
• Improved test coverage in Vitest test suites
• Refactored React components for better readability and maintainability
• Enhanced error handling and logging strategies

Getting Started

Prerequisites

• Node.js 20+ or 22+
• pnpm (or npm/yarn)
• Environment variables (see .env.example)

Installation

# Clone the repository
git clone https://github.com/BenJECole/accessibility-hub.git
cd accessibility-hub

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Wix API credentials

Development

# Start development server
pnpm run dev

# Run linting
pnpm run lint

# Run tests
pnpm run test

# Format code
pnpm run format

Build & Deployment

# Build for production
pnpm run build

# Start production server
pnpm run start

The application is automatically deployed to Cloudflare Pages on every push to the main branch via GitHub Actions.

Testing

The project includes comprehensive test coverage using Vitest and React Testing Library:

# Run all tests
pnpm run test

# Run tests in watch mode
pnpm run test -- --watch

# Generate coverage report
pnpm run test -- --coverage

Test suites cover:

• Component rendering and user interaction
• Search and filtering functionality
• PDF generation and modal behavior
• Accessibility compliance checks

Documentation

Auto-generated API documentation is available in the docs-static branch. To build documentation locally:

pnpm run build
# Documentation is generated in the `out/docs` directory

Architecture Notes

Why Next.js 16 with App Router?

• Server Components by default reduce client-side JavaScript
• Built-in optimization and performance
• SEO-friendly with automatic metadata generation
• Excellent DX for rapid iteration

Why Wix Headless CMS?

• Content updates without code deployments
• Team members can manage resources, glossary, and plan content
• Typed, queryable API with strong schema validation
• Scales without database management overhead

Why Cloudflare Pages?

• Fast, global CDN distribution
• Zero-config Git integration with GitHub Actions
• Automatic HTTPS and security headers
• Cost-effective for static/server-rendered sites

WCAG 2.2 AA Compliance

Accessibility compliance was a hard launch gate. Implementation includes:

• Keyboard Navigation: All interactive elements keyboard accessible
• ARIA Patterns: aria-expanded, aria-controls, role attributes for clarity
• Focus Management: Visible focus indicators, logical tab order
• Color & Contrast: WCAG AA color contrast ratios throughout
• Semantic HTML: Proper heading hierarchy, form labels, alt text
• Responsive Touch Targets: Minimum 24×24px clickable areas
• Dark Mode: Full dark mode support without sacrificing contrast
• Skip Links: Skip-to-content navigation for keyboard users

Collaboration

This was a collaborative final project developed by Group 2 in WEBD5020.

My Role: DevOps, Infrastructure, Code Quality, PR Management

Team: Contributed alongside talented designers and frontend developers who built the UI components, styling, and user experience.

Future Enhancements

Potential improvements for a v2:

• User accounts and saved plans
• Community contributions and reviews
• Integration with accessibility auditing tools
• Mobile app (React Native)
• Multi-language support
• Advanced analytics for tracking impact

License

MIT License — See LICENSE file for details.

---

Note: This project demonstrates that accessibility expertise and accessible design are inseparable. Every architectural decision, component, and interaction was evaluated against WCAG 2.2 AA standards. If this platform is itself inaccessible, it fails its core mission.