Building Inclusive Web Applications: Accessibility Testing with CodeFrog and axe-core

by

Introduction

Accessibility is not a feature—it’s a fundamental requirement for modern web and mobile applications. Over 1 billion people worldwide live with disabilities, and many rely on assistive technologies to navigate digital products. Beyond the moral imperative, accessible applications reach broader audiences, improve SEO rankings, and help organizations comply with legal standards like WCAG 2.1 and the Americans with Disabilities Act (ADA).

However, accessibility testing remains challenging for many development teams. Manual testing is time-consuming and error-prone, while developers often lack the expertise to identify subtle accessibility violations. This is where automated testing tools become invaluable.

The Challenge: Common Accessibility Issues

Developers frequently encounter accessibility barriers that go unnoticed during standard testing:

  • Missing alt text on images, leaving screen reader users without context
  • Insufficient color contrast making content unreadable for users with low vision
  • Unlabeled form fields confusing users relying on screen readers
  • Broken heading hierarchy disrupting document structure and navigation
  • Missing ARIA attributes preventing assistive technologies from understanding dynamic content
  • Keyboard navigation failures excluding users who cannot use a mouse
  • Missing focus indicators making it impossible to track keyboard position

These issues compound, creating frustrating experiences for users with disabilities while exposing organizations to legal liability.

CodeFrog’s Solution: Automated Accessibility Testing

CodeFrog integrates axe-core, the industry-leading automated accessibility testing engine, directly into your development workflow. This powerful integration enables developers to catch accessibility violations early—during development, not after deployment.

With CodeFrog’s Web Testing feature, you can:

  1. Test multiple sources: Select a local HTML file, enter a URL (localhost, staging, or production), or test a remote server
  2. Test entire sites through sitemap testing: Provide a sitemap URL to automatically test all pages across your entire website, ensuring comprehensive accessibility coverage
  3. Run automated accessibility scans powered by axe-core
  4. View detailed violation reports with severity levels and remediation guidance
  5. Iterate quickly with instant feedback on accessibility improvements

Whether you’re testing a development server running on localhost:3000, a staging environment, a production URL, or an entire site via sitemap, CodeFrog brings accessibility testing directly into your workflow.

What axe-core Detects

axe-core performs comprehensive automated testing across multiple accessibility standards:

Image and Media

  • Missing or empty alt attributes on images
  • Unlabeled buttons and icons
  • Missing captions on video content

Color and Contrast

  • Text with insufficient contrast ratios (WCAG AA/AAA standards)
  • Color-only information without alternative indicators

Forms and Labels

  • Form inputs without associated labels
  • Missing or incorrect for attributes on labels
  • Unlabeled fieldsets and legend elements

Document Structure

  • Improper heading hierarchy (skipping levels like H1 → H3)
  • Missing page landmarks (main, navigation, contentinfo)
  • Duplicate IDs on page elements

ARIA and Semantics

  • Invalid ARIA roles and attributes
  • Missing required ARIA properties
  • Misused semantic HTML elements

Keyboard Navigation

  • Interactive elements not keyboard accessible
  • Missing focus indicators
  • Keyboard traps preventing escape

Benefits for Your Development Team

Shift-Left Testing: Catch accessibility issues before code review, reducing remediation costs and timeline pressure.

Developer Education: Detailed violation reports help your team understand why issues matter and how to fix them, building accessibility expertise across the organization.

Continuous Improvement: Integrate accessibility testing into your CI/CD pipeline to prevent regressions.

Compliance Confidence: Demonstrate accessibility commitment to stakeholders, customers, and regulators.

Inclusive Products: Build applications that work for everyone, expanding your user base and market reach.

Getting Started

CodeFrog makes accessibility testing accessible to developers of all experience levels. Whether you’re building a new feature or auditing an existing application, the Web Testing feature provides actionable insights to improve your digital products.

Start testing today and join the movement toward truly inclusive web development.

CodeFrog: Empowering developers to build accessible, inclusive applications.

Leave a Comment