Project Context
Problem
Versium needed a solution to ensure accessibility compliance, SEO optimization, and site performance at scale. The manual process was time-intensive and error-prone.
Solution
Used AI to write a Python script that automatically runs PageSpeed checks, records baseline scores, and logs results in a spreadsheet for tracking.
Audience
Users who benefit from accessible and high-performing web experiences.
Project Type
Full-time Professional Experience
Constraints
AI Model Limitations
Time Frame
3 weeks
My Role
User Experience Researcher
User Interface Designer
Developer
Team
Myself
Project Breakdown
01
Problem Context
Versium.com needed to improve accessibility and performance for a better user experience and to pass Core Web Vitals. Early manual checks suggested color-contrast issues, slow load times, and inconsistent SEO practices. Relying on one-off tests made it difficult to track changes effectively, highlighting the need for a more systematic approach.
02
Research Process
To capture both accessibility and performance metrics, I chose two core tools:
- Pa11y: Flags accessibility issues like missing ARIA labels, improperly nested headings, and color contrast violations.
- Google Lighthouse: Generates scores in Performance, Accessibility, Best Practices, and SEO, plus highlights problems affecting Core Web Vitals.
With Claude AI and Replit, I wrote a Python script that orchestrates both Pa11y and Lighthouse audits simultaneously. This setup produced consistent reports for each of Versium.com’s pages, avoiding the guesswork of manual testing.
Synthesis
Early reports revealed a cluster of issues cutting across both performance and accessibility:
- Color & Layout: Some UI elements had low contrast ratios, complicating readability.
- Structure: Heading tags were missing or out of sequence, and certain buttons lacked clear ARIA attributes for screen readers.
- Load & Interaction: Above-the-fold content took too long to render, causing a fail in Core Web Vitals.
By grouping and prioritizing these findings, I concluded that many accessibility improvements would also boost speed. For instance, compressing images not only trimmed page-load times but also benefited users on low-bandwidth connections or with visual impairments.
03
Design
Based on these insights, I implemented multiple targeted changes:
- Accessibility Tools: Introduced a user-facing widget (see Figure 3) to allow text resizing, grayscale mode, and link underlining.
- Contrast & Structure: Revised color palettes to meet WCAG thresholds; reorganized headings so screen-reader users (and search engines) could parse content more easily.
- Performance Optimizations: Compressed images, deferred non-critical scripts, and minimized CSS/JS to reduce page weight, speed up rendering, and address Core Web Vitals concerns.
Each iteration was validated by running a fresh round of automated audits, letting me see exactly which fixes were most effective.
04
Deliverable
At the end of the project, I provided:
- Automated Audit Pipeline
I delivered a Python-based system combining Pa11y and Lighthouse reports, allowing the team to regularly check Versium.com’s accessibility and performance status. - Updated WordPress site
Compressed and lazy-loaded images, reducing page weight and improving time-to-first-interaction. - Accessibility Features
The newly implemented widget and revised design elements established a more inclusive experience, particularly for users with visual impairments.
Outcome
By December 14, 2024, Versium.com passed its Core Web Vitals assessment and saw notable score improvements:
- Accessibility gained roughly 5%.
- Best Practices jumped by about 40%.
- SEO remained high.
- Performance’s raw metric fluctuated slightly, yet real-world load times improved overall.
Ultimately, Versium.com became a faster, more accessible platform, while the automated audit process provided a scalable solution for ongoing monitoring and enhancements.