A modern, accessible todo list application built with TypeScript and Vite, demonstrating best practices in web accessibility (WCAG 2.1 compliance).
This project showcases how to build an inclusive web application that works for everyone, including users with disabilities. The todo list features comprehensive accessibility implementations that ensure keyboard navigation, screen reader compatibility, and proper semantic HTML structure.
- Full keyboard accessibility with logical tab order
- Focus management with proper focus indicators
- Keyboard shortcuts for all interactive elements
- Semantic HTML structure with proper heading hierarchy
- ARIA labels and descriptions for interactive elements
- Descriptive text for icons and buttons
- Proper form labeling and associations
- High contrast color scheme
- Clear focus indicators
- Scalable typography
- Custom scrollbar styling for better visibility
- Proper button and input semantics
- Dialog modal with backdrop for confirmation dialogs
- Form validation with accessible error messaging
- Task counter with live updates
- TypeScript - Type-safe JavaScript development
- Vite - Fast build tool and development server
- Vanilla CSS - Custom styling with accessibility considerations
- HTML5 - Semantic markup with ARIA attributes
Visit the live version of the application at: https://web-accessibility-todo-list.netlify.app/
- Node.js (version 16 or higher)
- bun package manager
- Clone the repository:
git clone https://github.com/BartoszButrymSoftwareMill/web-accessibility-todo-list.git
cd web-accessibility-todo-list- Install dependencies:
bun install- Start the development server:
bun run dev- Open your browser and navigate to
http://localhost:5173
bun run buildStart the production server:
bun run previewOpen your browser and navigate to http://localhost:4173
- ✅ Add new tasks with form validation
- ✅ Mark tasks as complete/incomplete
- ✅ Delete individual tasks
- ✅ Clear all tasks at once
- ✅ Real-time task counter
- ✅ Responsive design
- ✅ Full keyboard navigation
- ✅ Screen reader optimized
The application follows inclusive design principles:
- Perceivable: Information is presented in ways users can perceive
- Operable: Interface components are operable by all users
- Understandable: Information and operation are understandable
- Robust: Content is robust enough to be interpreted by assistive technologies
The codebase is structured for maintainability and accessibility:
src/main.ts- Core application logic with accessibility considerationssrc/utils.ts- Utility functions including accessible SVG componentssrc/style.css- Styling with focus on accessibility and usabilityindex.html- Semantic HTML structure with proper ARIA attributes
This project serves as a practical example of implementing web accessibility. For more information on web accessibility standards, visit: