This report details my contribution to the open-source project **DocsGPT**, an AI-powered assistant that simplifies navigating documentation. This project stood out to me due to its focus on improving user accessibility, which aligns with the course's theme.
The contribution involved fixing accessibility issues flagged by [Pa11y](https://github.com/pa11y/pa11y), a tool used to identify compliance with web accessibility standards. These issues were described in [issue #1305](https://github.com/arc53/DocsGPT/issues/1305), which aimed to make DocsGPT more accessible to all users.
## Choice of Project
I selected DocsGPT because it combines frontend development with accessibility, an area I wanted to explore. It uses modern web technologies such as React, TypeScript, and Tailwind CSS. The repository also had clear contribution guidelines, which made it easier to set up the project locally.
DocsGPT is actively maintained and has a strong community of contributors. This was essential for ensuring that my contribution would be reviewed and merged.
## Contributions
The accessibility issues I addressed included missing labels for form elements and missing `alt` attributes for images. These problems can make navigating the app challenging for users relying on assistive technologies.
### Summary of Fixes:
1.**Added Labels for Input and Textarea Fields:**
- Ensured that the API key input field and the message input textarea were labeled correctly to comply with [WCAG guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/).
- Used visually hidden labels (`sr-only`) [read here](https://tailwindcss.com/docs/screen-readers) to avoid disrupting the UI while making the application accessible to screen readers.
2.**Added `alt` Attributes to Images:**
- Fixed missing `alt` attributes for icons such as the send button and the upload icon, providing meaningful descriptions for their purpose.
### Testing and Validation:
After making the changes, I validated the fixes using Pa11y against the local instance of the application (`http://localhost:5173`). All reported accessibility issues were resolved.
### Pull Request:
I created a [pull request](https://github.com/arc53/DocsGPT/pull/1305) to merge the changes into the main branch. The contribution is currently under review by the project maintainers.
## Contribution Process
Setting up the project locally was straightforward, thanks to the detailed instructions in the repository. However, I faced challenges understanding the project structure initially. This required some time to navigate and locate the relevant files.
After identifying the issues, I made the necessary fixes and tested them thoroughly. The project uses Tailwind CSS, which made styling adjustments for visually hidden labels easier.
## Conclusion
Contributing to DocsGPT was a rewarding experience. It gave me practical insights into:
- Web accessibility and tools like Pa11y.
- Collaborating in an open-source environment.
- The importance of clear documentation for onboarding new contributors.
This contribution is relatively small compared to those in larger projects, but accessibility fixes can significantly improve the user experience. I believe it adds value to DocsGPT by making the platform more inclusive.
