Case study
Enhancing accessibility for a luxury jewellery Shopify store
Accessibility
Web Development
Intro
Lightbox is a lab-grown diamond seller owned by De Beers. They wanted their Shopify store to be more accessible, in order to expand their market and increase revenue.
I worked on this project as a web developer and UX expert. With a team of 3 developers, a project manager, and a designer, together we helped turn Lightbox’s store into an accessible and simple experience for everyone.
01. Discovery/Research 🎯
Our first goal was to identify existing accessibility issues. Although most eCommerce sites are highly visual, it's critical that shops work for the sight impaired. Improving accessibility not only benefits those with impairments, but enhances overall UX for everyone.
User Research:
To gain insight into the challenges faced by users, we wanted to conduct research with people who use screen readers. Fortunately, Lightbox already had research on this. Although the sample size was small, it gave us an invaluable starting point.
(Image below: a screen capture of the existing store, without keyboard controls)
The research included field studies which threw up some significant issues early on, particularly with keyboard navigation and focus management. Users found it frustrating to navigate the site without a mouse.
Literature Review:
Given our time constraints, we combined the user research with existing best practices. We referred to guidelines like WCAG and ARIA as they explain common challenges and helped us avoid repeating past mistakes.
Things like this are particularly useful since people often have multiple impairments and don't fit neatly into one category. Our existing research focused only on screen reader users, so we wanted a way to understand the needs of a broader audience.
Accessibility Audit:
To kick off the project, I personally ran an accessibility audit of the Lightbox store. Using tools like Google’s Lighthouse, I was able to identify various issues for screen reader users, while factoring in WCAG guidelines.
The audit revealed several key problems:
Lack of Proper ARIA Labels: many interactive elements were missing ARIA labels, making them unsuitable for screen readers
Inadequate Alt Text for Images: many images lacked descriptive alt text. Alt text is essential for users who cannot see to understand what the images represent, especially in a visually-driven eCommerce platform.
02. Define/Synthesise 🧠
The goal at this stage was to clearly define the scope of the accessibility improvements needed, based on the issues we discovered during the research and audit phases.
Problem Statement:
From our research and findings, we crafted the following problem statement:
Users with visual impairments experience significant barriers when navigating the Lightbox store due to improper screen reader support, inadequate keyboard controls, and inconsistent navigation.
This is a fairly obvious problem statement given our goals, but it's still important to frame things like this so everyone's on the same page.
03. Develop/Ideate 🧭
Our goal in this phase was to start turning our problems into solutions.
Strategy and planning:
Based on our analysis, we identified the following key changes as the most impactful and directly aligned with user needs:
Consistent Navigation: Use a clear header and footer on both mobile and desktop versions to ensure a uniform user experience.
Skip Navigation Links: Add links that allow users to bypass repetitive elements and jump directly to the main content.
Focus Management: Make sure focus is clearly visible and logically ordered when navigating with a keyboard, enhancing the user experience.
Tab Order: Set a logical tab order that follows the visual layout of the page, improving browsing for keyboard users.
ARIA Implementation: Use ARIA roles, properties, and states to provide additional context for screen readers, enhancing accessibility.
Resizable Text: Ensure text can be resized without losing content or functionality, accommodating users with visual impairments.
Colour Independence: Design the site so that information is not solely conveyed through colour. Make sure error messages and status indicators are clearly visible to all users, regardless of their ability to perceive colour.
Implementation:
First, we added ARIA roles, states, and properties to key interactive elements. This step enhanced screen reader support, making navigation easier for users with visual impairments.
With the designs ready, we updated the navigation for both the mobile footer and the desktop header. This also meant adding ARIA roles for screen reader accessibility. I took extra time to set up ARIA labels for dropdown menu items, using aria-haspopup and aria-expanded attributes, combined with JavaScript to manage hover states.
Finally, we removed status messages that relied solely on colour (form errors, notifications etc). We replaced these with text-based indicators and icons, making changes clear to all users.
04. Deliver/Implement ✅
The final phase was to test and launch the improved accessibility features, making sure they worked as intended and improved the UX.
Launch:
We successfully deployed the accessibility enhancements to the live Shopify store. Post-launch, we continued to monitor the site and check for feedback.
User Testing:
Last minute, we learned we wouldn't have time to test prototypes on real users before launch (a cardinal sin of UX). So we recommended setting up a survey post-launch and then iteratively improving things as needed.
I also tried to make up for this by personally testing on virtual screen readers like JAWS and NVDA. Additionally, I manually performed keyboard navigation tests to make sure all interactive elements could be accessed and operated without a mouse.
Automated End-to-End Testing:
To save time on repeated manual testing, I wrote a Cypress test script to automatically check the site for accessibility issues. Since Cypress didn't have built-in accessibility tests at the time, we integrated it with the Axe testing library.
This automated approach made sure our accessibility improvements were consistently maintained and we’d be alerted to any issues instantly.
05. Reflection 🏞️
Our accessibility work led to significantly improved UX for visually impaired users. By aligning more closely with WCAG standards, we made the Lightbox site more accessible to a wider audience.
The positive survey feedback from users with disabilities, who found the site much easier to navigate and use, was a testament to our success. Lightbox was pleased with the results. This project underscores the importance of accessibility in web design and the positive impact it can have on user satisfaction and inclusivity (as well as revenue).