I audited my own portfolio, then rebuilt it to WCAG 2.2 AA.
My old site looked bold but failed basics I design for every day: tiny grey text on black, headings used for styling, images without alt text and no way to contact me. I treated it like a client project: audit, prioritise, redesign, rebuild in code and measure.
↓ Skip to before and after
01 · IN BRIEF
A portfolio that talked about accessibility, but did not practise it.
MY ROLE
Auditor, designer and developer. Every fix is mine, in Figma and in code.
APPROACH
Automated and manual audit, fix what blocks people first, redesign the type system, rebuild.
RESULT
On the coded build of the new home page: axe issues 7 → 0 in both light and dark themes, and Lighthouse accessibility 94 → 100 in the dark theme.
02 · THE AUDIT
What I found when I tested my own site.
I ran automated checks with Lighthouse and axe, then tested by hand with a keyboard, VoiceOver and a phone. Seven problems stood out, and most of them were ones no automated score would catch.
03 · PRIORITISE
Fix what blocks people first.
I ordered fixes by who they stop, not by how easy they are. A recruiter who cannot contact me is a bigger problem than an inconsistent spelling.
04 · REDESIGN
A type and colour system that passes by default.
Body text went from 10.2px to 16px on a clear scale. Every text colour was checked against black, and the one token that still fails is shown, not hidden.
STRUCTURE
One H1 per page, headings in order, and every case study tile labelled with a title, summary and role.
MOBILE DIAGRAMS
Complex diagrams open full screen and zoom, with a text summary underneath.
05 · BUILD
Rebuilt in code, not just restyled.
I am rebuilding it in Squarespace with hand-coded HTML, CSS and JavaScript in Code Blocks: semantic HTML, a skip link, visible focus states, Reduce Motion support and real alt text for every image. Components match one to one, so the pill in Figma is the pill in code.
06 · OUTCOME
Before and after.
I re-tested the new home page in November 2026, using my hand-coded build in a local preview before it goes into Squarespace. The first re-test took Lighthouse from 94 to 97 and axe from 7 issues to 6, all from one grey. Lifting that grey, plus a slightly darker orange in light mode, took axe to 0 issues in both themes, on desktop and mobile, and Lighthouse to 100 in the dark theme.
07 · OPTIONS I REJECTED
Options I rejected.
I treated my own site like a client project, which meant turning down the quick fixes.
✕ Rejected
Fixing the easiest issues first
✓ Instead
Fix what blocks people first: contact details, text size and contrast, broken headings.
✕ Rejected
Trusting the Lighthouse score
✓ Instead
The old site scored 94, which looks like a pass. I tested by hand too, with a keyboard, VoiceOver and a phone.
✕ Rejected
Restyling the old site
✓ Instead
Rebuilt in code: semantic HTML, a skip link, visible focus states and real alt text.
✕ Rejected
Hiding the faint grey that still failed
✓ Instead
Show it, fix it and re-test: lifting it took axe to 0 issues in both themes and Lighthouse to 100.
08 · REFLECTION
Auditing my own work was humbling.
The issues were the same ones I catch in other people’s designs, which is exactly why a checklist and real testing matter more than good intentions.
12 · What’s next
If this were real, here’s what I’d do next.
Group orders for Sasha
Bundles and bulk quantities for families and classrooms, the biggest unmet need in the research. Measure: completed group orders.
Fix the four contrast fails
Deep lilac and deep blue for accent text, 12px minimum body text and 44px nav buttons. Measure: re-run the audit to zero fails.
Test with real allergies
Recruit people with coeliac disease or nut allergies, not just preferences, and test Vegan Mode plus allergen info. Measure: task success and confidence.