Skip to Content

ANDI

Frequently Asked Questions

Here are some answers to common questions about ANDI.

Definitions

What is Accessible Name?

Accessible Name is the name of an HTML element which will be spoken by screen readers and used by Assistive Technologies. The accessible name is the result of the accessible name computation based on the element's contents, HTML attributes, ARIA attributes, or programmatically associated elements. ANDI, the accessibility testing tool, calculates the accessible name and includes it in the ANDI output.

What is Accessible Description?

Accessible Description is additional text related to an HTML element which will be spoken by screen readers and used by Assistive Technologies. The accessible description is the result of the accessible name computation based on the element's HTML attributes and ARIA attributes. ANDI, the accessibility testing tool, calculates the accessible description and includes it in the ANDI output.

Troubleshooting

How to show favorites/bookmarks bar

If the browser toolbar or favorites/bookmarks menu is hidden, try this: Press F10, then select the bookmarks/favorites option to show bookmarks/favorites bar.

If the favorites bar is disabled by the web application...

  1. If using IE, press CTRL + N to open a new window at the current (hidden) url.
  2. If that doesn't work, if using IE, get the current URL and paste into a new window:
    • Right click on the page or press Shift + F10
    • Select "Properties"
    • Click next to Address (URL), press CTRL + A to select the full url
    • CTRL + C to copy the url
    • Open a new browser window paste the url into the address field, press enter
  3. Otherwise, ask the web application's development team to enable the toolbar.
ANDI isn't Working

If ANDI doesn't launch or doesn't finish loading, try these steps:

Check for Content Security Policy (CSP)

The page may have a "Content Security Policy (CSP) directive" which prevents outside scripts, like ANDI, from executing. To determine if this is the issue, open the browser's Developer Tools (F12) and attempt to launch ANDI.

If the Dev Tools console shows an error message that says "Refused to load the script...because it violates the following Content Security Policy directive" then this is the issue.

If CSP is preventing ANDI from working, try the CSP workarounds below.

Check for JavaScript error

There could be a JavaScript error occurring, causing ANDI to freeze. Usually when this occurs, ANDI will partially load, but won't finish.

Open the browser's Developer Tools (F12) and attempt to launch ANDI. If the Dev Tools Console shows a JavaScript error that relates to ANDI, then send a link to the test page or a screenshot of the console error message to ANDI's development team by creating an issue on the GitHub page.

Check if favelets are blocked

Your browser or organization could be preventing scripts (such as ANDI) from launching from a favorite/bookmark.

To determine if favelets/bookmarklets are blocked, try this:

  • Drag and Drop this link: Test Favelet into your browser's favorites/bookmark bar.
  • Activate the favorite/bookmark you just created.
  • If you don't see an alert pop up, then your browser is blocking JavaScript in favorites/bookmarks, in which case you will not be able to use ANDI in this browser.
Is the test page huge?

The test page may be very large and have many elements which takes ANDI a longer than normal time to analyze.

Try waiting a little longer. If you still have issues, create an issue on the GitHub page.

Content Security Policy (CSP) blocks ANDI

A "Content Security Policy (CSP) directive" prevents outside scripts, like ANDI, from executing. When you launch ANDI, if you get a warning about Content Security Policy, and ANDI doesn't load, here's some help.

Try these one of these workarounds:

  1. Long-term Workaround: Ask the page owner to add the ANDI scripts to the "whitelist" of allowed scripts. When ANDI's scripts are "whitelisted", the scripts won't be blocked by the CSP.
  2. Immediate Workaround: Install a browser extension called Disable Content-Security-Policy or change a browser setting. (Instructions below). Note: It is the user's decision to disable CSP and the user's responsibility to re-enable CSP when testing with ANDI has concluded.
  1. Install the Disable Content-Security-Policy extension
  2. Navigate to the test page
  3. Open the extensions menu (puzzle icon) and activate/enable the Disable Content-Security-Policy extension
  4. Refresh the test page
  5. Launch ANDI
  6. When done testing, turn off the Disable CSP extension
  1. Open Microsoft Edge and go to the Chrome Web Store.
  2. Press the button to "Allow extensions from other stores"
  3. Find and Install the Disable Content-Security-Policy extension from the Chrome Web Store
  4. Navigate to the test page
  5. Open the extensions menu (puzzle icon) and activate/enable the Disable Content-Security-Policy extension
  6. Refresh the test page
  7. Launch ANDI
  8. When done testing, turn off the Disable CSP extension
  1. In the address bar, enter "about:config"
  2. Under Preference Name, select "security.csp.enable" to disable it
  3. Navigate to the test page, launch ANDI
  4. When done testing with ANDI, re-enable the "security.csp.enable"
  1. Internet Explorer does not enforce CSP
ANDI Causes Blank/White Space (Iframe Workaround)

If content gets removed or turns white/blank when ANDI is launched, the content is probably within an iFrame. To test this content, the iframes Module may not work because of the way the iframe was implemented. Try this workaround:

  1. Refresh the test page or close ANDI
  2. Copy the ANDI script here:
  3. Find an element within the iframe that ANDI was not able to detect
  4. Right click on that element and select "Inspect"
  5. This opens Dev Tools and highlights the element you right-clicked on.
  6. In Dev Tools, at the top, notice the "Elements" tab is selected. Change to the "Console" tab.
  7. Now paste the ANDI script that you copied above and hit enter. NOTE: If this is your first time pasting in the console, the browser may ask you to type "allow pasting".
  8. This will allow ANDI to detect the content within the iframe.
ANDI isn't finding an element

If you launched ANDI and it isn't finding something on the page, try these steps:

Refresh ANDI

ANDI doesn't keep track of dynamic events and changing content.

If the page content changed after ANDI was launched, ANDI doesn't know that the content changed. Refresh ANDI.

Are you using the right ANDI Module?

A different module may need to be selected to detect the element.

By default, ANDI will detect "focusable elements". If ANDI doesn't detect a focusable element, either the element isn't focusable (and therefore probably an accessibility issue) or ANDI is having a problem detecting the element.

Is the element is in an iframe?

By default, ANDI cannot detect elements within an iframe, but there are workarounds.

Expand the ANDI Module selection dropdown. If you see "iframes", that means the page has content within an iframe. Read about how to use the iframes Module.

If the iframes module isn't working because the iframe content doesn't load when ANDI is launched or goes to a blank white screen, follow this iframe workaround.

Is the element is in a shadow DOM?

ANDI is not able to detect elements within a shadow DOM. There are no work arounds.

Try the Next/Previous Element Buttons

If mouse hover is not able to inspect an element, try the Next or Previous Element buttons. The application may have used CSS to make the visible element be different from the keyboard accessible element.

Why is ANDI's Output different from the screen reader's?

ANDI's Output may occasionally be different from a screen reader's output. Here are some reasons why the Output may differ:

  • ANDI, the accessibility testing tool, uses the DOM (Document Object Model) to calculate the Output according to the Accesible Name Computation. Whereas, screen readers rely on more layers than just the DOM. Layers such as the browser's Accessibility API, the accessibility tree, the DOM, their own "tutor text" phrasings.
  • Some screen reader software has guessing algorithms to assist its users. Guessing makes up for missing or improper accessibility coding. However, screen readers should not be guessing when explicit accessibility coding is present. Since ANDI is an accessibility testing tool, it doesn't guess. Instead, its Output is a direct result of programmatic associations.
  • When humans write complex software (such as screen readers and accessibility testing tools), bugs happen. Let's squash them! If you are think there is a bug the ANDI Output, please reach out to our development team by creating a github issue.
ANDI is causing display issues

If after launching ANDI, the page looks strange, you may have to bear with it for your testing. ANDI has to manipulate some CSS in order to force itself to appear on the page - This can sometimes cause display interference.

In the wild wild west of the web, there is a lot of variance in design and CSS - some good, some... creative. ANDI forces itself at the top of the page and wraps the test page content within a scrollable container. To accomplish this feat, ANDI does some calculations, makes some assumptions, and gives it a shot.

If mouse hovering is continually making ANDI block view of the test page, use the next previous element buttons which should always keep ANDI out of the way. You can also try Mini Mode.

If ANDI is still blocking the test page, it may be due to the responsive design of the test page reacting to the space that ANDI is filling. Try maximizing the browser window, Zooming out, or switching to a larger resolution.

If elements become obscured to the point that you can't test the content behind "floating" elements, you may have to engage ANDI's advanced setting, linearize page.

If portions of the test page turn white, it may be due to an iframe-related issue. Read "the element is in an iframe" under "ANDI isn't finding an element".

Other Questions

How do I host my own ANDI?

To host your own copy of ANDI, make a few simple changes in the andi.js file:

  1. Download ANDI's source code from GitHub.
  2. Determine if you are going to host ANDI on a server (https://[ALTERNATE_HOST]/andi/) or locally (file://C:/WS/repos/[ALTERNATE_HOST]/andi/).
  3. In the andi.js file:
    • modify the host_url to point to the location that you decided in step 2.
    • (optional) modify the jqueryDownloadSource location to a custom jquery location.
  4. If you are hosting on a server, upload the modified ANDI source code to the server that you decided in step 2. If you are running locally, skip this step.
  5. Create a new bookmark called "my ANDI" or whatever you choose to name it.
  6. Modify the bookmark's launch script to point to your instance of ANDI:
Can I use ANDI for mobile accessibility testing?

ANDI does not run on mobile browsers. However, ANDI can be used test accessibility on small screen sizes.

Mobile testing can be simulated in a desktop browser using developer tools (F12) with the Toggle Device Toolbar feature (Ctrl + Shift + M). This feature will adjust the screen resolution to that of a mobile or tablet device. Once this mode is engaged, ANDI can be used to test accessibility on smaller screen sizes.

Can ANDI scan an entire site and export reports?

ANDI is a tool for performing manual inspection of web content. It does not have and will never have the capability to run a site-wide scan and produce an exportable report.

There are many other tools that offer this capability.

Why is ANDI so awesome?

Thanks for asking. You made us smile!

Contact ANDI's Development Team

Where do I file an ANDI bug?

Uh oh! You found a bug in ANDI? Please create an issue on the GitHub page. Be sure to provide a link to a page with the issue, sample code, or embedded screenshots.

I have an ANDI feature request!

That's wonderful! If you have an idea for how to make ANDI better, please create an issue on the GitHub page and explain away.