Repo:https://github.com/rushikesh648/accessible-todo-app
Frontend Development Prompt: Accessible To-Do List App
Project Goal: Implement a simple, single-page To-Do List application that is designed from the ground up for accessibility, ensuring a robust and intuitive experience for all users, including those relying on screen readers and keyboard navigation.
Technology Stack:
HTML5: Semantic structure, ARIA attributes.
CSS3: Styling, clear focus indicators, basic responsive design.
JavaScript (Vanilla JS): Core logic, DOM manipulation, accessibility API interaction.
Part 1: Core Application Structure & Styling
HTML Structure (index.html):
Create a well-structured index.html file.
Include a <!DOCTYPE html> declaration and lang="en" on the tag.
Set up a
with appropriate tags and a .Implement the main layout with a containing the app title (
), a section for the form and task list, and an optional .
Include an empty
- element with a descriptive id (e.g., id="todo-list") where tasks will be rendered.
Add a hidden aria-live="polite" region (e.g.,
) for general announcements.Base CSS Styling (style.css):
Apply a clean, high-contrast default theme for readability.
Define the .sr-only class to visually hide content while keeping it accessible to screen readers.
Ensure all interactive elements (input fields, buttons) have a clear, visible outline style when they receive :focus (e.g., outline: 2px solid #007bff; outline-offset: 2px;). This is crucial for keyboard navigation.
Style the main containers, form elements, and list items for basic presentation.
JavaScript Initialization (script.js):
Ensure your script runs after the DOM is fully loaded (DOMContentLoaded event).
Define an array to hold your to-do items (e.g., let todos = []; where each item is an object { id: number, text: string, completed: boolean }).
Create a function renderTodos() that clears the existing list and dynamically populates the todo-list
- based on the todos array. This function should be called initially when the app loads.
Part 2: Essential Features & Accessibility Implementation
For each feature below, ensure full keyboard navigability and clear screen reader feedback.
Add New To-Do Item:
HTML:
Create a
Include a "Add Item" .
Add a placeholder attribute to the input as a hint (not a label replacement).
Include an element for displaying error messages (e.g.,
).JavaScript:
Attach an event listener to the form's submit event.
Prevent default form submission.
Get the value from the input field.
Validation: If the input is empty:
Display an error message to the user.
Update the error-message element's text and make it visible.
Set aria-invalid="true" on the input field.
Crucially, set focus back to the input field (input.focus()).
If valid:
Add a new to-do object to the todos array.
Clear the input field.
Call renderTodos() to update the list.
Use the screen-reader-announcer to announce the addition (e.g., "New task added: [Task Text].").
Return focus to the input field for quick subsequent additions.
Display To-Do Items:
JavaScript (within renderTodos()):
For each to-do item in the todos array, create an
Inside each
A to display the task text.
A "Complete" button.
A "Delete" button.
Accessibility:
Dynamically add aria-label attributes to the "Complete" and "Delete" buttons, making them descriptive (e.g., Complete, Delete).
If a task is completed, apply a visual strikethrough effect to its text via CSS.
If a task is completed, also add an aria-label to the text (e.g., ).
Mark To-Do as Complete/Incomplete:
JavaScript:
Attach event listeners to the "Complete" buttons (use event delegation if generating many buttons).
Toggle the completed status of the corresponding to-do item in the todos array.
Call renderTodos() to refresh the display.
Use the screen-reader-announcer to announce the status change (e.g., "Task [Task Text] marked as complete.").
Delete To-Do Item:
JavaScript:
Attach event listeners to the "Delete" buttons.
Remove the corresponding to-do item from the todos array.
Call renderTodos() to refresh the display.
Use the screen-reader-announcer to announce the deletion (e.g., "Task [Task Text] deleted.").
Return focus to the input field after deletion for a smooth workflow.
No Tasks Message:
HTML: Include a
No tasks yet. Add one above!
.JavaScript: Dynamically show/hide this message based on whether the todos array is empty.
Part 3: Testing & Deliverables
Self-Evaluation:
Keyboard-Only Test: Can you add, complete, and delete tasks using only the keyboard (Tab, Shift+Tab, Enter, Space)? Does focus move logically?
Screen Reader Test: (Simulate or use a real screen reader like NVDA/VoiceOver) Does the screen reader announce form labels, button actions, and dynamic updates (additions, completions, deletions) clearly and correctly? Are error messages announced promptly?
Deliverables:
Functional Frontend App: index.html, style.css, script.js files.
Clear Code Comments: Especially for accessibility-specific choices (ARIA attributes, focus management, announcements).
A README.md file in the project root containing:
A brief overview of your accessible To-Do List App.
Instructions on how to run the application locally.
A summary of the key accessibility features implemented.
Your findings from the self-evaluation/screen reader testing.
Success Criteria:
The application is fully functional and responsive to user input.
All interactive elements are reachable and operable via keyboard.
Screen reader users receive accurate and helpful feedback for all interactions and dynamic content changes.
The UI is clean and maintains good contrast.
The code is well-organized and easy to understand.
This prompt provides a comprehensive guide for building an accessible To-Do List, ensuring the developer considers inclusivity at every step.
Top comments (0)