Ally | Devpost

Sign up page
Sign in page
User profile
Resources page
Scan page
Scan report: chart breakdown by issue category
Scan report: list of issues by category
Scan report: list of issues by category

Inspiration

Did you know that 3.8 million U.S. adults aged 21-64 are blind or have trouble seeing, even with glasses? Or that more than 466 million people worldwide have a hearing disability? Unfortunately, 98% of the world's top one million websites don't offer full accessibility and 71% of website visitors with disabilities will leave a website that is not accessible. With technology being a prominent feature of everyday life, it is crucial that people develop websites that adhere to accessibility standards and guidelines so that everyone has an opportunity to access content on the web. However, much of the tools and information that is available to help developers ensure that their sites contain the necessary accessibility features is not well known and requires people to use multiple tools. Thus, it is easy for developers to skip this crucial development step. But, since the internet is necessary for everyone's lives, developers should be an ally for the A11Y community. I created a website that eases this process and provides centralized tools and resources for developers to check the accessibility of their site and receive guidance on how to fix the issues.

What it does

Ally is a web application that helps developers find the accessibility issues in their site and fix them using provided guidance and resources. Ally allows users to create an account and run a scan on their website URL to check against Web Content Accessibility Guideline (WCAG) errors. After the scan, the user will be provided with a report of accessibility errors, categorized by type, along with brief explanations of the specific issues. The categories are color-coded based on how many issues were found in that category to alert the user to areas that need more work than others. The user can also view a breakdown the errors by category to see which categories they are doing better or worse in to guide their future website updates. When the report is generated, the user can also receive an email sent via Courier. If I had more time, I would also include a way for users to view past reports and see metrics about how their site accessibility is improving. Finally, there is a page with a list of resources to help developers fix accessibility issues. Overall, the website includes many accessibility features itself, including contrasting colors, symbols along with text and color, and patterns on the report chart for those who are colorblind.

How I built it

The web app was built using React, Bootstrap, Chart.js, Firebase, the WAVE Web Accessibility API, and the Courier API.

Challenges

One of the challenges I had was working with Firebase for authentication. I hadn't created an app that required user accounts before and I struggled with connecting React and Firebase to create the user's account and add them to the database. I also had trouble storing the current user in the app's context so I wasn't able to access the user throughout the app. I ended up hard-coding test values in the meantime.

I also ran into issues using the Courier API. I was able to use the example code provided on their website and I tested it with their API tester and Postman, which both gave successful responses. Yet, when I ran it with my app, it didn't work even though there were no errors. Thus, the app doesn't currently send notification emails like I intended.

My learning and accomplishments

I am proud of myself for learning new skills, namely using the Courier API and working with Firebase authentication. I am also proud of myself for creating a product that can make a difference in the world by helping improve web accessibility.

What's next for Ally

Ally is far from a complete, robust application. To improve its quality, I would like to add features, such as giving an overall accessibility score for a website (possibly broken down by category), including a dashboard with metrics about the user's progress over time, breaking down the issues based on types of disabilities so users can see which groups are being excluded from using their site. There also needs to be better error handling.

Source: CrownPeak