An education platform designed for everyone, with built-in accessibility features for users with visual, auditory, and motor disabilities.
Education Without Barriers
AccessiLearn is committed to making quality education accessible to everyone, regardless of their abilities. Our platform implements comprehensive accessibility standards to ensure that learning is inclusive, intuitive, and empowering for all users.
- Theme Modes: Light, Dark, and High-Contrast modes for visual clarity
- Text Sizing: Adjustable font sizes (Small, Normal, Large, Extra-Large)
- Floating Toolbar: Quick access to accessibility settings
- Persistent Settings: User preferences saved with localStorage
- Keyboard Navigation: Full keyboard support throughout the platform
- ARIA Labels: Semantic HTML with proper accessibility attributes
- Browse lessons across multiple subjects (Math, Science, English, History)
- Filter lessons by difficulty level (Beginner, Intermediate, Advanced)
- Track progress with visual indicators
- Quick access to lessons and quizzes
- Responsive design for mobile, tablet, and desktop
- Convert lesson content to audio using Web Speech API
- Play/pause controls with real-time status
- Accessible audio playback for visually impaired users
- Voice input using Web Speech Recognition API
- Voice commands support (try "next" or "prev" to navigate)
- Visual transcription feedback
- Error handling and retry options
- Translate lesson content to 100+ languages
- Uses MyMemory API for reliable translations
- Language selection dropdown
- Instant translation with visual feedback
- Previous/Next buttons to navigate between lessons
- Voice command support for "next" and "prev" to move between lessons
- Direct access to quiz button
- Multiple-choice questions with immediate feedback
- Audio playback of questions for accessibility
- Visual indicators for correct/incorrect answers
- Detailed results with score breakdown
- Explanation for each answer
- Retake quiz option for better learning
- Visual dashboard with interactive charts
- Bar chart showing performance across lessons
- Line chart tracking progress over time
- Statistics dashboard (Completed Lessons, Average Score, Completion Rate)
- Detailed lesson-by-lesson progress view
- Export progress as JSON or copy report to clipboard
- Glass morphism UI with smooth animations
- Responsive design that works on all devices
- LocalStorage for data persistence (no backend required)
- Error handling and user feedback
- Smooth transitions and micro-interactions
- Node.js 18+ or modern browser with Web Speech API support
- npm or yarn package manager
-
Clone the repository: ```bash git clone https://github.com/numcodes/accessilearn.git cd accessilearn ```
-
Install dependencies: ```bash npm install
yarn install ```
- Run the development server: ```bash npm run dev
yarn dev ```
- Open http://localhost:3000 in your browser
Deploy to Vercel with one click:
Or deploy manually: ```bash npm run build npm start ```
``` accessilearn/ ├── app/ │ ├── page.tsx # Home page │ ├── layout.tsx # Root layout │ ├── globals.css # Global styles & accessibility themes │ ├── dashboard/ │ │ └── page.tsx # Learning dashboard │ ├── lesson/ │ │ └── [id]/ │ │ └── page.tsx # Lesson page with TTS, STT, translation │ ├── quiz/ │ │ └── [id]/ │ │ └── page.tsx # Quiz page with audio support │ ├── progress/ │ │ └── page.tsx # Progress tracker │ └── api/ │ └── translate/ │ └── route.ts # Translation API ├── components/ │ └── accessibility-toolbar.tsx # Main accessibility toolbar ├── public/ # Static assets └── README.md # This file ```
- Frontend Framework: Next.js 16
- Styling: Tailwind CSS 4 with glass morphism effects
- Speech APIs: Web Speech API (TTS & STT)
- Translation: MyMemory API
- Storage: Browser localStorage
- Accessibility: WCAG 2.1 AA standards
- Charts: Recharts for data visualization
- Icons: Lucide React
The platform supports voice input with these commands:
- "next" - Navigate to the next lesson
- "prev" or "previous" - Navigate to the previous lesson
- Say any text to see it converted to speech-to-text
- Read lesson content aloud with Text-to-Speech
- Answer quiz questions with voice input
- Full voice input support in text areas
- High-contrast mode for users with low vision
- Adjustable text sizes up to Extra-Large
- Clear color contrast ratios (WCAG AA compliant)
- Glass morphism with readable backgrounds
- Text-to-Speech for all lesson content
- Audio playback of quiz questions
- Visual transcription of voice input
- Full keyboard navigation support
- Voice input as alternative to mouse/touch
- Large click targets for buttons
- Semantic HTML for screen reader support
- Clear, simple language
- Organized content structure
- Visual progress indicators
- Immediate feedback on interactions
AccessiLearn works best on:
- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Note: Speech Recognition API requires a modern browser. Check caniuse.com for detailed support.
- Go to Dashboard
- Click "Learn" on any lesson card
- Use the toolbar to adjust font size or theme
- Click "Play Audio Lesson" to hear content
- Use "Translate Lesson" to switch languages
- Navigate with "Next/Prev" buttons or voice commands
- From the lesson page, click "Go to Quiz"
- Read the question or click the speaker icon for audio
- Select your answer or use voice input
- See immediate feedback
- Review results with explanations
- Navigate to "Progress" from the dashboard
- View charts and statistics
- See detailed lesson-by-lesson progress
- Export your progress as needed
We welcome contributions! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- Built with Love by Num Codes
- Accessibility standards from W3C WCAG
- Icons from Lucide React
- Charts from Recharts
For issues, questions, or accessibility feedback, please:
- Open an issue on GitHub
- Contact us at ugochukwunweze899@gmail.com
- Check our Accessibility Statement
Built for Everyone By Num Codes 🌍
AccessiLearn believes education should be accessible to all. If you encounter any accessibility barriers, please let us know!