Introduction
For the third week of hacktoberfest, I chose to work with another html project. This time I found a project that needed help with Accessibility improvements.
The Work
The issue identified that the website had a few flaws for user accessibility. Here you can see the problems that Lighthouse (a google chrome inhouse website tester for accessibility, performance etc.) brought up.
My Code Change
Here is my PR. As you can see in my PR, I changed a few things to land the 100 Accessibility rating on Lighthouse. I changed the main green color to be slightly darker, as the white text did not have enough contrast, so that vision impaired users wouldn't be able to properly read the webpage.
The second change I was regarding the images and icons. They did not contain an "alt" parameter, which would show text, in the case that images failed to load. Next, I modified the menu button, as that was also very difficult to differentiate. Finally, I reordered the headers in the website, as they were not chronological (h1->h2->h3, etc.).
Conclusion
Overall, in this week for hacktoberfest, I learned about Google Chromes Lighthouse, as well as how to optimize a website so that it is accessible for all types of users.
Top comments (0)