Skip to content
Submitted 6 months ago

Faq page

accessibility
Heba Ahmad Saleh•250
@hebaahmedsaleh
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

..

What challenges did you encounter, and how did you overcome them?

..

What specific areas of your project would you like help with?

..

Code

Please log in to post a comment

Log in

Community feedback

  • Jye Harry•230
    @jyeharry

    Firstly, the <summary> is hoverable indicating that it should probably be clickable but it's not. Only the plus/minus icon is clickable so it should be the whole summary.

    I also couldn't trigger the open/close of the accordions using my keyboard only. To make your solution more accessible, address these two issues.

    Next major thing is that you've created a custom accordion component which uses JS. But HTML actually now has a native element designed exactly for accordions called <details>. I would suggest refactoring to use this element.

    Few minor things:

    The background image could probably just be done in CSS rather than as an HTML element on the page.

    Personally I wouldn't use the <h4> and <h6> the way you have, especially the <h6>. It's not a heading so this could be confusing to people with screen readers.

    Also looks like some styles have been copied over from the interactive-rating-component challenge, so it would be good if they were cleaned out of the codebase.

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