Design comparison
Solution retrospective
The resolution of this exercise frustrated me a bit (mainly because of the desktop version and the lengthening behavior when answers are opened) I thought the best practice was to let a container mold to its content and grow with it, but this exercise makes me think that sometimes it's necessary to set the size of the container.
Even so, I find the change of colors that I implement very beautiful
Aspects to improve
- Size of the container uniform and independent of the open answers
- Restrict the number of open answrs simultaneously to 1
Community feedback
- @Gabrielbsb21Posted almost 2 years ago
Man, the project is very good, but I have some considerations:
1 - in the div faq you can put a maximum width, so when the user opens the accordion the width of the container will not increase;
2 - we can improve accessibility of component accordion
2.1 - using a button tag. ex: <button>How many team members can I invite?</button>
2.2 - why use the button tag? for users who use screen readers, this helps a lot, as the screen reader will notify the user that that button has some interaction. in addition, the component is interactive via keyboard
- 3 - we can also use wai-aria to make the accordion more accessible (https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
2.4 - we can use aria-expanded to inform the user if the accordion is open or closed
2.5 - in the div that has the attribution class you can use a footer tag to make the html more semantic.
0
Please log in to post a comment
Log in with GitHub
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