Accessibility in Action:
Evaluating the Moomin Shop Website

Product: E-Commerce platform

My role in the project: UX Designer

My tasks:

  • Website Analysis

  • Accessibility Testing

  • WCAG Compliance Review

Background

As someone passionate about inclusive design, I conducted an accessibility evaluation of the Moomin Shop website to identify barriers that may affect users with disabilities. My goal was to ensure that the website provides a welcoming and inclusive experience for everyone, including people relying on screen readers, keyboard navigation, or other assistive technologies.

I focused on three key areas of the website:

  • Landing Page

  • Product Pages

  • Cart

This case study documents the accessibility strengths I observed, the issues I uncovered, and the recommendations I made to help the Moomin Shop meet WCAG 2.1 AA standards.

The Challenge

When I started this evaluation, I noticed that the Moomin Shop had a clean design and strong usability for general users, but there were areas where accessibility could be improved. For example, issues with keyboard navigation, missing screen reader labels, and low color contrast created barriers that made the site difficult to use for some individuals.

For a global brand like Moomin, accessibility isn’t just a technical requirement—it’s a way to ensure that all fans can enjoy the charm of the Moomin universe without frustration or exclusion. My goal was to identify these barriers and recommend practical solutions to address them.

Scope of Evaluation

I evaluated the following pages:

  • The Landing Page, where users first interact with the site.

  • Product Pages, where users explore Moomin items.

  • The Cart, which is critical for completing purchases.

To guide my work, I used the WCAG 2.1 AA standards. I relied on a combination of automated tools (like axe), manual testing (using NVDA and VoiceOver screen readers), and keyboard-only navigation. I also tested the website’s usability at 500% zoom to simulate experiences for low-vision users.

Process

I structured my evaluation into three parts to prioritize my findings:

  1. What Worked Well: Strengths that enhanced accessibility.

  2. What Needs Improvement: Issues that were noticeable but not critical.

  3. Critical Issues: Barriers that needed immediate attention to prevent users from completing key tasks.

I documented each finding with screenshots and categorized them based on their severity and potential user impact.

Findings

What Worked Well

During my evaluation, I was impressed by several aspects of the Moomin Shop’s accessibility:

  1. Simple Layout:
    The website uses a clean and uncluttered design with minimal animations and colors. This reduces cognitive load and makes it easier to navigate, especially for users with cognitive disabilities.

  2. Logical Tab Order:
    Using only the keyboard, I found the tab navigation intuitive. It followed a logical top-to-bottom flow, highlighting each element sequentially.

  3. Screen Reader Support in Navigation:

    • The header’s category list is labeled correctly, and screen readers announce it as a "list of objects."

    • On product pages, filters are labeled properly, and screen readers even announce the number of items within each filter.

  4. Screen Reader Support on Product Pages:
    When I focused on a product image, the screen reader announced the product name and identified it as a clickable link.

  5. Zoom Usability:
    Even when I zoomed in to 500%, the website remained fully functional and easy to navigate.

What Needs Improvement

While the site has a strong foundation, I discovered several issues that could hinder the user experience:

  1. Tabbing Navigation:

    • In the header, if a category tab is opened, there’s no way to close it without tabbing through every single item.

    • On smaller screens, the header becomes a hamburger menu. I noticed that the tab focus gets trapped inside the menu, making it difficult to navigate without opening the menu fully.

    • The landing page carousel traps the tab focus, forcing users to tab through every item before moving on.

  2. Footer Lists for Screen Readers:
    The lists in the footer (e.g., Customer Support, My Account) are unnamed. When using a screen reader, they’re simply announced as “list,” without context about their content or purpose.

  3. Shopping Cart Screen Reader Issues:

    • The "Remove Item" button is labeled as "Close," which could confuse users who think it closes the cart rather than removing an item.

  4. Product Page Screen Reader Issues:

    • If a product has color variations, the buttons to switch colors aren’t labeled at all. They’re only announced as “link,” making it impossible to know their purpose.

  5. Color Contrast Issues:

    • The “Moomin Fan Member” banner on the landing page has a contrast ratio of 1.96:1, failing both WCAG AA and AAA.

    • Similarly, the category items in the header have poor contrast (2.94:1), making them difficult to read for users with low vision.

Critical Issues

Some barriers I found would severely affect usability and needed immediate attention:

  1. Landing Page Tabbing:

    • The “Moomin Fan Member” banner is skipped entirely during tab navigation, meaning keyboard-only users cannot interact with it.

  2. Carousel Screen Reader Support:

    • While testing the carousel on the landing page, I found that only the first item is labeled correctly. The rest are announced as “link,” and the screen reader stops functioning entirely after the fourth item.

  3. Cart Navigation Trap:

    • After adding an item to the cart, the tab focus gets trapped inside the cart window. I couldn’t proceed to checkout because the tab navigation looped between “Remove Item,” “Item Name,” and “Add Item.” This creates a major barrier to completing a purchase.

Recommendations & Impact

Recommendations:

Based on my findings, I recommended the following:

  1. Fix Tabbing and Focus Management:

    • Allow users to close open menus without having to tab through every item.

    • Ensure tab focus doesn’t get trapped in the cart or header menus.

  2. Add Descriptive Labels:

    • Label all buttons and links, such as the color variation buttons on product pages and the lists in the footer.

    • Ensure carousel items are consistently labeled for screen readers.

  3. Improve Color Contrast:

    • Update the text and background colors on the landing page banner and header categories to meet WCAG AA standards.

  4. Enhance Cart Usability:

    • Rename the "Remove Item" button to clarify its function.

Impact:

These changes would make the Moomin Shop more inclusive, ensuring:

  • Keyboard-only users can navigate seamlessly.

  • Screen reader users can understand and interact with all site elements.

  • Users with low vision can easily read text and interact with key features.

Challenges & Lessons Learned

Challenges:

One challenge I faced was testing on smaller screens. I found that the hamburger menu introduced unique accessibility issues that weren’t present on larger screens. This highlighted the importance of testing across multiple device sizes.

Lessons Learned:

Through this evaluation, I learned that small details—like missing labels or poorly managed focus—can create significant barriers. Manual testing with assistive technologies provided insights that automated tools alone couldn’t capture.

Conclusion

This evaluation highlighted the strengths and weaknesses of the Moomin Shop’s accessibility. By addressing the issues I uncovered, the site can become more inclusive, ensuring all users—regardless of their abilities—can enjoy the Moomin shopping experience.