Redesigning Swissker.com for Web Accessibility Excellence
Swissker.com is a personal care e-commerce brand targeting customers aged 55 to 75 - many of whom experience visual, motor, or cognitive limitations. Our challenge was to rebuild the online store experience from the ground up to meet WCAG 2.2 AA standards—without sacrificing conversion goals or visual identity.
My role: I led the accessibility redesign initiative across UX/UI design, accessibility audits, and handoff documentation—ensuring Swissker becomes not only usable but inclusive.
Previous landing page - swissklip.com
The Accessibility Gap
As we expanded our online store on, the site failed to meet WCAG 2.1 AA standards, creating serious accessibility and compliance risks. Issues included:
❌ Low contrast text and CTAs
❌ Inaccessible modals and drop downs
❌ Missing alt text for all images and visuals
❌ No keyboard support or logical focus states
❌ No documentation for accessibility in design system
❌ No consideration for motion sensitivity or seizure triggers
❌ Poor Iconography and Missing Semantic Cues
Considering the brand’s aging audience and medical-oriented products (e.g. nail clippers for seniors, UV dental pods), these gaps weren't just inconvenient—they were exclusionary.
This posed a threat to both usability and legal risk, and directly impacted conversion for users, specially the ones with with visual or cognitive impairments.
As part of our discovery phase, I conducted a deep accessibility audit of key competitors, including Uvlizer, Harry’s, Philips, and Lunavia. The goal was to understand how leading brands approach inclusive design across their e-commerce platforms.
Opportunity for Swissker
The findings revealed that while several competitors were making progress toward accessible design, some fall short of full accessibility compliance. By addressing these gaps and building with WCAG and WAI-ARIA standards from the ground up, Swissker has the opportunity to set a new benchmark for accessibility in the D2C space.
At the outset of the project, I conducted a comprehensive accessibility audit of the existing Swissker e-commerce site using a combination of manual review and assistive technology testing.
Tools used:
.png)
<div>s, not true <h1>–<h6> tagsThe audit revealed a fundamental lack of accessibility support across the site with 61 critical errors ⚠️. The experience excluded users relying on assistive technology, keyboard-only navigation, and those with visual or cognitive impairments. This set the stage for a full rebuild — one grounded in semantic HTML, accessible design patterns, and inclusive UX principles.
To rebuild Swissker’s e-commerce platform with accessibility at the core, I led a complete UX redesign grounded in WCAG 2.1 AA and inclusive design patterns:
<h1> through <h6>) and meaningful landmarks.
Rather than patching isolated issues, I worked to build an accessibility-first system that could scale:
<div> elements with semantic HTML tags and proper reading order.
🚧 Note: Implementation is ongoing as we continue QA testing and rollout across all live templates.
I ensured a smooth handoff to developers by using clear Figma annotations, consistent naming conventions, and an accessibility-first mindset. We tracked QA and accessibility tasks collaboratively using a shared Google Doc that included:
Status columns (To Do / In Progress / Fixed / Verified)
Severity notes and WCAG references
Screenshots with time-stamped findings
Team comments from PM, Devs, QA, and myself
I provided dev-ready specs that included clear heading structure, ARIA roles, and expected behavior. An accessibility checklist was embedded directly in Figma, highlighting issues like tab traps, missing alt text, and misuse of aria-hidden. Rakesh led the implementation across WordPress, ensuring consistency and accessibility throughout.
QA was led by Adrian, who managed timelines and coordinated testing. I actively participated in accessibility-specific testing, the final QA stage included testing across:
Desktop and mobile screen sizes
Keyboard-only navigation
Screen reader (VoiceOver)
Lighthouse and Axe automated scans
Screen Reader Incompatibility (Ongoing)
VoiceOver couldn’t read headings or body text—only links and buttons were announced. This stemmed from missing semantic tags and ARIA roles.
Solution (In Progress)
We're rebuilding templates with proper heading structure, semantic tags, and ARIA roles. VoiceOver re-testing is ongoing. Rakesh is reviewing implementation to maintain both structure and performance.
So far...
While full rollout is still in progress, the foundation for an accessible and scalable design system is now in place. Early outcomes include:
✅ Major structural issues addressed — semantic headings, ARIA roles, and tab order implemented
✅ Clearer visual hierarchy and defined button system improving usability
✅ Accessibility annotations embedded into Figma for ongoing dev support
✅ 87%+ decrease in Lighthouse and Axe critical errors during early QA
.jpg)
We’re continuing VoiceOver testing, alt text mapping, and component-level refinements as part of our next release cycle.
Accessibility isn’t just compliance — it's UX. Without semantic structure, even the most beautifully styled page is invisible to screen readers.
This project reinforced that designing for accessibility is designing for everyone. From users with disabilities to users on mobile in bright sunlight, every thoughtful improvement rippled outward.
✨ Areas for Improvement
While major accessibility barriers were resolved, a few challenges remain in progress. VoiceOver testing still reveals occasional misreads on dynamic components like modals and dropdowns, often tied to ARIA role misuse or inconsistent focus management. Some mobile interactions also require refinement to ensure smooth keyboard tabbing and visible focus indicators. These are being addressed in the next sprint in close collaboration with the development team.