STANDARD
WCAG 2.2 Level AA
MY RESPONSIBILITIES
Accessibility Audit, WCAG Analysis, Remediation, Report Writing
TOOLS I USED
ARC Toolkit, WAVE, WebAIM Contrast Checker, VoiceOver, Keyboard Testing
THE CONTEXT
I design with the learner at the center, but I realized I couldn't truly claim that if I was unknowingly leaving people out. Accessibility is part of what it means to design for everyone, and I want my work to feel empowering rather than like it's working against the people trying to use it.
This is why I enrolled in Making Online Content Accessible for All, facilitated by Dr. Nicole L'Etoile through the Instructional Design Institute. We worked through WCAG principles, completed weekly assignments, participated in live sessions, and gave and received peer feedback throughout.
For the final project, I audited my own portfolio website, JenRains.com, against WCAG 2.2 Level AA standards, identified every issue I could find, and worked through remediating as many as possible.
THE PROCESS
Using both automated and manual testing methods, I audited every page of the site and documented each issue, its severity, and how it was remediated.
Auditing Methods
I wanted to understand how my site actually worked for people who experience it differently than I do, so I tested it the way they would. I navigated every page using only a keyboard, checking that all interactive elements were reachable, operable, and logically ordered without a mouse. I used VoiceOver on macOS to hear how the content, images, headings, links, and forms were read aloud by a screen reader. I also ran automated scans using ARC Toolkit and WAVE to flag issues I might have missed manually, and used WebAIM Contrast Checker to evaluate color contrast across text and interactive elements.
What I Found
Almost all of the issues I found traced back to the same root cause: I had designed my entire website based on how it looks, without fully considering how it works for everyone. Headings were styled visually rather than structured semantically. Lists were built from text boxes instead of proper list elements. Interactions were designed for mouse users without considering keyboard or screen reader users at all. The visual design looked intentional, but underneath it, the structure wasn't accessible.
In total, I identified 31 issues across all pages of the site, categorized by severity: 13 Critical, 8 Significant, 6 Moderate, and 4 Recommendations. Of the 31 issues, 29 were fully remediated to meet WCAG 2.2 Level AA standards, and two could not be resolved within the constraints of Wix Editor.
Key Decisions & Trade-Offs
Not every fix was straightforward, and a few of them taught me something important about what it actually means to design accessibly.
The homepage pillars section originally used a hover interaction to reveal content behind each icon. Screen reader and keyboard users had no way to access that hidden content at all. My initial approach was to find a workaround that would expose it to assistive technologies, but partway through I realized I was only technically fixing the problem rather than actually solving it.
This section also wasn't included in the mobile version because it was too much to scroll through, which meant different users were already getting different experiences. So instead of "fixing" it, I redesigned the section from scratch, replacing the hover interaction with a visible heading and a short descriptive sentence. Every user now gets the same experience regardless of how they access the site, and the section is simpler and more effective.
The video on my Survey Simulation page had captions, but the Wix video player didn't support them. Moving it to Vimeo made captions possible, but introduced a trade-off: keyboard users now navigate through more controls to reach play.
The contact forms presented a similar constraint. The error message color couldn't be changed within Wix, so I redesigned the form background instead to give the existing red enough contrast to pass. It wasn't the visual design I had planned, and that was frustrating. But it was a clear reminder of why designing with accessibility in mind from the beginning matters. Redesigning is harder, messier, and sometimes means compromising on things you cared about.
Two issues remained unresolved. I tried to create a two-color focus indicator that would have sufficient contrast against both of my brand colors, but Wix Editor doesn't support that level of customization. The focus order within the testimonials slideshow also couldn't be adjusted because it's a built-in component.
RESULTS & TAKEAWAYS
My portfolio website is now an artifact of how I attempt to design for every user. It's not perfect, and I know there's still room to grow. My screen reader testing was done to the best of my current ability, but I'd love to have it professionally audited someday to see what I must have missed. Accessibility is a practice, not a destination, and I'm still early in building that skill.
What this audit permanently changed is how I approach design from the start. Accessibility used to be something I thought about after the fact. Now it's part of how I think before I make a single decision. That shift is the most valuable thing I took away from this course, and it's one I'll carry into every project I work on.
