Auditing digital experiences against WCAG 2.1 AA standards
I conducted a comprehensive accessibility audit of a global footwear brand’s digital storefront. The goal was to evaluate all components and shopping flows against WCAG 2.1 AA standards and identify improvements for customers using assistive technologies.
Project Date: 2025
My Role: Accessibility UX Designer
Scope: Desktop and mobile (homepage, PLP, PDP, menu, checkout)
Deliverables: Full audit with prioritized issues, WCAG mapping, and recommended fixes
1. Component-Level Review: buttons, modals, forms, sticky elements
2. Page-Level Review: PLP, PDP, menu, cart/checkout
3. Assistive Tech Testing: keyboard navigation, screen readers (VoiceOver), high zoom
4. Documentation: Screenshots + WCAG success criteria references + fix recommendations
Keyboard Navigation & Focus
1. Some elements (e.g., “Sign Up” section, country selector, sticky add-to-cart) were not operable by keyboard.
2. Focus indicators were clipped, missing, or invisible on key CTAs like “Add to Cart”.
3. Shift+Tab often broke, forcing users to reload pages to reset focus.
Screen Reader & Alt Text
1. Buttons like “Add to Cart” and selectors were poorly labeled, announced generically or redundantly.
2. Images lacked descriptive alt text, with VoiceOver sometimes reading filenames instead.
3. Product tiles and selectors were announced as multiple, fragmented elements instead of single grouped units.
Mobile VoiceOver
1. VoiceOver mis-categorized elements (e.g., “Shop Now” read as link instead of button).
2. Men’s/Women’s size links lacked clear description of context (impacting product sizing understanding).
3. Hidden elements were announced, creating noise and confusion.
Form & Modal Issues
1. Country/language selector modal didn’t trap focus, allowing navigation behind it.
2. Email field was announced redundantly, adding unnecessary steps.
3. Checkout dropdowns and sticky buttons interfered with focus order.
1. Keyboard: Ensure all interactive elements are focusable and operable with Tab/Shift+Tab. Trap focus correctly in modals.
2. Contrast & Focus: Strengthen focus indicators, adjust color tokens for WCAG compliance.
3. Screen Reader: Provide programmatic roles and context (e.g., “Size 9, Button, Selected”). Group related elements.
4. Mobile: Fix VoiceOver roles (links vs. buttons), remove hidden elements from navigation, group product tiles.
5. Forms: Add proper ARIA labels and descriptive context to all fields.
The impact is identified blockers preventing full keyboard and screen reader navigation. Created actionable roadmap for WCAG 2.1 AA compliance across footwear e-commerce flows. Improved accessibility for mobile shoppers using VoiceOver, a key differentiator in this audit.
This audit emphasized how mobile accessibility often lags behind desktop, especially with screen reader labeling and navigation order. By aligning fixes with WCAG criteria, I ensured the site moves toward compliance and inclusivity while reducing user friction across devices.
Confidentiality Disclaimer: Certain details and visuals have been modified for confidentiality. The insights presented reflect my UX process and accessibility methodology, not proprietary company data.