Accessibility Testing

Overview

CodeFrog includes comprehensive accessibility testing tools designed to help you meet WCAG (Web Content Accessibility Guidelines) standards at all three conformance levels: A, AA, and AAA. These tools help identify and fix accessibility issues before your app or website goes live.

Purpose

Accessibility testing ensures your application is usable by people with disabilities, including:

• Visual impairments (blindness, low vision, color blindness)
• Motor impairments (limited dexterity, keyboard-only navigation)
• Cognitive impairments (attention disorders, learning disabilities)
• Hearing impairments (deafness, hard of hearing)

Meeting WCAG standards is not just good practice—it’s often required by law in many jurisdictions. Level AA is typically the target for legal compliance, while Level A is the minimum and Level AAA represents enhanced accessibility.

How to Run Accessibility Tests

1. Open your project in CodeFrog
2. Navigate to the Analyze tab
3. Select Accessibility from the analysis options
4. Choose the files or directories to scan
5. Click Run Analysis

The accessibility scanner will check:

• Color contrast ratios (text vs. background)
• Keyboard navigation support
• ARIA attributes and roles
• Focus management
• Screen reader compatibility
• Alt text for images
• Semantic HTML structure

Interpreting Results

Important: WCAG A, AA, and AAA ratings cannot be fully achieved with automated testing alone. Manual testing with assistive technologies is required for full conformance. According to Deque (makers of axe-core), automated tests find less than 60% of accessibility issues on average. CodeFrog’s automated testing helps identify many issues, but should be combined with manual testing for complete WCAG compliance.

Color Contrast

The scanner reports contrast ratios for all text elements:

• WCAG AA Standard: 4.5:1 for normal text, 3:1 for large text
• WCAG AAA Standard: 7:1 for normal text, 4.5:1 for large text

Results show:

• ✅ Pass: Meets or exceeds WCAG AA standards
• ⚠️ Warning: Close to threshold, consider improving
• ❌ Fail: Below WCAG AA standards, must be fixed

CodeFrog tests for both AA and AAA contrast requirements. The WCAG rating in your results shows which level your page passes based on automated testing, but full conformance requires manual testing.

Keyboard Navigation

The scanner verifies:

• All interactive elements are keyboard accessible
• Tab order is logical
• Focus indicators are visible
• No keyboard traps
• Skip links are present where needed

ARIA Validations

Checks include:

• Proper use of ARIA roles
• ARIA labels and descriptions
• ARIA state attributes (aria-expanded, aria-hidden, etc.)
• Landmark regions (navigation, main, etc.)

Keyboard and Focus Checks

Manual Testing

While automated tools catch many issues, manual testing is essential:

1. Tab Navigation Test:
   • Use only the Tab key to navigate
   • Verify all interactive elements are reachable
   • Check that focus indicators are visible
   • Ensure tab order is logical
2. Keyboard Shortcuts:
   • Test all keyboard shortcuts
   • Verify they work without mouse
   • Check for conflicts with screen readers
3. Focus Management:
   • Modal dialogs should trap focus
   • Focus should return to trigger element when modal closes
   • Dynamic content changes should announce to screen readers

Exporting Results

Accessibility scan results can be exported in multiple formats:

• Markdown: Human-readable report
• JSON: Machine-readable for CI/CD integration
• HTML: Formatted report for sharing

Export options are available from the results screen.

Troubleshooting

False Positives

Some automated checks may flag issues that aren’t actual problems:

• Dynamic Content: Content loaded via JavaScript may not be detected initially
• Third-Party Components: External libraries may have their own accessibility features
• Context-Dependent: Some checks require understanding of user flow

Common Issues and Fixes

Low Contrast:

• Increase contrast between text and background
• Use color contrast checker tools
• Consider dark mode alternatives

Missing ARIA Labels:

• Add aria-label or aria-labelledby attributes
• Ensure form inputs have associated labels
• Use semantic HTML where possible

Keyboard Traps:

• Review focus management in modals
• Ensure Escape key closes dialogs
• Test with keyboard-only navigation

Missing Focus Indicators:

• Add visible focus styles (outline, border, etc.)
• Ensure focus indicators meet contrast requirements
• Test in high contrast mode

Best Practices

1. Test Early and Often: Run accessibility scans during development, not just before launch
2. Combine Automated and Manual Testing: Automated tools catch many issues, but manual testing is essential for full WCAG conformance at any level (A, AA, or AAA). According to research, automated tests find less than 60% of accessibility issues on average. Therefore, manual testing with assistive technologies is required for complete compliance.
3. Test with Real Screen Readers: Use VoiceOver (macOS), NVDA (Windows), or JAWS
4. Test Keyboard Navigation: Verify all functionality is accessible via keyboard only
5. Involve Users with Disabilities: Get feedback from actual users when possible
6. Follow WCAG Guidelines: Use the official WCAG 2.1 guidelines as your reference
7. Understand Limitations: Remember that automated testing alone cannot fully verify WCAG compliance. For more information, see the Deque automated accessibility coverage report.

Related Topics

• WCAG Levels Explained - Detailed explanation of WCAG A, AA, and AAA conformance levels
• Building Inclusive Web Applications - Blog post on accessibility testing with CodeFrog

Next Steps

• Launch Checklist - Include accessibility in your pre-launch checks
• Security Testing - Comprehensive security validation