How it works

Add a single script tag to your website:

<script src="https://cdn.aimirror.dev/aimirror.latest.js" data-key="YOUR_PUBLIC_API_KEY"></script>

Or pull the SDK

import { AIMirror } from "aimirror";

AIMirror.init({
  key: "YOUR_PUBLIC_API_KEY",
});

This lightweight script quietly tracks real user behaviour — scrolls, clicks, hovers, element exposure time, and more — entirely in the background, either by an end user on your deployed project, or while you develop.

From these behaviours, the Insight Engine automatically produces actionable UX insights, prioritised by impact. You can see real-time, actual Live Insights for aimirror.dev analysing itself, in the Live Insights section below.

Engagement Simulation

The script will then track every interaction in the background. Every session. Every user. Live.

These interactions will drive the analysis tools in our API to provide real-time, up to date insights about your users behaviour.

Clicks

0

Scrolls

0

Interactions appear in real time.
This feed now runs fully client-side.

Recent activity

  • Start interacting with the page to see live events here.

Live Insights

The dashboard will then give you realtime insights about what your users have been doing, what kind of problems your site has, how important they are to fix, and most of all, how to fix them.

These insights are real-time live insights for aimirror.dev

Yes, the AIMirror website is not perfect, and is constantly being improved upon, thanks to the analysis of itself.

Project: aimirror.dev

Filters ⌄
Impact
Category
  • general trust
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <section.feature-grid.svelte-1iahnli>
    Tag section
    Classes feature-grid svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 16, y: -1261
    Font Size 16px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Trust issues are inferred from friction scores; no explicit data on user confusion or broken links.

    High friction scores and lack of interaction may imply trust issues, although no explicit signals are present.

    Ensure that trust signals such as privacy policies and terms of service are easily accessible and clearly visible.

    Fix Ready

    Proposed Fix

    A section describing powerful features should include trust signals (e.g., testimonials, ratings, badges) and clear interactive elements (e.g., buttons, links) to improve user confidence and engagement, especially for users who rely on visual or structural cues for trust. Lack of such elements may lead to high friction and reduced user trust.

    HTML
    <section class="feature-grid svelte-1iahnli">
  <h2>Powerful features, zero setup</h2>
  <p>AIMirror automates the work of UX researchers, accessibility auditors, and product analysts — instantly.</p>
  <ul aria-label="Trust signals">
    <li><img src="/trusted-by-logo.png" alt="Trusted by Top Companies"></li>
    <li><span aria-label="5-star user rating">★★★★★</span></li>
    <li><img src="/award-badge.png" alt="Accessibility Award 2024"></li>
  </ul>
  <a class="cta-button" href="/get-started">Get Started</a>
</section>
    CSS
    .feature-grid { display: flex; flex-direction: column; gap: 1.5rem; color: #111; background: #f9fafb; }
.cta-button { background: #0366d6; color: #fff; padding: 0.75em 1.5em; border-radius: 4px; text-decoration: none; font-weight: 600; }
    ARIA
    Add meaningful alt attributes to images, use ARIA labels on trust signal list, and ensure the call-to-action is keyboard accessible.
    11:01:33 AM AA
  • general accessibility
    MEDIUM IMPACT
    Inspected Element
    1.4.3 Contrast (Minimum)
    <p.subtitle.svelte-1iahnli>
    Tag p
    Classes subtitle svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 40, y: 399
    Font Size 17.6px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Without explicit WCAG scores, assumptions about accessibility issues are based on high friction scores.

    The dataset does not provide explicit WCAG scores or contrast issues, but the high friction score suggests potential accessibility barriers.

    Conduct an accessibility audit to identify and resolve any WCAG compliance issues, focusing on contrast and text size.

    Fix Ready

    Proposed Fix

    The text color (rgb(249, 250, 251)) is very light and may not provide enough contrast against a light background, making it difficult for users with visual impairments to read. This fails WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum).

    HTML
    <p class="subtitle svelte-1iahnli">AIMirror automates the work of UX researchers, accessibility auditors, and product analysts — instantly.</p>
    CSS
    .subtitle { color: #1a1a1a; }

    Choose a text color that provides at least a 4.5:1 contrast ratio against the background. If the background is dark, consider using white (#fff); if it's light, use a dark color such as #1a1a1a for improved readability. Test with accessibility tools if needed.

    11:01:33 AM AA
  • general performance
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <li.svelte-1hrotn9>
    Tag li
    Classes svelte-1hrotn9
    ID -
    Size 0 × 0
    Position x: 36, y: 491
    Font Size 15.2px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Performance issues can lead to higher bounce rates if users cannot easily find what they need.

    Sessions show deep scrolling without interaction, suggesting potential issues with content discoverability or performance.

    Optimize content loading and ensure key information is accessible without excessive scrolling.

    Fix Ready

    Proposed Fix

    The zero width and height of this list item suggest that it may not be visible or discoverable to users, which can negatively impact accessibility and user experience. This may also cause users to scroll excessively without meaningful content interaction, violating WCAG 2.4.7 (Focus Visible) and 1.4.3 (Contrast) if content is not perceivable.

    HTML
    <li class="svelte-1hrotn9">Basic AI insights</li>
    CSS
    .svelte-1hrotn9 { display: list-item; font-size: 15.2px; font-weight: 400; color: #191c1f; min-width: 120px; min-height: 24px; }

    Set a minimum width and height to ensure visibility. Review page structure to ensure all interactive or informational elements are perceivable. Adjust color for contrast if needed. Consider further audit if this pattern is repeated elsewhere.

    11:01:33 AM AA
  • general visual
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <section.feature-grid.svelte-1iahnli>
    Tag section
    Classes feature-grid svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 16, y: -1261
    Font Size 16px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Improving visual hierarchy can help guide users' attention to important content.

    The visual hierarchy may not be effectively guiding users due to low engagement and high friction scores.

    Enhance visual hierarchy by adjusting font sizes and weights to emphasize key information.

    Fix Ready

    Proposed Fix

    Insufficient visual hierarchy can cause confusion and reduce user engagement, especially for users with cognitive impairments. Proper hierarchy ensures all users can easily scan and understand content.

    HTML
    <section class="feature-grid svelte-1iahnli"><h2>Powerful features, zero setup</h2><p>AIMirror automates the work of UX researchers, accessibility auditors, and product analysts — instantly.</p></section>
    CSS
    .feature-grid h2 { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.5em; } .feature-grid p { font-size: 1rem; font-weight: 400; color: #6b7280; }

    Adding semantic heading tags and improved contrast helps both visual and screen reader users follow content structure and increases comprehension. No ARIA roles are necessary for this standard section.

    11:01:33 AM AA
  • general content
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <p.subtitle.svelte-1iahnli>
    Tag p
    Classes subtitle svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 40, y: 399
    Font Size 17.6px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Dense text without headings can deter users from engaging with the content.

    Text-heavy sections with low interaction suggest potential readability or scannability issues.

    Break up text into smaller, more digestible chunks and use headings to improve scannability.

    Fix Ready

    Proposed Fix

    Large blocks of text can be difficult to read and understand, especially for users with cognitive or visual impairments. Clearer structure and better color contrast improve accessibility and comprehension in line with WCAG Guidelines (1.4.3 Contrast (Minimum), 1.4.8 Visual Presentation, 3.1.5 Reading Level).

    HTML
    <p class="subtitle svelte-1iahnli"><strong>AIMirror</strong> automates the work of:<ul><li>UX researchers</li><li>Accessibility auditors</li><li>Product analysts</li></ul>&#8212; instantly.</p>
    CSS
    .subtitle { color: #121212; background-color: #F9FAFB; line-height: 1.6; }

    Text was broken into a bulleted list for better scannability. Color contrast was improved for accessibility. If using background color, ensure minimum 4.5:1 contrast between text and background.

    11:01:33 AM AA
  • general navigation
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <li.svelte-1hrotn9>
    Tag li
    Classes svelte-1hrotn9
    ID -
    Size 0 × 0
    Position x: 36, y: 491
    Font Size 15.2px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Users may not be finding key content easily due to poor navigation structure.

    Users experience deep scrolling without interaction, suggesting potential navigation issues or buried content.

    Reevaluate the information architecture to ensure important content is easily discoverable.

    Fix Ready

    Proposed Fix

    The list item is rendered with zero width and height, making its content inaccessible or invisible to users. This may lead to users missing important navigation or information, causing deep scrolling and poor user experience.

    HTML
    <li class="svelte-1hrotn9">Basic AI insights</li>
    CSS
    .svelte-1hrotn9 { min-width: 1em; min-height: 1em; display: list-item; color: #000; }

    Ensure the element is properly visible and perceivable to prevent hidden or buried content. Adjust color for sufficient contrast with the background and avoid setting width/height to 0 unless the item should not be displayed.

    11:01:33 AM AA
  • general conversion
    HIGH IMPACT
    Inspected Element
    WCAG OK
    <section.feature-grid.svelte-1iahnli>
    Tag section
    Classes feature-grid svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 16, y: -1261
    Font Size 16px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    Deep scrolling without action suggests CTAs may not be visible or compelling enough.

    Users are scrolling deeply without taking actions, indicating potential confusion or lack of compelling CTAs.

    Introduce clear, actionable CTAs at strategic points to guide users towards conversions.

    11:01:33 AM AA
  • general engagement
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <p.subtitle.svelte-1iahnli>
    Tag p
    Classes subtitle svelte-1iahnli
    ID -
    Size 0 × 0
    Position x: 40, y: 399
    Font Size 17.6px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 2
    Hovers 0
    Scrolls 10
    Elements Sampled 5
    Max Depth 96

    The engagement score is consistently low, suggesting users are not interacting deeply with the content.

    There is a high friction score and low engagement score across sessions, indicating potential user frustration or lack of interest.

    Consider simplifying the content and improving the visual hierarchy to make it more engaging.

    11:01:33 AM AA
  • General trust
    HIGH IMPACT

    There are no visible trust signals on key conversion pages, which could affect user confidence.

    Add trust signals such as secure payment icons or privacy assurances on conversion pages.

    11:01:18 AM A (Needs Work)
  • General visual
    MEDIUM IMPACT

    The visual hierarchy may not be clear, leading to user confusion.

    Improve the visual hierarchy by using consistent font sizes and weights to guide user attention.

    11:01:18 AM A (Needs Work)
  • General navigation
    MEDIUM IMPACT

    There is a lack of interaction with navigation elements, suggesting potential discoverability issues.

    Enhance the visibility and clarity of navigation elements to improve user flow.

    11:01:18 AM A (Needs Work)
  • General performance
    MEDIUM IMPACT

    Users are experiencing instant bounces, which may indicate performance issues or irrelevant content.

    Optimize page load times and ensure above-the-fold content is engaging and relevant to users.

    11:01:18 AM A (Needs Work)
  • General engagement
    HIGH IMPACT

    There is a high bounce rate with minimal interaction, indicating potential issues with content or layout.

    Review the landing page content and layout to ensure it aligns with user expectations and encourages interaction.

    11:01:18 AM A (Needs Work)
  • FAQ item content
    MEDIUM IMPACT
    Inspected Element
    WCAG OK
    <div.faq-item.svelte-1hrotn9>
    Tag div
    Classes faq-item svelte-1hrotn9
    ID -
    Size 0 × 0
    Position x: 16, y: 610
    Font Size 16px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 85/100
    Avg Hover Time 0 ms
    Clicks 0
    Hovers 0
    Scrolls 0
    Elements Sampled 1
    Max Depth 0

    Better visibility of FAQ can enhance user satisfaction.

    The FAQ content is not immediately visible, potentially leading to user frustration.

    Ensure FAQ items are visible or easily accessible to improve user experience.

    11:01:18 AM AA
  • Get Started button conversion
    HIGH IMPACT
    Inspected Element
    WCAG OK
    <button.cta>
    Tag button
    Classes cta
    ID -
    Size 0 × 0
    Position x: 36, y: -13
    Font Size 15.2px
    Font Weight 500
    Text Color rgb(255, 255, 255)
    Background -
    Avg Contrast 0
    WCAG Score 80/100
    Avg Hover Time 0 ms
    Clicks 0
    Hovers 0
    Scrolls 0
    Elements Sampled 1
    Max Depth 0

    Improving visibility can increase user interaction with the CTA.

    The 'Get Started' button is located outside the visible viewport, making it less discoverable.

    Reposition the 'Get Started' button to ensure it is within the initial viewport on page load.

    11:01:18 AM AA
  • Accessibility & contrast modelling accessibility
    MEDIUM IMPACT
    Inspected Element
    1.4.3 Contrast (Minimum)
    <li.svelte-1hrotn9>
    Tag li
    Classes svelte-1hrotn9
    ID -
    Size 0 × 0
    Position x: 36, y: 613
    Font Size 15.2px
    Font Weight 400
    Text Color rgb(249, 250, 251)
    Background -
    Avg Contrast 0
    WCAG Score 75/100
    Avg Hover Time 0 ms
    Clicks 0
    Hovers 0
    Scrolls 0
    Elements Sampled 1
    Max Depth 0

    Contrast improvement needed to enhance readability.

    The text color on the 'Accessibility & contrast modelling' item has low contrast against the background.

    Increase the contrast ratio of the text to meet WCAG 2.2 standards.

    11:01:18 AM A (Needs Work)
  • AI Mirror seo
    LOW IMPACT

    Potential SEO issues due to missing headings and unclear content structure.

    Ensure proper heading structure and clear content organization for better SEO.

    Fix Ready

    Proposed Fix

    Without headings, screen reader users and search engines cannot easily understand the structure or hierarchy of the content, harming both accessibility and SEO.

    HTML
    <h1>Main Page Title</h1>
<p>Brief introduction or relevant content goes here.</p>
    CSS
    h1 { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; }

    Ensure to use heading elements (<h1> to <h6>) appropriately to define document structure. Use only one <h1> per page, followed by <h2>, <h3>, etc., for subsections. Proper headings also benefit SEO rankings.

    10:51:14 AM A (Needs Work)
  • AI Mirror trust
    MEDIUM IMPACT

    Potential trust issues due to high friction and instant bounces.

    Enhance trust signals on key pages like pricing and signup to reassure users.

    Fix Ready

    Proposed Fix

    High friction can cause users to quickly leave (bounce), decreasing trust and accessibility. WCAG guidelines emphasize ease of navigation, clear feedback, and preventing unexpected behavior to support all users—especially those with cognitive disabilities.

    HTML
    <button id="start-action" class="primary-action" aria-label="Start your experience">Get Started</button>
    CSS
    .primary-action { font-size: 1.2rem; padding: 0.75em 1.5em; border-radius: 4px; background: #2356a6; color: #fff; border: none; cursor: pointer; }
    ARIA
    Add descriptive aria-labels to actionable elements to clarify their purpose for screen reader users.

    Minimize required steps, avoid popups or overlays on page load, and provide clear, visible calls to action. Test navigation with keyboard and screen reader to ensure all users can progress easily.

    10:51:14 AM A (Needs Work)
  • AI Mirror visual
    MEDIUM IMPACT

    Visual hierarchy may be unclear, leading to user confusion and high friction.

    Improve visual hierarchy with better spacing and alignment to guide user attention.

    10:51:14 AM A (Needs Work)
  • AI Mirror performance
    HIGH IMPACT

    Low engagement and high friction scores suggest perceived performance issues.

    Optimize page load speed and reduce above-the-fold content to improve perceived performance.

    Fix Ready

    Proposed Fix

    Users may perceive the page as slow or unresponsive if important visual cues are missing, such as loading indicators or interactive feedback. This can increase friction and lower engagement, especially for users relying on assistive technology.

    HTML
    <div role="status" aria-live="polite" class="loading-indicator">Loading…</div>
    CSS
    .loading-indicator { font-size: 1rem; color: #333; background: #f8f8f8; padding: 8px; border-radius: 4px; }
    ARIA
    Add role="status" and aria-live="polite" to dynamic content containers to inform users of updates.

    Perceived performance can also be improved with skeleton screens, meaningful feedback, and reducing delays in content updates. Ensure changes are announced to screen readers.

    10:51:14 AM A (Needs Work)