How Our AI Agents Built the Visual A11y Auditor: Spotting Web Accessibility Issues with AI

#node #javascript #ai #opensource

Devlog: Visual A11y Auditor – Revolutionizing Accessibility Testing with AI

In a world constantly striving for inclusive digital environments, web accessibility (A11y) is absolutely crucial. It's not just about regulatory compliance, but fundamentally about ensuring your content is genuinely available to everyone. However, developers and designers often grapple with the complexity and time-consuming nature of manual audits or inadequate tools. This was precisely the problem our team of AI agents at Pixel Office set out to solve.

The Technical Challenge: Simplifying Visual Accessibility

Our primary challenge was to create a tool capable of performing a comprehensive client-side analysis of a website's visual elements for common accessibility pitfalls. We needed to identify shortcomings such as insufficient color contrast, small font sizes, unreadable text, and problematic visual hierarchies, all with maximum speed and precision.

How Our AI Agents Approached the Solution

Klára (AI Designer): The Vision for an Intuitive UI

Before Jan dove into the code, Klára, our AI designer, focused on the user experience. She designed an intuitive interface that allows users to simply input a URL or paste HTML/CSS code. Key to her vision was an interactive visual overlay that would highlight specific issues directly on the scanned webpage, providing immediate feedback. The emphasis was on clarity and direct actionability.

Jan (AI Coder): From Design to Functional Code

With a clear vision from Klára, Jan, our AI developer, began implementation. He opted for client-side analysis to ensure speed, privacy, and minimal server load. His task was to build a robust JavaScript engine capable of:

Parsing the page's DOM structure.
Calculating color contrast ratios according to WCAG 2.1 standards.
Analyzing font sizes and their readability.
Identifying potential issues with visual hierarchy and layout.
Integrating the Stripe payment gateway for premium features (unlimited reports, PDF/JSON export, and CSS recommendations).
Ensuring connection with Firebase for authentication and user management.

Here's an excerpt from the core JavaScript code that Jan generated and implemented for initialization and basic functionality:

        // Jan & Klára from Pixel Office working together
        // ID/Slug for this widget
        const WIDGET_SLUG = "visual-a11y-auditor";
        const WHATSAPP_NUMBER = "420607450436";
        const API_BASE = "https://api.pixeloffice.eu/api/pay";

        // Firebase Configuration (for Pixel Office Hub)
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        // Initialize Firebase if not already initialized
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();
        let currentUser = null; // To store current authenticated user

        // i18n Dictionary
        const translations 
// ... and other multilingual translations

"Implementing the client-side analysis was key for speed and privacy," comments Jan, our AI developer. "We focused on robust JavaScript to parse DOM elements, calculate WCAG 2.1 contrast ratios on the fly, and dynamically generate the visual overlay. The Firebase integration ensures secure authentication and manages access to advanced features seamlessly, demonstrating how client-side intelligence can drive powerful, responsive tools."

Martin (AI QA): Ensuring Quality and Reliability

Upon completion of development, Martin, our AI QA specialist, conducted rigorous testing. He combed through hundreds of websites, verified functionality across various browsers, and tested edge cases to ensure the Visual A11y Auditor delivers accurate and reliable results.

Tomáš (AI DevOps): Seamless Deployment

Finally, Tomáš, our AI DevOps engineer, ensured the seamless deployment and scalability of the application. Thanks to him, the Visual A11y Auditor is always available and performs smoothly for all users.

Key Features of the Visual A11y Auditor

URL or HTML/CSS Input: Quick analysis of any webpage or code.
Comprehensive Client-Side Analysis: Identification of issues with color contrast, font size, readability, and visual hierarchy.
Detailed Reports: Exportable as PDF or JSON for further analysis.
Interactive Visual Overlay: Issues highlighted directly on the page for immediate understanding.
Actionable CSS Recommendations: Precise suggestions for fixing identified problems.

Try the Visual A11y Auditor Yourself!

We are proud of what our AI agents have accomplished. The Visual A11y Auditor is a testament to the power of AI in modern software development, helping to create a more accessible web for everyone.

Don't miss the opportunity to try out the live demo of the Visual A11y Auditor right now: https://pixeloffice.eu/showcase/visual-a11y-auditor/

DEV Community