ANDI

Skip to Content

ANDI Alerts

This page provides detailed information about ANDI's Accessibility Alerts.

What is an Accessibility Alert?

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.

This help page explains the conditions which cause the Alerts to appear, the reasons for accessibility concerns, and what steps can be taken to resolve the Alerts thus making the page more accessible.

What are the Alert levels?

Alerts are categorized into three priority levels:

1. danger icon Danger Alerts
Red Alerts containing a triangle icon with an "x" signify the highest alert level, Danger Alerts.

These Alerts provide notification that accessibility defects are highly likely. These scenarios must be corrected for the page to be made accessible by all types of users.
2. warning icon Warning Alerts
Orange Alerts containing a triangle icon with an "!" signify the medium alert level, Warning Alerts.

These Alerts signal that screen reader inconsistencies are likely and information on the page may not be communicated consistently to all users.
3. caution icon Caution Alerts
Yellow Alerts containing a triangle icon with a "?" signify the lowest alert level, Caution Alerts.

These Alerts signal that accessibility issues could exist but need further investigation.

Does an Alert mean a defect/non-conformance is certain?

No, not necessarily. It is up to a human to evaluate ANDI's results and make the final decision on whether or not a scenario is a true accessibility defect or non-conformance. ANDI is merely an inspection tool used for this purpose.

Elements with No Accessible Name


Alert: No Accessible Name

  • danger icon Form Element has no accessible name, associated label, or title.
  • danger icon Element has no accessible name, or title.
  • danger icon Image has no accessible name, alt, or title.
  • danger icon Table has no accessible name, caption, or title.
  • danger icon Figure has no accessible name, figcaption, or title.
  • danger icon %%% Element has no accessible name.

Why did ANDI alert this?

This element has no HTML markup that would provide an accessible name for the element. This is the most common Alert.

Why is this an accessibility concern?

A screen reader would either read nothing for this element or make a guess.

What should be done?

Add HTML markup that will provide a name for the element.

Add one "Namer" to the element depending on the type of element:
  • All elements can use aria-labelledby or aria-label attributes.
  • Form elements can use an explicit <label> with a for attribute pointing to the id of the form element, or a <label> that contains the form element.
  • Images can use the alt attribute.
  • Tables can use the <caption> tag.
  • Figures can use the <figcaption> tag.
  • Container type elements <p>, <div>, <li>, etc. can contain text which will provide a name.
  • All elements can use the title attribute.

Alert: Placeholder, But No Name

  • warning icon Placeholder provided, but element has no accessible name.

Why did ANDI alert this?

This input or textarea element has no HTML markup that would provide an accessible name for the element, but it does have a placeholder attribute.

Why is this an accessibility concern?

A screen reader may read the placeholder text, however, placeholder is not part of the accessible name calculation.

What should be done?

Add one Namer or Describer that will provide an accessible name for the element such as aria-labelledby, aria-label, or an associated <label>.

Duplicate Attributes Found


Alert: Duplicate ID

  • danger icon [%%%] is referencing a duplicate id [id=%%%]; Element ids should be unique.
  • danger icon Element has a duplicate id and is referenced by a <label[for]>; Element ids should be unique.

Why did ANDI alert this?

This element has an accessibility component that is referencing a duplicate id.

Why is this an accessibility concern?

It is an HTML requirement that element id values must be unique. Some accessibility components reference other elements by their id. If ids are the same (duplicated) among several elements, an element may be referencing the wrong element, and the screen reader output may not be correct.

Accessibility Components that use id references are: aria-labelledby, aria-describedby, table cell headers, the for attribute of a <label>, and many other aria-* attributes.

In addition to accessibility concerns, when ids are not unique there may be JavaScript event issues if the duplicate ids are referenced by the beloved JavaScript method getElementById.

What causes this?

Often, this is the result of a developer copying and pasting an element and forgetting to change the id. It's possible that a developer may not know that ids must be unique according to W3C standards.

What should be done?

The value of each id on the page should be made unique.


Alert: Duplicate For

  • danger icon More than one <label[for=%%%]> associates with this element [id=%%%].

Why did ANDI alert this?

This element is associated with a <label> whose for attribute value matches the value of another label's for attribute. i.e. a "duplicate for".

Why is this an accessibility concern?

When a screen reader is trying to make an associate between a form element and a label, if there are multiple label's with the same for value, a screen reader might read the label that was not intended to be associated with the element. W3C specifications do not explicitly state that duplicate for attributes should not be used, however screen readers do not support such usage.

What causes this?

Often, this is the result of a developer copying and pasting a label and forgetting to change the value of the for attribute on the pasted label.

What should be done?

Ensure that the for attributes are unique, and correctly pointing to the id of the associating form element.

If the concatenation of the text of multiple labels is the intention, then use the aria-labelledby attribute whose value is a space delimited list of ids which point to the ids of the labels.

more info about label

Components That Should Not Be Used Alone


Alert: ARIA-describedBy Alone

  • danger icon Using [aria-describedby] alone on this element causes screen reader inconsistencies.

Why did ANDI alert this?

The only HTML markup found on the element that provides accessibility information is the aria-describedby attribute.

Why is this an accessibility concern?

Screen readers expect an accessible name to be provided when aria-describedby is used. If there is no name, a screen reader might fail and read irrelevant text or make a guess.

What should be done?

One option is to simply use aria-labelledby instead of aria-describedby. Another option is to provide an accessible name along with the aria-describedby by adding an aria-labelledby, aria-label, or other element-specific "Namer".

more info about aria-describedby

Alert: Legend Alone

  • danger icon Using <legend> alone on this element causes screen reader inconsistencies.

Why did ANDI alert this?

This type of element, can make use of the <legend> tag, however <legend> should not be used as the only means of which to name or describe an element.

Why is this an accessibility concern?

For all elements except a fieldset, legend does not technically provide a name. When used alone, screen readers may not read correctly or may double speak.

What should be done?

If a <legend> tag is being used to describe a group of form elements, the best practice to name each individual form element is to add a <label> tag associated with the form element (<label for="id">) or contain the form element within a label.

more info about legend

Misspelled ARIA Attributes


Alert: Misspelled attribute

  • danger icon [aria-labeledby] is mispelled, use [aria-labelledby].

Why did ANDI alert this?

The element contains a typo or misspelling of an ARIA attribute.

Why is this an accessibility concern?

Most screen readers do not check for attribute misspellings or attempt to interpret syntax errors. Therefore, the misspelled ARIA attributes will not provide the intended accessibility information.

What should be done?

The misspelling should be corrected since a developer explicitly attempted to add additional accessibility information.

ANDI checks for the following misspellings:
  • aria-labeledby
  • arialabelledby
  • labelledby
  • ariadescribedby
  • describedby
  • arialabel

Alert: ARIA-Role Not Valid

  • danger icon [aria-role] not a valid attribute, use [role] instead.

Why did ANDI alert this?

The element contains an attribute that does not exist: aria-role.

Why is this an accessibility concern?

Most screen readers do not check for attribute misspellings or attempt to interpret syntax errors. Therefore, aria-role will not provide the intended accessibility information.

What should be done?

Most likely, the attribute role was intended to be used on this element.

Table Alerts


Alert: Scope Value Invalid.

  • danger icon Scope attribute value [scope=%%%] is invalid.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "scope" and this element has a scope attribute but the value is invalid.

If scope associations are not appropriate for this table's design, change the Table Analysis Mode to "headers".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader will not make the correct cell associations if the value is invalid.

What should be done?

Change the value of the scope attribute to col, row, colgroup, or rowgroup.


Alert: Headers Only for TH, TD.

  • danger icon[headers] attribute only valid on <th> or <td>.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "headers" and this element has a headers attribute but is not a <td> or <th>

If headers associations are not appropriate for this table's design, change the Table Analysis Mode to "scope".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader will not make the intended cell associations.

What should be done?

Move the headers attribute to a table cell such as a <td> or <th> and ensure that the reference id is pointing to the correct <th>.


Alert: Table Has No TH.

  • danger iconTable has no <th> cells.

Why did ANDI alert this?

This table doesn't have any <th> cells.

Why is this an accessibility concern?

A data table should have <th> cells so that a screen reader can associate header cells with the data cells.

What should be done?

If the table is a "presentation" table used for layout instead of data, then role="presentation" should be added to the <table> and no <th> tags should be used.

Otherwise, if the table is intended to provide data, use <th> cells to make the header associations. In addition, for accessibility, table headers must have additional markup to make the associations: scope or headers/id. More information here: How to make data table cell associations.


Alert: Table Mixing Scope and Headers.

  • danger iconTable using both [scope] and [headers], may cause screen reader issues.

Why did ANDI alert this?

This table has cells using both scope attributes and headers/id.

Why is this an accessibility concern?

A screen reader may not correctly associate the cells since it has to account for both scope and headers/id. If modifications are made to this table in the future, the associations may become broken and its accessibility would suffer.

What should be done?

As a best practice, choose one cell association method appropriate for the table design: either scope or headers/id. More information here: How to make data table cell associations.


Alert: Table Has No Headers/ID.

  • danger iconTable has no [headers/id] associations.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "headers" and This table has no headers/id associations.

If headers associations are not appropriate for this table's design, change the Table Analysis Mode to "scope".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader may not correctly associate header cells to the data cells.

What should be done?

Tables must make header cell associations using either headers/id or scope. If applicable for this table, add id attributes to the <th> cells and headers attributes to the <td> cells which point at the id of their associated <th>. More information here: How to make data table cell associations.


Alert: Switch Table Analysis Mode.

  • danger iconTable has no [scope] but does have [headers], switch to 'headers/id mode'.
  • danger iconTable has no [headers/id] but does have [scope], switch to 'scope mode'.

Why did ANDI alert this?

ANDI is suggesting that the user test the table in the other Table Analysis Mode because it has detected accessibility markup for the other mode.

What should be done?

Change the Table Analysis Mode and determine if the table is accessible. How to choose the right Table Analysis Mode


Alert: No Scope at TH Intersection.

  • danger iconScope association needed at intersection of <th>.

Why did ANDI alert this?

This table contains column or row headers (<th>) that intersect. One or more <th> at the "intersection" positions are missing a required scope attribute.

Why is this an accessibility concern?

When a <th> cell is positioned at an "intersection" of table headers a screen reader may not be able to correctly assume the direction in which the <th> points.

What should be done?

To all <th> cells at table header intersections, add a scope attribute with a value that indicates the direction in which the cell points. (scope="col" or scope="row").


Alert: ARIA Table/Grid Structure Issue.

  • danger iconARIA table has no [role=cell] cells.
  • danger iconARIA grid has no [role=gridcell] cells.
  • danger iconARIA table/grid has no [role=columnheader] or [role=rowheader] cells.
  • danger iconARIA table/grid has no [role=row] rows.

Why did ANDI alert this?

This page has a tabular structure built using an ARIA table or ARIA grid design pattern, but there is an issue with the structure.

Why is this an accessibility concern?

A user who is visually impaired and relying on a screen reader will not be able to fully navigate the ARIA table or ARIA grid when the proper structure is not in place.

What should be done?

Correct the structure to abide by the standards for an ARIA table, or ARIA grid.


Alert: Too Many Scope Levels.

  • caution icon Table has more than %%% rows/cols using [scope].

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "scope" and this table has cells using the scope attribute but there are more than two "levels".

The following is an example of a table with too many levels of scope. Notice that the third row exceeds the scope limit of 2 levels max.

<table>
<caption>too many levels of scopes table</caption>
<tr><th scope="col">good</th><th scope="col">good</th></tr>
<tr><th scope="col">good</th><th scope="col">good</th></tr>
<tr><th scope="col">good</th><th scope="col">good</th></tr>
<tr><th scope="col">bad </th><th scope="col">bad </th></tr>
<tr><td>data</td><td>data</td></tr>
</table>

If scope associations are not appropriate for this table's design, change the Table Analysis Mode to "headers".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader may not associate all header cells intended.

What should be done?

There are several remediation options:

  • Reorganize the table to minimize the complexity and depth of header cells.
  • Divide the table into multiple tables.
  • Remove all scope attributes and strictly use headers/id.

More information here: How to make data table cell associations


Alert: Presentation Table Markup.

  • warning iconPresentation tables should not have %%%.

Why did ANDI alert this?

This layout table, marked with role="presentation", has HTML markup reserved for data tables.

Why is this an accessibility concern?

A screen reader may see the data table markup, and make cell associations or add verbosity to the elements within the presentation table.

What should be done?

For this presentation table, remove HTML markup intended for data tables.

  • <caption>: replace with a heading tag (h1, h2, h3...)
  • <th>: replace with <td>
  • scope: remove this attribute
  • headers/id: remove any headers attributes
  • summary: remove this attribute


Alert: Table with Nontypical Role.

  • warning icon<table> with [role=%%%] is not recognized as a data table.

Why did ANDI alert this?

This table has a role with a value that is not presentation, none, table, grid, or treegrid.

Why is this an accessibility concern?

An element's role overrides the semantics of the tagname. This means a screen reader only considers the role value and does not recognize that the element's tagname is <table>.

What should be done?

If this <table> element looks like a data table (contains cells with organized data), then it should have either no role or a role that signifies a data table such as role="table".

If the table is primarily used for presentation/layout, then the role should be role="presentation".

Otherwise, test the element according to the role.


Alert: Table Has No Scope.

  • caution iconTable has no [scope] associations.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "scope" and this table has no scope attributes.

If scope associations are not appropriate for this table's design, change the Table Analysis Mode to "headers".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader may not correctly associate header cells to the data cells.

What should be done?

Tables must make header cell associations using additional markup. If applicable for this table design, add scope attributes to the <th> cells using the appropriate values: col, row, colgroup, or rowgroup. More information here: How to make data table cell associations.

Accesskey Alerts


Alert: Accesskey Multiple Values

  • danger icon [accessKey] value "%%%" has more than one character.

Why did ANDI alert this?

An accesskey with more than one character as its value was found on this element.

Why is this an accessibility concern?

Multi-character accesskeys do not work in any browser. Some browsers support space delimited values, but such use is not a recommended practice.

What should be done?

Set the accesskey value to use only one character.

more info about accesskey

Alert: Accesskey Duplicate

  • danger icon Duplicate [accessKey=%%%] found.
  • caution icon Duplicate AccessKey found [value].

Why did ANDI alert this?

This element has an accesskey attribute that matched another element's accesskey.

Why is this an accessibility concern?

The accesskey functionality may not work as intended. Accesskeys on buttons and links must be unique. Some browsers allow for a "focus jump" functionality when duplicate accesskeys are placed on elements that aren't links and buttons. However, when a shared accesskey is placed on links or buttons, usually only the first button or link will be selected.

What should be done?

As a best practice, make each accesskey unique. If multiple buttons or links share the same function, put the accesskey on only one.

more info about accesskey

Reference Alerts


Alert: ARIA-labelledBy References No Text

  • danger icon Element's [aria-labelledby] references provide no name text.

Why did ANDI alert this?

This element is using an aria-labelledby attribute, but the elements it references do not provide a usable accessible name.

Why is this an accessibility concern?

Since the references of the aria-labelledby attribute return no useable name, if no other HTML markup for this element can provide an accessible name, then this element will not be accessible and a screen reader may read nothing or make a guess.

What causes this?

The referenced elements themselves have no HTML markup that would provide an accessible name such as innerHTML.

What should be done?

Either modify the referenced elements to return an accessible name by adding text contents, or point the aria-labelledby at the id of a different element that does provide an accessible name. Alternatively, aria-label can be used instead of aria-labelledby to explicitly define the element's accessible name.

more info about aria-labelledby | more info about aria-describedby

Alert: ARIA-describedBy References No Text

  • warning icon Element's [aria-describedby] references provide no description text.

Why did ANDI alert this?

This element is using an aria-describedby attribute, but the elements it references do not provide a usable accessible description.

Why is this an accessibility concern?

Since the references of the aria-describedby attribute return no usable description, no description would be read by a screen reader.

What causes this?

The referenced elements themselves have no HTML markup that would provide an accessible description such as innerHTML.

What should be done?

Either modify the referenced elements to return an accessible description by adding text contents, or point the aria-describedby at the id of a different element that does provide an accessible description. Alternatively, title can be used instead of aria-describedby to explicitly define the element's accessible description.

more info about aria-describedby

Alert: ARIA Reference ID Not Found

  • warning icon Element referenced by [%%%] with [id=%%%] not found.

Why did ANDI alert this?

This element has an aria-labelledby or aria-describedby that points to an id that cannot be found on the page.

Why is this an accessibility concern?

Important accessibility information might be missing. Screen readers will not notify a user that the id could not be found.

What causes this?

This may be due to one of these reasons:

  • The web author may not be using aria-labelledby/aria-describedby correctly: These attributes expect one or more ids; Multiple ids should be separated by spaces, not commas.
  • The web author may have changed an element's id, but forgot to change the reference in the aria-labelledby/aria-describedby.
  • The referenced element will eventually be injected onto the page using scripting. This is a common error/form validation design, in which case, is not an accessibility issue.

What should be done?

Deeper investigation of the code is needed.

Attributes aria-labelledby and aria-describedby should only contain id references, not text directly inserted into the attribute's value. Example:

  • GOOD: aria-labelledby="id1"
  • BAD: aria-labelledby="What is your favorite color?"

When multiple ids are used, they should be space delimited, not comma delimited. Example:

  • GOOD: aria-labelledby="id1 id2 id3"
  • BAD: aria-labelledby="id1,id2,id3"
  • BAD: aria-labelledby="id1, id2, id3"

more info about aria-labelledby | more info about aria-describedby

Alert: Improper Reference Attribute Possible

  • danger icon Improper use of [aria-labelledby] possible: Referenced ids "%%%" not found.
  • danger icon Improper use of [aria-describedby] possible: Referenced ids "%%%" not found.
  • danger icon Improper use of [headers] possible: Referenced ids "%%%" not found.

Why did ANDI alert this?

More than one id referenced by an aria-labelledby, aria-describedby, or cell headers cannot be found on the page. ANDI suggests that the attribute is not being used properly.

Why is this an accessibility concern?

Important accessibility information might be missing. Screen readers will not notify a user when the id references cannot be found.

What causes this?

This is typically caused by the developer not understanding that aria-labelledby, aria-describedby, headers values are meant to contain id references and literal text was mistakenly added directly into the attribute's value. Another possibility is that a developer may have intended to reference elements that were later removed or the id values were changed.

What should be done?

Ensure that the attribute is being used properly: A list of id references only and not literal text.

more info about aria-labelledby | more info about aria-describedby | more info about data table cell associations

Alert: Headers Reference Not TH

  • danger icon Element referenced by [headers] attribute with [id=%%%] is not a <th>.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "headers" and this cell is referencing an element that is not a <th>.

If headers associations are not appropriate for this table's design, change the Table Analysis Mode to "scope".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader will not make the intended cell association.

What should be done?

The headers attribute should reference the id of a <th>.


Alert: Image map reference not found

  • danger icon <img> referenced by image map %%% not found.

Why did ANDI alert this?

ANDI found an image map (<map>) that references an (<img>) that does not exist on the page.

Why is this an accessibility concern?

The image map will not work for all users.

What should be done?

Ensure that the name attribute of the <map> points to an <img> that has a matching usemap.


Alert: Headers References No Text

  • warning icon Element's [headers] references provide no association text.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "headers" and this cell is using a headers attribute but the elements it references do not provide header cell association text.

If headers associations are not appropriate for this table's design, change the Table Analysis Mode to "scope".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader will not communicate the intended header cell associations.

What causes this?

The referenced cell has no HTML markup that would provide text such as innerHTML.

What should be done?

Either modify the referenced elements by adding text contents, or point the headers at the id of a different element that does provide text.


Alert: Anchor Target Not Found

  • warning icon In-page anchor target with [id=%%%] not found.

Why did ANDI alert this?

This link's href points to the id of an element on the page that cannot be found. NOTE: ANDI should not throw this alert if a javascript "click event handler" is attached to this link.

Why is this an accessibility concern?

If this link is intended to be used as an in-page jump, or skip to content link, it may not function as intended.

What should be done?

Testers should click on the link to discover if the link is functional as an in-page jump/bookmark. If the link has no function, add the element with the id to the page or remove the link. Further evaluation or a discussion with the web author may be needed to determine the purpose of this link.


Alert: Headers Reference is TD

  • warning icon Headers attribute with [id=%%%] is referencing a <td>.

Why did ANDI alert this?

ANDI's Table Analysis Mode is set to "headers" and this cell is referencing an element that is a <td>.

If headers associations are not appropriate for this table's design, change the Table Analysis Mode to "scope".
How to choose the right Table Analysis Mode

Why is this an accessibility concern?

A screen reader may not make the intended cell association.

What should be done?

The headers attribute should reference the id of a <th>. The web author may be able to simply convert the <td> into a <th>


Alert: ARIA Reference has ARIA-label

  • caution icon [aria-labelledBy] reference contains [aria-label].
  • caution icon [aria-describedBy] reference contains [aria-label].

Why did ANDI alert this?

This element has an aria-labelledby or aria-describedby that points to an element that has an aria-label.

Why is this an accessibility concern?

Although WCAG specifications allow for this usage, not all screen readers support the functionality. Therefore, differences in screen reader output is likely.

What should be done?

Verify that the aria-label value referenced by aria-labelledby / aria-describedby is meaningful. In addition, using a screen reader, check if the referenced aria-label value is spoken - if the desired aria-label value is not spoken, consider replacing aria-labelledby / aria-describedby with a single aria-label on this element containing all of the text needed to provide an accessible name for the element

more info about aria-label | more info about aria-labelledby | more info about aria-describedby

Invalid HTML Alerts


Alert: Page Title Empty

  • danger icon Page <title> cannot be empty.

Why did ANDI alert this?

A <title> tag was found in the page's <head> but the contents were empty.

Why is this an accessibility concern?

A screen reader would not read a concise, logical title for the page, and would instead read the url.

What should be done?

Add text contents to the <title> tag in the page's <head>.


Alert: No Page Title

  • danger icon Page has no <title>.

Why did ANDI alert this?

A <title> tag could not be found in the page's <head> or the document.title was not set.

Why is this an accessibility concern?

A screen reader would not read a concise, logical title for the page, and would instead read the url.

What should be done?

Add a <title> tag in the page's <head>.


Alert: Multiple Page Titles

  • danger icon Page has more than one <title> tag.

Why did ANDI alert this?

More than one <title> tag was found in the page's <head>.

Why is this an accessibility concern?

A screen reader would not read both <title> tags. Therefore, it could read the semantically "wrong" one.

What should be done?

Ensure that only one <title> tag is in the page's <head>.


Alert: More Legends Than Fieldsets

  • danger icon There are more legends (%%%) than fieldsets (%%%).

Why did ANDI alert this?

More <legend> tags were found on the page than <fieldset> tags.

What causes this?

A <legend> could have been placed on the page without being contained in a <fieldset>. Another possibility is that more than one <legend> could have been placed in a <fieldset>.

Why is this an accessibility concern?

<legend> tags serve no semantic purpose outside of a <fieldset>. Moreover, each <fieldset> should contain only one <legend>. Either of these scenarios could signify that a developer did not add proper markup to the page, and therefore the accessible name and descriptions of the form elements could be semantically incorrect.

What should be done?

Ensure that this page's <legend> tags are contained within a <fieldset> and are at a 1:1 ratio. Remember that a <legend> only describes a group of form elements; each form element must have an explicit label to provide an accessible name.

more info about legend

Alert: More Figcaptions Than Figures

  • danger icon There are more figcaptions (%%%) than figures (%%%).

Why did ANDI alert this?

More <figcaption> tags were found on the page than <figure> tags.

What causes this?

A <figcaption> could have been placed on the page without being contained in a <figure>. Another possibility is that more than one <figcaption> could have been placed in a <figure>.

Why is this an accessibility concern?

<figcaption> tags serve no semantic purpose outside of a <figure>. Moreover, each <figure> should contain only one <figcaption>. Either of these scenarios could signify that a developer did not add proper markup to the page, and therefore the accessible name and description of elements could be semantically incorrect.

What should be done?

Ensure that each of this page's <figcaption> tags are contained within a <figure> and are at a 1:1 ratio. Remember that a <figcaption> names a <figure> and by default does not name or describe other elements contained within the figure. If an element within the figure should be named or described by the <figcaption>, point an aria-labelledby or aria-describedby at the <figcaption>.

more info about figcaption

Alert: More Captions Than Tables

  • danger icon There are more captions (%%%) than tables (%%%).

Why did ANDI alert this?

More <caption> tags were found on the page than <table> tags.

What causes this?

A <caption> could have been placed on the page without being contained in a <table>. Another possibility is that more than one <caption> could have been placed in a <table>.

Why is this an accessibility concern?

<caption> tags serve no semantic purpose outside of a <table>. Moreover, each <table> should contain only one <caption>. Either of these scenarios could signify that a developer did not add proper markup to the page, and therefore the accessible name and description of elements could be semantically incorrect.

What should be done?

Ensure that each of this page's <caption> tags are contained within a <table> and are at a 1:1 ratio.

more info about caption

Alert: Tabindex Not A Number

  • danger icon Tabindex value "%%%" is not a number.

Why did ANDI alert this?

An element was found on the page with a non-numeric value for the tabindex attribute.

Why is this an accessibility concern?

Browser behavior is inconsistent in this scenario. Some browsers will replace the value with a negative tabindex, others will not change the value. Regardless, a keyboard user will not be able to place focus on such an element.

What should be done?

Ensure that the value of the tabindex attribute is a numeric, positive or negative integer. Remember that only positive values allow for keyboard focus using the tab key. Negative values are meant for programmatically controlling focus with JavaScript.

more info about tabindex

Alert: List Item No Container

  • danger icon List item <li> is not contained by a list container <ol> or <ul>.

Why did ANDI alert this?

This list item (<li>) is not contained by a list container tag (<ol> or <ul>).

Why is this an accessibility concern?

Since the list item tag carries a semantic meaning, it should be contained within a list container.

What should be done?

If the list item (<li>) is meant to be part of a list, contain it within a list container tag (<ol> or <ul>). Otherwise, use a different tag for the item such as <strong>, <em>, or <span>.


Alert: Description List Item No Container

  • danger icon Description list item is not contained by a description list container <dl>.

Why did ANDI alert this?

This description list item (<dd> or <dt>) is not contained by a description list container tag (<dl>).

Why is this an accessibility concern?

Since the description list item tags carry semantic meaning, they should be contained within a description list container.

What should be done?

If the description list item (<dd> or <dt>) is meant to be part of a description list, contain it within a description list container tag (<dl>). Otherwise, use a different tag for the item such as <strong>, <em>, or <span>.


Alert: Deprecated Attribute

  • warning icon Using HTML5, found deprecated {attribute/tag}

Why did ANDI alert this?

ANDI detected an HTML5 doctype and the presence of a deprecated attribute or tag. A deprecated attribute or tag means it’s being phased out and there are better, more flexible alternatives.

ANDI will throw this Alert when it finds:

  • A summary attribute on a table
  • A name attribute on an a link
  • A scope attribute on an table td cell

Why is this an accessibility concern?

Screen readers may not support deprecated HTML.

What should be done?

Abide by the specifications of the doctype being used.

With HTML5,

  • Instead of summary on a table, use aria-label or <caption>
  • Instead of name on an a link, use id
  • Instead of scope attribute on an td, use a th (table header) cell

Misuses of Alt attribute


Alert: Alt Only For Images

  • warning icon [alt] attribute is meant for <img>, use [aria-label] on this element.

Why did ANDI alert this?

This element has an alt attribute and is not an image: <img>, <input[type=image]>, or <area>.

Why is this an accessibility concern?

Not all screen readers will announce the alt attribute for non-image elements. Therefore, some accessibility information that was intentionally added in the alt value may not be spoken.

What should be done?

Do not use the alt attribute for non-images. Instead use the global attribute aria-label to provide an accessible name or title to provide an accessible description.

more info about alt | more info about aria-label | more info about title

Misuses of Label Tag


Alert: Explicit <label> For Form Elements

  • warning icon Explicit <label[for]> only works with form elements.

Why did ANDI alert this?

The for attribute of a <label> is pointing to the id of this element which is not a form element.

Why is this an accessibility concern?

Some screen readers will not announce an explicit label on non-form elements. Therefore, the associating <label> may not be read as part of the accessible name of this element.

What should be done?

This element does not derive its accessible name from <label>. Consider using aria-label or aria-labelledby on the element.

more info about label

Alert: Explicit <label> Not For Buttons

  • warning icon Explicit <label[for]> shouldn't be used with buttons.

Why did ANDI alert this?

The for attribute of a <label> is pointing to the id of this element which is a button.

Why is this an accessibility concern?

Some screen readers will not announce an explicit label on buttons. Therefore, the associating <label> may not be read as part of the accessible name of this button.

What should be done?

Since buttons do not derive their accessible name from other <label> elements.

  • For <button> or role=button elements stick with innerHTML.
  • For <input type="submit"> or <input type="button"> use value.
  • For <input type="image"> use alt.
  • more info about label

    Unreliable Component Combinations


    Alert: Unreliable Component Combination

    • warning icon Combining %%% produces inconsistent screen reader results.

    Why did ANDI alert this?

    This element contains multiple accessibility components which ANDI's "One Namer, One Describer" methodology discourages.

    Why is this an accessibility concern?

    When elements have multiple Namers or multiple Describers, screen reader precedence differs wildly. To minimize these differences and ensure consistent screen reader output, follow ANDI's methodology.

    What should be done?

    Only one Namer should be used at a time. Only one Describer should be used at a time.

    ANDI defines the following components as Namers. Choose one:
    • aria-labelledby
    • aria-label
    • label (form elements)
    • alt (images)
    • value (input buttons)
    • figcaption (figure)
    • caption (table)
    • innerText (container elements)
    ANDI defines the following components as Describers. Choose one:
    • aria-describedby
    • legend (form elements & only with label)
    • title
    more info about Namers | more info about Describers

    JavaScript Events to Investigate


    Alert: JavaScript Event Found

    • caution icon JavaScript event %%% may cause keyboard accessibility issues; investigate.

    Why did ANDI alert this?

    This element has a JavaScript event. Events ANDI scans for: onBlur, onChange, onDblClick

    Why is this an accessibility concern?

    The presence of JavaScript events does not mean there is a definite accessibility issue. However, depending on what the JavaScript event was programmed to do, an accessibility issue could exist.

    Examples:
    • A select box has an onChange event. A keyboard user must be able to make selections (using arrow keys) without a mouse without focus moving away from the select box.
    • A text box has an onBlur event. If tabbing off the text box causes something to change dynamically, a visually impaired user should be notified.
    • An element has an onDblClick event. A keyboard only user who cannot use a mouse, cannot perform a double click.

    What should be done?

    Test the element to ensure that the JavaScript events do not cause accessibility issues such as focus loss or confusion, keyboard traps, or dynamic screen changes without notification.

    Tab Order Alerts


    Alert: Decorative Image In Tab Order

    • danger icon Image defined as decorative is in the keyboard tab order.

    Why did ANDI alert this?

    This image contains a programmatic contradiction: it was defined as decorative using role="presentation" or alt="", but it has a non-negative tabindex which places it in the keyboard tab order.

    Why is this an accessibility concern?

    When tabbing to this decorative image, a screen reader may read nothing or may read incorrectly.

    What should be done?

    Decorative Images should not be in the tab order, therefore, remove the tabindex. If the image is not decorative, include a text description of the image using the alt attribute. In general, images do not have to be in the keyboard tab order.


    Alert: Element with Role Not In Tab Order

    • warning icon Element with [role=%%%] not in the keyboard tab order.

    Why did ANDI alert this?

    This element has a role attribute with a value that tells a screen reader that the element is interactive (example: role="link", role="button") but it cannot be navigated to using the keyboard tab key.

    Why is this an accessibility concern?

    An individual that cannot use a mouse (a keyboard-only user) uses the tab key as the primary means of navigating a page. Keyboard-only users expect most interactive elements (links, buttons, form elements) to be in the tab order since that is the standard behavior for these types of elements. When an HTML element is defined as an interactive element using the role attribute, additional handling often needs to be added to ensure that the interactive element is accessible to keyboard-only users.

    What should be done?

    If this element should be in the tab order, add tabindex="0" to the element. Otherwise, if navigation to the element is handled by other means (such as arrow keys), test to ensure that the element can be accessed using only a keyboard. In addition, links and buttons should be able to be activated using only a keyboard (enter key for links), (spacebar and enter key for buttons).

    Alternatively, use semantic HTML tags (<a>,<button>) instead of generic tags with a role attribute (<div role="link">,<div role="button">) and the browser will automatically handle most keyboard accessibility requirements.


    Alert: Focusable Element Not In Tab Order

    • caution icon Focusable element not in keyboard tab order.

    Why did ANDI alert this?

    This element has a tabindex value that is negative.

    Why is this an accessibility concern?

    Elements with negative tabindex values cannot achieve focus using the keyboard's tab key. However, focus may be moved to such elements programmatically using JavaScript.

    What should be done?

    Verify that this element should not be in the tab order. Also ensure that related functionality is not restricted to mouse use only. If the element should be in the tab order, then change the tabindex value to zero (tabindex="0").

    more info about tabindex

    Alert: Element Not In Tab Order, No Name

    • caution icon Focusable element not in keyboard tab order and has no accessible name.

    Why did ANDI alert this?

    This element has a tabindex value that is negative and it has no accessible name.

    Why is this an accessibility concern?

    Elements with negative tabindex values cannot achieve focus using the keyboard's tab key. However, focus can be placed on such elements programmatically using JavaScript. Also, elements must have an accessible name.

    What should be done?

    Ensure that not being able to tab to the element is acceptable and related functionality is not restricted to mouse use only. Also ensure that when focus is shifted to the element, a proper accessible name is provided.

    more info about tabindex | more info about accessible name

    Alert: Disabled Elements Found

    • caution icon Page has %%% disabled elements invisible to a screen reader.

    Why did ANDI alert this?

    Disabled Elements (disabled="disabled") were found on the page.

    Why is this an accessibility concern?

    Elements disabled using the disabled attribute are not in the tab order. Therefore, a person who is visually impaired and using a keyboard to tab through the page may not know that the field is disabled.

    What should be done?

    Provide an accessible alternative so that all users know which fields are disabled. There are a number of ways to do so:

    • Provide a text description on the page that fields are disabled.
    • Use attributes readonly, aria-readonly="true", or aria-disabled="true" combined with CSS to make the element look disabled (grayed out).
    • Instead of using the native semantic tag (<input>, <button>, <a>) use a generic tag <div>, <p>, <span> with a tabindex="0" to present the uneditable/unalterable information.
    • Completely remove the element if it is not necessary.
    • Rather than disabling buttons/links, allow the user to press the button/link as normal and provide a message to the user saying that the function is not permitted for whatever reason.


    Alert: Iframe is in the tab order.

    • warning iconIframe is in the keyboard tab order and has no accessible name or title.
    • caution iconIframe is in the keyboard tab order.

    Why did ANDI alert this?

    This iframe has not been programmatically removed from the tab order.

    Why is this an accessibility concern?

    Elements in the tab order, but not intended to be in the tab order, reduce a person's effiency while navigating using a keyboard.

    NOTE: Some browsers consider iframes natively tabbable, while others do not.

    What should be done?

    Removing the iframe from the tab order (add tabindex="=1") will resolve the alert and not cause confusion for a person who is visually impaired and using a keyboard. If the iframe is meant to be in the tab order for a functional reason, provide an accessible name using a title attribute, aria-label, or aria-labelledby and disregard ANDI's caution alert.

    Empty Components Found


    Alert: Empty Component

    • caution icon Empty Component: [%%%=""]

    Why did ANDI alert this?

    This element contains an accessibility component with an empty string as its value or empty contents. Examples: aria-label="" or <label></label>.

    Why is this an accessibility concern?

    Some components have no functional reason to be left empty. Screen readers give no notification when components are empty.

    What should be done?

    This element should be investigated and determine if there is intention behind leaving the empty component empty. Ensure that the element has an appripriate accessible name. If no functional reason for the empty component can be found and the element has an accessible name, the empty component can be removed.

    What about Images with an empty alt?

    ANDI recognizes the long-standing practice of setting an alt attribute to an empty string for decorative, non-descriptive images. However, if the image is focusable or interactive, an empty alt is not always acceptable: A focusable/interactive image should have an accessible name.


    Alert: Empty <th> Cell.

    • caution icon Empty <th> cell.

    Why did ANDI alert this?

    This cell is a <th> and it is empty (has no Namer).

    Why is this an accessibility concern?

    A screen reader will not read anything for this header since it is empty.

    What should be done?

    Add text to categorize the purpose of the column or row. Table header cells should not be empty.

    Exclusions

    With some table designs it is acceptable for a header cell to be empty. For example, when it is at the intersection of a row of headers and a column of headers. This alert will not be thrown for header cells at the upper left position of a table.

    Unused Child Components


    Alert: Child Unused Text

    • caution icon Child element component %%% has unused text.

    Why did ANDI alert this?

    A child of this element contains text that may not be used in the accessible name calculation.

    Why is this an accessibility concern?

    Important contextual information might not be provided to a screen reader user.

    What should be done?

    Ensure that the this element's accessible name and description is sufficient and no important information from the child is being left out.

    Excessive Text


    Alert: Attribute Length Exceeds Character Limit

    • warning icon [title] attribute length exceeds 250 characters.
    • warning icon [alt] attribute length exceeds 250 characters.
    • warning icon [aria-label] attribute length exceeds 250 characters.

    Why did ANDI alert this?

    This element's title, alt, or aria-label attribute value has a length that exceeds 250 characters.

    Why is this an accessibility concern?

    An accessible name should be a concise identifier of an element. A screen reader has no way of skipping through sections of long accessible names. Shortening the accessible name will help with efficient page navigation using a screen reader.

    What should be done?

    If a long amount of text is needed, shorten the accessible name and use the aria-describedby attribute. The aria-describedby provides a screen reader user a way to make a selection to hear more information about an element.

    more info about aria-describedby

    Link Alerts





    Alert: Possible Inaccessible Link

    • warning icon Possible inaccessible link: <a> element has no [href], [id], or [tabindex].
    • caution icon Possible inaccessible link: <a> element has no [href], or [tabindex].

    Why did ANDI alert this?

    The use of the <a> tag for this element is unclear. This <a> element is not in the tab order (no href or tabindex). It might have no id or deprecated name attribute (which would indicate that it is an anchor for a skip link). And ANDI could not detect a javascript click event.

    Why is this an accessibility concern?

    This element has the semantics of a link or anchor, but some key pieces are missing which would allow it to be accessible to a keyboard only user.

    What should be done?

    This element is suspect to accessibility issues. Investigate the element further and ensure that if the link performs a function with a mouse (click or hover), the same functionality can be performed using only a keyboard.


    Alert: Is Anchor Targer

    • caution icon This <a> element is an anchor target; If clicking performs a function, it's not keyboard accessible.

    Why did ANDI alert this?

    This <a> element is the target of another link's href. It does not have an href or tabindex.

    Why is this an accessibility concern?

    This would only be an accessibility concern if clicking this link performs a function or navigation because the link is not keyboard accessible.

    What should be done?

    Click the link and determine if it performs a function or navigation. If so, make it keyboard accessible by adding tabindex="0". If clicking does not perform a function, there are keyboard accessibility issues with the element.

    Graphics Alerts


    Alert: Marquee Found

    • danger icon <marquee> element found, do not use.

    Why did ANDI alert this?

    This element is a <marquee>.

    Why is this an accessibility concern?

    This element can trigger seizures in some individuals when the content is large. In addition the constantly moving text within a <marquee> element can be difficult to read for people with low vision or who have cognition disorders like dyslexia.

    What should be done?

    Do not use the <marquee> tag and do not allow any text to constantly move or scroll on the page.



    Alert: Server Side Image Map

    • danger icon Server side image map found.

    Why did ANDI alert this?

    This element contains a sever side image map.

    Why is this an accessibility concern?

    Server side image maps cannot be navigated by screen reader users and keyboard-only users.

    What should be done?

    Do not use server side image maps. Client side image maps are acceptable but must be made accessible by adding alt attributes to the <area> tags.


    Alert: Image Alt Not Descriptive

    • danger icon Image [alt] text is not descriptive.

    Why did ANDI alert this?

    This image has alt text that does not provide an equivalent text description conveying the purpose and/or function of the image.

    Why is this an accessibility concern?

    If the image does not have a text alternative description that contains a meaningful representation of the image, then the image is not accessible to a person who is blind or visually impaired and uses a screen reader.

    What should be done?

    The image alt text or other Namer/Describer should provide a text alternative or brief description of the image.

    Alternatively, if the image is purely decorative and does not require an explanation, add role=presentation to the image or set the alt value to an empty string alt="". Doing so will ensure that the screen reader does not try to describe the image.


    Alert: Area Not In Map

    • danger icon <area> not contained in <map>.

    Why did ANDI alert this?

    ANDI has found an an image map element, (<area>), that is not contained within a <map> element.

    What should be done?

    To create a proper client-side image map, <area> elements must be within a <map> element.


    Alert: Image Alt File Name

    • warning icon Image [alt] text contains file name.

    Why did ANDI alert this?

    The image alt text contains a file name such as ".jpg", ".gif", ".png".

    Why is this an accessibility concern?

    If the image does not have a text alternative description that contains a meaningful representation of the image, then the image is not accessible to a person who is blind or visually impaired and uses a screen reader.

    What should be done?

    The image alt text or other Namer/Describer should provide a text alternative or brief description of the image.

    Alternatively, if the image is purely decorative and does not require an explanation, add role=presentation to the image or set the alt value to an empty string alt="". Doing so will ensure that the screen reader does not try to describe the image.


    Alert: Image Alt Redundant Phrase

    • caution icon Redundant phrase in image [alt] text.

    Why did ANDI alert this?

    The image alt contains a redundant phrase such as "image of ...", "photo of ...".

    Why is this an accessibility concern?

    A screen reader will automatically announce the word "graphic" when an <img> tag is being used, therefore, including the redundant phrase in the alt text increases verbosity.

    What should be done?

    Remove the redundant phrase from the alt value.


    Alert: Ensure Background Images Are Decorative

    • caution icon Ensure that background images are decorative.

    Why did ANDI alert this?

    ANDI has found at least one element that contains a CSS background-image.

    Why is this an accessibility concern?

    If the background image is not decorative or contains important information, a person who is visually impaired may miss important information if the image does not have a text description or text equivalent somewhere on the page.

    What should be done?

    Ensure that all non-decorative background images have a text alternative description somewhere on the page.

    Improper ARIA Usage


    Alert: Heading Role No Aria-Level

    • danger icon [role=heading] used without [aria-level].

    Why did ANDI alert this?

    This element was defined as a heading using role="heading" but it was not given a heading level using aria-level.

    Why is this an accessibility concern?

    A screen reader will not be able to accurately determine the level of the heading.

    What should be done?

    Use semantic HTML headings (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) instead of role="heading" or add the aria-level attribute to the element and assign it a numeric value.


    Alert: Element has Aria-hidden

    • danger icon Element is hidden from screen reader using [aria-hidden=true].

    Why did ANDI alert this?

    This element has been hidden from a screen reader using aria-hidden="true". The element may be a child of another element with aria-hidden="true".

    Why is this an accessibility concern?

    If the element is interactive, it should be recognized by the screen reader. When an element has aria-hidden="true" or is a child of an element with aria-hidden="true", the screen reader will ignore the element.

    What should be done?

    aria-hidden="true" is meant to be used in rare situations where a screen reader should ignore visual elements.

    Focusable elements should not be ignored and, therefore, should not have aria-hidden="true" and should not have an anscestor element with aria-hidden="true".

    If the element should be hidden from the screen reader because the visual information is communicated by alternate means, then the aria-hidden="true" element should not be tabbable. tabindex="-1" will remove an element from the tab order.

    Button Alerts


    Alert: Non-Unique Button

    • warning icon Non-unique button: same name/description as another button.

    Why did ANDI alert this?

    This button has the same accessible name and description as another button.

    Why is this an accessibility concern?

    If these buttons perform different functions or use a different set of data, then they each need to be uniquely identified. A person who is visually impaired may not be aware of the button's context (its location on the page). If two or more buttons have the same accessible name and description, then functionality should also be the same no matter which buttons is pressed.

    For example, consider a data table with buttons labeled "Delete" on every row. An identifying description about what is going to be deleted must be programmatically associated with the button, otherwise a user may delete the wrong item.

    What should be done?

    If the buttons perform a different function or use a different set of data, either rename the buttons or attach a unique description to the button using the aria-describedby or title attributes. Otherwise, if the buttons are truly identical and perform the same function using the same data, no change is required.

    Structure Alerts


    Alert: Not Using Semantic Heading Markup

    • warning icon Element visually conveys heading meaning but not using semantic heading markup.

    Why did ANDI alert this?

    This element appears to be a false heading.

    Why is this an accessibility concern?

    Headings (text that is concise, has a large font size or bold font weight) provide a way to visually organize and categorize sections of a page. Users of assitive technology are able to quickly navigate web pages when headings exist on a page. However, headings must be coded properly using semantic heading tags (<h1> through <h6>) in order for users of AT to navigate.

    What should be done?

    Convert this false heading, and any others on the page, into one of the semantic heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

    Small Clickable Areas


    Alert: Label Would Increase Clickable Area

    • caution icon An associated <label> would increase the clickable area of this element.

    Why did ANDI alert this?

    This radio button or checkbox does not have an associated <label> and the size of the radio button or checkbox is less than 21px by 21px.

    Why is this an accessibility concern?

    People with motor disabilities who can used a mouse may have trouble clicking on a small target less than 21px by 21px. Note: This size limit (21px by 21px) is arbitrarily determined and not an official WCAG requirement.

    What should be done?

    Adding an associated <label> to a radio button or checkbox allows a mouse user to click on the label to select the radio button or checkbox. This increases the size of the clickable area. An associated <label> is also a standard way of providing an accessible name for a radio button or checkbox.

    Inaccessible CSS Content


    Alert: Content injected using CSS

    • danger icon Text content has been injected using CSS pseudo-elements ::before or ::after.

    Why did ANDI alert this?

    This page has text content injected using the CSS pseudo-elements ::before or ::after.

    Why is this an accessibility concern?

    Any text injected using this technique is not recognized by current screen readers, therefore, the text will not be communicated to individuals using assistive technologies.

    What should be done?

    If the text is informational or important, the text needs to available to the screen reader.

    Remediation options are as follows:

    • Abandon the CSS content injection technique and place the text directly on the screen.
    • Provide an aria-label attribute with a value that contains the injected content text and the accessible name of the element.

    Manual Contrast Tests Needed


    Alert: Element Has Background Image

    • warning icon Element has background-image; Perform a manual contrast test.

    Why did ANDI alert this?

    This element is "on top of" a background-image, therefore, the contrast ratio cannot be automatically determined.

    Why is this an accessibility concern?

    Informational text should have a contrast ratio that allows the text to be readable by people with moderately low vision.

    What should be done?

    Perform a manual contrast ratio test by selecting the primary color of the background image and the primary foreground color of the text using a color selector tool (Colour Contrast Analyser Installation).

    The WCAG AA Contrast Ratio requirement is as follows:

    • For Large Text (font-size of 18pt or font-size of 14pt and bold) a contrast ratio of at least 3:1
    • Otherwise a contrast ratio of at least 4.5:1
    • Logo or brand name text does not have to meet a contrast ratio requirement.

    Alert: If Images Contain Text

    • caution icon Page has images; If images contain text; Perform a manual contrast test.

    Why did ANDI alert this?

    The page contains inline images (<img>, <input[type='image']>, or <svg>).

    Why is this an accessibility concern?

    If an image contains informational text, that text should have a contrast ratio that allows the text to be readable by people with moderately low vision.

    What should be done?

    If the images on this page contain informational text, perform a manual contrast ratio test by selecting the primary background color and the primary foreground color of the text using a color selector tool (Colour Contrast Analyser Installation).

    The WCAG AA Contrast Ratio requirement is as follows:

    • For Large Text (font-size of 18pt or font-size of 14pt and bold) a contrast ratio of at least 3:1
    • Otherwise a contrast ratio of at least 4.5:1
    • Logo or brand name text does not have to meet a contrast ratio requirement.

    Alert: Element Has Background Image

    • warning icon Opacity Less Than 100%; Perform a manual contrast test.

    Why did ANDI alert this?

    This element has a CSS property opacity with a value that is less than 1, thus making it semi-transparent.

    Why is this an accessibility concern?

    By reducing the opacity value to less than one, the element's foreground color and background color is affected and will lower the contrast ratio. Informational text should have a contrast ratio that allows the text to be readable by people with moderately low vision.

    Is this really an issue? (disabled elements)

    Sometimes developers use CSS opacity to make an element appear disabled. Disabled elements do not need to be included in a contrast test, but it is up to the tester to determine if the element is in a disabled state. Moreover, to communicate to a screen reader user that an element is disabled, the element should have aria-disabled="true".

    What should be done?

    If the text is not in a disabled state, perform a manual contrast ratio test by selecting the primary color of the background image and the primary foreground color of the text using a color selector tool (Colour Contrast Analyser Installation).

    The WCAG AA Contrast Ratio requirement is as follows:

    • For Large Text (font-size of 18pt or font-size of 14pt and bold) a contrast ratio of at least 3:1
    • Otherwise a contrast ratio of at least 4.5:1
    • Logo or brand name text does not have to meet a contrast ratio requirement.

    Contrast Alerts


    Alert: Contrast ratio minimum requirement

    • danger icon Text does not meet minimum requirement 4.5:1.
    • danger icon Text does not meet large text minimum requirement 3:1.

    Why did ANDI alert this?

    This element does not provide enough contrast between the text and the background color. In other words, the contrast ratio does not meet the minimum requirement.

    Why is this an accessibility concern?

    Informational text should have a contrast ratio that allows the text to be readable by individuals with moderately low vision.

    What should be done?

    Adjust the text color and/or the background color of this element so that the contrast ratio is at or above the minimum required contrast ratio.

    The WCAG AA Contrast Ratio requirement is as follows:

    • For Large Text (font-size of 18pt or font-size of 14pt and bold) a contrast ratio of at least 3:1
    • Otherwise a contrast ratio of at least 4.5:1
    • Logo, brand name, and decorative text does not have to meet a contrast ratio requirement.