[hisanobu]

お世話になります。

details / summaryタグを使ったシンプルなブロックを希望します。

理由としては、アクセシビリティに優れており

• スクリーンリーダーの読み上げに対応
• 文字検索の時に自動で展開
• キーボードナビゲーション対応

など、WAI-ARIAを利用しなくても、必要な機能や意味付けが備わっている点です。

 

CSSは特に不要（必要最低限）で、おおよそ以下のような構造だとありがたいです。

<div class=”wrapper”>

<details class=”details”>
<summary class=”summary”>タイトル</summary>
<div class=”details-content”>
<div class=”details-content-inner”>
コンテンツ
</div>
</div>
</details>

<details class=”details”>
…
</details>
</div>

※content-innerがあるのは、アニメーションやCSSを当てやすくしているため。

現状類似でアコーディオンブロックがすでにあると思いますが、ご検討頂ければ幸いです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

WordPress 6.3 でも details / summary なブロックが追加されますし、アコーディオンもあるので、ほぼ同じようなブロックを追加するのはどうかなという感じはします。アコーディオンではなく新しいものが必要というのはどのような理由からでしょうか？理由によってはアコーディオンの機能追加等でも対応できるのではないかなぁと。

♥ 0

いいねをした人: 居ません

[hisanobu]

主な理由としては、タグがセマンティック要素になっているということや、前述のアクセシビリティ面が強いため積極的に使いたいということでした。

確かにアコーディオンと同じような機能のブロックになりますし、どうしても必要であればカスタムHTMLで対応するようにいたします。

ご検討ありがとうございました。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿