Visual Mode
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 the official AAArdvark Chrome Extension, Microsoft Edge Add-on, or Firefox Extension. This enables 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.
If you have not run a scan yet on the site, you will not be able to access Visual Mode. Please make sure to run a scan first.
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.
Visual Mode also includes a little legend in the bottom left-hand corner of the screen so you can reference the Errors and Warnings depicting the severity level anytime you need with handy tooltips.
You can click each icon and see issues filtered by severity.
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.
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.
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.
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.
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.
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.
