ANDI Help

Skip to Content


How To Use ANDI

This page describes the features and functionality of ANDI, the Accessible Name & Description Inspector accessibility test tool.

The Test Page


Launching ANDI

Navigate to the HTML page to be tested. Launch ANDI by clicking on the favorite/bookmark labelled "ANDI" that was added to the Favorites/Bookmarks Bar in the browser. Get Installation Instructions

ANDI will insert its display on the top of the test page within the browser window.

ANDI being used on a webpage, highlighting all interactive elements, presenting results

Element Highlights

After ANDI has finished scanning the elements on the page, all focusable elements found will be given visual highlights. Visually impaired users can find similar information that the highlights indicate in the ANDI Output section.

Focusable Elements:

Textbox with orange outline - focusable element without danger alert ANDI highlights focusable elements in the test page with an orange dashed outline signifying that some accessibility markup was found for the element. A tester should inspect this element to determine that the Output is appropriate for its function and comparable to the on-screen text on the test page.

Focusable Elements with Danger Alert: danger icon

Textbox with red outline - danger alert If ANDI has found a high priority level Accessibility Alert associated with an element, the element will be highlighted with a red, dashed outline.

The Active Element:

Textbox with purple outline - active element As a user navigates the test page by tabbing with a keyboard or hovering over the focusable elements, ANDI will inspect the element that has focus or is hovered over with the mouse (mouseover). The element being inspected is called the "Active Element". ANDI will highlight the Active Element with a purple solid outline. The Active Element's accessibility markup will be displayed in the Accessibility Components section and its text alternative computation (what a screen reader would say) will appear in the Output section.

Active Element Inspection


Active Element Inspection

This section of ANDI allows a user to see accessibility information for the Active Element.

Active Element Inspection section

This includes the Element Tag Name, Accessibility Components, Output, and any Alerts associated with the Active Element.


Element Tag Name

ANDI will display the html tag of the Active Element (the last element to receive focus or mouseover).

Element: <input[text]>

The displayed Tag Name of the element also functions as a link which, when followed, will shift the focus to the Active Element associated with the tag. Hovering over the Tag Name with the mouse will draw a "laser" which points to the location of the element on the test page.

For <input> elements, the type property will also be displayed. For example, <input[text]>.


Accessibility Components Table

As ANDI scans the test page, it searches for HTML tags and attributes that influence the accessibility of elements on the page. These tags and attributes are referred to as Accessibility Components.

The Accessibility Components for the Active Element that is being inspected will appear in a table in the Active Element Inspection section.

Accessibility Components Table, 3 components displayed

ANDI scans for the following components:

alt
The alt attribute of an image.
aria-describedby
The global attribute aria-describedby. References other Elements to provide an accessible description.
aria-label
The global attribute aria-label. Provides an accessible name.
aria-labelledby
The global attribute aria-labelledby. References other Elements to provide an accessible name.
<caption>
The <caption> tag within a <table>.
<figcaption>
The <figcaption> tag within a <figure>.
innerText
The text contents of an element that can contain text and other elements. More Info
<label>
The <label> tag associated with a form element.
<legend>
The <legend> tag within a <fieldset> which associates with a group of form elements.
<subtree>
The Accessibility Components of the child elements contained within the element being inspected. More Info
title
The global attribute title.
value
The value property of an <input> button.
add-on properties
Various properties which denote the state or role of the element.
Add-On Properties scanned for are: tabindex, accesskey, readonly, aria-readonly, required, aria-required, aria-invalid, aria-disabled, aria-sort, aria-haspopup. More Info

For more details about Accessibility Components, see the Developer Guide.


ANDI Output

ANDI's Output displays the accessible name and accessible description that a screen reader should read audibly for the Active Element plus phrasing depending on the presence of Add-On Properties plus any associating Accessibility Alerts.

ANDI Output with example output text

After ANDI scans every HTML element on the page and collects the Accessibility Components, it calculates the Output. The calculation is based primarily on W3C specifications, and where specifications are unsupported or vague, it is based on thorough analysis of modern screen reader behavior.

Alerts in the Output

Any Alerts appearing in the Output will link to a help page with information about the Alert.
For example, "Why Did ANDI Alert This?", "Why is This an Accessibility Concern?", "What Should Be Done?"

Difference Between Screen Reader Output

Users can expect that ANDI's accessible name and description Output is accurate and should be voiced by screen readers that follow standards.

Screen readers will often add additional verbiage on certain elements such as "button" for buttons and "graphic" for images. ANDI does not incorporate these phrasings and only outputs the text values of the components. For example, if the word "button" is in the accessible name or description of a button, a screen reader will most likely say "button" twice, ANDI would not.

For additional information on screen reader output and other differences or discrepancies, see the product vendor's documentation.

Page Analysis


Page Analysis

After ANDI has analyzed the page, it will present its results in the Page Analysis section.

Page Analysis section

Appearing in this section are the Total Focusable Elements Found, Accesskeys List, and The Accessibility Alerts List.


Total Focusable Elements Found

ANDI will display the total number of focusable elements found on the page. This item is a link which when followed will shift the focus to the first highlighted element on the test page.


Accesskeys List

If ANDI finds elements with an accesskey attribute on the page, it will display the values in the Accesskey List.

Accesskeys List with example of accesskeys found

The characters in the Accesskeys List are links which when followed will shift focus to the element in the test page with which they associate. If focus cannot be shifted to the element because the element has no focusability, the accesskey will appear red with a message in its title attribute.

For more information about accesskeys, refer to the Developer Guide.


Accessibility Alerts

When ANDI is launched, it scans every HTML element on the page and automatically analyzes each element for conditions that commonly cause accessibility issues. When it finds such a condition, ANDI generates an Alert which helps a user pinpoint potential accessibility issues.

Accessibility Alerts with example of alerts

Alerts are contained in the Accessibility Alerts list. The alerts are categorized by 3 Alert Levels and are filtered by groups. Expanding a group reveals the Alert message links associating with that group type. Following these links will shift focus on the element to which it associates.

The Accessibility Alerts list can be navigated/expanded/collapsed with a keyboard or a mouse.

When inspecting elements in the Active Element Inspection section, if any Alerts were found for the Active Element, they will also appear in the Output. Alerts appearing in the output are links pointing to an Alerts Help page which provides details about the specific Alert.

Controls/Settings


Controls/Settings Buttons

Controls and Settings buttons are found in the in the upper right corner of ANDI's display.

Controls Settings Buttons

The buttons are as follows: Relaunch, Element Highlights, Minimode, Help, and Close.


Relaunch

relaunch button

keyboard with alt and equal sign highlighted - relaunch ANDI To run ANDI consecutively on a test page, simply press the relaunch button. Alternatively, pressing the browser's favorite/bookmark button labeled "ANDI" can relaunch ANDI.

When ANDI is relaunched it will first remove its display from the page along with markup it added to the test page and restart fresh. There is no need to refresh the test page and then relaunch ANDI.

The Active Element will be retained on relaunch, and its updated components, output, and alerts, will appear in the Active Element Inspection section. This provides a way to test dynamically changing properties such as the current state of a table column sorter or an expand/collapse controller.

This Relaunch button has the same function as the Relaunch Hotkey alt+=.


Element Highlights Button

Element Highlights button - on Element Highlights button - off

This control will allow a user to hide or show the Element Highlights (outlines) on the test page.

All functions of ANDI remain with the highlights turned off; this control is strictly cosmetic. ANDI will always launch with Element Highlights visible.

A visually impaired ANDI user can find similar information that the highlights indicate in the ANDI Output section.


MiniMode Button

MiniMode button - engaged MiniMode button - disengaged

This setting allows a user to see a condensed view of ANDI so that more of the test page is visible.

When MiniMode is ON, ANDI's display will appear as follows:
  1. The Accessible Components Table and Page Analysis section (Alerts) will be hidden.
  2. The Element Tag Name, Output, and Settings/Controls Buttons will still be visible
ANDI with Minimode Engaged

The MiniMode setting (on or off) will be saved and reloaded from session to session as long as the browser being used is "more modern". Off is the default setting.


Hotkeys List Button

hotkeys list button - on hotkeys list button - off

Pressing the Hotkeys List button will cause a list of ANDI's hotkeys to appear for quick reference.

ANDI hotkey list

Help Button

help button

Pressing the Help button opens up the help page (the page you are reading now) in a new window.


Close Button

close button

Pressing the Close Button will remove ANDI's display from the page along with all markup it added to the test page. Navigating away from the Test Page or hitting the browser's refresh button (F5) will also remove ANDI.


Version Popup

By clicking the "ANDI" heading text in the upper left of the display, a popup containing the version number of ANDI will be displayed.

Hotkeys


Hotkeys

ANDI has a few built-in hotkeys (also known as shortcut keys) to aid a keyboard user in quick navigation.

Hotkey Cheatsheet
alt+= Relaunch keyboard with all hotkeys highlighted
alt+' Output Jump
alt+/ Active Element Jump
alt+period Next Element
alt+comma Previous Element
alt+` Section Jump

NOTE: Firefox browser uses shift+alt for hotkeys.


Relaunch alt+=

keyboard with alt and equal sign highlighted - relaunch ANDI To run ANDI consecutively on a Test Page, simply press the hotkey (alt & equal sign). Alternativly, pressing the browser's favorite/bookmark button labeled "ANDI" can relaunch ANDI.

When ANDI is relaunched it will first remove its display from the page along with all markup it added to the test page and restart fresh. There is no need to refresh the test page and then relaunch ANDI.

The Active Element will be retained on relaunch, and its updated components, output, and alerts, will appear in the Active Element Inspection section. This provides a way to test dynamically changing properties such as the current state of a table column sorter or an expand/collapse controller.

This Relaunch hotkey has the same function as the Relaunch Button.


Output Jump alt+'

keyboard with alt and apostrophe highlighted - output jump This hotkey (alt & apostrophe) will shift the focus to the ANDI Output. If a screen reader is being used, it would then read the text of the Output. For a visually impaired user, this is very useful when paired with the Active Element Jump hotkey.


Active Element Jump alt+/

keyboard with alt and slash highlighted - active element jump When this hotkey (alt & forward slash) is pressed the focus will shift to the Active Element on the test page. For a visually impaired user, this is very useful when paired with the Output Jump hotkey.


Next Element alt+period

keyboard with alt and period highlighted - next element When one element becomes marked active and the Active Element Inspection section is displayed, this hotkey (alt & period) will become available. When pressed, focus will shift to the highlighted element which follows the active element based on the page's HTML structure; essentially the "next" focusable element.


Previous Element alt+comma

keyboard with alt and comma highlighted - previous element When one element becomes marked active and the Active Element Inspection section is displayed, this hotkey (alt & comma) will become available. When pressed, focus will shift to the highlighted element which precedes the active element based on the page's HTML structure; essentially the "previous" focusable element.


Section Jump alt+`

keyboard with alt and grave highlighted - section jump Repeatedly hitting this hotkey (alt & grave accent) will allow a user to jump between four sections in order:

  1. The Controls Settings Buttons
  2. The HTML Tag display of the Active Element, or the ANDI Instruction Text (whichever is visible)
  3. The Accessibility Alerts List (if there are any alerts)
  4. The Test Page

NOTE: This feature may not be supported in all browsers.

Mouse Controls


Lasers

ANDI has the capability to overlay the test page with a "laser" for the purpose of quickly pointing out the location of associated elements.

Tag Name Laser

When using the mouse to hover over the Element Tag Name in the Active Element Display, a laser will appear on the test page which points at the location of the element that is being inspected in the Active Element Display.

Component Lasers

Hovering over the aria-labelledby, aria-describedby, or <label> component text in the Accessibility Components Table will draw a laser which points to the associated element from where the text was retrieved.

Alert List / Accesskeys List Lasers

A laser will also appear when holding the shift key and using the mouse to hover over Alerts in the Alerts List or Accesskeys in the Accesskeys List.

Additional Notes:

The lasers will not persist on the screen. i.e. the moment a link is clicked or the mouse moves off the link, it will disappear. It is possible to take a screen shot while the laser is on screen by hitting the keyboard's Print Screen key.

Accessibility Note: The Element Tag Name, Alert Message, and Accesskeys are links which when followed will shift the focus to the associating element on the page. Blind users of ANDI can take advantage of this linking functionality.

Since ANDI's lasers are built using SVG (scalable vector graphics) ANDI's lasers will not work in versions of Internet Explorer prior to 9 (including compatibility modes).


Hover Lock

keyboard with shift highlighted When using the mouse to hover over elements on the test page, holding down the shift key will "lock" the Active Element display. While holding down the shift key, if the mouse cursor passes over other elements, the Active Element Display will not change (by design). Releasing the shift key will allow the user to change the Active Element being inspected, as normal.

Concurrent Use


With Screen Readers

ANDI is fully accessible and can be used concurrently with a screen reader.


With Developer Tools

ANDI can be used concurrently with an inspection tool such as a browser's Developer Tools. Artifacts from ANDI such as custom data-* attributes and ANDI508-* css classes will appear on elements in the test page.

Limitations


Dynamic Content

If an area on the Test Page changes dynamically (e.g. clicking on something opens up a submenu or alters screen text), ANDI will not know that the page has changed. To test the updated content, simply relaunch ANDI and inspect the newly displayed area.

The Active Element will be retained on relaunch, and its updated components, output, and alerts, will appear in the Active Element Inspection section. This provides a way to test dynamically changing properties such as the current state of a table column sorter or an expand/collapse controller.


Frames/iFrames

Currently, ANDI does not scan the contents of iframes or frames. When ANDI finds an iframe, it will pop up a message, and will continue scanning the rest of the page and display its results. If ANDI finds that the test page is using frames, it will popup a message and will not return any results.


IE Compatibility Modes

Versions of Internet Explorer prior to 9 don't support certain Javascript and CSS (Cascading Style Sheets) standards. Therefore, some functionality of ANDI can be limited with these older browsers or even in a modern IE using an older compatibility mode. However, care was taken to test on the older versions and most functionality is intact. Since older IE versions don't recognize the CSS property "outline", for these older version, ANDI uses the css property, "border". The element highlights may only appear partially or may be missing entirely depending on the CSS of the test page.

ANDI's "lasers" will not work in versions of Internet Explorer prior to 9 (including compatibility modes) since ANDI's "lasers" are built using SVG (scalable vector graphics) which are not support in these older browsers.


JavaScript Errors

If the test page has its own JavaScript errors, there is potential for them to cause some of ANDI's functionality to fail or strange behaviors on the test page to occur since ANDI is based on JavaScript/jQuery.


ANDI's Flexible Display

Since ANDI's display dynamically grows and shrinks depending on the amount of data being displayed for a particular element, mouse hovering can cause the display to overlap with the Test Page. If ANDI is blocking view of the Test Page, a user can try switching to Mini Mode or place the focus on an element, which will adjust the heights and unblock the view.


Recursion / Child Elements

In order to provide the text alternative (Output) for a given element, the Text Alternative Computation specification sometimes requires recursive traversing of an element's tree node. Currently, ANDI has limited recursion (to optimize performance) and therefore may not fully represent the full text alternative of all of a node's children. However, most web pages use basic, "one tier" level accessibility markup and such recursion is not needed. Future releases of ANDI may increase the depth of recursive subtree parsing.


Test Page Manipulation

ANDI minimizes the manipulation of the test page, however certain changes to the test page must be made. To the elements it interacts with ANDI adds a data-* attribute and some CSS classes. To elements that have css fixed positions, ANDI will adjust the top or bottom distance to ensure that the elements are not blocking view of ANDI's display. When the Close button is pressed, ANDI will remove itself from the page along with all elements it manipulated.


Testing ANDI With ANDI

ANDI cannot be used to test ANDI since it fully removes itself before launch. Nice try though. To test ANDI for accessibility, users will have to revert to archaic methods such as directly looking at the code or listening to a screen reader yap about.