How do I style the accordion to have a space between each accordion panel?

[benedikt-buchert]

I want space each accordion panel.
For that I would need to wrap each <d> and <dt> inside a div.
Had a little read on the possible accessibility problems that this might cause: https://cdpn.io/stevef/debug/GxwaoP And it looks like this is fine.

What do you think?

Some further info:
https://www.sarasoueidan.com/blog/accordion-markup/ https://www.scottohara.me/blog/2017/10/25/accordion-release.html
https://inclusive-components.design/tabbed-interfaces/

[rajasegar]

@benedikt-buchert Sounds fine to me.

[benedikt-buchert]

#4
Something like this.

[rajasegar]

@benedikt-buchert The current markup with dt and dl looks outdated and having some issues with screen readers I guess. The new markup seems to be having buttons and divs. Will update the markup and give provisions for spacing. Is it ok?
https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html

[benedikt-buchert]

Sounds good the article linked above by Sāra Soueidān gives some great options: https://www.sarasoueidan.com/blog/accordion-markup/
Also, this is quite helpful:
https://inclusive-components.design/tabbed-interfaces/