ANDI

Skip to Content

ANDI Modules

This page describes the features and functionality of ANDI modules.

Modules

ANDI divides accessibility testing into manageable subtasks. For example, first testing the focusable elements, then testing the data tables, then testing the color contrast, and so on. By selecting a "module" from the module selection dropdown, a user can test different areas of accessibility.

ANDI Module Launch Buttons
Summary of ANDI Modules
Module Name Area of Accessibility Features
ANDI focusable elements (default) Interactive elements, tab order, accesskeys
gANDI graphics/images Alternative text
lANDI links/buttons Link comparison, button comparison
tANDI tables Data tables, cell associations
sANDI structures Headings, semantic HTML, ARIA roles, language
cANDI color contrast Automatic contrast calculation
hANDI hidden content Revealing hidden content
iANDI iframes Iframe Content Testing

When a module is selected it will re-scan the page and present results depending on the module selected. Read on for details about each module.

ANDI (focusable elements)


ANDI logo

When ANDI is first launched, it will load with the default module which analyzes focusable elements (interactive elements). It will check for conditions that may cause accessibility issues related to focusable elements. ANDI will present a list of accesskeys found and offers the ability to see the keyboard tab order indicators.


Accesskey List

Accesskeys List with example of accesskeys found

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

The characters in the Accesskey List are links. When selected, the link will move focus to the element associated with the accesskey.

Note: ANDI will not be able to detect shortcut keys implemented using javascript (key press events).


Tab Order Indicators

show tab order button

When the Tab Order button is pressed, tab order indicator flags will be overlayed throughout the page next to each tabbable element. The flags contain a sequential number indicating the "flow" of the tab sequence. When the Tab Order button is pressed again, it will remove the tab order indicator flags.

tab order indicators appearing on a test page

If an element has been taken out of the tab order (tabindex="-1"), the flag will be red with an "X". If an element has a tabindex greater than zero, the background color of the flag will be orange. All flags have tooltips that provide these additional details in text form.


Title Attributes Button

title Attributes button

When the Title Attributes button is pressed, any focusable element that has a title attribute will have the the title's value overlayed on the screen.

title Attributes overlay appearing on a test page

When the button is pressed again, it will remove the title overlay flags.


Label Tags Button

label tags button

When the Label Tags button is pressed, overlays will be added next to each <label> element.

If a label has a for attribute, then the value will be displayed. Futhermore, if an id cannot be found that matches the label's for attribute, then the overlay flag will be colored red and a tooltip will provide the message "no matching id".

label tags overlay appearing on a test page

When the button is pressed again, it will remove the label overlay flags.

tANDI (tables)


tANDI overview

The tables ANDI (tANDI) module provides the ability to inspect tables for column headers and cell associations. It will check for conditions that may cause accessibility issues related to tables.

When tANDI is launched, it will analyze the first table on the page. It will display the size (columns by rows), the cell count. The total number of data tables and total number of presentation tables will also be provided.

tANDI page analysis section

Unlike other modules, tANDI analyzes only one table at a time. Because of the one-table-at-a-time approach, all alerts in the Accessibility Alerts list refer only to the current table being inspected. To analyze additional tables on the page, press the "next table" button.


Table List

tANDI table list

The table list will include a list of all tables on the page. Selecting a table in the list, will cause that table to be analyzed. For each table in the list:

  • If the table has role="presentation" or role="none", "Presentation table" will be displayed.
  • If the table has an accessible name, it will be displayed.
  • If the table has no accessible name but the element preceeding the table is a heading element, "Data Table with No Name, but Preceded by Heading: {heading innertext}" will be displayed.
  • If the table has no accessible name, "Data table with No Name" will be displayed.

Previous Table / Next Table Buttons

tANDI prev table, next table buttons

If there are more than one table on the page, the "prev table" and "next table" buttons will appear. Pressing these buttons will allow the user to analyze the "next" or "previous" table. Remember, tANDI analyzes one table at a time so be sure to use these buttons to test all tables on the page.

These buttons are not to be confused with the common previous element / next element buttons which shift focus between the table cells.


Table Cell Highlights

When tANDI is launched, data table cells are given borders. When the cells are inspected, background shading will appear for associated cells.

Borders

tANDI cell borders

<th> cells will be given a darker, 2 pixel dashed border and <td> cells, a lighter, 1 pixel dashed border. Any cells or tables with danger level alerts will have a red border and the alert message will appear in the Output.

Shading

tANDI Cell Highlight tANDI Header Highlight

As a user hovers over a table cell or uses the Next/Previous Element buttons, tANDI will highlight associated cells. This highlighting is based on the Table Analysis Mode selected. Associating <th> cells will have darker shading and <td> cells will have a lighter shading.


Header Cells Text

tANDI Accessibility Components

While inspecting data table cells, the ANDI Output will include text from associated header cells (depending on the Table Analysis Mode selected). The ANDI Output should be equivalent to what a screen reader would speak in its table navigation mode. Users should ensure that the Output is complete and accurate for each table cell.


Markup Button

tANDI markup button

When the Markup button is pressed it will overlay the table association markup (th/td, scope, headers, id) for the current table being inspected.

tANDI markup overlay on a text page

Pressing the button again will remove the markup overlay.


Table Analysis Mode buttons (scope or headers/id)

tANDI Scope Mode On tANDI Headers/id Mode On

If tANDI has detected the use of headers attributes on the table being inspected, the table analysis mode buttons "scope mode" and "headers/id mode" will appear. These togge buttons control tANDI's analysis algorithm which calculates cell-header associations based on the Scope Method or the Headers/id Method. tANDI defaults to "scope mode" when headers attributes are not present.

lANDI (links/buttons)


lANDI overview

The links/buttons ANDI (lANDI) module provides the ability to inspect "clickable" <a> links and buttons for uniqueness, completeness, and accuracy.

lANDI detects potential accessibility issues with links such as non-distinguishable or ambiguous links, the presence and functionality of internal or within-page "skip links", and links with a missing or non-descriptive accessible name/description.

lANDI will also detect potential accessibility issues with buttons such as the automatic detection of non-unique buttons.


Links (mode)

lANDI Links Mode Button

This button will appear when lANDI detects links that have an href on the page (<a href="url.html">).

When this mode is engaged, all visible links will receive blue highlights.

Ambiguous Links Button

lANDI Ambiguous Links Button

If lANDI has detected ambiguous links on the page, the Ambiguous Links button will appear. When this button is pressed it will highlight all ambiguous links on the page with a solid blue border and shadow.

lANDI ambiguous links highlighted on test page

An ambiguous link means that another link exists on the page with an identical name/description but each link points to a different destination (the hrefs are different). See the Ambiguous Link alert details for reasons why this is an accessibility concern.

View Links List Button

lANDI Links List Button

When this button is pressed, it will hide the Accessibility Alert List and display a list of every link on the page. The list will contain alerts, the accessible name & description of the link, and the href.

lANDI Links List
Links List Columns
# The "index" number of the link. i.e. the order in which the link sequentially occurs in the code.
Alerts If the link has a link-related alert, an Alert icon.
Accessible Name & Description The accessible name and accessible description. NOTE: This is not the same as the "ANDI Output" since it does not include Add-on Properties.
href The href value of the link. Internal links (href="#...") will shift focus. Javascript links (href="javascript:...()"): do nothing. All others open a new window (or tab) at the location of the href.
Links List Tabs
All Links Tab Display all links in the links list.
Skip Links Tab Filter only internal/skip links to appear in the list.
External Links Tab Filter only external links to appear in the list.

Buttons (mode)

lANDI Buttons Mode Button

This button will appear when lANDI detects buttons on the page.

  • <button>
  • <input type="button">
  • <input type="submit">
  • <input type="reset">
  • <input type="image">
  • an element with role="button"

When this mode is engaged, all visible buttons on the page will receive highlights.

Non-Unique Buttons Button

lANDI Non-Unique Buttons Button

If lANDI has detected non-unique buttons on the page, the Non-Unique Buttons button will appear. When this button is pressed it will highlight all non-unique buttons on the page with a solid blue border and shadow.

An non-unique button means that another button exists on the page with an identical name/description. See the Non-Unique Button alert details for reasons why this is an accessibility concern.

View Buttons List Button

lANDI Buttons List Button

When this button is pressed, it will hide the Accessibility Alert List and display a list of every button on the page. The list will contain alerts and the accessible name & description of the button.

Buttons List Columns
# The "index" number of the button. i.e. the order in which the button sequentially occurs in the code.
Alerts If the button has a button-related alert, an Alert icon.
Accessible Name & Description The accessible name and description. NOTE: This is not the same as the "ANDI Output" since it does not include Add-on Properties.
Accesskey If the button has an accesskey attribute, the value.

gANDI (graphics/images)


gANDI overview

The graphics ANDI (gANDI) module provides the ability to test the accessibility of graphics/images including the presence of alternative text.

When gANDI is launched it will display the number of images found, including inline, background, and image links. It will also reveal any accessibility alerts associated with images. gANDI provides the ability to toggle the appearance of the images for enhanced visual detection and screen shot capturing purposes.

In addition to common alerts, gANDI will test for accessibility issues relating to graphics/images such as <marquee>, <blink>, alt text containing file names, redundant phrases in alt text ("image of", "photo of", etc.), non-descriptive alt text ("image", "photo", etc.), and presence of server-side image maps.


Hide Inline (Images) Button

gANDI Fade Inline Images Button

The Hide Inline button helps a visual user detect which images are inline (in the foreground). When this button is pressed it will "fade" inline images (<img>, <input type='image'>, [role=img]) from the page. This is accomplished by dropping the image's opacity to 30%.

Pressing the button again will restore the inline images to the original opacity.

When testing for accessibility, a gANDI user should inspect every non-decorative inline image, read the ANDI Output which should contain a meaningful description of the image.


Decorative Inline (Images) Button

Highlight Decorative <img> Button

The Decorative Inline button helps a visual user detect which <img> elements have been programmatically declared decorative by the web author.

When this button is pressed it will add a dark green glowing border around <img> elements with any of the following markup:

  • alt="" or alt=" "
  • role="presentation" or role="none"
  • aria-hidden="true"

Pressing the button again will remove the border.

When testing for accessibility, a gANDI user should ensure that every inline image declared as decorative is truly decorative and does not need an additional description or explanation.


Hide Background (Images) Button

gANDI Hide Background Images Button

The Hide Background button helps a visual user detect background images. When this button is pressed it will remove background images from the page (CSS property background-image contains a url).

Pressing the button again will reload the background images.

When testing for accessibility, a gANDI user should ensure that background images are truly decorative. If not, a text alternative description of the background image must appear somewhere on the page.


Find Background (Images) Button

gANDI Highlight Background Images Button

The Find Background button helps a visual user detect images coded as background images (CSS property background-image contains a url). When this button is pressed it will add a glowing green border around every element that contains a background image.

Pressing the button again will remove background image highlights.

When testing for accessibility, a gANDI user should ensure that background images are truly decorative (not informative). If not, a text alternative description of the background image must appear somewhere on the page.


Font Icons Button

gANDI Find Font Icons Button

The Font Icons button detects graphics that use the font icon technique. When this button is pressed it will add a glowing green border around every font icon element found that does not have [role=img].

Pressing the button again will remove font icon highlights.

A Font icon is a technique used to place an icon on the page using a font-family instead of an <img> tag or CSS background image. gANDI will check for the following types of font icons:

  • Google Material Icons class="material-icons"
  • Font Awesome class="fa"
  • Glyphicons class="glyphicon"
  • data-icon attribute

sANDI (structures)

sANDI overview

The structures ANDI (sANDI) module provides the ability to test for the presence of semantic tags and ARIA roles associated with page structure.

When sANDI is launched it will display three buttons: headings, lists, landmarks. The buttons will contain the total number of their respective structures. For example: 3 headings, 2 lists, 0 landmarks. Pressing one of the buttons, toggles sANDI into that respective mode. While one mode is engaged, the other modes will become disengaged.


Headings (mode)

sANDI headings mode

Pressing the Headings Button will engage Headings mode, and disengage the other modes.

Headings are an important part of page structure because they provide the topic of the sections on a page. Assitive technologies often provide a mechanism to quickly jump from heading to heading in a manner similar to how the human eye allows a sighted user to quickly scan for the major headings on a page.

In this mode, sANDI will find and highlight heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) as well as any element that has been defined as a heading using ARIA attributes (role="heading" with aria-level)

Pressing the View Outline button will display an outline of all headings ordered by the sequence in which they occur in the code. The order displayed in the outline should match the order in which they appear in a headings list provided by assitive technologies.

hANDI headings view outline expanded

Lists (mode)

sANDI lists mode

Pressing the Lists Button will engage Lists mode, and disengage the other modes.

Lists are a common way to handle the grouping of common items. When the user of a webpage wants to look for navigation or other items that may be in list form, sighted users use their eyes to scan for the presence of a list and can begin reading. As an alternative for users who are visually impaired, assitive technologies often provide a mechanism to quickly jump to and through lists on the page.

In this mode, sANDI will find and highlight all list types (<ul>, <ol>, <dl>) and list items (<li>, <dt>, <dd>)


Landmarks (mode)

sANDI landmarks mode

Pressing the Landmarks Button will engage Landmarks mode, and disengage the other modes.

Certain HTML tags and attributes exist to provide semantics to the structure of a web page. These semantic structures (navigation, main, form, etc.) are referred to as landmarks. While programmatically hidden from visual users, assitive technologies often provide a mechanism for users to scan the page for landmarks to improve the efficiency of page navigation in a manner similar to a sighted user moving their eyes to different areas of the page.

In this mode, sANDI will find and highlight all landmark tags (<main>, <header>, <footer>, <nav>, <form>, <aside>) as well as any element that has been declared as a landmark using ARIA attributes (role="banner", role="complementary", role="contentinfo", role="form", role="main", role="navigation", role="search", role="application")


Live Regions (mode)

sANDI live regions mode

Pressing the Live Regions Button will engage Live Regions mode, and disengage the other modes.

Live regions are areas of a page that a screen reader monitors for content changes. When the live region's content changes, the screen reader will read the new content. These regions are useful for notifications, status messages, and alerts.

In this mode, sANDI will find and highlight all live regions. Live regions contain one or more of the following attribute/values: role="alert", role="status", aria-live="polite", aria-live="assertive".


Reading Order

When the the Reading Order Button is pressed, numerical indicator flags will be overlayed throughout the page next to each block of text. The flags contain a sequential number indicating the order in which a screen reader will read the blocks of text. The sequence numbering is based on the text's location in the HTML source code.

If an element has been hidden from a screen reader using aria-hidden="true", but remains visible to sighted users the flag will be red with an "X" indicating that the element will not be included in the reading order.


more details dropdown


sANDI more details dropdown

page title

This button will provide a popup that contains the Page title (from the <title> tag).

page language

This button will provide a popup that contains the defined language of the page (the lang attribute from the <html> element).

role attributes

This button will add an overlay flag near any element with a role attribute.

lang attributes

This button will add an overlay flag near any element with a lang attribute. This is useful for a "language of parts" test: Passages of text in other languages need the lang attribute defined so that screen readers are aware of what language the words should be pronounced.

Use the "page language" button to check the entire page's language.

cANDI (color contrast)

cANDI overview

The color contrast ANDI (cANDI) module automatically detects accessibility issues relating to color contrast.

When cANDI is launched it searches for HTML elements that contain text and grabs the text color and the background color. These two color values are used to calculate the contrast ratio. If the contrast ratio does not meet the minimum requirement for accessibility, the user will be alerted.

When a text-containing element is inspected cANDI will display the Element tag name, the calculated Contrast Ratio, the Style, and any Alerts.


Contrast Ratio

cANDI contrast ratio pass

cANDI contrast ratio fail

The Contrast Ratio section will display the calculated contrast ratio, the Pass/Fail status, and the minimum required contrast ratio (Min Req).

The Min Req is calculated using the text color and background color, the font-size, and the font weight. For additional information on contrast ratio requirements refer to the WCAG Contrast Guidelines.

PASS
Elements that have a contrast ratio greater than or equal to the minimum required contrast ratio pass the contrast test and are accessible.
FAIL
Elements that have a contrast ratio less than the minimum required contrast ratio fail the contrast test and are not accessible.
MANUAL TEST NEEDED
Elements that contain a background image or gradient require a manual contrast test since the contrast cannot be determined using programmatic DOM analysis.

Minimum Required Contrast Ratio (Min Req)

As a minimum, WCAG recommends that text should have a contrast ratio of 4.5:1. For large text, the minimum ratio is relaxed to 3:1. (WCAG defines large text as font-sizes of 18pt or 14pt bold). A higher contrast ratio allows for more readable text. For example, black text on a white background produces the maximum contrast at a ratio of 21:1.

Precision

cANDI calculates the contrast ratio to a precision of two decimal places. Therefore, a 4.49:1 would fail a minimum contrast requirement of 4.5:1. Similarly, a 2.99:1 would fail a minimum contrast requirement of 3:1.


Style

cANDI style text color and background color with suggestion

The Style section lists the following:

Text Color:
The color of the text (CSS color property) - displayed as a sample color box and hex value.
Background:
Starting at the element, the element's ancestor tree is traversed until it finds either:
a background image or gradient (CSS background-image property),
or the color of the background (CSS background-color property) - displayed as a sample color box and hex value.
Font:
The font size (CSS font-size property) - always converted to pt units.
Optionally, the font weight (CSS font-size property) if bold (700 or greater).
Suggested Color:
If the contrast ratio does not meet the minimum requirement, and there is no semi-transparency involved cANDI will suggest color that could be applied to satisfy the minimum contrast ratio requirement - displayed as a sample color box and hex value.
Text-Shadow:
The text shadow (CSS text-shadow property) if it was defined.

Manual Contrast Test

cANDI manual contrast test needed

When cANDI cannot automatically calculate the contrast, testers will need to perform a manual color contrast test. This is done using an additional tool that includes a color selector (eye dropper) to select a pixel from the text and a pixel from the background. Most tools used for this purpose will do the contrast calculation after the two colors are selected. One such tool (free and available for download) is the Colour Contrast Analyser.


Contrast Playground

cANDI contrast playground

The Contrast Playground can be used to adjust two color values and have the contrast ratio automatically calculated. To show the Contrast Playground, press the "show contrast playground" button.

When the contrast ratio is below 4.5:1 the "get small text suggestion" button will appear. Similarly, when the contrast ratio is below 3:1 the "get large text suggestion" button will appear. Pressing either of these buttons will adjust the color values so that the minimum required ratio is met.

When focus is on either of the color value entry boxes, pressing the keyboard arrow keys up or down will adjust the brightness of the color. Up lightens, down darkens. Doing so will immediately recalculate the contrast ratio.


Grayscale

cANDI grayscale button

This button will transform the test page into grayscale (black and white) viewing mode. This feature is useful to determine where meaningful color may be used. NOTE: The grayscale button will not appear in Internet Explorer.


IE Compatability Modes

Pages running in Internet Explorer Compatability modes (IE8 or earlier) cannot be tested with cANDI.

hANDI (hidden content)

hANDI overview

The hidden content ANDI (hANDI) module provides the ability to discover the presence of hidden content that should be tested for accessibility.

The purpose of hANDI is to expediate the discovery process by notifying a tester that hidden content exists on the page. A tester should then find the triggers or processes that "naturally" cause the hidden content to appear, since testing content that is forced to be revealed is not reliable and not part of the natural "flow" of the page. To enforce this practice, any content revealed by hANDI will be "unrevealed" when launching another ANDI module.

When hANDI is launched it will detect common CSS hiding techniques used and provide buttons which provide the ability to toggle the CSS and thus reveal the hidden content.

All revealed content will be given a glowing yellow border. Since the content was forced to appear, it will most likely cause unusual display or alignment issues on the test page.

Note: Content that will be injected into the page dynamically using javascript, will not able to be detected by hANDI.


Reveal All Button

hANDI reveal all button

Pressing the Reveal All Button will reveal all content hidden using the techniques which hANDI has detected.


CSS Hiding Techniques Dropdown

hANDI CSS Hiding Techniques Dropdown

This dropdown contains other buttons which will toggle the display of elements being hidden using a particular technique. Sometimes, an element may have more than one hiding technique applied and may need more than one of the buttons to be engaged to get the content to appear.

Options that may appear within this dropdown are:

  • display:none
  • visibility:hidden
  • position:absolute
  • opacity:0
  • overflow:hidden
  • font-size:0
  • text-indent
  • text-indent
  • html5 hidden

position:absolute

For an element to be hidden off screen using CSS position:absolute, it must also have an extreme left, right, top, bottom value assigned. hANDI only reveals absolute positioned elements that are off screen.

Elements visually hidden with this technique, are usually available to a screen reader.

html5 hidden

Introduced in HTML5, the global hidden attribute allows a developer to hide anything. Some browsers render these elements as CSS display:none. Therefore, to reveal these elements, a hANDI user may have to also press the "display:none" button.

Screen readers will not be able to read elements visually hidden with this technique.

text-indent

This hiding technique uses a CSS text-indent with a large negative value. Only negative values less than -998 will be recognized as hidden by hANDI.

Elements visually hidden with this technique are usually available to a screen reader.


Content ::before ::after Button

hANDI content ::before ::after button

This button will appear when text content has been injected using the CSS pseudo-elements ::before or ::after. Text injected using this technique is not available to screen readers, therefore, an alert will be thrown when this technique is detected.

When this button is pressed, the injected CSS text content will be highlighted on the screen.

iANDI (iframes)

iANDI overview

The iframes ANDI (iANDI) module allows users to test the contents of iframes for accessibility. NOTE: Iframes need to be tested independently in a new window because browsers do not allow javascript/CSS manipulation of iframes in an effort to prevent security vulnerabilities.


iFrame List

iANDI iFrame List

Pressing the "View Iframe List" button will expand the iFrame list. Selecting a link in the iFrame list will open the iFrame independently in a new window. Pressing the "Hide Iframe List" button will collapse the iFrame list.


Test In New Tab Button

iANDI iFrame List

Pressing the Test In New Tab Button will open the iFrame independently in a new tab. Testers can then launch ANDI to test the iFrame.

NOTE: Depending on how the iframe is built, this feature may not work as expected.