Back to Basics Guides

Introduction

Visual Mode is the first in the accessibility space. Its visual feedback interface makes it easy to see accessibility issues for the site in real-time.

Creating a Site Connection

Before checking out the Visual Mode feature, you must make sure to set up either the AAArdvark WordPress plugin or the official AAArdvark Chrome Extension. These enable AAArdvark to connect to your site in order to use the visual interface and manually record issues.

Visual Mode requires a Site Connection; make sure to set this up before continuing.


Visual Mode

To review a site in Visual Mode, go to the Site Dashboard > click on the Visual Mode tab.


Show Issues

The Show Issues toggle lets you display all of the visible issues on the page itself. When the toggle is enabled you can get a quick overview of where each Issue Instance lies on the page and select it to get more details.

When this is disabled, you can freely navigate the site and switch between pages.


Errors and Warnings

The pinpoints on the page represent Errors and Warnings, you can differentiate between them using their icons and colorings.

Only Errors have levels of Severity, this is determined by the impact the issue has on the site users.

Critical

Certain users cannot access content and/or functionality, no workaround available.

High

Understanding or accessing content and/or functionality may be difficult for some users.

Low

Minor inconvenience or annoyance for some users. Could also represent best practices.

Very High

Certain users are very likely to have difficulty accessing content and/or functionality.

Moderate

Degraded user experience for some users.

Warnings or Notices

Require a manual review to determine if an accessibility issue is present.


Issue Instance List

The Issue listing within Visual Mode indexes each Instance from the current page you’re on. Clicking on an instance from the list will take you to the location of the issue on the page. The specific element on the page will get a red outline.

Issue declaring a violation of Success Criterion: 1.4.3 Contrast. Displays what an example issue can look like, the failure, sufficient techniques, and the status.

And, vice versa, clicking on an icon on the page will open a modal with the Instance details and give you the option to View Details.

We will note that hidden issues can only be added by automated scans and not manual recording.

Filtering

You can filter through the Visible and Hidden issues in order of Severity, Status, Most recent and Oldest, or who the issue is Assigned to.

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

While Aaardvark does run automated scans, it also allows you to manually perform an audit using Visual Mode. Automated scans are handy and save on time, but the scans won’t always catch every issue – and that’s where Visual Mode comes in with its handy Issue recording feature.

To record an issue, please make sure you’re in Visual Mode. Then, click the Record Issue button.

Aaardvark's Visual Mode interface, displaying several options of showing issues or recording issues. An arrow points towards the Record Issue button in the right-hand side of the screen.

You’ll receive a notice saying that you won’t be able to navigate through the site while recording an issue.

Now that recording is enabled, click on an element on the live page. You’ll be prompted to choose what failure applies to the element in question. The Success Criterion will be selected for you based on the failure, and then you will see one or more Recommended Solution to select from. You can also include any additional notes to the recorded issue.

Recording an issue prompt; the user can select which failure applies to teh issue, the success criterion that relates, a recommended solution, some additional notes, and whether or not the element is visible by default.

One handy thing to note is that you can select a checkbox to share details on whether or not the element is visible by default and how to make it visible.

Once it’s submitted, you’ll see your issue on the page in the form of an icon. Or, use the Issues tab to open the full Issues listing for the current page.


Navigating Between Pages

You can record issues manually while in Visual Mode across other pages, too, without having to back out each time to switch to the next page. Just make sure that the Show Issues toggle is disabled first, and you’ll be able to click any link on your page to navigate.


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