WCAG Optimization Case Study: Mastercard | Open Banking Europe – Delivered by Vertical

About

Accessibility at Speed: How Vertical Helped Mastercard Open Banking Europe Meet WCAG in Under 5 Weeks. With the EU Web Accessibility Directive in full effect and the European Accessibility Act 2025 on the horizon, Mastercard’s Open Banking Europe site needed to prove WCAG compliance. Fast.

Engagement name: Open Banking Website Accessibility Optimization (WCAG)
Timeline: Kick off 28 May 2025 Validation 25 Jun 2025 Go live 5 Jul 2025
Client chain: Mastercard / Open Banking Europe – Armstrong – Vertical
Drivers: EU Web Accessibility Directive, European Accessibility Act 2025, RFP prerequisite
Target standard: WCAG 2.1 A AAA (highest feasible)

Challenge

The problem? The site had already launched, and an external audit flagged over 200 accessibility issues across navigation, contrast, screen reader flows, and mobile rendering.

Solution

Mastercard had the audit. Armstrong had the brand and timelines. Vertical owned the remediation: HTML, CSS, JavaScript, WordPress PHP templates, across all components of the site.

MC open banking

Full dev scope:

  • Dynamic color contrast implementation
  • Search refactor with ARIA live regions
  • Mega menu rebuilt with keyboard-only navigation
  • Alt text validation, semantic heading structure (H1–H6)
  • Iframe labeling, keyboard trap cleanup, mobile screen reader compatibility
  • Custom WordPress Gutenberg block adjustments
  • Compatibility fixes across iOS VoiceOver and NVDA/JAWS

Tools & Method

  • Audit tools: WAVE, IBM Equal Access Checker, Lighthouse, axe-core
  • Assistive testing: NVDA, VoiceOver
  • Workflow: daily development commits, internal QA, client sign-off
  • Collaboration: Slack + shared docs with Armstrong and regular calls
  • Manual & automated tests before each validation pass

We worked agile-style with Armstrong’s PMs and designers, cross-checking components daily. Nothing shipped until it passed both scans and screen reader flow checks.

A Few Highlights

Contrast Compliance:
Auto-adjusted dynamic theming for text to meet 3:1 (large) and 4.5:1 (standard) contrast—without changing Mastercard’s brand colors.

Search Rebuild:
Added hidden labels, live result announcements, and semantic list roles. Works flawlessly in screen readers now.

Heading Order:
Enforced clean heading structure using custom linters during page builds. No more H1 → H4 jumps.

Mobile Screen Reader Fixes:
Repaired modal focus traps, restored background inert states, and tested rendering across iOS/Android devices.

Reusable Components:
We created accessible navigation and support-section patterns now used on other Mastercard pages.

Why it Worked

It wasn’t just about accessibility—it was about making accessibility part of the brand, not a layer on top.

Our deep experience with WordPress and enterprise compliance allowed us to move fast, without breakage.

Mastercard

Technical Wins

Automated compliance score: ~25 % to ~93 % (+ 68 pp)

Critical issues: 27 to 0 (100%)

Serious issues: 156 to 12 (92%)

Legal exposure: High to Low (90 %)

90–93%

WCAG Conformance

~95

Lighthouse Accessibility

0%

Critical Issues

WCAG 1
WCAG 2

Vertical pulled off in weeks what normally takes months.

Sustainability & Monitoring

  • Periodic WCAG audits scheduled through 2026
  • Built-in authoring guardrails for Gutenberg blocks
  • axe-core accessibility testing integrated into CI pipeline
  • Shared checklists for future dev and content teams

About Open Banking

Open Banking Europe by Mastercard is a public-facing platform supporting regulatory alignment and digital transformation in European financial services.

About Vertical

Vertical is a Toronto-based WordPress agency specializing in accessibility-first digital experiences. From audits to enterprise-grade remediation, we help teams meet compliance without compromising design or delivery speed.

[email protected]
verticalhq.ca

Ready to elevate your WordPress experience?

Send us a quick message and we’ll be in touch before you know it.
Name