R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Testing Frames with axe-core Script

  • Home
  • Blog
  • Testing Frames with axe-core Script
  • June 1, 2025

Testing Frames with axe-core Script

Rule ID: frame-tested
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure axe-core can analyze content within each frame on your page, follow these steps:

  1. Load axe-core in every frame or iframe document
    Add the axe-core script tag inside the <head> of each framed page, ideally before other scripts:

    html
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
    <!-- other head content -->
    </head>

  2. Enable in-frame testing in your top-level script
    When you invoke axe.run, set the iframes and pageLevel options to true. This tells axe to enter nested browsing contexts and aggregate results:

    javascript
    axe.run(
    document,
    {
    iframes: true,
    pageLevel: true
    },
    function (err, results) {
    if (err) throw err;
    // results.includeViolations and other data will cover all frames
    console.log(results);
    }
    );

  3. (Optional) Use an after callback for page-level processing
    If you need custom aggregation or post-processing of combined frame results, configure an after function in your axe settings:

    javascript
    axe.configure({
    checks: [
    {
    id: 'frame-tested',
    // This callback runs after collecting results from all frames
    after: function (results) {
    // e.g., filter or transform the combined results
    console.log('Aggregated frame results:', results);
    }
    }
    ],
    iframes: true,
    pageLevel: true
    });

By including the axe-core script inside every frame and enabling these options, axe-core will automatically enter and audit each nested document for accessibility violations.

Why it Matters

Web applications often embed critical functionality—like videos, maps, or interactive widgets—inside frames or iframes. If the axe-core script isn’t loaded in those contexts, automated accessibility testing tools cannot enter or analyze that content. As a result, issues such as missing alt text, improper ARIA roles, or inaccessible form controls within frames go undetected. This can create significant barriers for users relying on screen readers or keyboard navigation, leading to a fragmented and frustrating user experience. Ensuring comprehensive testing across all nested frames helps maintain consistent accessibility across your entire site.

Rule Description

This rule verifies that each <iframe> and <frame> element includes the axe-core script, enabling in-frame accessibility checks. Frames missing the script are flagged as “review items,” indicating they must be updated so that axe-core can run its suite of tests within each frame.

The Algorithm (in simple terms)

  1. Locate frames: With the iframes: true setting, axe-core finds all <iframe> and <frame> elements on the page.

  2. Inject or detect script: For each frame, axe-core checks whether the axe-core script is present. If not present, it attempts to inject it (when permissible).

  3. Run tests in frames: If the script is loaded, axe-core executes its accessibility checks inside that frame’s document.

  4. Aggregate results: When pageLevel: true is enabled, results from all frames are combined into a single report for easier review.

  5. Flag missing script: Frames without the script produce a “review” result, prompting developers to add axe-core to those contexts.

Tags:
Share:

Leave A Comment