What are parent/child elements, and how do they affect digital accessibility?

In HTML, parent and child refers to how elements are contained or nested.

The outer element is called the parent element, and the immediate inner element is called the child element. A parent element can have multiple child elements.

For example, the following list code has a parent element and two child elements:

<ul>
<li>Sample text 1</li>
<li>Sample text 2</li>
</ul>

The opening and closing tags of the list element (<ul> and </ul>) directly contain the two list item elements (<li>). This creates the relationship of a parent element (the list) that contains two child elements (the list items).

A similar term we use in coding is ancestor/descendant, which more broadly describes elements contained anywhere within the container, not just elements that are direct children. All children are descendants of their parent element, but not all descendants are direct children.

The following example demonstrates this ancestor/descendant concept:

<ul>
<li>Sample text 1 <button>Sample button</button></li>
</ul>

In this example, the list (<ul>) contains a direct child list item (<li>), and the list item then contains a direct child of its own: a button (<button>). Both the list item (<li>) and button element (<button>) are descendants of the ancestor list (<ul>), but only the list item is its child. The button is not a child of the overall list, since there is another container between them.

Parent/Child elements and accessibility

Correct parent/child relationships in the code are essential to comprehensive digital accessibility. Certain elements or custom element roles must always come in a set parent/child pattern. These patterns communicate function and organization to users of assistive technology.

The native HTML list examples that we've been using are also an example of a pattern that requires specific parent/child relationships. List elements must have list items as direct children, and they must only have list items as direct children. When this pattern is not followed, the list will not work correctly.

Although lists must only have list items as direct children, a wide variety of elements can be contained in the list items as descendants. This means that lists are still flexible, and they can contain all sorts of content and components as long as the code follows the right parent/child pattern.

Parent/child nesting issues can often be caught most efficiently with automated scanning tools. Then, you can evaluate the flagged issues to identify the best fix.

On your own site, check for incorrect parent/child relationships and other accessibility issues using our Free Website Accessibility Checker.