Hidden Issues
Introduction
Scanning sites in AAArdvark can result in finding issues on your site and presenting coordinates on the page to pinpoint them with the Visual Mode tool. However, there are some outliers and exceptions to this, such as Hidden Issues.
Hidden Issues are issues that AAArdvark can detect but that are not visible on the page as you are currently viewing it. If you try to look at these issues in Visual Mode, you’ll find them under the Hidden category and clicking an issue will not take you to the spot on the page where the element is located. This happens because the tool cannot pinpoint the location of these issues on the current screen.
There are a number of reasons an element might be hidden:
- It might not have a detectable size – it is 0 pixels wide and 0 pixels tall
- It might be hidden or positioned off-screen with CSS or JavaScript
- It might only be visible at certain screen sizes on responsive or adaptive websites
- It might be initially hidden, but then animate or fade onto the page when you scroll down
- It might be in a section of content that is currently not visible, for example:
- In a slide of a carousel that is not currently visible
- In a collapsed panel of an accordion
- In a tab that is not currently selected
- In a dropdown menu that is not currently open
- It might be an element of the page that is never visible, such as the
<title>tag or a<meta>tag in the HTML<head>section – these element are never visible, so issues with them can never be visible in visual mode.
When elements are not visible, AAArdvark cannot locate them on the page because they have no coordinates – there is nowhere you can go on the page to view the element that has an accessibility issue.
Viewing All Issues
When viewing the text list of issues, all issues will be there. However, when you try to switch to Visual Mode, you may notice that some issues appear as if they’re missing. These are the aforementioned hidden issues, and they won’t be visible on the page.
To look at this list of issues and view everything, you need to ensure you’re in Visual Mode and click the Issues item. From the pop-up that displays, you can view both the Visible and the Hidden tabs. All hidden issues will be listed in the Hidden section, and just like Visible issues, they will each have their own severity marked accordingly.
Marking Manual Issues as Not Visible
To create manual issues and mark them as not visible, start by toggling off the Show Issues toggle in the sidebar.
Once that is accomplished, interact with the page and its elements to bring up the hidden elements. You can try ensuring that the element is visible on the page by making sure it loads in view or opening it in Visual Mode.
You can also directly inspect the page’s source code and modify the elements via HTML and/or CSS to make them visible in some manner. This is a little more tricky, but it can be done.
Once you’ve located the issue in question and made it visible, you can then click the Record Issue button and interact with the element to begin manually recording the issue. Fill out the Failure, Success Criterion, Recommended Solution(s), and Notes fields.
When recording the issue, you can mark the checkbox “Is this element not visible by default?” and include the steps that need to be taken in order to view the issue in the Steps to Visible textbox.
After closing the issues list and toggling the Show Issues toggle off and on, the issues list should refresh and be shown under the Hidden Issues category.
