summary-name-present

summary要素にアクセシブルな名前があります

automaticWCAG 4.1.2 (A)確度：high重大度：seriousrobust

<summary>要素が空でないアクセシブルな名前を公開していることを確認します。

適用範囲：アクセシビリティツリーに含まれ、親の<details>のサマリーボタンとして機能する<summary>要素、つまり<details>の最初の子要素である<summary>に適用されます。それ以外の<summary>（<details>の外にあるもの、より深く入れ子になっているもの、2つ目以降のもの）はそもそもコントロールではなく、フォーカスを受け取らず、何も開閉しないため、名前を付ける対象がありません（ACT 2t702hと同じ）。

期待される結果：要素が、aria-label、空でないテキストに解決されるaria-labelledby、title、または自身のサブツリーのテキストから、空でないアクセシブルな名前を得ています。その際、子孫要素自身の名前（<img alt>、aria-label、title）は、その子孫要素が寄与する名前として数えます。

例

pass

<details>
  <summary>More details</summary>
  <p>Body</p>
</details>

表示されているテキスト内容が<summary>に名前を付けています。

fail

<details>
  <summary></summary>
  <p>Body</p>
</details>

テキスト内容もアクセシブルな名前もありません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

`name_closedContent`

レポートに示されたsummary要素を見つけ、画面に表示されているテキストまたはアイコンを控えてください。
ブラウザーの開発者ツールでアクセシビリティペインを開き、スクリプトからは読めない内容からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合：アクセシビリティツリーに、内容から得たsummary要素の名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合：内容から名前が得られず、summary要素にはアクセシビリティツリー上の名前がないため、WCAG 4.1.2を満たしません。

`name_contentTooDeep`

レポートに示されたsummary要素を見つけ、画面に表示されているテキストを控えてください。
ブラウザーの開発者ツールでアクセシビリティペインを開き、入れ子になった内容全体からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合：アクセシビリティツリーに、入れ子の内容から得たsummary要素の名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合：内容から名前が得られず、summary要素にはアクセシビリティツリー上の名前がないため、WCAG 4.1.2を満たしません。

ソースコードを見る