Vanza Setia• 27,795
@vanzasetia
Posted
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
widthandheightfrom the<body>.width: 100%is already the default styling. Setmin-heightinstead ofheight. - Don't change the
<html>or the:rootfont 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
hiddenattribute to hide the content of the collapsed accordion panel.
I hope this helps.
0
