Case study 01 · Anders Norrman
Anders Norrman
Website design, frontend engineering & accessibility
A coherent digital home for Anders’ food, wine and product ventures, with a distinctive editorial identity and accessibility treated as an engineering requirement.
Visit Anders Norrman’s website ↗
The context
A website that gives each venture its own place
The site brings together Parmesan, wine, Homemade by Andess and seasonal ice cream alongside Anders’ own story and contact information. The information architecture gives each area a place within one personal and business presence.
Responsive layouts and Sanity-managed content support a clear, maintainable editorial system. Accessibility and frontend quality informed the build and its verification, including how content behaves when space is constrained or text is enlarged.
Give each visitor a clear route
The navigation gives each venture its own destination, with separate About and Contact pages. That structure distinguishes learning about Anders from making an enquiry, while keeping the ventures together under one identity.
Seven navigation labels need room to remain readable. Below the desktop breakpoint, a menu replaces the horizontal row rather than shrinking the labels to fit. The implementation supports Escape to close and returns focus to the menu button.
What I did
- Information architecture and website design
- Responsive frontend implementation
- Accessible navigation and interaction patterns
- Sanity CMS and content integration
- Accessibility audit, remediation and Production verification
Accessibility-led engineering
Test. Investigate. Fix. Retest.
The audit used a WCAG 2.2 A/AA evidence framework across seven sampled pages. Automated axe testing was combined with deterministic browser, keyboard and accessibility-tree evidence, expert review and bounded human observations.
Automated needs-review findings were investigated rather than counted as passes. Layout failures were reproduced under documented conditions, repaired in the frontend and retested on Production.
This is the practical intersection of frontend accessibility engineering and structured QA: each conclusion has an explicit scope and supporting evidence.
Verified Production outcomes
Final audit run · 1 October 2026 (UTC)
- sampled pages successfully audited
- 7/7
- automated axe violations in the final Production run
- 0
- automated needs-review findings investigated and resolved
- 5
- confirmed layout failures remediated and passed Production retest
- 2
- required evidence checks unresolved at completion
- 0
These figures describe the accepted seven-page sample and executed methods. Zero axe violations does not mean zero possible accessibility issues. Completion of the defined evidence set is not a claim of WCAG conformance.
Two concrete repairs
Keep the text. Fix the layout.
Heading clipping at 320 CSS pixels
Under WCAG text-spacing conditions, the homepage closing heading extended beyond the viewport and lost visible glyphs. Constraining the flex child and allowing the heading to wrap kept the intended text size while letting the content grow. The same spacing conditions passed Production retest.
Navigation clipping with enlarged text
Doubling computed font sizes exposed a navigation row wider than its container. Wrapping the row and constraining its items kept every label visible without reducing text size. Production retesting confirmed visible keyboard focus and in-viewport links.
The enlarged-text test used frozen computed-font doubling; it does not establish native browser zoom equivalence. VoiceOver speech, third-party map internals and backend message delivery were outside the accepted evidence scope.
The result
A defined scope. A verified result.
The final Production audit completed the defined WCAG 2.2 A/AA evidence set with no unresolved findings in scope, after identified issues were remediated and retested.
Frontend Accessibility Engineer & AI Systems Consultant
Need accessibility barriers investigated and fixed?
Start with a defined set of pages or interactions, then test, remediate and retest against that scope.
Accessibility testing and remediation · Website work · Frontend engineering
Discuss accessibility work