ANDI (Accessible Name & Description Inspector) is a "favelet" or "bookmarklet" used by web developers and testers to inspect web content for accessibility.
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.
Ensure that IE's Favorites Bar is visible, then choose one installation method:
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.
Ensure that Firefox's Bookmarks Toolbar is visible, then choose one installation method:
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.
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 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.
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
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.
The icons used by ANDI are based on Google's open source Material Design icons. Download ANDI Icons Zip
|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|