Awesome Accordions website

Resources

3Sources :

 

https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/

When to use tabs and when to use accordion (best cases)

 

Usability
https://www.nngroup.com/articles/accordions-complex-content/
http://ui-patterns.com/patterns/ProgressiveDisclosure
http://heydonworks.com/practical_aria_examples/#progressive-collapsibles
https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
https://www.w3.org/TR/wai-aria-1.1/#aria-level
https://www.w3.org/TR/wai-aria-practices/#accordion
https://www.hassellinclusion.com/blog/accessible-accordion-pattern/
https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/
https://github.com/scottaohara/a11y_accordions
https://scottaohara.github.io/a11y_accordions/
https://a11y.nicolas-hoffmann.net/accordion/
https://van11y.net/accessible-accordion/
https://webaim.org/techniques/keyboard/tabindex

Also for responsive the best way to use

https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/

https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css–cms-31966

 

Reponsive tabs to accordions example : 

https://codepen.io/kazmeyer/pen/lzqhf

Accessibility and accordions

https://www.nngroup.com/articles/mobile-accordions/

http://web-accessibility.carnegiemuseums.org/code/accordions/

https://www.scottohara.me/blog/2017/10/25/accordion-release.html

https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/http://heydonworks.com/practical_aria_examples/#progressive-collapsibleshttp://www.cssmojo.com/tab-panel-the-right-way/https://codepen.io/pankajparashar/full/oJEAF/https://www.viget.com/articles/testing-accordion-menu-designs-iconography/https://www.nngroup.com/articles/accordions-complex-content/

https://www.accessibility-developer-guide.com/examples/widgets/accordion/

https://www.mtu.edu/accessibility/training/web/accordions/

https://www.w3.org/TR/wai-aria-practices/#accordion

toggle button

https://inclusive-components.design/toggle-button/