list-children-valid

Listen dürfen direkt nur Listeneinträge enthalten

automaticWCAG 1.3.1 (A)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass <ul>/<ol>-Elemente als direkte Kinder nur <li>, <script> oder <template> haben.

Anwendbarkeit. Gilt für <ul>/<ol>-Elemente, die mindestens ein direktes Kindelement oder direkt in ihnen stehenden Text haben, der nicht nur aus Leerraum besteht, und deren Rolle list ist: kein role-Attribut, ein role-Attribut, das zu list aufgelöst wird (sein erstes Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung), oder eines, das keine bekannte ARIA-Rolle nennt. Ein <ul>/<ol> mit einer anderen Rolle (listbox, menubar, tablist, none, ...) ist keine Liste; seine Kinder folgen dann den Regeln dieser Rolle.

Erwartung. Jedes direkte Kindelement ist <li>, <script> oder <template>. AUSSER es hat eine explizite Rolle (das erste Token seines role-Attributs, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen); dann hat die explizite Rolle vollständig Vorrang vor dem Tag: Ein Kind ist genau dann gültig, wenn diese Rolle "listitem" ist (<li role="presentation">/<li role="menuitem"> sind also trotz <li>-Tag ungültig, und umgekehrt ist ein Nicht-<li>-Element mit explizitem role="listitem" oder role="foo LISTITEM" gültig). Ein role-Attribut, das keine bekannte Rolle nennt, überlässt die Entscheidung dem Tag. Ein Wrapper-<div> für das Styling (ganz ohne Rolle) bricht die Listensemantik weiterhin genauso wie zuvor. Text, der direkt in der Liste steht und nicht nur aus Leerraum besteht, ist ebenfalls ein ungültiges Kind: HTML erlaubt dort nur <li> und skriptunterstützende Elemente, und der Text gehört zu keinem Listeneintrag.

Was ein Befund meldet.

reasonCode: LIST_ITEM_ROLE_OVERRIDDEN, wenn jedes Kind, das nicht dazugehört, ein <li> ist, dessen explizite Rolle listitem ersetzt (<li role="presentation">, role="none", role="group"...), und LIST_INVALID_CHILD für jedes andere Kind: ein Element, das kein <li> ist, oder Text. Eine Liste mit beidem ist LIST_INVALID_CHILD.
element: der Tag-Name der Liste, ul oder ol.
invalidChildren: die Kinder, die nicht in die Liste gehören, ein Tag-Name pro Kind (#text für direkt darin stehenden Text).
overriddenRoles: bei LIST_ITEM_ROLE_OVERRIDDEN die Rolle jedes solchen <li>, in Reihenfolge.
element ist anders als der Rest von data.details ein stabiler Vertrag.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Die einzigen direkten Kinder von <ul> sind <li>.

fail

<ul>
  <li>Elderberry</li>
  <div>wrapper</div>
</ul>

Ein <div> ist neben den <li> ein direktes Kind von <ul>.

Quellcode ansehen