Das i-Tüpfelchen der Barrierefreiheit 
veröffentlicht in 2010
zuletzt bearbeitet in
Verschachtelung von Elementen gemäß Spezifikation
Die falsche Verschachtelung von Elementen ist immer wieder für die Barrierefreiheit relevant. Ein li-Element darf beispielsweise nicht innerhalb eines Elements, das kein ul- oder ol- oder menu-Element ist, vorkommen. Genauer gesagt, das Elternelement muss die Rolle "list" haben" und nicht wie im folgenden Beispiel die Rolle einer Seitenregion:
<!-- nicht nachahmen -->
<ul role="navigation">
<li>…</li>
<li>…</li>
…
</ul>
Bei diesem Schnipsel handelt es sich semantisch nicht um eine Liste (auch wenn das ul-Element vorhanden ist und beispielsweise für CSS und JavaScript verfügbar ist). Das Elternelement der li-Elemente ist ein Element mit der Rolle "navigation" und nicht ein Element mit der Rolle "list". Die Seitenregion enthält auch keine Listeneinträge, weil Listeneinträge nur als Kindelemente für die Elemente mit der Rolle "list" (ul-, ol- und menu-Elemente) definiert sind.
Diese Art Probleme werden von Erfolgskriterium 1.3.1 der Web Content Accessibility Guidelines (WCAG) 2.2 abgedeckt. Struktur und Beziehung der Inhalte werden im HTML fehlerhaft abgebildet.
Beispiele für nicht zulässige Verschachtelungen gibt es viele, z.B.:
Mehr als ein Formularelement in einem
label-Element:<!--nicht nachahmen -->
<p><label>Vorname <input …>
Nachname <input …></label></p>Beide Formularelemente werden den Namen "Vorname Nachname" erhalten.
Verschachtelung von Rollen aktiver Elemente:
<!-- nicht nachahmen -->
<p><button><span tabindex="0" role="link">Bin ich ein Button oder ein Link?</span></button></p>Das, was für HTML-Elemente gilt, gilt auch für die Zuweisung von den zugrunde gelegten Rollen. Der erlaubte und der nicht erlaubte Einsatz von ARIA wird im Modul ARIA in HTML des HTML-Standards beschrieben.