ANDI Help

Skip to Content

ANDI Modules

This page describes the features and functionality of ANDI modules.

Modules

ANDI modules are additional test tools within ANDI that provide a way to discover and analyze the accessibility of different HTML element types. Selecting one of the module buttons will launch the module. The module will then re-scan the test page and present results depending on the module selected.

ANDI Module Launch Buttons

The currently available modules are:

ANDI (default module: focusable elements)


ANDI logo

When ANDI is first launched, it will load with the default module which analyzes focusable 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 tab order indicators.


Accesskey List

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

Accesskeys List with example of accesskeys found

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


Tab Order Indicators

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.

show tab order button

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

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

title Attributes button

title Attributes overlay appearing on a test page

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

tANDI (tables)


tANDI logo

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 and provide its size (columns by rows) and the cell count. It will also display the number of data tables versus presentation tables.

tANDI page analysis section

Because of the one-table-at-a-time analysis 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 Analysis Mode button (scope or headers/id)

By pressing the Table Analysis Mode button, the analysis mode can be alternated between "scope mode" and "headers/id mode". This button controls tANDI's analysis algorithm which calculates cell associations based on the Scope Method or the Headers/id Method. tANDI defaults to "scope" analysis mode.

tANDI Scope Mode On tANDI Headers/id Mode On

The ANDI user should determine which mode to use depending on the design/structure of the table being tested. The alerts, output, and highlighting will be based on this important control.


Previous Table / Next Table Buttons

If there are more than one table on the page, the "prev table" and "next table" buttons will appear to the right of the Table Analysis Mode button. Pressing these buttons will allow the user to analyze the "next" or "previous" table.

tANDI prev table, next table buttons

These buttons are not to be confused with the common previous and next element buttons which will shift focus between elements, in the case of this module, table cells.


Markup Button

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

tANDI markup button
tANDI markup overlay on a text page

When the button is pressed again it will remove the markup overlay.


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

Users should be able to easily distinguish programmatically defined header cells from data cells since <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.

tANDI cell borders

Shading

As a user hovers over a table cell or uses the Next/Previous Element Buttons, tANDI will highlight associating cells based on scope or headers/id depending on the Table Analysis Mode selected. Associating <th> cells will be highlighted with a darker background color and <td> cells will be highlighted with a lighter background color.

tANDI Cell Highlight tANDI Header Highlight


Additional Accessibility Components

Along with the regular list of accessibility components, tANDI will extract and add to the Accessibility Components Table the following additional table related accessibilty components:

  • scope
  • headers/id
  • colspan
  • rowspan
  • associated th


Associated Header Text

While inspecting data table cells, the ANDI Output will include any table header cell associations depending on the Table Analysis Mode selected. This provides the ability to discover what a screen reader should speak for a particular table cell, when the screen reader is in its own table navigation mode. ANDI users should ensure that the Output is complete and accurate for each table cell.

tANDI Accessibility Components

lANDI (links)


lANDI logo

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

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

lANDI allows a user to discover potential accessibility issues with buttons such as the automatic detection of non-unique buttons.


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 the links on the page will receive highlights.

View 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 Button

lANDI Links List

The Links List is in table form with four sortable columns:

Links List Columns


1) # Column
This column will display the "index" number of the link. In other words, the order in which the links sequentially occur in the code.
2) Alerts Column
If the link has a link-related alert, this column will display an Alert icon. The following conditions will cause an alert icon to appear in this column:

  • Ambiguous: same name different href
  • Vague link text
  • In-page anchor target not found
  • No Accessible Name

Not all alerts will cause an icon to appear in this list, only the alerts above.
3) Accessible Name & Description Column
This column will display the calculated accessible name and description of the link. Accessible Components contributing to the calculation for links are aria-labelledby, aria-label, innerText, title, and aria-describedby. NOTE: This is not the same as the "ANDI Output" since it does not include Add-on Properties.
Hovering over this text will draw a laser that points to the element. Clicking on this text will move focus to the element.
4) href Column
This column will display the full href value of the link.

The data in this table cell will contain a link which when followed will:

  • For internal links (href="#..."): shift focus to the target element whose id matches this href.
  • For javascript links (href="javascript:...()"): do nothing.
  • For all others: open a new window at the location of the href.

Links List Tabs

The Links List Tab provides the ability to filter the types of links in the list by selecting a tab.

All Links Tab
Selecting the All Links tab will display all links in the links list.
Skip Links Tab
Selecting the Skip Links Tab will display all internal/skip links in the links list. A skip link is a link that allows the user to skip to or shift focus to some other element. The href value of a skip link begins with the # character.
External Links Tab
Selecting the External Links Tab will display all external links in the links list. An external link is a link that (usually) navigates the user to a new page.

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 Button

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.

Additional Link Components

Along with the regular list of accessibility components, lANDI will extract and add to the Accessibility Components Table the following additional link-related accessibilty components:

  • href
  • rel
  • download
  • media
  • target
  • type


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">

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

View 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.

The Button List is in table form with three sortable columns:

Buttons List Columns


1) # Column
This column will display the "index" number of the button. In other words, the order in which the buttons sequentially occur in the code.
2) Alerts Column
If the button has a button-related alert, this column will display an Alert icon. The following conditions will cause an alert icon to appear in this column:

  • Non-Unique: same name as another button
  • No Accessible Name

Not all alerts will cause an icon to appear in this list, only the alerts above.
3) Accessible Name & Description Column
This column will display the calculated accessible name and description of the link. Accessible Components contributing to the calculation for buttons are aria-labelledby, aria-label, value, innerText, title, and aria-describedby. NOTE: This is not the same as the "ANDI Output" since it does not include Add-on Properties.
Hovering over this text will draw a laser that points to the element. Clicking on this text will move focus to the element.

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.

gANDI (graphics/images)

gANDI logo

The graphics ANDI (gANDI) module provides the ability to test for the accessibility of graphics/images.

When gANDI is launched it will display the number of images found, including inline, background, and image links. It will also reveal accessibility alerts associating 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

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

gANDI Fade Inline Images Button

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 an accessible name and description of the image, and determine if the image has an appropriate description.


Decorative Inline (Images) Button

The purpose of the Decorative Inline button is to help a visual user detect which <img> elements have been programmatically declared decorative by the web author.

Highlight Decorative <img> Button

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 dark green glowing 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

The purpose of the Hide Background button is to help a visual user detect which images are coded as background images. When this button is pressed it will remove background images (css/style has background-image:url()) from the page.

gANDI Hide Background Images Button

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

The purpose of the Find Background button is to help a visual user detect which images are coded as background images (css/style has background-image:url()). When this button is pressed it will add a glowing green border around every element that contains a background image.

gANDI Highlight Background Images Button

Pressing the button again will remove background image highlights.

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.


Font Icons Button

The purpose of the Font Icons button is to detect graphics that make use of the font icon technique. When this button is pressed it will add a glowing green border around every font icon element found.

gANDI Find Font Icons Button

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


Additional Components

Along with the regular list of accessibility components, gANDI will extract and add, to the Accessibility Components Table, the following image related components:

  • longdesc
  • ismap
  • usemap
  • background-image

sANDI (structures)

sANDI logo

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) Button

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 all heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) as well as any element that has been declared as a heading using ARIA attributes (role="heading" with aria-level)

The Headings mode contains the ability to see an outline of the headings by pressing the View Outline button. The Outline will contain all headings found and ordered by the programmatic sequence in which they occur. 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 button

hANDI headings view outline expanded


Lists (mode) Button

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) Button

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")

hANDI (hidden content)

hANDI logo

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

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.

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.

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.

Content that gets injected into the page dynamically using javascript, is not able to be detected by hANDI.


Reveal All Button

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

hANDI reveal all button


Other Reveal Buttons

Additional Reveal buttons are:

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

hANDI other reveal buttons

Pressing the any of these buttons will toggle the display of the hidden content associated to the hiding 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.

Additional Info: 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.

When the "position:absolute" button is engaged it will alter the elements CSS to position:static.

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

Additional Info: html5 hidden

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

When the button is engaged, hANDI will remove the hidden attribute from the element. When the button is disengaged, it will add the hidden attribute back to the element.

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

Additional Info: 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.