Submitted over 1 year ago

FAQ ACCORDION CARD

Didia Uchenna•400

@D-KILLJOY

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted over 1 year ago
Hi, Didia Uchenna!

I saw your tweet, you are asking for suggestions to improve your solution.

I recommend you also ask for suggestions here. This way, you have more likely to receive some suggestions.

Here are some suggestions:

I recommend using the native HTML elements for the accordions—<summary> and <details> tags. Right now, the accordions are not accessible to the keyboard.

Remove width and height from the <body>. width: 100% is already the default styling. Set min-height instead of height.

Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

Grace Snow explains the issue clearly — Should I change the default HTML font-size to 62.5%?

Joshua Comeau also does not recommend that approach — The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

I recommend using the hidden attribute to hide the content of the collapsed accordion panel.

I hope this helps.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord