ANDI Help

Skip to Content


Accessibility Alerts


What are Alerts?

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

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)

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

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.

Duplicate Attributes Found


Alert: Duplicate ID (Danger)

  • danger icon Duplicate 'id' attributes: [value]

Why did ANDI alert this?

This element has an id that matches another element's id.

Why is this an accessibility concern?

Because the accessibility components aria-labelledby, aria-describedby, and for attribute of a <label> use reference ids, they could be referencing an incorrect element and therefore providing the wrong name to the screen reader.

What causes this?

Often, this is the result of a developer copying and pasting an element and forgetting to change the id. Other times, a developer does 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)

  • danger icon Duplicate 'for' attributes associate with this element's id: [value]

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)

  • danger icon Cannot use aria-describedby alone on this element.

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)

  • danger icon Cannot use legend alone on this element.

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)

  • danger icon Misspelled attribute: [attributes]

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)

  • 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: Presentation Table with Caption. (Danger)

  • danger icon Presentation table should not have a caption.

Why did ANDI alert this?

This table has the attribute role="presentation" and also has a <caption> tag within the table.

Why is this an accessibility concern?

A <table> being used for presentation/layout should not use a <caption> tag. The <caption> tag is meant for data tables only. Screen readers enter a special mode when reading data tables, and they could enter into the wrong reading mode when they come across this scenario.

What should be done?

Either remove the <caption> tag and use some other HTML tag (a heading perhaps) or do not use tables for structural presentation/layout. Using Cascading Style Sheets for grid layout is recommended.

more info about caption

Alert: Presentation Table with Summary. (Danger)

  • danger icon Presentation table should not have a summary.

Why did ANDI alert this?

This table has the attribute role="presentation" and also has a summary attribute.

Why is this an accessibility concern?

A <table> being used for presentation/layout should not use a summary attribute. The summary attribute is meant for data tables only. Screen readers enter a special mode when reading data tables, and they could enter into the wrong reading mode when they come across this scenario.

What should be done?

Remove the summary attribute. For best accessibility, do not use tables for structural presentation/layout. Using Cascading Style Sheets for grid layout is recommended.

Accesskey Alerts


Alert: Accesskey Without Focusability (Danger)

  • danger icon Found accesskey that cannot gain focus: [value]

Why did ANDI alert this?

An accesskey was found on an element in which tab focus cannot be placed using a keyboard or mouse.

Why is this an accessibility concern?

If the accesskey combination is pressed, focus will not shift to the element since it cannot gain focus; therefore, the accesskey is useless.

What causes this?

It's easy to overlook this two-pronged requirement when developing. Perhaps the developer did not know that elements receiving the accesskeys must be natively focusable or must have a tabindex.

What should be done?

If the accesskey was truly intended to be placed on the element, add a tabindex attribute with a numeric integar value such as tabindex="0". Otherwise, remove the accesskey from the element as it serves no purpose.

more info about accesskey

Alert: Accesskey Multiple Values (Danger)

  • danger icon Accesskey value has more than one character: [value]

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 Empty (Danger)

  • danger icon Accesskey is Empty.

Why did ANDI alert this?

An accesskey was found on this element but its value was empty.

Why is this an accessibility concern?

The element does not have a working accesskey.

What should be done?

If the accesskey was truly intended to be placed on the element, add a single character as the value of the accesskey Otherwise, remove the accesskey attribute from the element as it serves no purpose.

more info about accesskey

Alert: Accesskey Duplicate Button (Danger)

  • danger icon Accesskey on button must be unique [value].

Why did ANDI alert this?

An accesskey was found on this button that matched value of another element's accesskey.

Why is this an accessibility concern?

The accesskey functionality may not work as intended. Accesskeys on buttons must be unique.

What should be done?

Make each accesskey unique. more info about accesskey


Alert: Accesskey Duplicate (Caution)

  • caution icon Duplicate Accesskey found [value].

Why did ANDI alert this?

An accesskey was found on this element that matched value of another element's accesskey.

Why is this an accessibility concern?

Not all browsers allow for duplicate accesskey functionality. Most importantly, a duplicate accesskey on a button will cause unintended functionality. To resolve any accessibility issues, make accesskeys unique.

What should be done?

Ensure that the duplicate accesskey is not associated with a button - if so, make each accesskey unique.

more info about accesskey

ARIA Reference Alerts


Alert: ARIA-labelledBy References Empty (Danger)

  • 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 Empty (Danger)

  • danger 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 (Danger)

  • danger icon Element referenced by (ARIA-*) with [value] 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. Note: if more than one id was not found, ANDI will throw a different alert.

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?

A developer may have intended to reference an element that was later removed or the id was changed. Another reason may be that the developer did not understand that aria-labelledby and aria-describedby only work with id references, and tried to add text directly into the attribute's value.

What should be done?

A discussion with the developer may needed to investigate why the id is missing. Check the semantics of the accessible name to make sure it provides text equivalency to the screen reader user.

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

Alert: Improper ARIA Usage Possible (Danger)

  • danger icon Improper use of (ARIA-*) possible: Referenced ids [list] not found.

Why did ANDI alert this?

More than one id referenced by an aria-labelledby or aria-describedby cannot be found on the page. ANDI suggests that the ARIA 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 and aria-describedby values are meant to contain id references and the developer mistakenly added literal text directly into the attribute's value. Another possibility is that a developer may have intended to reference elements that were later removed or had their id values changed.

What should be done?

Ensure that the ARIA 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

Alert: ARIA Reference has ARIA-label (Caution)

  • caution icon (ARIA-*) 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?

Remove the aria-label from the referenced element, point to a different element, or use other HTML markup on this element such as aria-label or title.

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

Invalid HTML Alerts


Alert: Page Title Empty (Danger)

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

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

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

  • danger icon There are more legends than fieldsets: [Legends: (number)] [Fieldsets: (number)]

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)

  • danger icon There are more figcaptions than figures: [Figcaptions: (number)] [Figures: (number)]

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)

  • danger icon There are more captions than tables: [Captions: (number)] [Tables: (number)]

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)

  • danger icon Tabindex value is not a number: [value]

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: Deprecated Attribute (Warning)

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

ANDI will throw this Alert when it finds the summary attribute on a table. Or when it finds the name attribute on an a link.

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 use <caption>. For an a link, instead of name, use id.

Misuses of Alt attribute


Alert: Alt Only For Images (Warning)

  • warning icon Alt attribute only allowed on Images.

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)

  • warning icon Explicit Label only allowed on form elements, excluding buttons.

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?

Consider removing the <label>, or at minimum, the for attribute from the label and add other HTML markup to the element to provide an accessible name, such as aria-labelledby or aria-label.

more info about label

Alert: Explicit Label Not For Buttons (Warning)

  • warning icon Explicit Label not allowed on buttons.

Why did ANDI alert this?

The for attribute of a <label> is pointing to the id of this element which is a button: <button>, <input[type=submit]>, <input[type=button]>, <input[type=reset]>.

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?

Consider removing the <label>, or at minimum, the for attribute from the label and add other HTML markup to the button to provide an accessible name, such as aria-labelledby, aria-label, value, or innerHTML.

more info about label

Risky Component Combinations


Alert: Do Not Combine Components (Warning)

  • warning icon Do not combine components: [components]

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: Mouse Event Without Keyboard Access(Caution)

  • caution icon Mouse event found on Element without Keyboard Access: [event]

Why did ANDI alert this?

An element was found that cannot gain keyboard access and it has a mouse event. Events ANDI scans for: onMouseOver

Why is this an accessibility concern?

If this element has functionality that can only be triggered using a mouse, then a keyboard-only user will not be able to conveniently trigger the functionality.

What should be done?

Ensure that the page does not prevent keyboard-only users from accessing areas of the page/application or triggering important functionality.


Alert: JavaScript Event Found (Caution)

  • caution icon JavaScript event found: [event]

Why did ANDI alert this?

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

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 was programmed to do when the event is activated, an accessibility issue could arise.

If the onChange event occurs on a select box, a keyboard user must be able to make selections without a mouse. If the page is submitted using an onChange event of a form element, focus should be properly maintained on the new page.

If the onBlur event causes something to change dynamically, a blind user should be notified.

What should be done?

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

Focusable Elements Not in Tab Order


Alert: Focusable Element Not In Tab Order (Caution)

  • caution icon Focusable element not in 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 can be placed on such elements programmatically using JavaScript.

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.

more info about tabindex

Alert: Element Not In Tab Order, No Name (Caution)

  • caution icon Focusable element not in 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

Empty Components Found


Alert: Empty Component (Caution)

  • caution icon Empty Component: [component]

Why did ANDI alert this?

This element contains an accessibility component with an empty string as its value or empty contents.

Why is this an accessibility concern?

Some components in certain scenarios have no functional reason to be left empty. A screen reader does not typically give notification when components are empty.

What should be done?

The intention for the empty component should be investigated. Ensure that the element has an accessible name. If no functional reason for the empty component can be found and the element has an accessible name, the 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.

Unused Subtree Components


Alert: Subtree Unused Text (Caution)

  • caution icon Subtree contains unused text.

Why did ANDI alert this?

This element's subtree (child elements) contain accessibility components that will 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 semantics of this element's accessible name is sufficient and no important information in the subtree is being left out.

more info about subtree

Excessive Text


Alert: Attribute Length Exceeds Character Limit (Warning)

  • warning icon 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