Design10 min readNovember 8, 2024

Designing for Accessibility in 2025: Beyond Compliance to Competitive Advantage

Accessibility isn't a checkbox — it's a design philosophy that creates better products for everyone. Here's how we embed WCAG 2.2 standards into every phase of the design process.

M

Marcus Johnson

Octarnal Team

Designing for Accessibility in 2025: Beyond Compliance to Competitive Advantage

Accessibility isn't a checkbox — it's a design philosophy that creates better products for everyone. Here's how we embed WCAG 2.2 standards into every phase of the design process.

The Business Case Is Clear

One billion people worldwide live with a disability, representing $8 trillion in annual spending power. In the US alone, web accessibility lawsuits increased 300% between 2018 and 2024. But compliance litigation isn't the real story — the companies investing in accessibility are seeing 28% higher revenue in corresponding demographics, improved SEO rankings (Google's Core Web Vitals heavily favour accessible patterns), and broader market reach. Accessibility is a competitive advantage hiding in plain sight.

WCAG 2.2: What's New

WCAG 2.2 introduced nine new success criteria, with the most impactful being Focus Not Obscured (2.4.11), which ensures that focused elements aren't hidden behind sticky headers or modals — a pattern we see broken on approximately 60% of the sites we audit. Dragging Movements (2.5.7) requires that any functionality triggered by dragging can also be accomplished with a single pointer action, directly impacting dashboard and kanban-style interfaces. These aren't academic requirements; they reflect real-world patterns that exclude users daily.

Our Design Process

At Octarnal, accessibility isn't a QA phase — it's embedded from kickoff. During discovery, we create user journey maps that include assistive technology personas. During design, every Figma component includes annotation layers for ARIA roles, keyboard navigation flows, and colour contrast verification. We maintain a custom Figma plugin that runs real-time contrast checks against our design tokens and flags issues before they ever reach code. During development, automated testing with Axe-core runs in CI, and manual screen reader testing with NVDA and VoiceOver occurs during every sprint review.

Common Patterns That Break Accessibility

The most frequent accessibility failures we encounter aren't edge cases — they're mainstream patterns. Carousels without keyboard navigation and auto-advance pausing. Modal dialogs that don't trap focus. Form inputs without associated labels (placeholder text is not a label). Custom dropdowns built with divs instead of semantic select elements. Toast notifications that aren't announced to screen readers. Colour-only status indicators. Each of these is fixable in under an hour, yet they collectively exclude millions of users.

Measuring What Matters

Automated tools catch roughly 30% of accessibility issues. The remaining 70% require manual testing and real-user feedback. We recommend quarterly accessibility audits combining automated scanning, manual keyboard navigation testing, screen reader verification across NVDA/JAWS/VoiceOver, and usability sessions with disabled users. Track your WCAG conformance level (A, AA, AAA) as a first-class product metric alongside performance and uptime. What gets measured gets improved.

M

Marcus Johnson

Writing about design, product thinking, and building software that matters.

AccessibilityUXWCAGInclusive Design
Share this article