list-children-valid

リストの直接の子はリスト項目だけである必要があります

automaticWCAG 1.3.1 (A)確度:high重大度:seriousperceivable

<ul>/<ol>要素の直接の子が<li>、<script>、<template>だけであることを確認します。

適用範囲:直接の子要素、または直下にある空白以外のテキストを少なくとも1つ持ち、ロールがlistである<ul>/<ol>要素に適用されます。つまり、role属性がない、role属性がlistに解決される(既知のロールを指す最初のトークンで、大文字と小文字は区別しません)、または既知のARIAロールを示さないrole属性の場合です。別のロール(listbox、menubar、tablist、none、...)を与えられた<ul>/<ol>はリストではないため、その子要素はそのロールの規則に従います。

期待される結果:直接の子要素はすべて<li>、<script>、<template>のいずれかです。ただし、明示的なロール(role属性のうち既知のロールを指す最初のトークンで、大文字と小文字を区別せずに照合)を持つ子要素は例外で、その場合はタグよりも明示的なロールが完全に優先されます。子要素が有効なのは、そのロールが「listitem」である場合に限ります(そのため<li role="presentation">/<li role="menuitem">は<li>タグであっても無効で、逆にrole="listitem"やrole="foo LISTITEM"が明示された<li>以外の要素は有効です)。既知のロールを示さないrole属性の場合は、タグで決まります。スタイル付けのためのラッパー<div>(ロールなし)は、これまでどおりリストのセマンティクスを壊します。リストの直下にある空白以外のテキストも無効な子です。HTMLがそこに認めているのは<li>とスクリプトサポート要素だけで、そのテキストはどのリスト項目にも属さないためです。

検出結果が報告する内容:

  • reasonCode:リストに属さない子がすべて、明示的なロールでlistitemを置き換えた<li>(<li role="presentation">、role="none"、role="group"など)である場合はLIST_ITEM_ROLE_OVERRIDDEN、それ以外の子(<li>でない要素、またはテキスト)がある場合はLIST_INVALID_CHILDです。両方を含むリストはLIST_INVALID_CHILDです。
  • element:リストのタグ名で、ulまたはolです。
  • invalidChildren:リストに属さない子で、子ごとに1つのタグ名です(直下に置かれたテキストは#text)。
  • overriddenRoles:LIST_ITEM_ROLE_OVERRIDDENの場合、そうした<li>それぞれのロールを順に並べたものです。
  • elementは、data.detailsのほかのフィールドと異なり、安定した契約です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

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

<ul>の直接の子は<li>だけです。

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

<div>が、<ul>の直接の子として<li>と並んで置かれています。

ソースコードを見る