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.

The Show Issues control toggles the display of the issue markers on the webpage

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.

High

Access may be difficult or confusing for some users.

Low

Minor inconvenience or a best practice recommendation.

Very High

Significant difficulty accessing content or functionality for some users.

Moderate

Degraded user experience but still functional.

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.

Legend in visual mode that includes severity level.

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.
The side panel provides a comprehensive view of the issue instance, including descriptions, comments, recommendations, and assignment.

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.
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 will be completed for you.
  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, some additional notes, and whether or not the element is visible by default.

Once submitted, the issue will appear on the page as an icon and in the Issues tab.

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