Back to Basics Guides

Visual Mode

Introduction

Visual Mode is an innovative feature that makes identifying and resolving accessibility issues easy. By providing real-time visual feedback, it helps you spot issues directly on your website.

Installing the Browser Extension

To use Visual Mode, you’ll need to install the AAArdvark browser extension. This allows the platform to connect to your site and enable the visual interface for identifying and recording accessibility issues. Follow these steps to get started:

  • Choose your browser:
  • Install the extension:
    • Follow the prompts to install the extension in your chosen browser. For detailed instructions, click the links above corresponding to the browser-specific guides.
  • Verify the connection:
    • Once the extension is installed, ensure it’s active. If you’re already using AAArdvark, please refresh the page.

You’re now ready to access Visual Mode and start auditing your site!

Visual Mode

To access Visual Mode:

  1. Open the Site Dashboard.
  2. Click the Visual Mode tab.

Important: If you haven’t run a scan on the site yet, Visual Mode will not be accessible. Be sure to run a scan first.

Show Issues

The Show Issues toggle helps you identify accessibility issues directly on the page:

  • Enabled: Displays icons pinpointing each issue instance on the page. Click an icon to view more details.
  • Disabled: Allows you to freely navigate the site and switch between pages.

Tip: Use the toggle to switch between reviewing issues and exploring the site.

Errors and Warnings

The icons on your page represent Errors and Warnings, each identified by specific colors and icons. If you have enabled Notices in your site settings, you’ll also see icons for the Notices.

Errors are categorized by severity, from critical issues to minor inconveniences.

Critical

Prevents certain users from accessing content or functionality with no workaround.

Very High

Some users will face significant difficulty accessing content or functionality.

High

Access may be difficult or confusing for some users.

Moderate

Degraded user experience but still functional.

Low

Minor inconvenience or a best practice recommendation.

Warnings or Notices

Potential issues that require manual review to confirm their impact.

A legend in the bottom left-hand corner of the screen provides a quick reference for these severity levels. Click any icon to filter issues by severity or view details.

You can click each icon and see issues filtered by severity.

Issue Instance List

In Visual Mode, the Issue Instance List shows every issue instance detected on the current page.

How it works

  1. Click an issue instance in the list to jump directly to its location on the page. The element will be highlighted with a red outline.
  2. Alternatively, click an icon on the page to open the instance details and access the View Details option.
Initial modal displays key details about the selected issue instance, including its severity. Click the View Details button to access more information.

Issue Instance Details

The issue instance displays the following information:

  1. Issue severity: Indicates the criticality level of the issue (e.g., High, Medium, Low).
  2. Failure: Describes the specific accessibility problem that was detected for the element.
  3. Sufficient Techniques: Lists recommended solutions or guidelines to fix the issue.
  4. Issue Status: Shows the current state of the issue (e.g., Reopened, Fixed) with options to update it.
  5. Developer Assigned: Specifies who is responsible for fixing the issue.
  6. Issue Context: Shows the actual code snippet where the issue was found.
  7. Comments: A section for team discussions or notes about the issue.
  8. Add a comment: An input field to submit new comments or feedback.

Tip: You can edit issues directly in Visual Mode, assign them to team members, or leave comments.

Filtering

  • Use filters to sort issues by visibility, severity, status, recency, or assignee.
Filtering the issues list by severity, status, oldest and most recent, or who they're assigned to.

Viewing The Issues

Much like viewing the details of an issue from a scan, you can also modify the issue in Visual Mode, change who it is assigned to, and comment on the issue.

Recording an Issue

Manually record accessibility issues using Visual Mode to capture anything automated scans may miss.

Steps to record an issue

  1. Ensure you’re in Visual Mode.
  2. Click the Record Issue button. A message saying “Issue Recording Mode is On” will briefly appear, indicating that recording has started.
Aaardvark’s Visual Mode interface with an arrow pointing towards the Record Issue button in the right side pane on the screen
  1. Click the element on the page where the issue occurs.
  2. In the modal, select the appropriate Failure. The Success Criterion and default Severity for the issue will auto-populate, but you can manually adjust the severity level if required.
  3. If there are multiple possible solutions, choose the best option for the situation and add any additional notes needed.
  4. Check the box to indicate if the issue is hidden by default – include steps to make it visible if applicable.
Recording an issue prompt; the user can select which failure applies to the issue, the success criterion that relates, a recommended solution, severity level, some additional notes, and whether or not the element is visible by default.
  1. Once submitted, the issue will appear on the page as an icon and in the Issues tab.
  2. You can end the recording by clicking the Record Issue button again or using the Esc key.

Navigating Between Pages

You can use Visual Mode to record issues across multiple pages without leaving the interface:

  1. Disable the Show Issues toggle to enable navigation.
  2. Click any link on the page to move to a new page.
  3. Re-enable Show Issues to review or record issues on the new page.

Tip: This seamless navigation saves time by allowing you to audit multiple pages in one session.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides