Add ARIA labels to settings page - Vanilla.js

[blackgirlbytes]

Add ARIA labels to settings page - Vanilla

🚀 Goal

Improve the accessibility of the settings page in our Vanilla DWA starter by adding appropriate ARIA labels to all interactive elements and sections.

🤔 Background

Accessibility is a crucial aspect of web development. By adding ARIA (Accessible Rich Internet Applications) labels, we can make our application more usable for people relying on assistive technologies.

This is part of our larger project to create a Vanilla.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 Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Review the current structure of the settings page
• Identify all interactive elements (buttons, inputs, etc.) and sections that need ARIA labels
• Add appropriate ARIA labels to:
  • The main settings section (e.g., aria-label="Settings")
  • Input fields (e.g., aria-label="Display Name")
  • Buttons (e.g., aria-label="Save Settings")
  • Any toggles or checkboxes
  • Error messages or status updates (use aria-live for dynamic content)
• Ensure form inputs are properly associated with their labels
• Add role attributes where necessary (e.g., role="button" for clickable divs)
• Test the page with a screen reader to ensure all elements are properly announced

🌟 Resources

• Vanilla.js Accessibility Guide
• WAI-ARIA Authoring Practices
• MDN ARIA Documentation
• DWA React Vite Starter App (for reference on structure and functionality)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. 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! 🎉

[TheVinaySagar]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[TheVinaySagar]

I am not able to find setting page anywhere in dwa-starter-vanillajs-vite, can you help me to find out where should I add ARIA labels?