@ApplePieGiraffe
Posted
Hey there, brenda127s! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on this project! 👏
I'd like to suggest using the <details> and <summary> elements for the accordions in this component. Currently, you are using <div>s for those elements, which aren't accessible because they aren't keyboard-focusable or recognized as interactive elements by browsers and screen readers. There are also some issues like some of the answer content getting cut off towards the bottom of the accordions on smaller screens. Using the <details> and <summary> elements will help solve these issues. If you're interested, you can learn more about them here from MDN.
As for dealing with the icons, if you go with using the <details> and <summary> elements you can check for the open attribute on the <details> element and show/hide the icons based on the state of that attribute.
Also, don't forget to add some alt text to the <img> elements on your page (but leave the alt text empty if those images are just for decoration and don't need to be noticed by screen readers) and to give the <img> elements unique IDs. 😉
Hope you find these suggestions helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
