detailsとsummaryを使ったアコーディオンについて

以前にdetailsタグとsummaryタグを使用する記事を投稿しましたが、今回はdetailsとsummaryを使ってアコーディオンを実装した場合のメリットについて考えてみます。

サンプルコード

detailsとsummaryを使ったアコーディオンを実装してみます。

<details class="accordion" open>
  <summary class="accordion-header">リゼ・ヘルエスタ</summary>
  <div class="accordion-panel">
    <p>ヘルエスタ王国の第二皇女。<br>
      文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。<br>
      王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。</p>
    <p>ファンアート：<a href="https://twitter.com/hashtag/%E3%83%98%E3%83%AB%E7%B5%B5%E3%82%B9%E3%82%BF">#ヘル絵スタ</a></p>
  </div>
</details>
～ 略 ～

detailsとsummaryを使ったアコーディオンのデモページ

まずアクセシビリティの点ですが、以前に投稿したアコーディオン実装時のアクセシビリティの記事を踏まえて考えてみます。
キーボード操作に関してはTabキーでアコーディオンのスイッチにフォーカスができ、EnterキーやSpaceキーでアコーディオンの開閉が行える状態なので問題なさそうです。

次にスクリーンリーダーでの読み上げですが、以前の記事でのWAI-ARIA対応の時と同じようにPC-Talkerで確認したところ、アコーディオンを開いた際は「マイナス 展開」、閉じた際は「プラス 折りたたみ」のように展開状態を伝えるようになっていました。
ただし、フォーカスを当てた時点では「リゼ・ヘルエスタの 確認」のように展開状態は含まれないようです。

あとdetailsとsummaryを使ったアコーディオンの特長として、ページ内検索をした際、通常のアコーディオン(disolay:none で非表示)だと検索に引っ掛かりませんが、detailsとsummaryを使った場合は検索に引っ掛かるようになります。
例えば上記デモで「喫茶」を検索すると、検索文字列を含んでいる「戌亥とこ」のアコーディオンが開かれます。