Accessibility, Experimentation, and Search at Scale on a Composable Storefront
Discover how we hardened and extended a SAP Commerce Cloud composable storefront for a leading Nordic retail brand, driving WCAG accessibility compliance, delivering A/B experiments on the storefront’s established testing framework, and deepening headless search across the Angular frontend and the SAP Commerce backend.
Project Overview
Full-Stack Engineering on SAP Composable Commerce
Working alongside a SAP implementation partner, we contributed across the full stack of a leading Nordic retail brand’s composable storefront: backend commerce extensions (Java, Spring, ImpEx) and the headless Angular application. The focus was accessibility and standards compliance, delivering storefront A/B experiments, and extended headless search, faceting, and CMS-driven content.
Project Overview
Composable Commerce Engineering at Scale
Our client, a leading Nordic retail brand, runs its digital storefront on SAP Commerce Cloud with a custom Angular composable frontend built on SAP’s storefront libraries. The brand needed the storefront brought up to accessibility standards, a systematic way to run experiments, and richer headless search across a multilingual catalogue (English and Norwegian).
Engaged as a freelance senior engineer embedded with the implementation partner, our work spanned both the SAP Commerce backend and the Angular frontend. Features were delivered end-to-end, from the search index and data model through to the rendered component, under a CI-driven, PR-reviewed workflow. The engagement ran across Q2-Q3 2026.
Challenges & Objectives
The storefront was large and mature, with an established visual design that had to be preserved. Accessibility gaps spanned navigation, forms, listings, and checkout; there was no standardised pattern for running experiments; and headless search needed to support localised, multi-valued product attributes.
Key objectives included:
Achieving broad WCAG conformance across navigation, forms, listings, and product pages
Delivering storefront experiments within the established A/B-testing framework
Extending headless search and faceting for localised, multi-valued attributes
Beyond these, we delivered flexible CMS-driven homepage and content components, localised human-readable category URLs for SEO, and duplicate-detection tooling for catalog operators in the back office, each implemented across both the frontend and the backend.
Solution & Approach
1. Accessibility and WCAG Conformance
The largest theme of the engagement: reworking semantic structure and assistive-technology support across the storefront, without changing the established visual design.
Work included:
-
Corrected heading hierarchies and fixed invalid markup nesting
-
Correct ARIA semantics (aria-expanded, aria-pressed, accessible names, fieldset and legend grouping)
-
Dynamic state announced to screen readers via the Angular CDK LiveAnnouncer, with colour contrast raised to WCAG AA
2. A/B-Testing Capability
We delivered multiple experiments on the storefront’s established A/B-testing pattern: page-level experiment data drives a conditional control or variant render, with a styling service applying experiment classes at the document level. Experiments spanned carousels, navigation, category listings, and homepage variants. A strict rule held throughout: variant changes never modified the control baseline.
3. Headless Search and Faceted Navigation
On the backend, we extended the search indexing layer with value providers for localised, multi-valued enum-collection attributes, and handled those collections in the search expression evaluator. On the frontend, faceted navigation gained alphabetical sorting, in-place selection highlighting, stable item tracking, and larger, accessible filter controls.
4. CMS Content, SEO, and Back-Office Tooling
New CMS component types and layout slots were delivered (promotional cards, click-and-collect cards, media banners, multi-column homepage sections), provisioned via ImpEx. For SEO, we added a localised, human-readable category URL slug with a uniqueness constraint. For operators, we built an extended duplicate-detection back-office action backed by Flexible Search.
Technologies & Tools
SAP Commerce Cloud
Version 2211.51, Composable Commerce, ImpEx, Back Office
Frontend & Angular
Angular 19 (signals), SAP storefront libs 2211.x, NgRx, RxJS, CDK, SSR/PWA
Backend & APIs
Java, Spring, Flexible Search, OCC REST web services
Search & Integrations
Solr 9.x, Algolia, Kundo, payment SDK, GTM, consent
Build & CI/CD
Gradle, Docker, Jenkins, AWS CodeArtifact, Git
Testing & Quality
JUnit and Karma, code-quality gates, PR-based review
Key Learnings & Reflections
Accessibility proved to be an architecture-and-semantics problem rather than a styling one. The highest-impact fixes were correct heading order, native elements (fieldset and legend, real buttons), and announcing dynamic state, all while preserving the existing visual design.
Working across both the SAP Commerce backend and the Angular frontend was the real advantage: features like localised enum facets or SEO slugs only make sense when the index, the data model, and the rendered component are designed together. On experimentation, respecting the established A/B wiring and treating the control baseline as immutable kept experiments clean and reliable.
Results & Impact
The storefront became measurably more accessible, gained a repeatable way to run experiments, and offered richer product discovery, all without disrupting the brand’s established design.
Accessibility Compliance
Dozens of discrete WCAG fixes across navigation, forms, listings, product, and checkout flows.
Repeatable Experimentation
Multiple live A/B experiments delivered on the storefront’s established testing framework, from carousels to homepage variants.
Richer Search & Faceting
Headless search extended to localised, multi-valued attributes, enabling deeper product filtering.
Self-Service Content & SEO
Flexible CMS-driven components for marketing self-service, plus localised, human-readable category URLs.
Project Summary
| Role | Senior SAP Commerce & Angular Developer (freelance) |
| Duration | Q2-Q3 2026 |
| SAP Version | SAP Commerce Cloud 2211.51 (Composable Commerce) |
| Focus Area | Accessibility / WCAG, A/B testing, headless search, CMS content, SEO, back-office tooling |
| Result | A standards-compliant, experiment-ready storefront with extended search and content capabilities |
Interested in similar results?
Let’s discuss how I can help you build clean, maintainable, and scalable SAP Commerce solutions
Want to see more projects?
Discover how complex business processes have been optimized, performance improved, and scalable, well-documented solutions implemented