ANDI

Skip to Content

Installation

This page describes how to install ANDI, the accessibility and Section 508 test tool.

Meet ANDI.

ANDI (Accessible Name & Description Inspector) is a "favelet" or "bookmarklet" used by web developers and testers to inspect web content for accessibility.

ANDI displaying the following sections: active element inspection, accesskeys list, alert list, control buttons

ANDI provides a simple interface with which to:

  • Automatically detect potential accessibility issues.
  • Reveals what a screen reader should say for interactive elements.
  • Get practical suggestions to improve accessibility.

Browser Installation Instructions

Installation is quick and easy. ANDI can be installed on Internet Explorer, Firefox, and Chrome.


IE logo Internet Explorer

Ensure that IE's Favorites Bar is visible, then choose one installation method:

Mouse Users

  • Right click this link: ANDI and select "Add to favorites bar"
  • Or drag and drop this link ANDI into the Favorites Bar.

Keyboard Only Users

  • Keyboard Users can tab to this link: ANDI, press shift+F10 (which brings up a context menu) and select "Add to favorites bar"

ANDI is now installed to IE and ready to be launched.


Firefox logo Firefox

Ensure that Firefox's Bookmarks Toolbar is visible, then choose one installation method:

Mouse Users

  • Mouse users can right click this link: ANDI and select "Bookmark This Link". Add it to the Bookmarks Toolbar.
  • Or drag and drop this link ANDI into Bookmarks Toolbar.

Keyboard Only Users

  • Keyboard users can tab to this link: ANDI, press shift+F10 (which brings up a context menu) and select "Bookmark This Link". Add it to the Bookmarks Toolbar.

ANDI is now installed to Firefox and ready to be launched.


Chrome logo Chrome

Ensure that Chrome's Bookmarks Bar is set to always show.

  • Now drag and drop this link: ANDI to the Bookmarks Bar.
  • Unfortunately, Chrome does not offer a simple keyboard accessible alternative.

ANDI is now installed to Chrome and ready to be launched.

Launch ANDI

Launch ANDI by clicking on the favorite/bookmark labelled "ANDI" that was added to the Favorites/Bookmarks Bar in the browser's toolbar. ANDI will analyze the test page and inject itself onto the top of the page.

ANDI being used on a webpage highlighting all interactive elements

Using ANDI is fairly intuitive, however some understanding of HTML tags and attributes is necessary. For thorough documentation of all features, visit: ANDI Help.

Benefits Of ANDI

Using ANDI is like having an accessibility expert at your side, helping you make your web pages more accessible. It can be used early during development or later during testing. Whether your knowledge of accessibility and 508 standards is vast or you're just getting started, we're sure you and your product will benefit from the help ANDI provides.

How To Uninstall

To uninstall ANDI simply delete the favorite/bookmark that was created in installation.

ANDI is Open Source - find it on github

ANDI is an open source project created by the Accessible Solutions Branch of the Social Security Administration. The source code is available for contribution on github.

If your agency or development team wishes to host a clone or fork of ANDI's code, refer to the following sections.

If you just want to use ANDI now, the following steps aren't necessary.


Modifying the Launch Script

The favelet launch script injects the andi.js javascript file onto the test page. To point to your own host for the andi.js file, the favelet's launch script must be modified.

Copy the script above and replace [ALTERNATE_HOST] with the alternate url location where your custom andi.js file is hosted. Create a new favorite named whatever you want ("ANDI alternate", "my organization's ANDI") and paste the modified launch script text as the as the url of the favelet.

It is important to host the file using https protocol or there may be issues running ANDI on secure sites depending on the browser being used.


Icons Download

The icons used by ANDI are based on Google's open source Material Design icons. Download ANDI Icons Zip


Configuration

In ANDI's javascript file (andi.js) several configuration parameters can be changed within your custom ANDI. Below is a list of the customizable parameters, their default setting, and their purpose.

ANDI Configuration Options
Configuration Parameter Default Setting Purpose
AndiSettings.andiAnimationSpeed 150 Defines the base speed in milliseconds in which animations occur.
AndiCheck.characterLimiter 250 This number is the max character limit before the Excessive Text Alert is thrown. The default of 250 is twice the "breath interval" of a popular screen reader (125 characters)
AndiCheck.emptyString [empty] Representation of Empty String appearing in the Accessibility Components Table.
AndiSettings.elementHighlightsOn true Whether ANDI will launch with Element Highlights visible (on).
help_url "help/" Location where help pages are stored
icons_url "icons/" Location where icons are stored