Side Panel

The Side Panel is your primary interface for quick UX audits and issue triage. It stays open alongside your browsing, letting you scan pages and review issues without switching context.

Opening the Side Panel

Open the Side Panel using any of these methods:

Interface Overview

The Side Panel is divided into several sections:

Scan Controls

At the top of the panel, you will find scan control buttons:

When to use each mode:

• Quick Scan - During active development for rapid feedback
• Full Scan - Before committing code or for thorough review

The scan indicator shows progress and displays results count when complete.

Issue List

The main area displays discovered issues in a scrollable list:

Issue item information:

• Severity indicator (colored dot)
• Issue title (e.g., "Missing alt text")
• Category badge (Accessibility, UX, etc.)
• Affected element (truncated selector)

Filtering issues:

Use the filter controls above the list to narrow down issues:

Sorting issues:

Click the sort icon to change issue ordering:

• Severity (default) - Critical issues first
• Element order - Top of page to bottom
• Category - Grouped by issue type

Issue Details

Clicking an issue in the list expands its details:

Issue detail includes:

• Full description of the problem
• Why it matters (impact on users)
• WCAG reference for accessibility issues (e.g., "WCAG 2.1 Level A - 1.4.3")
• Element selector for programmatic targeting
• Current element HTML (truncated)

Triage Actions

When an issue is selected, action buttons appear:

Recording Controls

At the bottom of the Side Panel, you will find flow recording controls:

See Flow Recording for detailed recording documentation.

Scan Modes Explained

Quick Scan

The Quick Scan mode runs a focused set of accessibility checks:

What it checks:

• Missing or empty alt text on images
• Missing form labels
• Color contrast issues
• Missing document language
• Duplicate IDs
• Empty links and buttons

Technology: Uses axe-core for WCAG compliance testing.

Performance: Typically completes in under 2 seconds, even on complex pages.

Full Scan

The Full Scan mode runs comprehensive analysis:

What it checks:

• All Quick Scan checks
• Touch target sizing (minimum 44x44px)
• Focus management and tab order
• Heading hierarchy
• Link text quality
• Form validation UX
• Loading state indicators
• Error message clarity

Technology: Combines axe-core with custom VertaaUX UX heuristics.

Performance: Typically 10-15 seconds depending on page complexity.

Working with Issues

Understanding Severity

Issues are classified by severity based on user impact:

Clicking to Highlight

When you click an issue in the list:

1. The page scrolls to bring the element into view
2. The element's overlay pulses to draw attention
3. The issue details expand in the Side Panel
4. The element is highlighted in the DevTools Elements panel (if open)

The Triage Workflow

A typical triage session follows this pattern:

1. Run Full Scan on the page
2. Filter to Critical issues first
3. Click each issue to see it highlighted on page
4. Evaluate - Is this a real problem? Does it need fixing?
5. Take action:
   • If fixing now: Make the code change, then "Mark as Fixed"
   • If deferring: Copy selector for a ticket
   • If intentional: "Won't Fix" with a reason
6. Move to next severity when critical issues are handled

Marking Issues as Fixed

When you fix an issue:

1. Make your code change
2. Click "Mark as Fixed" in the Side Panel
3. The issue moves to the "Fixed" status
4. Re-run the scan to verify the fix worked

Won't Fix Reasoning

When marking an issue as "Won't Fix", you are prompted for a reason:

Common reasons:

• "By design" - The pattern is intentional
• "Third-party content" - Cannot be modified
• "False positive" - The tool is incorrect
• "Low priority" - Will address later (tracked elsewhere)

This creates an audit trail explaining why issues were dismissed.

Exporting Results

Export scan results for documentation or ticketing:

Export formats:

Click the export icon (download arrow) in the Side Panel header to access export options.

Exported data includes:

• All issues with full details
• Severity and category
• Element selectors
• Triage status (if set)
• Scan metadata (URL, timestamp, mode)

Keyboard Shortcuts

Navigate the Side Panel efficiently with keyboard shortcuts:

Tips for Efficient Triage

1. Start with Critical - These are the most impactful to fix
2. Batch similar issues - Fix all contrast issues at once, for example
3. Use element inspection - Open DevTools alongside for CSS debugging
4. Copy selectors - Use them in your CSS or tests
5. Export for team - Share CSV with designers or PMs for prioritization

Next Steps

Related

• CLI Audit Command - Run the same scans from terminal
• API Create Audit - Trigger scans programmatically