Accessibility Audit for Erewhon: Towards a More Inclusive Shopping Experience
Role: UX and Accessibility Specialist
Methods: Automated and manual inspections | Experience walkthrough
Tools & References: SortSite, WAVE, WCAG2.1
Duration: 5 weeks (2024)
Executive Summary
The Erewhon website exhibits several critical accessibility issues that affect users with mobility and visual impairments. Keyboard-only navigation misses key focusable elements, including search filters on the results page and the “Ingredients” tab on product pages.
For screen reader users, VoiceOver fails to correctly identify or announce several interactive elements, such as the hamburger menu, the product quantity stepper, and the shopping cart item count—hindering purchase completion.
To address these issues, the site’s code should be reviewed for proper semantic structure. This includes implementing ARIA roles, labels, and descriptive markup to clarify component functionality. Additionally, all interactive elements in the shopping flow should be made keyboard-focusable.
Methodology
Three complementary methods were used to conduct the assessment
1- Automated Code Inspection:
Automated testing was performed using SortSite and WAVE to quickly identify accessibility violations across the site. These tools scan for issues such as missing alternative text, incorrect heading hierarchy, and insufficient color contrast.
Automated scans can also produce false positives or overlook context-specific issues—such as determining whether an ALT description accurately represents an image. These cases were flagged for manual verification.
2- Manual Code Inspection:
The site’s code was examined for issues related to mobility and vision. For mobility, I considered whether tabbing follows a logical order consistent with that of users without disabilities. Does the site allow users to skip directly to the content they want? Can users rely solely on the keyboard for navigation? For vision, I assessed how the website handles zooming, text resizing, and image tagging. Though time-intensive, this method is critical for identifying complex or situational accessibility errors that automation alone cannot detect.
3- Experience Walkthrough:
I emulated the experience of a user with a disability while interacting with the website. Using JAWS and VoiceOver, I navigated the site, zoomed in, resized text, and adjusted contrast. I went through typical shopping tasks—browsing, adding items to the cart, and attempting checkout—pausing whenever I encountered a barrier and documenting what occurred. The final report presents these moments as a story-like recount of the experience, illustrating how accessibility gaps translate into real user frustration.
Although an experience walkthrough may not fully replicate a person’s lived experience with a disability, it provides a grounded and realistic account of how the site performs in practice. I evaluated three main aspects:
How well the site supports the use of assistive technologies such as screen readers.
The degree to which it can be navigated without a mouse or trackpad.
Whether users with disabilities can clearly understand available options and actions.
Scope
This evaluation covers:
● The home page
● The search results page
● The product page
Background
WCAG 2.1
WCAG 2.1 (Web Content Accessibility Guidelines) is a set of thirteen international standards developed by the World Wide Web Consortium (W3C) to make web content more accessible to people with disabilities. These standards define how websites should be designed and coded to ensure usability for all users, regardless of ability.
The W3C regularly reviews and updates these guidelines, with the latest version available at w3.org. WCAG 2.1 is built on four foundational principles—summarized by the acronym POUR—that describe what an accessible experience must be.
WCAG Principles
1 - PERCEIVABLE
Information and user interface components must be presented in ways users can perceive.
2 - OPERABLE
User interface components and navigation must be usable and responsive to interaction.
3 - UNDERSTANDABLE
Information and interface operation must be easy to understand.
4 - ROBUST
Content must be reliable enough to work consistently across a wide range of user agents and assistive technologies.
Audit Process
Automated Code Inspection
I began with an automated inspection using:
SortSite, software that scans a website’s code for WCAG 2.1 non-conformance issues that may lead to accessibility barriers.
WAVE, a Chrome extension that identifies accessibility issues related to structure, tab order, and missing alternative text.
Using both tools provided a comprehensive overview of accessibility gaps. Results from these scans are labeled Automated Inspection in the main table, alongside the manual findings for comparison.
Manual Code Inspection
Next, I manually reviewed the site’s code to identify issues that automated scans might overlook. This included testing with VoiceOver (iOS) and keyboard navigation to understand where code failed to meet WCAG standards and how those failures affected usability.
Manual results are documented in the same table and labeled Manual Inspection to distinguish them from the automated findings.
Experience Walkthrough
Finally, I conducted an experience walkthrough to simulate how users with different disabilities interact with the website.
In the first part, I navigated as a user with low vision, using the Chrome zoom-in function and VoiceOver (iOS) to evaluate how easily key tasks—like browsing, searching, and adding items to the cart—could be completed.
In the second part, I simulated the experience of a user relying solely on the keyboard, without a mouse or trackpad.
Tasks were rated based on severity:
Minor – the task can still be completed, but with some difficulty.
Severe – the task can be completed only with significant effort.
Critical – the task CANNOT be completed due to an accessibility barrier.
The walkthrough findings are summarized in a separate table that complements the code inspections, offering a comprehensive view of the website’s accessibility performance.
Results
Automated and Manual Code Inspection
Both inspections revealed recurring accessibility barriers, including:
Missing semantic context for key interactive components such as images, which were coded without describing their function. This omission makes them inaccessible to assistive technologies and disrupts the shopping experience.
Unfocusable interactive elements, where components were not properly coded as keyboard-accessible. As a result, users relying on keyboard navigation were unable to reach or operate certain parts of the interface.
Experience Walkthrough
The experience walkthrough confirmed the same accessibility issues observed in the automated and manual inspections. Two main problem areas were identified:
Missing descriptive coding for interactive components, such as:
Hamburger menu on the search results and product pages
The [+] icon under each product on the search results page
Quantity stepper on the product page
Number of items indicator in the shopping cart
Unfocusable touch points, which prevent keyboard users from fully navigating or completing key actions:
Hamburger menu on all three pages
Filters on the search results page
Stepper on the product page
“Add to Cart” button on the product page (only the text is focusable; the rest of the button is not)
“Ingredients” tab on the product page
To sum up: the findings across all methods are consistent—essential shopping actions are either unreadable by assistive technology or unreachable without a mouse, directly affecting task completion and user independence.
Snapshots below illustrate how key accessibility issues were recorded during the walkthrough and code inspections.
Recommendations
Most identified issues are Level A non-conformances and should be treated as a high priority, as they directly affect users’ ability to complete essential shopping tasks.
Avoid coding interactive elements as “images.” This misrepresents their function, confuses assistive technologies, and can cause task failure. For example, the hamburger menu must not be coded as an image.
Add appropriate semantic markup to clarify the function of each component. For instance, indicate that the number displayed in the cart represents the number of items.
Ensure all interactive components are keyboard-focusable. Users who rely on keyboards must be able to reach and activate every functional element.
Expand testing to include users with diverse disabilities. While automated, manual, and experience walkthrough inspections uncovered major issues, real-user testing would provide deeper insight into usability barriers. Activities such as think-aloud sessions and contextual observation in users’ typical environments would offer invaluable data for prioritizing fixes.
The experience walkthrough was the most valuable takeaway from this study. It deepened my empathy, helping me uncover accessibility issues while also challenging me to grow as both a designer and a person. t’s the kind of growth that stays with you—quiet, but lasting.
Reflection
Next Project
