Card Kingdom

Ensuring a website that conforms to Web Content Accessibility Guidelines

 

Overview

Delivering what is fondly referred to as “Magic” in the collectibles world, Card Kingdom is a premier online destination for Magic: The Gathering (MTG) cards, singles, decks, curated card lists, and all things collectible in the trading card universe. Established in Seattle in 1999, Card Kingdom has grown into one of the most trusted and successful family-owned businesses, thriving on deep-rooted community support and passion for the game.

Committed to providing a seamless shopping experience for every customer, Card Kingdom partnered with XCentium to develop and implement an accessibility improvement plan. The goal: make the site more inclusive and usable for people with disabilities, ensuring compliance with evolving accessibility standards and reinforcing their commitment to inclusive commerce. 


The Challenge: Aligning the Website to Web Content Accessibility Guidelines and Standards

Card Kingdom approached XCentium following an accessibility lawsuit, seeking to align its website with WCAG 2.1 AA Standards (Web Content Accessibility Guidelines). 

An initial accessibility audit revealed several critical issues that significantly impacted users relying on assistive technologies:
 

- The "Add to Cart" button was not accessible via screen readers or keyboard navigation, preventing some users from performing a core shopping action.

- Page refreshes during key interactions (like changing quantities or clicking “Add to Cart”) disrupted screen reader continuity and disoriented users.

- Many buttons and links lacked descriptive accessible names, making navigation unclear and limiting discoverability.

- Focus was not managed properly, particularly after modals, alerts, or validation errors — causing users to lose track of their location on the page.

- Inconsistent keyboard navigation blocked some users from completing the checkout process.

- Status messages (such as error banners or success confirmations) were not announced by screen readers.

These challenges created serious barriers to independent shopping for people with disabilities and exposed Card Kingdom to legal, reputational, and operational risks due to non-compliance.


The Solution: Ensuring Conformation to Web Accessibility Standards

To address the accessibility issues identified during the audit, XCentium implemented a comprehensive remediation strategy using a combination of automated tools, manual testing, and assistive technology validation. The team made several key fixes to improve usability and ensure WCAG 2.1 AA compliance. 
 

Color contrast was corrected across the site to meet minimum accessibility standards, ensuring text and UI elements were clearly visible to all users. Accessible labels were added to buttons, links, and images using appropriate aria-labels and alt text, making them recognizable and navigable by screen readers. Focus management was significantly improved to ensure a logical and consistent tab order across banners, alerts, and modals. For form interactions, error messages were made screen reader-compatible so users would receive immediate feedback upon submission. Most critically, the "Add to Cart" button was remediated to be fully functional for keyboard and screen reader users, allowing for a core ecommerce action to be completed independently. 
 

XCentium used tools such as Axe-Pro for automated WCAG scanning, NVDA for screen reader validation, and Lighthouse and WAVE for semantic and visual audits. Manual keyboard testing ensured the correct focus order, proper tab sequencing, and consistent modal behavior. The project reviewed major user journey pages including Home, Sign-In, Product Listing and Detail pages, My Account, Cart, Checkout, Search, and Order History — providing full accessibility coverage across the shopping experience.


Outcome: Enhancing User Experience and Web Accessibility

The accessibility improvements implemented so far have resulted in significant enhancements to the user experience for people with disabilities, while also laying a strong foundation for ongoing optimization. The “Add to Cart” button is now fully accessible via both keyboard and screen readers, enabling all users to interact with this essential feature independently. Although some disruptive page reloads remain, they have been identified and prioritized in the development backlog for future focus management enhancements. 
 

Establishing baseline accessibility metrics and automated test tooling has enabled Card Kingdom to track progress and maintain compliance moving forward. The improvements have also led to a reduction in user confusion and customer complaints, particularly among users of assistive technologies. Better screen reader announcements now provide real-time feedback for key actions, such as form submissions and status messages, creating a smoother and more informative user experience.

Key performance metrics reflect this progress:  

WCAG 2.1 AA compliance improved from 40% to 70% 

Screen reader accessibility scores rose from 60% to 80% 

Keyboard navigation coverage increased from 50% to 80%


These improvements reflect Card Kingdom’s growing commitment to accessibility and inclusivity, ensuring that all users — regardless of ability — can fully participate in the magic of the online card shopping experience. 

 

 

"Working with XCentium on our ADA project was a great experience. Their team was highly responsive, filled key expertise gaps, and helped upskill our internal team to manage accessibility more effectively moving forward. They provided excellent Project Management, Development, and QA support, with clear, detailed documentation that made remediation straightforward. The project was delivered on time and on budget, with many issues resolved and a well-prioritized backlog for future improvements. Thanks to XCentium, we’ve made significant progress toward full ADA compliance."

Card Kingdom Logo

Jeannie Voirin-Gerde Sr Manager, Digital Product Experience