Portfolio Project

Notes App with Accessibility Features

A WCAG 2.1 Level AA compliant note-taking application built for everyone.

Case Study

Project Overview

Situation

Many note-taking applications fail to serve users with disabilities, language barriers, or alternative input preferences. There was a need for an inclusive, accessible note-taking solution that complies with modern web accessibility standards (WCAG 2.1 Level AA) while remaining performant and user-friendly.

Key Features Built
Text-to-Speech (4 languages) Dark Mode Zoom 50–300% Offline Voice Input Full Keyboard Nav Screen Reader Support ARIA Labels Rich Text Editor
Technical Stack

Vanilla JavaScript · Web Speech API · Vosk-Browser · CSS Custom Properties · contentEditable · localStorage · Semantic HTML5

Results
Live Demo

Try the Application

The fully deployed application demonstrates every accessibility feature described in this case study. Explore the live build without leaving this page:

  • Switch between light & dark mode
  • Use the built-in text-to-speech in English, French, Portuguese, or Mandarin
  • Record a note hands-free with offline voice recognition
  • Test full keyboard navigation with visible focus indicators
  • Adjust zoom from 50 % to 300 %