Are hierarchical relationships coded correctly? – accessibility @ perpendicular angel design

On this page

Goal

Ensure that the technology that reads our web markup can parse hierarchical relationships correctly.

Why this matters

Some HTML elements require hierarchical relationships. <li> tags must be nested in <ol> or <ul> tags, for example. If these relationships are not correctly coded, then the browser may be able to “guess” at the proper visual display, but assistive technology is more likely to balk or break.

Some ARIA roles also require hierarchical relationships. The role=”tab” attribute (often attached to unordered list items, because that’s a popular way to build tabs) must be nested in an element with a role=”tablist” attribute, otherwise it’s invalid as well.

How to implement

HTML elements that require specific hierarchical relationships include:

<dl>: The Description List element and the <dt> description term and <dd> description definition inner elements.
<figure>: The Figure with Optional Caption element, specifically that a <figcaption> cannot exist unless it is nested in a <figure> element.
<ol>: The Ordered List element and the <li> element it contains.
<ul>: The Unordered List element and the <li> element it contains.

ARIA roles that require specific hierarchical relationships include:

ARIA: grid role and the element(s) with the row or rowgroup role it contains.
ARIA: table role and the element(s) with the row or rowgroup role it contains. (Reminder: tables should be built with <table> elements.)
ARIA: row role and the element(s) with the cell role, columnheader role, rowheader role or gridcell role it contains. (Reminder: tables should be built with <table> elements.)
ARIA: List role and the element(s) with the listitem role it contains. (Reminder: lists should be built with <ol> or <ul> elements.)
Tablist role and the element(s)with the ARIA: tab role it contains.

How to test

HTML validators should identify any of the HTML hierarchies that are invalid.

Until I identify a validator that definitely catches the ARIA relationships, you can manually check these by identifying places on the page where ARIA roles are being used, then confirming by inspecting the page that the correct hierarchies are being used.