This repository was archived by the owner on Dec 12, 2024. It is now read-only.
This repository was archived by the owner on Dec 12, 2024. It is now read-only.
Add ARIA labels to TO DO page - Vue #73
Open
Description
Add ARIA labels to To-Do page - Vue
🚀 Goal
Improve the accessibility of the To-Do page in our Vue DWA starter by adding appropriate ARIA labels to key elements.
🤔 Background
Adding ARIA (Accessible Rich Internet Applications) labels will make our To-Do page more usable for people relying on assistive technologies.
This is part of our larger project to create a Vue.js DWA starter. See our main issue here for the full context and list of all related tasks.
Important: For reference, please see the DWA React starter app. While the implementation details will differ for Vue, this example provides a good overview of the structure and functionalities of a DWA.
🔑 Tasks and Acceptance Criteria
- Review the current structure of the To-Do page
- Add ARIA labels to the following elements:
- The main To-Do list container
- The form for adding new tasks
- The input field for new task titles
- The button for adding new tasks
- Checkboxes for completing tasks
- Buttons for editing tasks
- Buttons for deleting tasks
- Ensure all interactive elements are keyboard accessible
- Test the page with a screen reader to verify labels are read correctly
- Update any relevant documentation or comments in the code
🌟 Resources
Getting Started
- Comment ".take" on this issue to get assigned
- Fork the repository and create a new branch for this task
- Follow the tasks outlined above
- Submit a pull request with your changes
- Respond to any feedback during the review process
Questions?
If you have any questions or need clarification, please comment on this issue or join our Discord community.
Happy coding! 🎉