---
title: "ARIA element is missing required context"
date: "2024-10-25T03:32:50+00:00"
summary: "Learn how to correctly use ARIA roles in their required contexts to improve web accessibility for users with visual and mobility impairments."
image:
type: "page"
url: "/web-governance/aria-element-missing-required-context"
id: "25214d2c-5ad4-4f95-8cb9-d26340d4e1e0"
---

Table of contents will be added

1.3.1 Info and Relationships

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

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

*   ARIA element is missing required context.
    

What
----

ARIA (Accessible Rich Internet Applications) roles that are only allowed in specific contexts must only be used in their correct and required context.

ARIA roles are attributes added to HTML code to improve accessibility. They define specific purposes for webpage elements that help assistive technologies like screen readers understand and interact with them. This makes websites more accessible to people with disabilities by providing extra information about the structure and function of the content.

Why
---

Some ARIA roles only make sense in specific required contexts. If these roles are used outside of the context they are intended for, the intended accessibility function will not work as expected. This can create complications for users of assistive technologies that rely on ARIA roles to convey content and functionality.

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 drop-downs 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’m 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 provides some examples of the issue.

### Example: A `listitem` is child of list

*   These elements, which have the explicit role of 'listitem,' are children in the accessibility tree of an element with the required context role of 'list,' also expressed as an explicit role. This is correct because a 'listitem' must be a child of a 'list.’
    
        <div role="list">
        <div role="listitem">List item 1</div>
        <div role="listitem">List item 2</div>
    
    *   In this case, screen readers can correctly present this as a list.

### Example: A `listitem` is not a child of a `list`

*   These`listitem` elements are not placed correctly in the accessibility tree. They should be children of an element with the required role of `list`, and not located inside of a navigation landmark. Any `listitem` must be a child of a `list`.
    
        <nav> <div role="listitem">List item 1</div> <div role="listitem">List item 2</div> </nav>
    
    *   In this case, screen readers cannot correctly present this as a 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 in which ARIA roles are used outside of their required context.

### How to fix it

To fix this error, follow these steps to adjust the HTML code:

1.  Look up the ARIA role that causes the issue in the [WAI ARIA standard](https://www.w3.org/TR/wai-aria/).
2.  Under the relevant role, locate the section _Required Context Role_.
3.  Adjust your code accordingly.

Visit the _ACT rules_ section below for 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 context role](https://www.w3.org/WAI/standards-guidelines/act/rules/ff89c9/proposed/)

### Other resources

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