Back to Basics Guides

Hidden Issues

Introduction

AAArdvark scans your site to identify accessibility issues and uses Visual Mode to display their exact coordinates on the page. However, there are some outliers and exceptions to this, such as Hidden Issues.

What Are 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, for example a navigation menu that appears only on smaller screens.
  • 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.

In these cases, the issues exist but cannot be pinpointed visually due to the lack of onscreen coordinates.

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 view all the issues, switch to Visual Mode and click the Issues tab. 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.

Hidden Issues tab in Visual Mode.

Marking Manual Issues as Not Visible

If you are doing manual accessibility testing and need to record a manual accessibility issue on an element that is hidden by default, follow these steps:

  1. Turn off the Show Issues toggle in the sidebar.
  2. Interact with the page elements to reveal the hidden element or content.
    • If there is not a clear way to reveal the hidden element by interacting with the page, you can use the browser console to modify the styles for the page and reveal the hidden element.
  3. Once the element is visible, click the Record Issue button to document the issue.
  4. When filling in the details of the issue, check the checkbox labeled “Is this element not visible by default?” and complete the “Steps to Visible” textbox so the next user understands how to reveal the element.
  5. Refresh the issues list by toggling the Show Issues toggle off and back on.
Recording Hidden Issues so there are more details on how to access them.

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