-
-
With W4A (Web for All), new developers can confidently design sites that align with best practices in web accessibility!
Inspiration
Our inspiration came from a desire to create a more inclusive web environment where everyone, regardless of ability, can fully access and engage with digital content. With accessibility often overlooked by new developers, we wanted to build a tool that simplifies and promotes WCAG standards from the start.
What it does
Our web app is an informative, interactive, accessibility checker specifically designed for beginner web developers. Its current primary feature is a colour contrast checker, which provides clear, actionable feedback on meeting WCAG 2.2 guidelines for deciding colour usage in your website, making it easy for the user to identify the most accessible colour combinations for any websites they plan on developing!
How we built it
We developed the app using HTML, Typescript, JavaScript, and React. We specifically utilized Chakra UI to create a clean, responsive user interface, focusing on intuitive interactions and informative popovers to guide users through understanding accessibility standards.
Challenges we ran into
One challenge was ensuring that our app accurately calculated colour contrast ratios according to WCAG guidelines. We wanted the feedback to be immediate and active, giving the user freedom to know what colour combinations would be suitable for different types of standards (e.g. AA versus AAA) and why these standards were or were not being met.
Accomplishments that we're proud of
We're ultimately proud of building an app that supports accessibility from both a design and a functionality perspective. By adhering to WCAG guidelines ourselves, we created a tool that is both effective and inclusive -- the tool itself is representative of something we want to see more of in new/prospective web developers!
What we learned
We learned a lot about accessibility standards, particularly WCAG 2.2, and how to implement them in a real-world project. This experience has shown us the importance of designing with a mind that is geared toward making the user experience accessible and an integral part of the development process.
What's Next for Web for All
Next, we plan to expand our app with more informative and interactive accessibility features; for example, we want to include support for taking in user HTML code and identifying aspects of their HTML design that do not adhere to WCAG guidelines, such as the font sizes they may be using or the lack of alternative text for their images. We also want to create a more robust guide that helps users understand the full range of WCAG standards.
Log in or sign up for Devpost to join the conversation.