---
title: "ARIA refers to a non-existing ID"
date: "2024-10-25T07:53:33+00:00"
summary: "Ensure ARIA controls reference valid IDs for improved accessibility in expanded comboboxes and scrollbars."
image:
type: "page"
url: "/web-governance/aria-refers-non-existing-id"
id: "56cfec5c-5587-4da2-aea0-8213981eacaf"
---

Table of contents will be added

1.3.1 Info and Relationships

Introduction
------------

This document provides information about the Acquia Web Governance accessibility check:

*   ARIA refers to a non-existing ID.
    

What
----

When the `aria-controls` attribute is used on an expanded combobox or a scrollbar, the value of the `aria-controls` attribute must include the ID of at least one element in the same shadow tree or document.

Why
---

If an `aria-controls` attribute value does not point to a valid ID, the intended accessibility function may not work as expected. This can impact users who need assistive technologies that rely on correct ARIA to communicate the content and functionality of the page.

Who
---

### Affected users

This check affects the following users who have:

*   Visual impairments: Who access the site contents with a screen reader or screen magnification software.
    

*   Mobility impairments: Who navigate the page with speech recognition software.
    

### User story

![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/ab902dae-f391-4c4d-a431-77ca08d2adc6/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png)

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:

_"There are some things that are just tricky, and then there are things that do not work at all. One thing that often does not work is those dropdowns where you have to search for something. You know, where you type in text and then a list of suggestions pops up, and you have to choose from that list instead of just typing what you want._

_This happens a lot when I am booking flights. The field where I have to choose which airport I am flying from and to.  Sometimes I can type in the text, and the screen reader will tell me there are, say, 3 or 10 results on the list. But I cannot see or select anything from that list. I just get stuck and cannot move forward."_

Examples
--------

This section gives some examples of the issue.

### Example: Combobox with correct ID reference

The value of the `aria-controls` attribute for this expanded combobox matches the ID of the `<ul>` element in the same document, which is good.

    <label for="fly_from_combo">From</label>
    <input type="text" id="fly_from_combo"
    role="combobox"
     aria-expanded="true"
     aria-controls="popup_listbox"
     aria-activedescendant="selected_option"
    </input>
    <ul role="listbox" id="popup_listbox">
    <li role="option" id="selected_option">Copenhagen - Kastrup (CPH)</li>
    <li role="option">Wroclaw - Copernicus (WRO)</li>
    </ul>
    

![An airline web page is open in a browser. The user is searching for flights to Copenhagen and has typed in "Cop" into a field. Two destinations show in list form as the user is typing. The user selects the first option on the list.](https://acquia.widen.net/content/8a7b754b-0aaf-4c57-ae84-75c55ad9e39d/web/WebGov_AccessibilityGuide-Example-Combobox.png?w=720&itok=5ZNo6Z52)

Because the `aria-controls` attribute correctly refers to the list ID, assistive technologies can establish the correct link between the combobox text input and the dropdown list of suggestions. When there is no valid reference from the `aria-controls` attribute, users of assistive technologies, like screen readers, might not be able to read the options in the list.

How
---

This section provides instructions on how to identify and fix the issue.

### How to identify it

The Acquia Web Governance platform flags instances of `aria-controls` attributes that do not reference a valid ID on the page. 

### How to fix it

For any instance where the `aria-controls` attributes do not refer to a valid ID, make a correction to the code to ensure that the value in the `aria-controls` attribute points to a valid, existing ID on the page.

For more information, refer to the _ACT Rules_ section below, which includes a link to a complete technical explanation of this check.

Additional resources
--------------------

### WCAG success criteria

[1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)

### ACT rules

Related accessibility conformance testing rules:

[ARIA required ID references exist](https://www.w3.org/WAI/standards-guidelines/act/rules/in6db8/proposed/)

### Other resources

*   [WAI-ARIA standard](https://www.w3.org/TR/wai-aria/)
    
*   [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)